FullStackCamp | Lesson 1: Introduction to HTML and CSS

Welcome to the first lesson of our HTML/CSS course! In this part, we’ll introduce you to the basics of HTML and CSS, their roles in web development, and why they are essential for creating websites.

Table of Contents

HTML and CSS: A Brief Overview

HTML (Hypertext Markup Language) is the standard markup language used to structure content on the web. It consists of a series of elements, such as headings, paragraphs, lists, and images, that are used to create the building blocks of a webpage. These elements are represented by tags, which define the type of content and its purpose.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and formatting of a document written in HTML. CSS allows you to control various visual aspects of your webpage, such as colors, fonts, layout, and responsiveness. By separating the content (HTML) from the presentation (CSS), you can easily maintain and update the design without affecting the underlying structure.

Code Example:

To give you an idea of how HTML and CSS work together, let’s look at a simple example. Here’s a basic HTML document with some content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to My Webpage</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

Now let’s add some CSS to style our content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Webpage</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightgray;
    }

    h1 {
      color: darkblue;
    }

    p {
      color: darkgreen;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Webpage</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

In this example, we added a <style> element inside the <head> section of the HTML document. This is one way to include CSS in your HTML file, called internal CSS. The CSS code defines the font family, background color, and text color for the <body>, <h1>, and <p> elements.

Actionable Work:

To get started with HTML and CSS, try creating your own basic HTML document using the example above as a guide. Save the file with a “.html” extension (e.g., “my_first_webpage.html”) and open it in your favorite web browser to see the result.

Experiment with different HTML elements, such as headings (<h2>, <h3>), lists (<ul>, <ol>), and images (<img>).
Modify the CSS to change the appearance of your elements by adjusting properties like font-size, background-color, and border.

In the next part of Lesson 1, we’ll delve into the structure of an HTML document and how to create a simple HTML page.