What practical CSS learning teaches
CSS Muscle Memory
- Experienced frontend developers will tell you that they can look at a UI and immediately tell you how they’d make approach creating it themselves - breaking down key areas of the design into bite-sized parts that they’d create before piecing them together in a desired layout
- Frontend devs with this muscle memory can hit the ground running when building a new layout
- For example, if I see a navbar I’m immediately thinking:
- I need a flex container
- The logo is an image that needs some room (to grow and shrink responsively)
- A wrapper is needed around our nav links
- Social links are icons from Font Awesome, we’ll wrap those up and then hide them when the screen gets to small
- etc.
When and what to apply
- Learning CSS concepts without applying them practically can make it difficult to know when to use them
- For example, we might learn that we can use fixed units in pixels (px) or a dynamic units like percentages (%)… but knowing when to reach for the right unit is best taught in-practice where you’ll see if a unit might help or hurt your layout’s responsivity, accessibility, etc.
Know when they’re in too deep
- You can achieve complex and dynamic layouts by nesting elements inside each other - a cornerstone of modern frontend development… but there is such as thing as going too far
- New frontend devs will often have too many nesting levels, over time they’ll realize that having too many “wrapper divs” can cause maintainability issues down the line (ie even small changes will have a bunch of inherited properties
- Common “too deep” issues include:
- Overuse of position: absolute
- Fighting the layout instead of restructuring (ie moving an element 3px left… then 3px right)
- Writing overly specific selectors whose properties could be re-used in other common UI elements
- Cross-browser issues (the more CSS clutter, the more likely something might look great on one browser but not another)
Favourite Examples
Navbar
- Often lots of elements that all need to move around in order to keep the design responsive
- Typically a mobile breakpoint where the majority of the navbar disappears inside a view/hide toggle (navicon)
- Intro to semantic HTML (ie nav element)
- Intro to accessibility (ie controlling the mobile toggle)
Hero Sections
- Hero sections are a great learning tool because they teach dynamic units (vh versus dvh for full height heros)
- Dealing with media (hero backgrounds are commonly large hi-def images or videos)
- Keeping backgrounds looking good as screen sizes change (using helpful properties such as multiple background properties, aspect ratio, etc.)
Blog/Content with Sidebar
- Gain experience working with content that is SEO heavy
- Learning to style common semantic HTML (ie heading levels, paragraphs, bullet lists, etc.)
- Here you’re learning to style stuff that someone may add in a CMS editor
- Juggling content that is meant to be side-by-side
- Achieving columns “main content” and “sidebar” via flexbox, grid, or other means
- Deciding when and how to stack sidebar content on top or below of main content depending on screen size
Forms
- Styling forms is a great way to learn best practices when laying out input boxes, dropdown lists, buttons and more
- It’ll also highlight the limitations when styling vanilla form fields (not all styles are available out of the box) and if you go full custom then you’ll be missing out on the already included accessibility that the browser provides those vanilla fields (you can re-implement manually)
- It also teaches styling similar UIs in different states (ie form submit success, form submit failed, etc.)
CSS Drawings
- Non-practical for production sites, but a practical learning approach for discovering niche CSS properties that can be applied to production sites (ie pseudo-classes, wildcard *, etc.)
- Take a simple picture idea (or a real picture of something) and then try and draw it using just HTML + CSS elements
- You’ll quickly learn things like :nth-child, child selectors, combo classes, etc.
A Practical Learning Framework
- Find a UI that you’re interested in
- Can be an existing site or a design that you found on something like Dribbble
- Can be a full layout, or just specific part that you’re interested in
- Try and re-create your selected UI
- Use your own knowledge
- If it’s a live site, use the browser dev tools to see how they achieved it AND how you might approach it differently than them
- Save your work for use later
- I like to save it in a directory for future reference if I have a similar layout task in the future
- [Bonus] Improve your past work
- Save your directory of work in a version control system like Git and then try and improve it by removing useless wrappers, getting the same results with less CSS, etc. By using version control you can see what you’ve changed and how far you’ve come
Can’t AI be the practical one here?
- You might think that AI can make your layout for you, but we’re already seeing people complain that AI designs are very samey and if you have a very specific design you might not be able to get a bot to create it for you without issues
- Issues that you won’t understand unless you have some practical knowhow around CSS (not just a textbook)
- Can an AI do all my CSS for me?
- No. AI is not a replacement for practical HTML + CSS knowledge. It can write HTML and CSS, but it cannot innovate and iterate the same way a human can.
How to support the show
Patreon
Prices subject to change and are listed in USD
- Support the show from as little as ~$1/month
- Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
- Help support the HTML All The Things Podcast: Click Here
Scrimba Discount - Coding Courses!
Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use our affiliate link for a 20% discount!!
- Click the link to take you to the Scrimba site
- A pop-up should appear on your screen with the discount amount and instructions on how to claim it
- Discount is for new accounts only
We receive a monetary kickback if you use our affiliate link and make a purchase.
