Home > Frontend Devlopment learning and exploring > Frontend Devlopment learning and exploring > HTML and CSS Fundamentals

Introduction to HTML

HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It provides the structure and the content of a web page. Think of HTML as the skeleton or framework of a web page, defining the different elements and how they are organized.

HTML uses tags to define the different elements of a web page. Tags are enclosed in angle brackets (<>) and come in pairs: an opening tag and a closing tag. The content is placed between the opening and closing tags.

Here's an example of an HTML element:

SNIPPET

1<p>This is a paragraph.</p>

xxxxxxxxxx
 
const playerName = 'Kobe Bryant';
console.log(`The player's name is ${playerName}`);

Try this exercise. Fill in the missing part by typing it in.

In HTML, the '_' element is used to define a paragraph.

Write the missing line below.

HTML Structure

HTML documents have a specific structure that defines the organization and layout of content. The structure of an HTML document consists of several key elements:

<!DOCTYPE> declaration: Specifies the version of HTML that the document uses.
<html> element: The root element of the document.
<head> element: Contains meta information about the document, such as the title and character encoding.
<body> element: Contains the visible content of the document.

Here's an example of a basic HTML document structure:

SNIPPET

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title>My Web Page</title>
6  </head>
7  <body>
8    <h1>Welcome to My Web Page</h1>
9    <p>This is some example content.</p>
10  </body>
11</html>

In this example, we have a simple HTML document that includes a <DOCTYPE> declaration, the <html>, <head>, and <body> elements. The <head> element contains meta information like the page title, while the <body> element contains the visible content of the page.

Understanding the basic structure of an HTML document is important as it provides a solid foundation for building web pages. By organizing content within the appropriate HTML elements, we can create well-structured and semantically meaningful web pages.

Let's take a look at an example code snippet in JavaScript:

JAVASCRIPT

1const name = "John Doe";
2console.log(`Hello, ${name}!`);

This code snippet declares a variable name and assigns it the value "John Doe". Then, it uses template literals to log a greeting that includes the value of the name variable. When executed, the code will output Hello, John Doe! in the console.

xxxxxxxxxx
 
const name = "John Doe";
console.log(`Hello, ${name}!`);

Let's test your knowledge. Is this statement true or false?

HTML documents have a specific structure that defines the organization and layout of content.

Press true if you believe the statement is correct, or false otherwise.

HTML Tags and Elements

HTML (Hypertext Markup Language) is the standard markup language used to create the structure and content of web pages. It consists of a set of tags that define the different elements within a web page.

HTML tags are enclosed in angle brackets (<>). They usually come in pairs, with an opening tag and a closing tag. The content that goes between the opening and closing tags represents the element's content.

Here are some common HTML tags and elements used for content and formatting:

<h1>, <h2>, <h3>, etc.: Heading tags used to define headings of different levels.
<p>: Paragraph tag used to define paragraphs of text.
<ul>, <li>: Unordered list and list item tags used to create bullet point lists.
<ol>, <li>: Ordered list and list item tags used to create numbered lists.
<img>: Image tag used to embed images in a web page.

These are just a few examples of HTML tags and elements. There are many more available for different purposes, such as links, tables, forms, etc.

Let's take a look at an example of a simple HTML structure:

SNIPPET

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Web Page</title>
5  </head>
6  <body>
7    <header>
8      <h1>Welcome to My Web Page</h1>
9    </header>
10    <main>
11      <article>
12        <h2>About Me</h2>
13        <p>My name is John Doe and I am a software engineer.</p>
14      </article>
15      <article>
16        <h2>My Skills</h2>
17        <ul>
18          <li>HTML</li>
19          <li>CSS</li>
20          <li>JavaScript</li>
21        </ul>
22      </article>
23    </main>
24    <footer>
25      <p>&copy; 2021 My Web Page</p>
26    </footer>
27  </body>
28</html>

