Day 1: Introduction to Web Development & HTML Basics
Objective: Gain an understanding of web development and get introduced to HTML.
Content:
- 15 minutes: What is web development? Understanding the different roles involved.
- 20 minutes: Introduction to HTML: The language of webpages. Exploring the basic structure of an HTML document (tags, elements, attributes).
- 25 minutes: Hands-on Exercise: Creating your first HTML file using a text editor. Adding basic elements like headings, paragraphs, and an image.
Day 2: Working with Text & Headings
Objective: Learn to format text and create links in HTML.
Content:
- 15 minutes: Formatting text with different tags (headings, paragraphs, bold, italics, lists).
- 20 minutes: Adding links to your webpage. Understanding internal and external links, target="_blank".
- 25 minutes: Hands-on Exercise: Styling your text elements and incorporating links. Experimenting with different font sizes and colours.
Day 3: Building Lists & Tables
Objective: Explore the creation of structured content using lists and tables.
Content:
- 15 minutes: Creating ordered and unordered lists for structured content. Understanding nested lists.
- 20 minutes: Using tables for presenting data in a clear and organized way. Understanding rows, columns, and basic table formatting.
- 25 minutes: Hands-on Exercise: Implementing lists and tables in your webpage. Adding content and styling them with borders and background colours.
Day 4: Introduction to CSS
Objective: Understand the role of CSS in web design and learn basic syntax.
Content:
- 15 minutes: Understanding the role of CSS in web design. Separating content (HTML) from presentation (CSS).
- 20 minutes: Learning basic CSS syntax and selectors. Targeting elements by ID and class.
- 25 minutes: Hands-on Exercise: Applying CSS styles to your webpage elements. Changing text colour, background colour, and adding borders.
Day 5: Advanced CSS Styling
Objective: Explore advanced CSS techniques for styling and positioning elements.
Content:
- 15 minutes: Working with layouts and positioning elements. Understanding basic positioning concepts like static, absolute, and relative.
- 20 minutes: Styling Hyperlinks and Font-Family.
- 25 minutes: Hands-on Exercise: Experimenting with advanced CSS techniques like margins, padding.
Day 6: Adv CSS Styling (Cont…) / Project Planning & Development
Objective: Dive deeper into CSS with flexbox and start planning the final project.
Content:
- 15 minutes: Intro to Flexbox.
- 30 minutes: Working with Flexbox.
-
15 minutes:
- Introduction to Project Planning
- Introduction to the website project brief.
- Discussing different website ideas and choosing a theme.
Day 7: Wrap-up & Project Submission
Objective: Recap key concepts, address final questions, and provide project submission instructions.
Content:
- 15 minutes: Recap of key concepts learned throughout the workshop.
- 30 minutes: Q&A session and addressing any final questions from participants.
- 15 minutes: Project submission instructions and timeline. Participants are given 2-3 days to submit their completed website.
Project Guidelines
- Your website should showcase your understanding of HTML and CSS concepts covered in the workshop.
- You can choose any theme or topic of your interest for the website (e.g., personal portfolio, hobby page, fictional product landing page).
- Focus on creating a visually appealing and user-friendly experience.
- Be creative and experiment with different techniques learned throughout the workshop.