<![CDATA[ Vinod Mathew Sebastian - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Vinod Mathew Sebastian - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Sat, 16 May 2026 16:29:07 +0000 60 <![CDATA[ Why You Should Use rem to Set Font Size in CSS ]]> https://www.freecodecamp.org/news/why-use-rem-to-set-font-size-in-css/ 66d461759f2bec37e2da0672 Tue, 17 Jan 2023 21:33:17 +0000 Setting font sizes is something you'll do often as a web developer. But sometimes, especially for beginners, this can get a bit tricky.

In this article, I'll explain why I think you should always use rem over em for setting the font-size of an element.

What are Relative Units in CSS?

For styling a webpage, we use relative units like em and rem instead of absolute measurements like px (pixels).

This is because nowadays, screen sizes come in different sizes and shapes. If we use px, the element's size remains constant regardless of the size of the screen. So using relative units like em and rem are considered good practice. (The :root size is still set in px. We need a reference point. Don't we?)

CSS units are thus classified into two ways: absolute and relative units. Pixels (px), points (pt), and picas (pc) fall under absolute units. The %, em, rem, vh, and vw are all relative units.

What are em and rem Units?

Talking about em and rem, in print typography em refers to the width of the capital letter 'M' of the current typeface.

In web design, em refers to the size of the current element. If the size of the current/parent element is not set, it usually defaults to the size in the browser CSS. It is usually 16px.

The em is not just for font-size. It is a relative unit that you can use to set the values of properties like font-size, margin, padding, width, height, and line-height of an element.

The rem is the root em. All values are relative to the topmost parent, the html or :root element. If not explicitly set for the html or :root element, it again defaults to the browser CSS: 16px.

You can use rem wherever you can use em.

When is rem a Better Choice than em?

Now let's discuss why you should always use rem, instead of em, for setting the font-size of an element in CSS.

CSS styles cascade. That is why it is called cascading style sheets. If you inadvertently apply a font-size of 0.5em again, the size reduces to 1/4th of the original.

Note: This happens only if you use relative units. Even if you apply an absolute unit (say 16px) any number of times, for example, on the font-size, it will always remain the same. It would just be duplicate style declarations. The browser effectively ignores it.

Let me show you an example.

This is a simple webpage. Only one h1, p, and an a tag nested inside the p tag are inside it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome - Difference between applying em and rem</title>
</head>
<body>

<h1>The difference between em and rem in the font size of an element</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad beatae alias adipisci placeat fuga maiores nobis aliquam, atque porro explicabo veritatis dolorum tenetur ullam in?

<a href="#">Click me!</a>

</p>

</body>
</html>

For an example, the h1, p, and a tags are all given a font-size value of 0.5em to be displayed on a smaller screen.

@media all and (max-width:768px){

h1{
font-size:0.50em;
}
p {
font-size:0.50em;
}
a {
font-size:0.50em;
}
}

Now see what happens. This is the mobile view (zoomed to 300%).

Image

The 'Click me!' inside the a tag is 1/4th the size of the original – and it's barely readable.

Immediately after applying 0.5em to the p tag, em is now only 8px.

16px x 0.5 = 8px

Since the a tag is nested inside the p tag, both styles cascade.

8px x 0.5 = 4px

The solution is to use rem for the a tag: 0.5rem.

Please note that h1 and p tags use em here for demonstration purposes.

@media all and (max-width:768px){
h1{
font-size: 0.50em;
}
p { 
font-size:0.50em;
}
a {
font-size:0.50rem;
}
}

Since we used rem, the a tag is relative to the root em – that is, it's set to 16px by default.

16px x 0.5 = 8px

Image

The Click me! a tag is styled more appropriately now.

Always remember that it is a good idea to use rem for setting the font size of an element as you saw here.

Conclusion

In some places, it's better to use em. But when you're setting the font size of an element, rem is the better choice.

Happy Coding!

]]> <![CDATA[ How to Customize Bootstrap with Sass ]]> https://www.freecodecamp.org/news/how-to-customize-bootstrap-with-sass/ 66d461734bc8f441cb6df831 Tue, 21 Jun 2022 20:59:02 +0000 Bootstrap is an awesome CSS framework that can help you create stylish and sleek websites.

Some developers and teams find that code written in Bootstrap is easier to maintain than regular CSS, so they prefer Bootstrap to vanilla CSS.

