Objective:
By the end of this course, students will expand their knowledge of HTML and CSS to create more structured, styled, and interactive web pages. They will learn advanced HTML elements, CSS properties, and web design techniques.
Duration: 8 Lessons
Lesson 1: Review of Basic HTML & Introduction to Advanced HTML Elements
Objective: Refresh basic HTML tags and introduce intermediate-level HTML elements.
-
Key Concepts: Recap of
<html>,<head>,<body>,<h1> - <h6>,<p>,<a>,<img>. -
New Concepts: Forms (
<form>,<input>,<label>), Lists (<ul>,<ol>,<li>), Tables (<table>,<tr>,<td>).
Activities:
- Review: Recap creating a basic webpage with headings, paragraphs, and images.
- Introduction: Explain forms, lists, and tables. Demonstrate how to create a simple form with text inputs and labels.
- Task: Students create a webpage that includes a list of favorite things, a table with some data, and a basic form to collect user info (name and email).
Homework: Finish the webpage with additional form elements (checkboxes, radio buttons, etc.).
Lesson 2: Introduction to CSS
Objective: Introduce CSS and how it styles HTML elements.
- Key Concepts: CSS syntax, selectors, properties, inline vs. internal CSS.
Activities:
- Explanation: What is CSS? Discuss how it is used to change colors, fonts, and layouts.
- Task: Create a simple webpage and use inline CSS to change the background color, font size, and text color of headings and paragraphs.
Homework: Modify the webpage by changing the style of each element using inline CSS.
Lesson 3: Internal CSS and Layouts
Objective: Understand how to use internal CSS to create structured layouts.
-
Key Concepts: Internal CSS (using
<style>tag), box model (padding, margin, border).
Activities:
- Explanation: Explain the difference between inline and internal CSS, and introduce the box model.
- Task: Create a webpage that includes a simple navigation bar, a main content area, and a footer. Use internal CSS to adjust spacing and layout.
Homework: Customize the webpage by adjusting the padding, margins, and borders of different sections.
Lesson 4: CSS Classes and IDs
Objective: Learn how to style elements using CSS classes and IDs.
-
Key Concepts: Difference between classes (
.classname) and IDs (#idname), how to apply them to HTML elements.
Activities:
- Explanation: Introduce the concept of classes and IDs in CSS, and when to use them.
- Task: Create a webpage with different sections (header, main content, footer) and style each section using CSS classes. Use IDs for specific elements like buttons or forms.
Homework: Add new sections to the webpage and style them using unique classes and IDs.
Lesson 5: Responsive Design with CSS
Objective: Introduce the concept of responsive web design and how to create web pages that work on different screen sizes.
- Key Concepts: Media queries, percentages vs. pixels, responsive layouts.
Activities:
- Explanation: Discuss the importance of responsive design. Introduce media queries and explain how they allow the webpage to adapt to different screen sizes.
- Task: Students create a simple webpage that adjusts its layout based on the screen width (e.g., change the background color or font size on smaller screens).
Homework: Improve the responsive design of their webpage by adjusting the layout and text size for mobile devices.
Lesson 6: Adding Links, Images, and Backgrounds
Objective: Learn how to add links, images, and background images to web pages.
-
Key Concepts: Anchor tag (
<a>), image tag (<img>), background images using CSS.
Activities:
-
Explanation: Show how to add internal and external links using the
<a>tag, and how to display images using the<img>tag. Introduce how to add background images in CSS. - Task: Create a webpage with links to other pages or external sites. Add images and style the page with a background image or color.
Homework: Create a webpage with a gallery of images and a navigation menu using links.
Lesson 7: Advanced CSS Styling
Objective: Explore more advanced CSS styling techniques, including pseudo-classes and positioning.
-
Key Concepts: Pseudo-classes (
:hover,:active), positioning (absolute, relative, fixed).
Activities:
- Explanation: Explain how pseudo-classes work to change styles when an event happens (e.g., mouse hover). Introduce different positioning methods.
- Task: Create a webpage with interactive buttons that change color when hovered over. Use positioning to place elements like a sticky footer or a sidebar.
Homework: Experiment with pseudo-classes and positioning by adding animations or interactive features.
Lesson 8: Final Project - Building a Personal Website
Objective: Apply everything learned to create a simple personal website.
- Key Concepts: Combining HTML structure, CSS for styling, media queries for responsiveness.
Activities:
- Explanation: Discuss how to structure a personal website with sections like "About Me," "My Projects," and "Contact."
-
Task: Students start building their personal website using everything learned (HTML structure, CSS styling, responsiveness). The website should include:
- A navigation bar.
- At least 3 sections (e.g., About Me, Gallery, Contact).
- Responsive design.
Homework: Continue working on the personal website and polish it for presentation.
Assessment:
- Project Completion: Has the student successfully created a webpage with HTML and CSS?
- Creativity: Is the website visually appealing and well-structured?
- Understanding of Concepts: Does the student demonstrate an understanding of key concepts like classes/IDs, positioning, and responsive design?
- Presentation Skills: Can the student explain how their website works and the techniques they used?
This intermediate web development course introduces students to more complex HTML elements and CSS properties, giving them the skills to design fully structured and visually appealing websites. The final project encourages them to apply their knowledge and creativity to build their own personal web page.
Top comments (0)