I made this template! You can download it from my website: http://www.logi.x10.mx/store/templates/Lojatical
My Second HTML Template Made
- Thread starter logix10m
- Start date
min_d_jee75
Member
- Messages
- 52
- Reaction score
- 0
- Points
- 6
good for your first time!
- Messages
- 764
- Reaction score
- 27
- Points
- 0
Nice first attempt and looking forward to the next ones. Do not worry about about what people say for now, just have fun and experiment with what you can make the code do. A good starting point is a visit to DynamicDrive and their basic CSS layouts section. These simple frameworks are at the core of many professional designs and should help you greatly.
- Messages
- 3,295
- Reaction score
- 227
- Points
- 63
I have to agree with cybrax; this is a good start, and have fun playing with things.
There are a couple of things I noticed that you probably didn't because you weren't looking for them. When you put the design together, you probably had the logo image stretch to cover your screen's width. I'll admit, it's really hard to see things that won't fit on your screen. I'm looking at the design using a 1920x1080px monitor, and the logo just... well... ends about 70% of the way across the screen. There are a couple of ways to fix that. One way is to use a wider image, but that means a bigger image download. The other is to wrap the logo in an element that can have its background set so you don't need to worry about the image width. I see that you are using HTML 5 (good!!!!!!), so if you were to put the logo image inside a <header></header> tag set, it would be easier for people to throw in their own image and set a background-color to match.
And since you are using HTML 5, there are a lot of really neat things you can do with CSS as well. I'm not talking about transitions and all of that gee-whiz flashy stuff; that can wait. I mean that you can use better units and measures. There's a really good article about the boring parts of CSS over at A List Apart (one of the best web resources ever). Things like the rem (root em, the size determined by the font you set in the html or body selector) unit, the viewport width and height units, and adding box-sizing: border-box; to your CSS reset can make your life a whole lot easier. (By the way, Paul Irish, whose site I've linked to here, is also a great source of tips, info and best practices. So is Smashing Magazine.)
There are a couple of things I noticed that you probably didn't because you weren't looking for them. When you put the design together, you probably had the logo image stretch to cover your screen's width. I'll admit, it's really hard to see things that won't fit on your screen. I'm looking at the design using a 1920x1080px monitor, and the logo just... well... ends about 70% of the way across the screen. There are a couple of ways to fix that. One way is to use a wider image, but that means a bigger image download. The other is to wrap the logo in an element that can have its background set so you don't need to worry about the image width. I see that you are using HTML 5 (good!!!!!!), so if you were to put the logo image inside a <header></header> tag set, it would be easier for people to throw in their own image and set a background-color to match.
And since you are using HTML 5, there are a lot of really neat things you can do with CSS as well. I'm not talking about transitions and all of that gee-whiz flashy stuff; that can wait. I mean that you can use better units and measures. There's a really good article about the boring parts of CSS over at A List Apart (one of the best web resources ever). Things like the rem (root em, the size determined by the font you set in the html or body selector) unit, the viewport width and height units, and adding box-sizing: border-box; to your CSS reset can make your life a whole lot easier. (By the way, Paul Irish, whose site I've linked to here, is also a great source of tips, info and best practices. So is Smashing Magazine.)