Compare learning HTML & CSS to learning how to paint a picture
If you were an absolute beginner, how would you feel if your first painting ever looked like the one below?
You would probably feel really proud and want to share it with someone. The person you share it with would say…
Wow! You painted that? Nice job.
Now you are hooked and want to have a repeat experience. Over time, you develop a passion to read books and take classes on how to paint without the paint by number template.
But wait, aren’t painting by numbers a bad idea? They are bad at teaching brush strokes or color theory but great in teaching someone how to paint a picture that is good enough to share.
Painting by numbers builds confidence and instills hope that they CAN become a painter.
Ok now, think about the common teaching method of jumping right to painting on a blank canvas
Since you are a beginner you will paint something that you are ultimately not proud of. You compare it to a friends painting or one you saw in a book. You realize you have a long way to go to become a good painter. So you crumple it or hide it in a sketchbook. You now lack any outside encouragement to push you to pursue your interest in painting.
How motivated do you think you would be to continue painting?
I think teaching with a step by step method helps to build confidence and teach the fundamentals of completing a painting.
Finishing and sharing a painting is way more important than learning about mixing paint colors or different types of brush strokes.
The same is true with learning HTML & CSS
Beginners should learn how to build a website as quick and painless as possible. So they can have something to share with others and say…
Look, I built this!
Once a beginner learns where to put the code in the document and less what element or CSS property to use, they can then use reference to learn as they go.
Learning tons of tags and writing Hello World! is nothing that would be cool enough to share with friends to build confidence.
How does HTML and CSS relate to responsive web design?
I think the current state of the web also demands a preface to responsive web design. Why is it used and how does it relate to HTML and CSS?
I think it is so important for a beginner to understand the history of the web. How far we have come and now how smartphones have changed the game. We now have to know a lot more than HTML & CSS. We have to understand how people will use and see our websites.
Responsive design also adds another layer of complexity that could overwhelm a beginner. I believe it is best to have a beginner build a responsive site without having to learn all of tips and techniques. I think leveraging a framework like Bootstrap is a perfect tool for this because it has excellent documentation and existing code recipes.
Copy and pasting code snippets into a page will quickly move a beginner to build a responsive website. Something that is useable, looks pretty good, and can be shared with others.
Summary
I believe beginners should learn the following in order:
- History of the web and how mobile changed the way sites are built and read
- How frameworks like Bootstrap help make responsive design easier
- Build something usable and shareable fast by using Bootstrap code snippets
- Identify things you want to know more about, want to change, or learn how it works (now learn the syntax, tags, properties as needed)
- Join a group or community where you can ask questions and learn from other beginners
- Seek out high quality reference cheat sheets, websites, and books
- Build, fail, learn, build, fail, learn, build, fail, learn
