Learning Web Development is Like Learning How to Paint
If you were an absolute beginner, how would you feel if your first painting looked like the one on the left?
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 web development and responsive design
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. This process has a high likelihood of motivating a beginner to learn web development from scratch.
“Motivation is the fuel, necessary to keep the human engine running.” – Zig Ziglar
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 how we build websites. 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 the CSS properties. 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.
Quickly an absolute beginner will have something useable, looks pretty good, and can be shared with others.
This encouragement will create hope that beginner needs to keep learning.
I believe web development beginners should learn in the following order:
- Learn the history of the web and how mobile changed the way sites are built and read
- Learn how frameworks like Bootstrap help make responsive design easier
- Then build something usable and shareable fast by using Bootstrap code snippets
- Learn how to 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
Want to learn how to build responsive layouts with Bootstrap 4?
I followed my own advice and created the Bootstrap 4 Quick Start book to help beginners learn web development step by step. It also has related training like Chrome DevTools and a closed Facebook community to get help.