-
HTML Basics:
- Introduction to HTML (HyperText Markup Language)
- Understanding the structure of an HTML document (DOCTYPE declaration,
<html>,<head>,<title>,<body>)
-
HTML Elements:
- Heading elements (
<h1>,<h2>, ...,<h6>) - Paragraph element (
<p>) - List elements (
<ul>,<ol>,<li>) - Anchor element (
<a>) for links - Container elements (
<div>,<span>)
- Heading elements (
-
Text Formatting:
- Bold (
<b>) and Italic (<i>) elements - Line breaks (
<br>) - Horizontal rule (
<hr>)
- Bold (
-
Images:
- Adding images with the
<img>element
- Adding images with the
-
Links:
- Creating hyperlinks using the
<a>element
- Creating hyperlinks using the
-
Attributes:
- Understanding attributes and how they modify element behavior (e.g.,
srcandaltin<img>,hrefin<a>)
- Understanding attributes and how they modify element behavior (e.g.,
-
Mini-Project: Create a Personal Profile Page 📝
- Include a heading, paragraphs with information about themselves, a list of hobbies or interests, and links to their social media profiles.
-
Learning Objectives:
- Introduce Cascading Style Sheets (CSS) for webpage styling.
- Cover fundamental CSS properties and concepts.
-
Topics to Cover:
- Selectors (element, class, ID)
- Styling properties (color, background-color, font-size, etc.)
- Box model (margin, padding, border)
- Positioning (static, relative, absolute)
- Display (block, inline, inline-block)
-
Activities:
- Provide tutorials and hands-on exercises for each topic.
- Encourage students to create simple web pages and apply CSS styles.
-
Learning Objectives:
- Understand the utility-first approach of Tailwind CSS.
- Learn how to rapidly style elements using Tailwind classes.
-
Topics to Cover:
- Understanding Tailwind's utility-first approach
- Installing Tailwind CSS in a project
- Applying Tailwind classes for styling
-
Activities:
- Walk through examples of using Tailwind CSS for rapid styling.
- Guide students in restyling their personal profile page using Tailwind CSS.
-
JavaScript Basics:
- Variables (
let,const) - Data types (string, number, boolean)
- Operators (arithmetic, comparison)
- Conditionals (
if,else,switch) - Loops (
for,while)
- Variables (
-
DOM Manipulation:
- Accessing and modifying HTML elements using JavaScript
- Event handling (e.g.,
addEventListener)
-
Functions:
- Declaring and calling functions
- Parameters and return values
-
Mini-Project: Interactive Quiz Game 🎮
- Use JavaScript to build a simple quiz where users can select answers and receive feedback.
-
Putting it All Together:
- Combining HTML, Tailwind CSS, and JavaScript to create a complete project
-
Creativity and Problem Solving:
- Encourage students to add creative touches and solve problems independently
-
Mini-Project: Portfolio Website using Tailwind CSS 🖥️
- Students will use HTML, Tailwind CSS, and JavaScript to create a polished portfolio website showcasing their work and skills.
By the end of the roadmap, you should have a great knowledge about the basics of the web Development. 🌐
