Front-End Web Development Academy

HTML - HyperText Markup Language

Lesson 1: Introduction to HTML

HTML is the standard markup language for creating web pages. It structures the content using elements called tags.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Explanation:

<!DOCTYPE html>: Declares the document as HTML5.
<html lang="en">: Root element, with language attribute.
<head>: Contains meta-information (not displayed).
<body>: Contains the content visible to users.
<h1>: Main heading. <p>: Paragraph text.

Exercise:

Create a new HTML file.
Add your name as a heading.
Add a short paragraph about yourself.

Lesson 2: Lists, Links, and Images

<h2>My Favorite Websites</h2>
<ul>
  <li><a href="https://github.com">GitHub</a></li>
  <li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
</ul>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Explanation:

<ul>: Unordered list. <li>: List item.
<a href="">: Anchor (link) to other sites.
<img src="" alt="">: Displays an image with a description.

Exercise:

Create a list of your favorite programming resources with links.
Add an image of your choice with an appropriate alt text.

CSS - Cascading Style Sheets

Lesson 1: Styling Text and Layout

body {
  font-family: Arial, sans-serif;
  background-color: #f6f8fa;
  color: #222;
}

h1 {
  color: #0366d6;
  text-align: center;
}

p {
  line-height: 1.6;
}

Explanation:

font-family: Sets the font type.
background-color: Sets the background color.
color: Sets the text color.
text-align: Centers the heading.
line-height: Spacing between lines for readability.

Exercise:

Change the background color to your favorite color.
Make all paragraphs have italic text.
Center all images on the page.

Lesson 2: Box Model & Responsive Design

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Explanation:

width, margin, padding: Control size and spacing.
border: Adds a border.
box-sizing: border-box: Includes padding and border in width calculation.
@media: Responsive design for screens up to 600px wide.

Exercise:

Apply the container class to your main content.
Test your page on mobile and desktop — see how it adapts!

JavaScript - Programming the Web

Lesson 1: Basic Interactivity

function greetUser() {
  const name = prompt("What is your name?");
  alert("Hello, " + name + "!");
}
greetUser();

Explanation:

function greetUser(): Defines a function.
prompt(): Asks the user for input.
alert(): Shows a message box.
Functions make code reusable and organized.

Exercise:

Create a function that asks for the user's favorite programming language and displays it in an alert.

Lesson 2: DOM Manipulation

// HTML: <button id="changeColor">Change Background</button>

document.getElementById("changeColor").onclick = function() {
  document.body.style.backgroundColor = "#ffe066";
};

Explanation:

document.getElementById(): Selects an HTML element by its ID.
onclick: Attaches a click event handler.
document.body.style.backgroundColor: Changes background color dynamically.

Exercise:

Add a button to your HTML page to change the background to a random color when clicked.