Web Design Tutorial

Responsive Design with HTML5 and CSS3

My first mobile friendly website

What makes a good website? One where a student understands every single line of code; where they have checked and understood that every tag is closed, every quote mark is closed and every semi-colon is in its right place. It's no good getting too clever until I really understand what is going on. That is why I will keep this website simple at this point.

One column (with images right-aligned perhaps), is good enough to start with. To add interest I’ll add a page that links to some others, insert images and a 'back to top' in the footer. When I can do the basics, I’ll get into columns, asides, rounded corners, styled hyperlinks, embedded videos, animation and more. Can’t wait…

Don’t Panic !!

This template I’m using will help me make a website that will not only work on the desktop, but on a mobile device too. Learning how to make a website seem really hard at first, but over time I’ll will get used to indenting code, use the exact same character as shown in this template and always close tags. If something does not work first time, I’ll evaluate my own work by going back and checking I’ve closed every tag, every quote and every character.

I know I will make mistakes! Everyone does and so my teacher won’t expect me to be perfect. I’ll be brave - only trial and error will enable me to get better. If I just can't see why something is not working, a good idea can be to print out my code and go through it with a highlighter marking where each tag opens and closes. Another trap is to make sure I have checked the links to the styles sheets in the head tags have the correct code and file pathways.

If I’m really confused I won’t shout out but seek help from my neighbours and if they can’t figure out my problem then I’ll ask the teacher – but I’ll try for 3 minutes first.

Back to top