But if everyone used Bootstrap with its default styles, then every site would look the same – and quickly, the internet would become pretty bland. Fortunately, Bootstrap is also highly customizable.

How to Customize Bootstrap

If you're a beginner, you can customize Bootstrap with a custom CSS stylesheet. CSS specificity is important here. You write custom CSS, with the same or higher specificity, and link to it in the head section of your index.html after the line which links to the original Bootstrap CSS.

<!-- index.html -->
<head>

    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- custom CSS should come after Bootstrap CSS -->
    <link rel="stylesheet" href="./custom.css"

</head>

For small tweaks this is OK. But for larger projects, this can be time-consuming and there may be a lot of redundant style declarations. So there has to be another, cleaner, way.

How to Use Sass with Bootstrap

The solution is to use Sass – a CSS preprocessor. Sass is compiled down to CSS before it's used on web pages.

Until Bootstrap version 3.x, you had a choice between CSS preprocessors: Less or Sass. But since version 4, Bootstrap uses only Sass. The source code for the Bootstrap 4 and 5 frameworks is written entirely in Sass, which is a testimony to how mature Sass has become.

You may have heard the tagline, "Sass is CSS with superpowers". If you want to learn Sass, the official website is an excellent resource. You can also refer to other tutorials on freeCodeCamp, like this one on how to use Sass with CSS, or this video course on how to use Sass with Bootstrap 5.

Sass comes with two syntaxes. The older one uses indentation and the newer SCSS syntax (SCSS for Sassy CSS) uses CSS-like curly braces.

SCSS is a superset of CSS. So CSS code saved with a .scss extension (or SCSS interspersed with CSS) is also valid Sass code.

In this tutorial, we are going to use the SCSS version. Whatever the style is, indented Sass or CSS-like SCSS, the Sass compiler will transpile it to vanilla CSS to be used on the browser.

What we are going to do in this tutorial

  1. We will change the primary and secondary theme colors Bootstrap ships with.

  2. We will also change the default media breakpoints Bootstrap uses.

Once we can do these, it will become easy to do other customizations.

The Prerequisites

  1. Node.js with npm or yarn

  2. A code editor, preferably VS Code.

  3. A basic understanding of Sass

Download Bootstrap from the official website: https://getbootstrap.com

Since we have Node.js installed, I'm going to use the npm version.

npm i bootstrap

We also need to install the Sass compiler. We can get the official dart-sass version from their website. Whether you're on Windows, Mac, or Linux you just need to download the dart-sass package, unzip it, and add it to the path (environment variables).

There is a npm sass package. Also, there is a Live Sass Compiler VS Code extension with over 2 million installs. Feel free to use whatever Sass compiler you're comfortable with.

Here, we are going to use the npm package: sass.

After downloading Bootstrap, and the Sass compiler, in the node-modules directory, there is a folder named bootstrap.

There are also three folders inside it: dist, js, and scss.

All the compiled CSS is in dist, the Bootstrap JavaScript code in js, and all the Sass files are in the scss folder.

How to change the primary and secondary theme colors

For customization, our idea is to override the .scss files and recompile them.

The official Bootstrap documentation advises against changing the core bootstrap files whenever possible. So we are going to create a custom.scss stylesheet.

And we are going to import all of Bootstrap in the custom.scss file.

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Variables are suffixed with a !default (a Sass flag) in Bootstrap. The !default flag tells the compiler to set the value only if the value is not defined.

So, we set the variables before the @import directive so that, later, the compiler sets our value instead of the default ones.

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

We also need an HTML file to preview the results.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome! Customize Bootstrap with Sass</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
</head>
<body>
 <div class="container" >
 <div class="row">
    <nav class="navbar navbar-expand-lg navbar-light bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Customize Bootstrap</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
