On The Road To Professional Web Development | CSS

Part I: Getting Started

CSS Basics

Cascaded Style Sheets (CSS) separate “content” (defined in HTML) from “presentation” (defined in CSS). See this concept in action at CSS Zen Garden. As you’ll notice on that site, the look and feel of the site are easily modified in CSS without any modifications to its HTML code.

CSS applies styles to HTML elements by reference. These references are called “selectors”.

• Learn about CSS selectors here

Making Layouts

By default, HTML elements follow something called “normal flow”. As a matter of fact, different browsers apply their own default styling to a variety of elements. To improve our odds of having layouts display consistently across browsers, it’s common to include CSS that first removes default styles (before applying our own). There are many ways to change the default arrangement of elements (normal vs. vertical flow, the box model, displays, positioning, floats, one-dimensional arrangements with Flexbox, and two-dimensional arrangements with CSS Grid Layouts). The following resource is a fantastic introduction to each of these:

• Learn about CSS layouts here

Advanced Techniques

The above resources will get us really far, but there are many functionalities offered by vanilla CSS that will make our lives a lot easier. At minimum, we should take some time to study the following:

• At-rules
• Color
• Counters
• Cursors
• Filters
• Media queries
• Responsive design
• Table styling
• Text styling
• Transitions
• Units

Best Practices

Now we’re armed with tons of great functions, and we have many ways to achieve the same result (in terms of site appearance). Some design choices will make our lives easier than others from a coding perspective. Let’s explore some of these systems-level considerations now:

• BEM
• Image sprites
• Mobile-first design
• Specificity
• Tooltips

Tools

There are many great tools that will help us write better CSS and/or fine-tune the look and feel of our site. Some of my favorites include:

• Animation generator
• Autoprefixer
• CanIUse
• Gradient generator
• Prettier + Stylelint
• Sass

Part II: Practicing CSS

HTML, CSS, and JavaScript drive the modern web, but with nothing more than vanilla HTML and CSS, we can actually code up some pretty amazing websites. As a matter of fact, I’d highly recommend at this juncture you take the time to do so (doesn’t need to be fancy — a plaintext .html file and a plaintext .css file sitting on your desktop will work just fine). In this series on professional web development, we haven’t yet touched on JavaScript (we will do so in the next post) — it can give our sites some pretty awesome interactivity that simply is not possible otherwise. But you may be surprised at just how far we can go without it — it will be a good exercise to code up a static website without any JS dependencies. A case can be made to try to ditch JS entirely (when alternative solutions exist). Most browsers give us the option to simply disable all JS on any site we visit. Some major sites (Amazon and Twitter included) are coded in such a way that they are fully functional when forced to use nothing more than vanilla HTML and CSS in this way. If you can find the browser setting (on desktop or mobile), go ahead and try it for yourself. While you’re at it, check out this list of 8 sites that operate without JS.

I’d be remiss not to mention these resources to aid in the site-building efforts:

• HTMLSheatSheet offers an excellent interactive CSS Cheat Sheet
• W3Schools offers a great CSS reference (strikes a friendly balance between comprehensiveness and rigor)
• ZenDev offers an “ultimate guide” which I leaned a ton from in the making of this post (highly recommended)

Part III: Interview Questions

There are many related tools of interest to interviewers including CSS frameworks, CSS-in-JS, and CSS preprocessors (which we’ll dive into in future posts).

As for vanilla CSS, relevant interview questions can require listing functions from memory (as the questions listed here), can require practical demonstrations (such as the questions listed here), or require knowledge of system interfaces (such as the questions listed here or here). All are worth studying, but keep in mind we’ll need to learn a few more technologies before we’re ready to take on all the CSS-related interview questions we might need to answer.

Closing Thoughts

I hope you’ve enjoyed this post as much as I enjoyed writing it. If you have thoughts you’d like to share, your editorial suggestions are always welcome. This post is part of a series on becoming a professional web developer. If you’d like to see more content like this, please click here to navigate to the table of contents.