Lesson 2: Front-End Development Basics

✅ Objectives

By the end of this lesson, you will be able to:

• Understand the role of HTML, CSS, and JavaScript in building websites.

• Create a simple web page using HTML and CSS.

• Apply basic responsive design and accessibility techniques.

📘 Lesson Content

🔹 What is Front-End Development?

• It deals with the visual part of a website — what users see and interact with.

• Key technologies: HTML, CSS, and JavaScript.

🔹 HTML (HyperText Markup Language)

• It is used to structure content on the web.

• Common HTML tags:

  • <h1> to <h6> – Headings

  • <p> – Paragraphs

  • <a> – Links

  • <ul>, <ol>, <li> – Lists

  • <img> – Images

  • <form> – Forms (e.g., login, contact forms)

🔹 CSS (Cascading Style Sheets)

• Used to style HTML elements (colors, fonts, layout).

• Key concepts:

  • Selectors (target elements to style)

  • Colors and Fonts

  • Box Model (margin, border, padding, content)

  • Layout techniques (flexbox, grid)

🔹 JavaScript (JS)

• Adds interactivity to web pages.

• Examples:

  • Dropdown menus

  • Image sliders

  • Form validation

🔹 Responsive Design

• Makes websites look good on all devices (phones, tablets, desktops).

• Use media queries to change layout depending on screen size:

  css

  CopyEdit

  @media (max-width: 600px) {
body {
font-size: 14px;
}
}


🔹 Basic Accessibility

• Ensures websites are usable for everyone, including people with disabilities.

• Good practices:

  • Use alt text for images.

  • Use proper heading levels (<h1>, <h2>, etc.).

  • Ensure good color contrast.

📝 Activities and Assessments

1. Build a Simple Webpage

• Create a webpage that includes:

  • Your name as a heading.

  • An image of yourself or something you like.

  • A short “About Me” paragraph.

2. Code Challenge

• Style the webpage using CSS:

  • Change background color.

  • Set a font family and size.

  • Add spacing and layout with margins/padding.

3. Quick Quiz

• What does the <a> tag do?

• What is the CSS box model?

• How do you make a website responsive