Unit 2: Core Web Fundamentals

Welcome to Unit 2 of your web development adventure! In this unit, you’ll explore what makes websites work—from structure and style to interactivity. Get ready to learn the essentials behind every website you’ve ever used.

Lesson 2.1: What Makes the Web Tick?

Let’s break down the essential tools that bring websites to life.

The Web Development Trio

HTML (HyperText Markup Language)

HTML forms the backbone of any webpage. It tells the browser what to display—headings, paragraphs, images, and more. With HTML tags, you lay out the basic structure for your content.

CSS (Cascading Style Sheets)

CSS is where creativity meets code. It styles your HTML—deciding on colors, spacing, fonts, and layout to make your site visually appealing and accessible.

JavaScript

JavaScript adds brainpower to your pages. It allows you to create interactive elements, respond to user actions, and bring static content to life—everything from animations to real-time updates.

Lesson 2.2: Putting It All Together

Let’s see how HTML, CSS, and JavaScript combine to form a fully functional webpage.

Web Page Components

HTML Layout

Here’s a simple layout using HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Exploring web development basics.</p>
  </body>
</html>

CSS Styling

Now let’s add some style using CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #007acc;
  text-align: center;
}

p {
  color: #333333;
  font-size: 18px;
}

JavaScript Functionality

And here’s a simple script for interactivity:

document.addEventListener('DOMContentLoaded', () => {
  const title = document.querySelector('h1');

  title.addEventListener('mouseover', () => {
    title.style.color = '#e91e63';
  });

  title.addEventListener('mouseout', () => {
    title.style.color = '#007acc';
  });
});

Homework: Build and Personalize Your Web Page

Use what you’ve learned to create your very first custom web page!

Let’s Get Started

Preparing Your Workspace:
- • Log into GitHub and open your Codespaces environment.
- • Clone the project: jdl20515/nivaro_hw_2
Setting Up Live Server:
- • Click on the Extensions tab (four squares icon).
- • Install the "Live Server" extension.
Viewing Your Website:
- • Open the Files tab and find your index.html.
- • Right-click and choose "Open with Live Server" to launch it.

Customize Your Page

Make the page your own with these ideas:

Choose your favorite color for the background
Pick a readable and stylish font
Change the title to something unique
Write about something you’re passionate about

Submitting Your Work

When you’re done, turn in your finished website on Schoology for feedback!

Was this page helpful?