Interview Questions Javascript HTML and CSS 04 Aug, 2020

6 Most Popular Front-End Interview Questions and Answers for Beginners [PART 3]

Intro to Front-end interview questions for beginners PART 3

Today we’ll talk about the CSS interview questions for beginners.

Welcome to the next part of the front-end questions series.

All of the episodes in our series are related to the most popular things that developers ask about the technology, which are often used in job tech interviews.

In the previous episodes, we talked about javascript and React.js more general, and you can find the URLs to those episodes here:

Front-end interview questions PART 1

Front-end interview questions PART 2

Today, we can focus on the most popular questions related to CSS.

I’ve tried to select the entrance-level questions that should be asked for the very beginners mostly.

Maybe some of these questions could be asked on the higher-level positions, and sometimes I’ve met some of them, but in general, most of the experienced developers probably know that perfectly, so that article should give the biggest value for beginners.

Let’s start!

What is external CSS file

Planning the structure of the project and how we want to solve most cases should be done when we start the project.

One of the issues that we need to solve in the front-end project is “how to add styling”.

There are a few possibilities of adding styles to make our layout looking well.

Of course, there are many more of them when we use 3rd party packages or some frameworks, but when we use pure HTML and CSS, there is a bit less.

We can write styles directly in the HTML file in the “style” tag, we can do inline styles, write some js script that adds styling to our elements, or use external CSS files.

An external CSS file is just the “.css” extension file, that we write CSS code inside, next, we can import that file into the front-end template, where we need to use that code.

In some cases, like using CSS frameworks like bootstrap, Antd, Bulma, or something else, we can import external CSS files from the remote CDN instead of handling them in our local directories.

The way of adding styles into the external CSS file is a very popular solution in the pure HTML/CSS/js projects, but not only.

Even when we build projects with frameworks like React, Angular, or Vue, we can use external CSS files, and it’s a perfect solution, especially with the bigger projects or projects where our UI is separated from the front-end logic.

Let’s see the code example below, where I’ve created a simple CSS file.

body {
  background-color: #fefefe;
  color: #444;
}

.container {
  width: 80%;
  margin: auto;
}

.card {
  border-radius: 15px;
  padding: 10px;
  background: white;
}

How to give CSS class in jquery

Did you think jQuery is dead already, and nobody uses it?

Nothing more wrong!

It’s kinda similar, like with PHP, that modern web-development doesn’t want to use it so much, but still, most of the internet is powered by that tech.

The jQuery library is still alive, and around 75% of all websites are using jQuery, so it is definitely worth knowing at least basics.

One of the features that we’ll be using with jQuery is to manipulate the elements, add styles, hide, show, add or remove attributes.

In this case, I’ll show you the two things, the first one (you’ll use it very often) is how to take element by the selector.

When we take element by a selector (in this case, we take it by id), we can add the class to the selected element.

Let’s take a look at the code example that I’ve created.

In the code example, I’ve created an element with id “hero”.

Next, I’ve created the js script, where I’ve used jQuery to take the “hero” element by its id.

And as the last step, I’ve added the class “rounded” to that element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn coding on Duomly.com</title>
    <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="hero">
      This is hero element
    </div>
    <script>
      $("#hero").addClass('rounded');
    </script>
  </body>
</html>

In the previous section, we talked about what CSS external files are, how to create that, when it’s a good idea to use that method, and why.

It’s great you have that knowledge already, but when you know what’s that, and how to create it, you need to know one more, and probably the most important thing.

How to import CSS file in the HTML file, to be able to use it?

In this section, I would like to show you how we can add the external CSS file, and why in that place.

There are few ideas on how to import CSS into the files, and in the Front-End Interview Questions PART 2, I’ve shown you how to do it in React.js.

Now, let’s go into the HTML file.

In the code example, you can see the CSS file is added just as a link into the header.

In the head, we add the files that should be loaded before the page renders, so in most cases, it’s right for stuff like styles or critical js (in some cases).

You need to remember that the URL of the link can be added as the 3rd party styles, you can add the whole URL with HTTP or add just relative path to the file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn coding on Duomly.com</title>
    <link rel="stylesheet" href="filename.css">
  </head>
  <body>

  </body>
</html>

How to apply CSS class in javascript

DOM manipulation is definitely the skill that you need to have if you’d like to be a successful front-end developer, especially if you’d like to work with UI, as for example, UI developer.

Whole DOM manipulation is a huge topic, and I’ll be showing you the most popular methods in time to time in the Front-End Interview Questions series.

Especially in PART 3, we’ll talk about that even a few times.

Whole DOM manipulation is a kind of resource-hungry stuff, and if you can, you should go forward with the stuff like virtual DOM, but sometimes you need to do it with the normal DOM anyway.

In the previous section, I’ve shown you how you can manipulate with classes by using jQuery, but what if you don’t want to use jQuery in your project, and you need to do it with pure JS?

