How Developers Actually Use CSS
You know CSS, right? The code also called Cascading Style Sheets that you pair up with HTML (Hypertext Markup Language) to create web pages.
Put simply, CSS is the code that changes the way online content looks. It’s what you use to set fonts, colors, background, and more. But, just because it’s a website building basic doesn’t mean that CSS is something you can just set and forget. Instead, you can use CSS to take your sites way beyond static displays and turn them into gorgeous presentations that adapt fluidly to all kinds of use cases and users.
This article will let you in on how developers actually use CSS in their work so you can better understand what you need to know about advanced CSS. With special insider insight from Skillcrush’s very own front-end specialist and examples of stunning sites using advanced CSS to inspire you, here’s your chance to join the pros in their excitement about this powerful tool that will take your career as a developer to the next level.
Besides standard styling, the main way developers use advanced CSS is for layout, or the placement and sizing of elements on a web page. Will King, front-end developer and team lead at Skillcrush, put it this way:
“90% of CSS is layout. Where things are located on a page and how they change based on the screen size is most of what you do as a front end developer in CSS. Yes, there are font styles, sizes, and button styles, but they still have to be told where to be positioned on the page. So, Flexbox and CSS Grid are everything. They are modern tools that take into account the expectations of the increasingly higher standard of design in modern web development.”
Now that Will has let us in on the two most important advanced CSS tools, let’s dig a bit deeper, starting with Flexbox.
Flexbox
If you were around in the early days of the internet, you remember the wild times we all had using tables for layouts. Thankfully, those days are behind us, and now you can place elements using the display and position properties. These are definitely useful features of CSS, but sometimes you need more, especially when people today are viewing websites on everything from phones they can hold in one hand to monitors that take up a whole desk. You want your site content to automatically adapt to fit any screen size, and that’s where Flexbox can help.
With Flexbox, you can create web pages where the size and even the order of elements changes to exactly fit the display, without overlap or blank space. For example, here’s Etsy’s site using Flexbox on a 13-inch laptop:
and the same site on a 6-inch phone:
As you can see, instead of cramming four items on top of each other on the smaller device or leaving blank spaces after two items on the bigger device, Flexbox alters the size of the elements to work perfectly within the space available.
CSS Grid
While Flexbox is ideal for flexibly laying out content in columns or rows, CSS Grid gives you the ability to handle both column and row layout at the same time and exactly place content where you want it.
These features of CSS Grid can help you build more complex and unusual layouts. You can even combine Flexbox and CSS Grid to get the best of both worlds, like on these sites from a few well-known companies:
Travel site Airbnb uses Flexbox on their homepage plus CSS Grid on specific sections, like Airbnb Adventures, for example:
Food site Allrecipes wields CSS Grid to display search results:
And tech giant Apple shows off its products in a bold CSS Grid layout:
How You Can Use Advanced CSS
From these examples, it’s easy to see how professional developers use tools like Flexbox and CSS Grid to build some of the world’s most popular websites. But what if you’re just starting out in the tech world? Should you learn advanced CSS too?
Our front-end pro (and, by the way, Skillcrush alum himself), Will, says:
“[With advanced CSS], you will have more understanding when faced with a design of HOW to build something. A lot of times, especially as you are first diving into the world of front end, you look at something and you hesitate to start because you are not sure what to use or how to use it to achieve the given design. Learning the more advanced layout concepts and tools conquers that fear. It’s not that you [will then] know HOW to build something, [but] you will be able to build FASTER. Which is huge both as an employee and a freelancer.”
For the kind of advanced CSS work that you should put in your portfolio to impress employers or clients, Will recommends that you:
“Look for what is popular on inspiration/design sites like Pinterest and Dribbble. What is popular here will also be a popular style to prove that you can build. Then just practice, practice, practice. Build complicated layouts and different layouts. The more experience you can get trying to build them, the less fear and the more confidence you can have tackling any design sent your way.”
As proof that even experienced developers are always improving their skills, Will shared the Pinterest board he’s constantly adding inspiring websites to. Click through to get a closer look at where you can head as a developer using advanced CSS:
