I’ve Been Designing Websites All Wrong

How Kevin Powell’s mobile-first mindset is changing my approach to web dev

Intro

Hello world! Welcome to another blog post for Anthony’s Techie Thoughts! If you’re new here, my name is Anthony and I’m studying programming to make a career change from mathematics teacher to frontend web developer. In my blog posts I reflect on my journey and share things I’m learning along the way. You can find me on GitHub, LinkedIn, Hashnode, DEV.to, and CodeNewbie.

This week I continued to review the fundamentals of JavaScript via Sololearn and Scrimba, but my biggest triumph was starting Kevin Powell’s course “Conquering Responsive Layouts". In this blog post I share my initial thoughts on his course and how his mobile-first mindset to web development is changing my approach to creating websites.

Weekly Reflection

On Tuesday of this week I completed the Frontend Mentor challenge “Product Preview Card”. While I’m happy I was able to complete the challenge and meet the project specifications, I definitely took the “long way” to get there. And based on the (amazing) feedback I got from users on Frontend Mentor there’s definitely a lot of room for improvement. In particular, my approach to the challenge used a lot of extra (and unnecessary) code to get the project to meet the specifications.

At first, all of the feedback was initially overwhelming but once I sorted through it I found the most useful suggestion to be exploring Kevin Powell’s YouTube Channel. Kevin is CSS guru and takes a mobile-first mindset to his web development. My exploration of some of the videos on his channel led me to his (free) 21-day course “Conquering Responsive Layouts”.

In the course he teaches you how to use his mobile-first mindset by leveraging HTML and CSS to your advantage without having to add countless media queries. So far I’m really enjoying his course. The first few videos have been an eye opener on responsive web design and I’m starting to see the advantages of the mobile-first design mindset he espouses.

Kevin argues (and I agree) that instead of starting with the desktop version of the site it’s better to start with the mobile version first and use CSS to your advantage when you want to make it responsive. I’m surprised (and happy) to learn things like removing the height property and using units like em and rem make this really easy to do.

This works because HTML is already responsive by default and we (developers) can often easily mess it up by adding in extra and unnecessary CSS properties to make it “mobile-friendly”. It’s better to start with the mobile design first then build outward to the desktop version of the site. As opposed to layering on media query after media query to making your site mobile friendly for all the various mobile devices out there.

I’m eager to learn more, but I also like his “drip” style of pacing for this course. He has designed the course so that you only have access to the lessons on a specified date. That is, you can only access Day 2 Lessons on Day 2, not before. This is different from the typical “binge” approach that other courses (and tutorials) usually take — which some students might prefer — but having a day (or two) between lessons is definitely beneficial for processing the information. It’s important to absorb the information and give yourself time to process it.

I still have 19 more days of the course to complete before I finish, but I already have some ideas for how I could improve my solution to the Frontend Mentor challenge “Product Preview Card”. I’m eager to implement these ideas but mindful that I need to wait until I’ve had some time to fully “digest” the ideas from the course.

Looking ahead to next week, I plan to continue my studies and following my even/odd day approach (even days for HTML/CSS and odd days for JS). Like Kevin’s course, I find having some time between concepts helps me think about them more deeply.

Projects from the Week

• Scrimba Solo Projects
  • Personal website: https://startling-starlight-cc84f0.netlify.app/
  • Basketball Scoreboard: https://github.com/ananfito/basketball-scoreboard
• Frontend Mentor Challenges
  • Product Preview Card: https://github.com/ananfito/product-preview-card

Thanks for reading

Thanks so much for reading this post. If you found it helpful or have a suggestion for something I can improve upon, please let me know in the comments below. Hearing your thoughts makes this more of a conversation and helps everyone learn.