You need to know how to do it!

Let’s see on the code example.

As the first step, we need to select the element that we’d like to modify.

In this case, I’ve added an id to the element that is kind of comfortable to select, because the method “getElementById” returns only one element.

Next, when we have selected elements, we can use the method “setAttribute” and define attribute type as “class”, the value we can setup however we want.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn coding on Duomly.com</title>
  </head>
  <body>
    <div id="hero">
      This is hero element
    </div>
    <script>
      const hero = document.getElementById("hero");
      hero.setAttribute("class", "rounded");
    </script>
  </body>
</html>

How to add CSS dynamically in javascript

In the previous sections, you could learn how to manipulate with dom in a very simple way.

Like, we created a simple HTML element and created a script that was adding class to the element when the script loads.

We did it in two ways: jQuery (still alive, and still worth to know at least basics!), and the second one you learned is the DOM manipulation with pure JS.

In this section, we will go a bit more advanced.

You will learn how to do DOM manipulation related to the event. In this case, we’ll use the onclick method that we add to the button.

We can specify what element should be selected, by adding the “id” param to the function, and we’ll be able to specify the class name that should be added to the element.

Take a look at the code example that I’ve created for you.

We have here element with id “hero” and button that can fire the “addClass” function with the “onclick” attribute.

Next, we have a js script where we specified function named “addClass” that can take “id”, and “className” as params.

Inside the function, we iterate DOM to find an element with the id that we passed in button and add a class attribute with a class name that we added when fire “addClass” function.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn coding on Duomly.com</title>
  </head>
  <body>
    <div id="hero">
      This is hero element
    </div>
    <button onclick="addClass('hero', 'rounded')">Add class</button>
    <script>
      function addClass(id, className) {
        const element = document.getElementById(id);
        element.setAttribute("class", className);
      }
    </script>
  </body>
</html>

What are pseudo classes in CSS

In CSS we use a few selectors like elements, classes or ids, that most people know, but not all of us know about one, very useful selector.

The pseudo-class selector.

But don’t worry, I’ll explain to you what’s that, and I’ll show you a few of the most popular ones. I will tell you what they do and when to use them.

Pseudo-classes are keywords/selectors that we use to select elements when they are in a special state.

The pseudo-class looks like “:keyword” and is used to add some life into your styles.

For example, your elements can change when you put the mouse over them, or select some input.

Now, let’s take a look on the list of most popular pseudo classes:

  • :active - This selector is used to select give a possibility to style the active link.

  • :first-child - We use this selector to select the first element in the DOM parent, for example, the first menu item.

  • :hover - We use this selector to select and style the element where we put the mouse over on.

  • :last-child - This selector is the same as the first-child one, just this one selects the last element.

  • :nth-child(n) - We use this selector to select every “n” child. It can be useful, for example, in lists or tables, where we want to give another color every n row.

  • :visited - This one selector can take the visited link. It can be useful when we want to give other styles to the links that we already clicked in.

  • :required - This one selector can give us the possibility to style inputs marked as “required”.

  • :focus - This one selector gives us the possibility to style inputs that we are currently focused on.

  • :checked - We use this selector to select the checked checkboxes.

  • :disabled - This one selector is useful to give different styles for disabled inputs.

  • :not(selector) - This selector is very useful in the case when we would like to add styling to all the elements that are not a specified element, like, for example, all elements, but not div.

    a:active { color: #666; } /** Selects active link **/

a:first-child { color: #666; } /** Selects first element **/

a:hover { color: #666; } /** Selects element where mouse is over **/

a:last-child { color: #666; } /** Selects last element **/

a:nth-child(2) { color: #666; } /** Selects every second element **/

a:visited { color: #666; } /** Selects visited link **/

input:required { color: #666; } /** Selects required inputs **/

input:focus { color: #666; } /** Selects focused inputs **/

input:checked { color: #666; } /** Selects checked inputs **/

input:disabled { color: #666; } /** Selects disabled inputs **/

:not(p) { color: #666; } /** Selects every element that is not p **/

Conclusion of CSS interview questions for beginners PART 3

Congratulations, now you’ve learned the most popular CSS interview questions for beginners!

What you’ve learned

If you’re new here, don’t forget to check the PART 1 of the Front-end interview questions, that you can find here:

Front-end interview questions PART 1

There you can find the most popular questions for beginners, related to the Javascript.

Front-end interview questions PART 2

There you can find the most popular questions for beginners, related to the React.js mostly.

And, here you can find the questions about Back-end:

Back-end interview questions PART 1

There you can find the most popular questions related to the general backend.

Remember that always practicing is the most important part and it can teach you a lot more. Here are our methods on how to practice Javascript

Thanks for reading,
Radek from Duomly

Table of contents:

Courses

Related readings

Learn With Our Mobile App