In this example, we have a basic HTML structure that includes heading tags (<h1>, <h2>), paragraph tags (<p>), list tags (<ul>, <li>), image tag (<img>), and more. This structure represents a simple web page with content about the author and their skills.

HTML tags and elements play a crucial role in organizing and formatting the content of a web page. By understanding and using these tags effectively, you can create well-structured and visually appealing web pages for your projects.

xxxxxxxxxx
console.log(html);
 
// Let's define a basic HTML structure
const html = `
<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Web Page</h1>
    </header>
    <main>
      <article>
        <h2>About Me</h2>
        <p>My name is John Doe and I am a software engineer.</p>
      </article>
      <article>
        <h2>My Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </article>
    </main>
    <footer>
      <p>&copy; 2021 My Web Page</p>
    </footer>
  </body>

Build your intuition. Click the correct answer from the options.

Which HTML tag is used to define a hyperlink?

Click the option that best answers the question.

<a>
<p>
<h1>
<img>

CSS Introduction

CSS (Cascading Style Sheets) is a programming language used to style and create visually appealing web pages. It is responsible for the design, layout, and presentation of a website's content. While HTML provides the structure of a web page, CSS enhances its appearance.

CSS works by selecting HTML elements and applying styles to them. Styles can be defined using CSS properties such as colors, fonts, margins, and more. These properties allow you to control various aspects of how elements are displayed on a web page.

To apply CSS styles to HTML elements, you can use the style attribute within the HTML tag or link an external CSS file to the HTML document.

SNIPPET

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Web Page</title>
5    <link rel="stylesheet" href="styles.css">
6  </head>
7  <body>
8    <h1>Welcome to My Web Page</h1>
9    <p>My name is John Doe and I am a software engineer.</p>
10  </body>
11</html>

In this example, the styles.css file contains the CSS styles that will be applied to the HTML elements of the web page.

CSS introduces a wide range of selectors that allow you to target specific elements for styling. Selectors can be based on element names, classes, IDs, attributes, and more. This flexibility gives you the power to customize the appearance of your web page according to your needs.

Once you have defined your CSS styles, you can use various techniques like inheritance, specificity, and cascading to control how styles are applied to elements.

CSS is an essential skill for frontend development. It allows developers to create stunning and responsive web designs. By mastering CSS, you can bring life to your web pages and create a visually appealing user experience.

xxxxxxxxxx
 
const player = "Kobe Bryant";
console.log(player);

Are you sure you're getting this? Is this statement true or false?

CSS stands for Cascading Style Sheets.

Press true if you believe the statement is correct, or false otherwise.

CSS Selectors

CSS selectors are an essential part of styling web pages. They allow you to target specific elements and apply styles to them. By understanding and using CSS selectors effectively, you can create visually appealing and well-designed web pages.

CSS selectors can be based on different criteria such as element names, classes, IDs, attributes, and more. Let's explore some commonly used CSS selectors:

Element selector: Selects all elements of a specific type.

SNIPPET

1p {
2  color: blue;
3}

Class selector: Selects all elements with a specific class.

SNIPPET

1.my-class {
2  font-weight: bold;
3}

ID selector: Selects a single element with a specific ID.

SNIPPET

1#my-id {
2  background-color: yellow;
3}

Attribute selector: Selects elements with a specific attribute or attribute value.

SNIPPET

1input[type="text"] {
2  border: 1px solid gray;
3}

Using combinations of these selectors, you can achieve more specific targeting of elements in your web page. For example, you can select all li elements within a ul element with a class of my-list:

SNIPPET

1ul.my-list li {
2  color: red;
3}

By mastering CSS selectors, you can easily customize the styling of individual elements or groups of elements on your web page. It's like having a powerful toolset to apply your creativity and bring your design ideas to life.

Let's put this knowledge into practice with an example. In the code snippet below, we have defined a CSS selector to make all h1 elements have a red text color:

SNIPPET

1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      h1 {
6        color: red;
7      }
8    </style>
9  </head>
10  <body>
11    <h1>Hello, World!</h1>
12  </body>
13</html>

When you run this code, you will see that the h1 element's text color is changed to red.

Now, let's apply what we have learned to a real-world scenario. Imagine you are working on a website for a basketball team. You want to highlight the player's name with a different background color based on their position. In this case, you can use class selectors to achieve this effect. Here's an example:

SNIPPET

1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      .guard {
6        background-color: yellow;
7      }
8      .forward {
9        background-color: green;
10      }
11      .center {
12        background-color: blue;
13      }
14    </style>
15  </head>
16  <body>
17    <h1 class="guard">Kobe Bryant</h1>
18    <h1 class="forward">LeBron James</h1>
19    <h1 class="center">Shaquille O'Neal</h1>
20  </body>
21</html>

In this example, the player's names are wrapped in h1 elements with different class names based on their positions. CSS selectors with corresponding styles are used to apply different background colors to each player's name.

With CSS selectors, you have the power to target and style specific elements on your web page. Play around with different selectors and experiment with various styles to create unique and appealing web designs.

xxxxxxxxxx
 
const firstName = "John";
const lastName = "Doe";
const fullName = `${firstName} ${lastName}`;
console.log(fullName);

Are you sure you're getting this? Is this statement true or false?

CSS selectors allow you to target specific elements and apply styles to them.

Press true if you believe the statement is correct, or false otherwise.

CSS Box Model

The CSS Box Model is a fundamental concept in web design and layout. It describes how elements on a web page are rendered and how their dimensions and spacing are calculated.

The box model consists of four main components:

Content: This is the actual content of the element, such as text, images, or other media.
Padding: The padding is the space between the content and the element's border. It can be set using the padding property in CSS.
Border: The border surrounds the element's padding and content. It can be customized using the border property in CSS.
Margin: The margin is the space outside the element's border. It provides spacing between elements. The margin property is used to set the margin value.

Here is an illustration of how the box model works:

Understanding the box model is crucial for controlling the layout and spacing of elements on a web page. By manipulating the padding, border, and margin properties, you can create visually appealing designs and control the spacing between elements.

Let's see an example of how the box model is used in CSS:

SNIPPET

1<div style="width: 200px; height: 100px; padding: 20px; border: 2px solid black; margin: 10px;">This is a box.</div>

In this example, we have a div element with a width of 200 pixels, height of 100 pixels, padding of 20 pixels, border of 2 pixels solid black, and margin of 10 pixels. The total width of the box including padding, border, and margin will be 244 pixels (200 + 220 + 22 + 2*10).

Knowing how the box model works is essential for creating responsive layouts and positioning elements on a web page. It allows you to control the size, spacing, and overall appearance of elements.

Now that you have an understanding of the CSS Box Model, let's move on to the next topic: CSS Layout. In the next lesson, we will explore different CSS layout techniques for creating responsive designs.

Let's test your knowledge. Fill in the missing part by typing it in.

The CSS Box Model consists of four main components: ___, ___, ___, and ___.

Write the missing line below.

CSS Layout

In web development, CSS layout refers to the way elements on a web page are positioned and arranged. It plays a crucial role in creating responsive and visually appealing designs.

There are several CSS layout techniques that you can use to achieve different design goals. Let's explore some of these techniques:

1. Float

The float property in CSS allows you to position an element to the left or right of its container. This is commonly used to create multi-column layouts. For example, you can use the following CSS code to float an element to the left:

SNIPPET

1.my-element {
2  float: left;
3}

2. Flexbox

Flexbox is a powerful layout module in CSS that provides a flexible way to arrange and align elements within a container. It allows you to create responsive and dynamic layouts with ease. Here's an example of how you can use flexbox to create a horizontal layout with centered and evenly spaced items:

1<div id="myElement">
2  <div>Item 1</div>
3  <div>Item 2</div>
4  <div>Item 3</div>
5</div>

3. Grid

CSS grid is a two-dimensional layout system that allows you to create complex and responsive layouts. It provides precise control over the placement and sizing of elements. Here's an example of how you can create a grid layout with three columns:

1<div id="myGrid">
2  <div>Column 1</div>
3  <div>Column 2</div>
4  <div>Column 3</div>
5</div>

These are just a few examples of CSS layout techniques. Depending on your design requirements, you can choose the most suitable layout technique for your project.

By understanding and using CSS layout techniques effectively, you can create visually appealing and responsive web designs. Experiment with different layout techniques to enhance your frontend development skills.

xxxxxxxxxx
 
const element = document.getElementById('myElement');
​
// Set the display property to flex
element.style.display = 'flex';
​
// Set the direction of the flex layout
element.style.flexDirection = 'row';
​
// Set the alignment of the flex items
element.style.alignItems = 'center';
​
// Set the spacing between the flex items
element.style.justifyContent = 'space-between';

Let's test your knowledge. Is this statement true or false?

Flexbox is a powerful layout module in CSS that provides a flexible way to arrange and align elements within a container.

Press true if you believe the statement is correct, or false otherwise.

CSS Flexbox

CSS Flexbox is a powerful layout module that provides a flexible way to arrange and align elements within a container. It is particularly useful for creating responsive designs and achieving complex layouts.

Flexbox works by dividing the available space within a container and distributing it among its child elements, known as flex items. This allows for easy positioning and alignment of elements, even when their sizes are dynamic or unknown.

To get started with Flexbox, you need to define a flex container by applying the display: flex; property to a parent element. Once an element becomes a flex container, it can control the layout of its child elements using various Flexbox properties.

Here's an example of how to create a simple flex container and add flex items using JavaScript:

SNIPPET

1<div id="container"></div>

JAVASCRIPT

1// Define a flex container
2const container = document.getElementById('container');
3container.style.display = 'flex';
4
5// Add flex items
6for (let i = 1; i <= 3; i++) {
7  const item = document.createElement('div');
8  item.textContent = `Item ${i}`;
9  container.appendChild(item);
10}

In this example, we create a div element with the id container and use JavaScript to define it as a flex container. We then add three flex items to the container.

To control the layout of flex items within a flex container, you can use properties such as flex-direction, justify-content, align-items, and align-content. These properties allow you to specify the direction, alignment, and spacing of flex items.

Flexbox provides a powerful way to create responsive and dynamic layouts. By mastering Flexbox, you can easily align elements, create complex grid systems, and build responsive designs.

Use Flexbox to create a responsive layout with three div elements inside a flex container. Experiment with different Flexbox properties to see how they affect the layout.

xxxxxxxxxx
 
const container = document.getElementById('container');
​
// Define a flex container
container.style.display = 'flex';
​
// Add flex items
for (let i = 1; i <= 3; i++) {
  const item = document.createElement('div');
  item.textContent = `Item ${i}`;
  item.style.backgroundColor = 'yellow';
  item.style.margin = '10px';
  container.appendChild(item);
}
​
// Apply flexbox layout
classList.add('flexbox');

Are you sure you're getting this? Fill in the missing part by typing it in.

Flexbox works by dividing the available space within a container and distributing it among its child elements, known as _.

Write the missing line below.

Generating complete for this lesson!

Introduction to HTML

Try this exercise. Fill in the missing part by typing it in.

HTML Structure

Let's test your knowledge. Is this statement true or false?

HTML Tags and Elements

Build your intuition. Click the correct answer from the options.

Click the option that best answers the question.

CSS Introduction

Are you sure you're getting this? Is this statement true or false?

CSS Selectors

Are you sure you're getting this? Is this statement true or false?

CSS Box Model

Let's test your knowledge. Fill in the missing part by typing it in.

CSS Layout

1. Float

2. Flexbox

3. Grid

Let's test your knowledge. Is this statement true or false?

CSS Flexbox

Are you sure you're getting this? Fill in the missing part by typing it in.

Programming Categories

Popular Lessons