Responsive Web Design with 3 Lines of CSS

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 working my way through the curriculum on Scrimba.com, Sololearn.com, and Kevin Powell’s ‘Conquering Responsive Layouts’ course. In this blog post I’ll share the 3 lines of CSS I learned to keep page elements centered and responsive.

Weekly Reflection

My progress was slow and steady this week due to some extra responsibilities at work. I would have liked to had made more progress, especially with the ideas I’m learning in Kevin’s course, but sometimes life gets in the way and you just gotta roll with it. Throughout this week one idea from Kevin Powell’s course has stuck with me: using width, max-width, and margin to center elements on a page.

His approach is simple and uses a minimal amount of code. This is something I (as a novice) can appreciate because it lessens the burden of entry to building responsive websites. For example, the following is the minimal amount of CSS code needed to center a container on a page, ensure that it fills 80% of the body width, and sets a limit on how wide it will stretch (this is particularly helpful for really wide screens, the text when spread all the way across):

.container { 
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
 }

The max-width property will change depending on what is in the container and the design of the page — as could the width: 80% if you didn’t want it to fill 80% of the page’s width — but these are the core properties needed to center the .container on the page. As an example, this CodePen features my solution to a challenge from Kevin Powell’s course that makes use of this idea in practice. The goal is to create a responsive webpage that uses flexbox to create columns and rows of content while implementing these 3 lines of CSS to keep the elements centered and responsive.

Previously, I had been using any and all properties to get things to center on the page (e.g., height, width, display, etc.) — most of it unnecessary. With these three lines of code things are centered and responsive. Granted, this isn’t the end of the line but the start. There may be more styling properties required based on the design specifications of the page, but this comes later and in other places.

I’ve only completed up to Day 9 of his 21-day course, but ideas such as this one have already triggered thoughts like, “oh, that would’ve been helpful for project X, instead of using gliff, glaff, and gluff to do the same thing”. But this is the nature of learning. You crawl (and stumble) before you learn to walk and run. After I’m done with his course, I’d like to go back to previous Frontend Mentor projects and apply what I’ve learned (and, of course, carry these ideas into new projects).

Projects from the Week

• Scrimba Project
  • Basic Blackjack App
    • Repo: https://github.com/ananfito/basic-blackjack
    • Live: https://ananfito.github.io/basic-blackjack/

Thanks for reading

Thanks so much for reading this post. I hope you found it useful and inspiring. What’s a big idea you learned this week that’s stuck with you? Feel free to share your thoughts in the comments below. Hearing your thoughts makes this more of a conversation and helps everyone learn.