Building a Website with HTML, CSS, and SASS/SCSS

The internet is a vast place and building a website has become a necessity in today’s digital world. The creation of a website requires technical knowledge of HTML, CSS, and SASS/SCSS. These are three languages that are essential in building a website from scratch. In this blog, we will cover each language in detail and also explain how they work together to create a beautiful and functional website.

HTML

HTML, or HyperText Markup Language, is the backbone of all websites. It provides the structure and content for a website. HTML is made up of elements that are used to define different parts of the website such as headings, paragraphs, images, and links. The elements are defined using tags that are placed within angle brackets.

Here is an example of a simple HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first website.</p>
  </body>
</html>

CSS

CSS, or Cascading Style Sheets, is used to style and format the content of a website. It provides the visual appeal of a website and gives it a unique look and feel. CSS can be used to define the colors, fonts, and layouts of a website.

Here is an example of a simple CSS code:

body {
  background-color: lightgray;
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 16px;
  padding: 10px;
}

SASS/SCSS

SASS, or Syntactically Awesome Style Sheets, is a CSS preprocessor that extends the capabilities of CSS. SASS provides additional features such as variables, functions, and nesting, which make the styling of a website easier and more efficient. SASS has two syntaxes: SASS and SCSS. SCSS is the newer syntax and is more similar to CSS.

Here is an example of a simple SASS/SCSS code:

$primary-color: blue;
$secondary-color: gray;

body {
  background-color: $secondary-color;
  font-family: Arial, sans-serif;

  h1 {
    color: $primary-color;
    text-align: center;
  }

  p {
    font-size: 16px;
    padding: 10px;
  }
}

Putting it all together

To build a website, HTML, CSS, and SASS/SCSS must work together. The HTML provides the structure and content of the website, while CSS and SASS/SCSS provide the styling and formatting. The CSS and SASS/SCSS code is added to the HTML using either the <style> tag within the <head> section of the HTML or by linking to an external CSS file.

Here is an example of a complete HTML, CSS, and SASS/SCSS code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
    <style>
      $primary-color: blue;
      $secondary-color: gray;

      body {
        background-color: $secondary-color;
        font-family: Arial, sans-serif;
      }

      h1 {
        color: $primary-color;
        text-align: center;
      }

      p {
        font-size: 16px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first website.</p>
  </body>
</html>

Live Preview

In this example, the SASS/SCSS code is added directly to the HTML using the <style> tag. The SASS/SCSS code defines two variables, $primary-color and $secondary-color, which are used to set the colors of the headings and body background. The CSS code styles the body, headings, and paragraphs of the website.

Conclusion: HTML, CSS, and SASS/SCSS are three essential languages in building a website from scratch. HTML provides the structure and content, CSS provides the styling and formatting, and SASS/SCSS extends the capabilities of CSS. When used together, these languages allow for the creation of a beautiful and functional website. Whether you're a beginner or an experienced developer, mastering these languages is crucial in building a successful website.

Next: Building a full-screen background image using HTML and CSS

/ @kheersagar / Building a Website with HTML, CSS, and SASS/SCSS

Building a Website with HTML, CSS, and SASS/SCSS

HTML

CSS

SASS/SCSS

Putting it all together

You may also like

Building a website with HTML and CSS from scratch

Building a responsive portfolio website with HTML, CSS, and JavaScript

Creating an accessible website using HTML and CSS