Here’s the videos:
Video 1 – HTML https://youtu.be/gIzRM6P4n0w
Videos 2 to 7 – CSS https://youtu.be/1OL0f01HR7c
Video 3 https://youtu.be/HJQOQhUWUTA
Video 4 https://youtu.be/5aEQPoGqp1g
Video 5 https://youtu.be/4pO82DsHsHc
Video 7 https://youtu.be/dZTTaUZ4dUQ
Link to the full playlist https://youtube.com/playlist?list=PLMPdeA59PPg2sLFYU3f-vITZgOWVSCZ6e
I wanted to do this for a long time to help other developers learn how to make a mobile first and responsive website from scratch in just html and css.
I go over how to structure your html to make the easiest transition from mobile to desktop, how to plan it, and also how to take a desktop design and transfer that to mobile. You’re going to need to remove some things, change some things up, or rearrange a lot of things and I go through the decision making processes to help you determine how to do it for your builds.
This is not a perfect video series. I make some mistakes, I change some things halfway through, get stuck on some things, or I don’t like how something looks and I change it. But I left everything in there and talked through them so you can see how I think through them and solve them. Because much of your job as a developer will be problem solving and how to work around certain roadblocks. So hopefully watching me go through them will help others Create their own thinking processes and how to tackle a situation, find the problem, and how to fix it. I literally recorded everything from the moment I started till I finished. So it’s a long sit through, but for anyone wanting to learn HOW to be a web developer, I think this is a great way to “job shadow” without having to actually be behind someone. I didn’t plan any of this video out at all or practice the design beforehand. I have my design and I just start going at it.
I’ll be making more of these for new sites I am building, I just want everyone to be able to make beautiful sites and make them mobile first and fully responsive. So I hope this is helpful watching me do it and explaining what I am doing and why every step of the way.