Syllabus
Day 1: Introduction to Web Development & HTML Basics
- Overview of Web Development: Frontend vs Backend, Role of HTML, CSS, and JS.
- HTML Basics:
- Basic HTML structure (
<!DOCTYPE html>, <html>, <head>, <body>)
- Understanding elements, tags, and attributes
- Text formatting tags (
<h1> - <h6>, <p>, <br>, <hr>)
- Links and lists (
<a>, <ul>, <ol>, <li>)
- Images (
<img>), adding attributes like alt, title, and src
- Basic Document Structure: The importance of the
<title> tag.
Day 2: Advanced HTML & Introduction to CSS
- Advanced HTML:
- Semantic tags (
<header>, <footer>, <section>, <article>, <aside>, etc.)
- Tables (
<table>, <tr>, <td>, <th>, colspan, rowspan)
- Forms and form elements (
<input>, <textarea>, <select>, <button>, validation attributes)
- CSS Introduction:
- What is CSS? How to link CSS to HTML (internal, external, inline)
- Selectors, properties, and values (e.g., color, font-size)
- Basic layout and positioning (margin, padding, border, width, height)
Day 3: CSS Styling & Layout Techniques
- Deep Dive into CSS:
- Colors, Backgrounds, Borders
- Fonts and Typography (
font-family, font-size, line-height)
- CSS Box Model (content, padding, border, margin)
- Positioning elements (relative, absolute, fixed, static, sticky)
- Flexbox layout basics (container properties like
display: flex, justify-content, align-items, flex-direction)
- Introduction to Responsive Design (media queries)
Day 4: CSS Advanced: Grid & Responsive Design
- CSS Grid:
- Introduction to CSS Grid
- Defining rows and columns (
grid-template-rows, grid-template-columns)
- Placing elements on the grid (
grid-area, grid-row, grid-column)
- Responsive Design:
- Media Queries
- Designing for different screen sizes (mobile, tablet, desktop)
- Introduction to Frameworks like Bootstrap (optional, depending on the audience)
Day 5: Introduction to JavaScript: Basics & DOM Manipulation