(I just got notified that I've written this a while back. It's aimed at beginners wanting to practice HTML and CSS, I still stand by it)
First: Pen and Paper!
Create a site with pen an paper. An idea would be a site that displays your favorite books - with pen and paper draw boxes representing book covers, thick lines where the title goes, thinner lines for the author.
Then start translating that drawing in HTML.
Stop!
You have created a drawing, now you, and you alone, need to choose where to use the HTML tags. What's the best tag for the title what its the best tag for the author, looking at your paper design would the two benefit by being grouped together. Do you group them with a div, a header, a hgroup, or do you use just one element and distinguish the two with a span.
Do you need an id, a class or an id and few classes.
Now into css. Your drawing might be simple and you might get the style perfectly in one go.
Stop!
Why is it that I am using the same styles on different elements, can I make this css less repetitive? I need to add few more classes,
Step two
Shrink the size of your browser, now your design is broke. Get back to a fresh pen and paper think about how to re-organize the same elements to fit the space.
Now get back to css. Learn about the best way. If media queries are hard for you. Copy the project, and start from the beginning and design the site for that screen size now. This is not good practice, a site should be responsive, but you are practicing, you tried designing for big screen, now you are trying to design for small screen.
(Of topic: learn the very basics of git, even you, learning the very basics would extremely benefit from the basics of git. In broad strokes, it's like a CCTV for your code. You can go back in time to the moment your code was working.)
Step three
By this point you have two different sites, one that looks good in small screen and one that looks good in big screen. Now, Create a third version with media queries!
With your first and second step you are fully aware of the problems you faced when designing for the small and big screens. Now you know how your HTML needs to be structured to accommodate the transition. You know that you might need more classes, maybe one or two more divs here and there.
Back to the top
You don't have to use photoshop, you don't have to create a great design. You just have to fill an A4 page with some elements (if a book site: book covers, and book info). For now the CSS would be enough if you only use it to lay those elements in the same way you did in the A4.
Similar with your smaller site: take the A4 cut out a perfect square. Through the square away and design the site (exactly the same one you did in the A4 design) on the remaining slice of the A4 you cut.
Designing these two sites, and then merging them together (the definition of responsive design) is going to be better than any artistic design you could possibly do or clone.
If you need to, write whilst you work. I do this when ever I learn something complicated. I create a markdown file (if you don't know what that is: a text file) and write down what I am doing, what I should think about, I record what I should remember for future projects.
After doing this. You might have noticed that you need more practice in the same process. You might have had an idea for another design, just go for it. Get fresh paper and scribble the hell out of it.
There are screenshots of beautiful websites all over the web. Pinterest has plenty of them. Pick one that you like. Or pick things you like from every design you see and collage your own (still pen and paper can take you a long way). And then start re-creating the new site in html and css.
There is a tool called Frank DeLoupe it is a color picker, you pick any color from any thing and the color get's copied into clipboard - look out for something like that in you operating system. Browsers might have something like that also, but with frank, you can pick colors from anywhere, not just the web
Top comments (0)