<div class="container">
<div class="row">

  <div class="col-xl pt-3">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum hic, quia maiores animi nobis eligendi est eos saepe architecto reiciendis! Aliquam inventore distinctio reprehenderit corporis amet assumenda officiis dolorem, animi delectus sunt dolor commodi. Adipisci nam nemo labore eligendi quas, rem ipsum iusto eveniet itaque vero necessitatibus! Quas, cupiditate tempora unde nam exercitationem libero aut labore deserunt nesciunt voluptate dignissimos quis porro reprehenderit maiores excepturi, esse, nisi dolores sit tenetur voluptatum corrupti alias provident pariatur? Quam illo unde autem, fugit numquam dolores, odio sed rem saepe exercitationem fuga, nisi soluta sunt officiis! Similique, vero repudiandae quae dignissimos fuga natus!
    </div>

  <div class="col-xl pt-3 ">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, aliquid, cumque nisi tenetur similique labore repudiandae voluptas qui hic blanditiis beatae sapiente autem dolore! Quam, cupiditate nostrum laboriosam blanditiis vel ratione, repellat, incidunt modi tempore soluta ab nesciunt? Ab similique illum suscipit exercitationem et, aut quisquam neque atque recusandae rem delectus facilis. Magnam rerum fugit minus explicabo vel! Hic quibusdam laudantium dolorum, pariatur ipsam veritatis voluptate animi, nesciunt dolorem autem dicta. Debitis quae nam dicta autem ipsum mollitia! Ipsum ipsa, molestias fugiat officiis aut illum ullam architecto maxime labore vitae. Ipsum quos neque rerum, esse iste quo explicabo eos ipsa?
    </div>

</div>
</div>

<div class="mt-5 pt-5 mb-5 text-center">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-link">Link</button>
</div>

 </div>

 </div>

</body>
</html>

We have not compiled Sass yet. To see the default styles, run Live Server.

If Live Server is not installed, you can download the free extension from the VS Code extensions marketplace.

This is what we see:

Image

It is time to compile our custom Sass file.

Compilation syntax is simple: Specify the source and destination folders separated with a colon.

I have my custom.scss file in a folder called custom_scss.

sass custom_scss/custom.scss:assets/css/custom_bootstrap.css

After recompiling, we have the customized bootstrap in the assets/css/custom_bootstrap.css file.

Instead of the default bootstrap file, we are going to use this customized bootstrap stylesheet.

<!-- index.html -->
<head>

<link rel="stylesheet" href="./assets/css/custom_bootstrap.css"> `

</head>

Then run the Live Server again.

We get the webpage customized with our new styles.

Image

How to change the grid breakpoints

We'll now customize the media breakpoints. Alongside, we have to redefine container-max-widths also.

The easiest way is to simply override the variables:

$primary: teal;
$secondary:green;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px,
  xxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px,
  xxl: 1520px
);

@import '../node_modules/bootstrap/scss/bootstrap'

Since this would violate DRY principles (Don't Repeat Yourself), using the map-merge() function is a better option.

We have to import functions first in the custom.scss file to make map.merge() available.

We have to import variables also because $grid-breakpoints (to be used inside the function) is defined there.

//custom.scss

$primary: teal;
$secondary: green;

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

This is the code:

//custom.scss

$primary: teal;
$secondary: green;

//We have to import the functions first to use map.merge()

@import '../node_modules/bootstrap/scss/functions';

// We have to import the variables beforehand to 
//use the variable $grid-breakpoints.
// Otherwise, compiler will show error - '$grid-breakpoints 
//undefined.'

@import '../node_modules/bootstrap/scss/variables';

$new-breakpoints: (
    xl: 1280px,
    xxl:1600px
);

$grid-breakpoints: map-merge($grid-breakpoints, $new-breakpoints);

$new-container-max-widths: (
  xl: 1220px,
  xxl:1520px
);

$container-max-widths: map-merge($container-max-widths, $new-container-max-widths);

@import "../node_modules/bootstrap/scss/bootstrap";

We compile again and use the newest file in place of the older one.

<link rel="stylesheet" href="./assets/css/custom_bootstrap.css">

This is the final result:

Image

It is not just theme colors and media breakpoints. Borders, spacing, box-shadow, fonts, icons...you can customize anything.

I have put up all the above code in this GitHub repo.

For exploring further, the official Bootstrap documentation is an excellent resource in this regard.

Conclusion

In this tutorial, I've shown you how we can use Sass to customize Bootstrap.

Even if we are in a project that uses React with Bootstrap, the idea is the same. Create a custom .scss file, make customizations, import bootstrap, recompile, and then link to the customized file in place of the original bootstrap file.

Happy Learning!

]]> <![CDATA[ Bash Command Line Tips to Help You Work Faster ]]> https://www.freecodecamp.org/news/bash-command-line-tips-to-help-you-work-faster/ 66d4617055db48792eed3fb3 Mon, 02 May 2022 19:56:22 +0000 Learning the command line is essential for any aspiring developer.

And to execute commands on the command line, you need a shell.

The Bash shell is popular in Unix-like operating systems like Mac and Linux. In fact in most Linux distros, Bash is the default shell.

You can also use Bash in Windows via WSL (Windows Subsystem for Linux).

After learning some basic Bash commands, it's time to get up to speed.

This tutorial is not for absolute beginners, but I hope both novices and advanced users might get something out of it.

Here are the 10 Bash commands that'll help you work faster with your terminal.

1. Use Control + L to clear the screen and Control + D to exit

To clear the terminal screen, type clear on the command line.

To exit, type exit.

Better still, pressing Ctrl + l ( ⌘ + l ) clears the screen and Ctrl + d (⌘ + d) closes the terminal.

2. Use the nohup command to spawn processes that don't end with the terminal session

Once programs are loaded into memory, they are called processes.

Sometimes, I open Firefox from the command line:
firefox https://freecodecamp.org.

But as soon as I close the terminal, Firefox also crashes.

To prevent this, use the nohup (no hang up) command: nohup firefox https://freecodecamp.org.

Now when I close the terminal, Firefox doesn't crash but my tab crashes.

The fix: make Firefox a background process by appending the & symbol.

nohup firefox https://freecodecamp.org &

Now even if I quit the terminal, my tabs are all intact.

3. Use pkill to kill processes by typing in only a part of the name

By using the killall command, we can kill a process by its name:

killall firefox

Better still, use pkill to terminate by typing only a part of the name.

pkill fire*

4. Prepend the time command to know how fast something executes

Do you want to know how long it takes something to execute in the shell?

Just prepend time to the command: time gcc -g *.c.

5. On Linux, use cat /etc/*rel* to view the distro name

Typing uname -a shows the system information.

Wanna double check what distro you're running?

Just type cat /etc/*rel* on the shell and press enter.

6. Use the sed command in text files to find and replace

Do you want to replace multiple occurrences of a word in a text file?

Use the sed command.

sed s'/apples/oranges/g' myfile.txt

Here, all the occurrences of the word 'apples' are changed into 'oranges'.

If you only need to replace the first occurrence in every line, just take out the 'g' suffix at the end: sed s'/apples/oranges/' myfile.txt.

The 'g' is for global.

The forward slash / is the delimiter. In fact, you can use any delimiter.

Let's use a single underscore _ as the delimiter: sed s'_apples_oranges_'g myfile.txt`.

