DEV Community

Cover image for Styling concepts every Frontend developer must know about
Vedant  Nandoskar
Vedant Nandoskar

Posted on • Updated on

Styling concepts every Frontend developer must know about

// Always remember
.your-projects {
  custom-styles: 'neat';
}
Enter fullscreen mode Exit fullscreen mode

 

Hello fellow developers,

 
Hope you all are doing well! This post is going to be about some intermediary styling concepts/resources that you need to know about, especially if you are looking for jobs concerning frontend development.
 
I have found these concepts on every frontend job interview I've ever taken and stumbling over these (unless it's for an internship) is a big red flag for recruiters. That is because it sets you apart from people who use readymade components or use UI libraries. Now there's no problem in using those libraries in a personal project, but when you are developing in an industry, the code you write is likely to be licensed as an intellectual property thus making the use of external libraries questionable. Apart from that, I highly recommend for you people to try these concepts in your personal projects and showcase them, as this highlights your skills and understanding of styling to a fundamental level, and would also rid you of depending on any styling framework.
 
Alright then, let's dive right into it...

 

1. Flexbox (or Flex)

 
Flexbox, according to MDN Web Docs, is

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
which essentially means that it's a container that rearranges itself automatically on screen resizing. Now, this is a very handful tool as modern devices vary in screen sizes, and a website needs to be responsive to adapt to these screens.
 
A good practice to wrap your head around the flexbox concept is to try and make a simple 3x3 checkerboard just by using vanilla CSS.
 
First create a parent div with 9 child divs.

    <!-- create a parent -->
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
    </div>
Enter fullscreen mode Exit fullscreen mode

 
Add in the CSS. The parent div will be the flexbox while the children will have width 30% (30vw = 30% view width, more about vw and css lengths).

        .parent {
            display: flex;
            flex-wrap: wrap; /*it's important to wrap the components. More info here https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap*/
        }

        .child {
            width: 30vw;
            margin: 1vw;
            text-align: center;
            border: black 1px solid;
            line-height: 24vh;
        }
Enter fullscreen mode Exit fullscreen mode

 
Results:
image
 
So we've created a simple 3x3 checkerboard with flexbox. If you try to resize your browser window, you will notice that the boxes resize and align themselves accordingly.

 

2. nth selectors

 
Nth selectors are basically selectors that can be used to select HTML elements based on their position of occurrence in the DOM. For example, if we want to color alternate checker boxes in the checkerboard we created previously, we can add the style as follows

        .child:nth-child(odd) { /* odd = 1st occurrence, 3rd occurrence and so on */
            background: black;
            color: white;
        }
Enter fullscreen mode Exit fullscreen mode

 
Result
image
 
There are more such nth selectors such as

... and many more

 

3. :before and :after pseudo elements

 
If you've ever wondered how to style your paragraphs the way newspapers and magazines do, with the first alphabet of the paragraph being almost 3 times the size of rest of the text, then one of the ways to achieve that is using pseudo elements. Pseudo elements are not exactly on the DOM but are a part of the main element. They are limited in interaction and styling, but can be used to decorate and add stylistic aesthetics to your element.
 
We will now see how to create a magazine style paragraph. First we'll write a simple "Lorem ipsum" paragraph in a div

<!-- Don't forget to not include the "L" at the start -->
    <div>
        orem ipsum dolor sit, amet consectetur adipisicing elit. Neque velit facilis aut dolorum quasi corrupti reiciendis esse hic. Optio, quia! Quam aliquam repellendus officia hic, delectus accusantium excepturi quibusdam sequi!
    </div>
Enter fullscreen mode Exit fullscreen mode

 
Then add the CSS

        div:before {
            content: 'L';
            margin-right: 1%;
            display: block;    
            float: left;       /* so that they align in a line, and don't drop off to the next line */
            font-size: 400%;
        }
Enter fullscreen mode Exit fullscreen mode

 
Result
image

 
We can also add a pseudo element at the end with the :after class

        div:after {
            content: 'continued...';
            display: block;
            float: right;
            font-size: 200%;
            color: lightgray;
            font-style: italic;
        }
Enter fullscreen mode Exit fullscreen mode

 
Result
image

 
More about pseudo elements here

 
Alright, that's all from me for now, hope it was of use to you all. Thank you for staying till the end, I'm still getting a hang of blogging so I'm a noob at it.
 
I'll add more posts to this series as time passes ;)
 
You can follow me on my Dev.to @vedant1202
and on my Github@Vedant1202
 
Peace and stay safe ✌️
 

Footnotes

  1. Image taken from Unsplash @jantined
  2. References from Mozilla Developer Network Web Documentation

Top comments (4)

Collapse
 
skythediver profile image
Skyler Shaw 🪂

You may want to reconsider your title due to its gender exclusions. Females and non-binary need not apply?

Collapse
 
vedant1202 profile image
Vedant Nandoskar • Edited

Oh yes, good point. Thank you for that, I'm just starting out. Done the changes, and I'll update my other posts accordingly :D

Collapse
 
sr505505 profile image
sr505505

Nice