hackalumni
Published in

hackalumni

5 Best CSS-TRICKS Articles for Beginners

by Catherine Noel

What is CSS?

CSS or Cascading Style Sheets is a programming language that enables web developers to style their content. For example, if you wanted to have bold text you would write a CSS rule like the one below:

font-weight:bold;

Though CSS seems relatively easy, it can become fairly complex. You can even create still art with CSS.

Pure CSS art by Diana Smith https://diana-adrianne.com/purecss-francine/

Don’t know where to start in your CSS mastery? These few articles will give you a foundation to understanding how it all works. I know the start to a stylish journey with CSS can be intimidating, but once you learn these concepts, you will have a wealth of tools to find the solutions you need to implement your design.

I know the start to a stylish journey with CSS can be intimidating but once you learn these concepts, you will have a wealth of tools to find the solutions you need to implement your design.

display

Let’s start with one of our most commonly seen base styles on every page, display. The display property defines how an element on the page will show. This article details all the initial default values for each element in your web layout. Understanding how display works will allow you the flexibility to manipulate the way an element shows in its container.

Check out: Display CSS-TRICKS

position

Next up is the position attribute. This allows you to manipulate where the element shows on the page. This article outlines the 6 values of this attribute, how and why it is used based on whether you need your element to depend on the parent element or exist on its own. There are also a few CodePen examples to exercise with.

Check out: Position CSS-TRICKS

grid + flexbox layouts

There are two mighty layout systems to use with CSS. In many cases understanding, both systems will save you time and how you want to build out your web page or component. The key difference is that flexbox is one-dimensional and grid is two-dimensional. What does that mean, you ask?

grid gives you the opportunity to manipulate elements by arranging them based on rows and columns whereas flexbox doesn't have that much flexibility. The best part is that you can use them together!

Check out: A Complete Guide to Flexbox CSS-TRICKS + A Complete Guide to Grid CSS-TRICKS

BEM

Have you ever thought to yourself, “How do I determine a class name for this element?” Yeah, me too! BEM is a model on how to think about writing class names. Even if your team uses a different coding style such as camelCasing letters this will give you a baseline for how to frame your mind. Block, Element, Modifier model will save your from your philosophical question of naming conventions.

Check out: BEM 101 CSS-TRICKS

Without a doubt, after learning all this you must believe that CSS IS AWESOME!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hack.Alumni

Hack.Alumni

Hack.Alumni is a collective of highly skilled Black and Latinx individuals coming out of the Hack.Diversity program.