Simply using sed only replaces on the standard output. The original file is unchanged.

To change the file 'in place', use the -i flag: sed -i s'_apples_oranges_g' myfile.txt.

7. Know the public IP address of your computer using curl

There are two types of IP addresses: private and public.

A system assigns internal IP addresses which can be checked using the ifconfig command.

But do you want to know the public IP of your computer – the IP address that the ISP assigns to your interface?

While online, just use curl ifconfig.me ; echo or curl ifconfig.co ; echo on the command line.

Pressing the 'up' arrow key shows the last command you've typed.

Typing history shows all the commands you have typed that are stored in bash history.

Better still, type Ctrl + r (⌘ + r) on the shell and start typing in the command.

As you type, the shell autocompletes from history. Press 'enter' as soon as you find the match.

If you remember only one thing from this tutorial, remember this key combination: Ctrl + r (⌘ + r).

It will save you a lot of time, guaranteed!

9. Use the shell for doing math

For simple calculations that don't input or output fractions, you can simply use:

:~$ echo $((19*34))
:~$ 646

For calculations that involve fractions, just echo the expression and pipe it into the bc command.

:~$ echo "scale=2; 9*3/((2*2)+1)" | bc
:~$ 5.40

Here, 'scale' is the precision we need. I have specified it to be two decimal points.

10. Use brace expansion to create files in bulk

How do we create 100 files inside a folder?

file1.txt, file2.txt, file3.txt ... file100.txt

By using brace expansion: touch file{1..100}.txt.

We need to create three files for our project: app.html, app.css, and app.js

Instead of creating one by one, we can simply use brace expansion to create all of them in one go.

:~$ touch app.{html,css,js}
:~$ ls
app.html app.css app.js
:~$

Or inside the project folder, we need to create five directories: images, css, src, templates, and scripts.

We can use:

:~$ mkdir {images,css,src,templates,scripts}
:~$ ls
images css src templates scripts
:~$

Only one caveat here: just ensure that there are no spaces between the words inside the braces.

Wrapping up

I have listed 10 Bash command line tips by which you can work up to speed on the terminal.

Learn these Bash commands and it will hold you in good stead in your programming journey.

Happy Coding!

]]>