Week 1: Introduction to Web Development

Lesson 1: Overview of Web Development

• Description: Introduction to the roles of frontend and backend development.

• Content: What is web development, browser/server architecture.

• Exercises: Explore popular websites and identify frontend and backend elements.

Lesson 2: Setting Up Your Environment

• Description: Getting your computer ready for web development.

• Content: Installing necessary software (IDE, browser, Git).

• Exercises: Install Visual Studio Code, set up a GitHub account.

Week 2: HTML Basics

Lesson 3: Introduction to HTML

• Description: Basics of HTML and building blocks of web pages.

• Content: Tags, elements, attributes, and document structure.

• Exercises: Create a simple HTML page with headings, paragraphs, and links.

Exercises

Create a Basic Web Page:

Objective: Construct a simple HTML page with the basic structure (<!DOCTYPE>, , , ).

Requirements:

Title the page "My First Web Page".

Include a header and a paragraph describing what you hope to learn in this course.

Using Lists:

Objective: Create an HTML document that uses ordered and unordered lists.

Requirements:

Use an unordered list to name your favorite three foods. Use an ordered list to outline your daily morning routine.

Link Between Pages:

Objective: Create two HTML pages that link to each other.

Requirements:

First page titled "Home Page" with a link to the second page. Second page titled "Contact Page" with a link back to the first page.

Embedding Images:

Objective: Create an HTML page that includes at least three images with captions.

Requirements:

Each image must have an alt text description. Include a caption under each image using the <figcaption> element within a <figure> block.

Create a Table:

Objective: Construct a page with a table.

Requirements: The table should have at least 3 columns and 4 rows. Include headings for each column and fill the rows with content of your choice.

Lesson 4: Advanced HTML

• Description: Deeper into HTML features.

• Content: Tables, forms, semantic HTML.

• Exercises: Construct a form with inputs for a user profile.

Advanced Exercises

Complex Table Layout

Objective: Create an HTML document with a table that uses row and column spans.

Requirements:

The table should represent a weekly class schedule, spanning across days (columns) and class periods (rows). Utilize colspan and rowspan to denote classes that extend over multiple periods or days.

Nested Lists:

Objective: Design a web page that includes nested lists to display a structured family tree.

Requirements: Use both ordered and unordered lists, nested at least three levels deep. Include at least three generations in the family tree.

Form with Validation:

Objective: Create an HTML form that includes validation requirements.

Requirements: Include fields for name, email, password, and age. Use HTML5 validation to ensure the email is in the correct format, the password is at least 8 characters long, and age is a number.

Multimedia Integration:

Objective: Integrate audio and video into an HTML document.

Requirements: Include one video and one audio file. Ensure both media elements have controls and are set to not autoplay when the page loads.

HTML Page Using All Semantic Elements:

Objective: Develop a single HTML page that utilizes all the semantic elements (<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>).

Requirements: Create a mock-up of a blog page that includes an article, navigation links, information about the author in an aside, and comments in a details/summary setup.

These exercises are designed to progressively enhance the skills of students from understanding the basics to applying HTML in more complex web development scenarios. They will get hands-on practice with a variety of HTML elements and structures, preparing them for more advanced web development tasks.

Week 3: CSS Fundamentals

Lesson 5: Styling with CSS

• Description: Introduction to CSS and how it enhances HTML.

• Content: Selectors, properties, values, and basic styling.

• Exercises: Style the HTML page created in previous

Lessons.

Lesson 6: Layouts and Responsiveness

• Description: Advanced CSS techniques for responsive design.

• Content: Flexbox, Grid, media queries.

• Exercises: Make the user profile page responsive.

Week 4: JavaScript Essentials

Lesson 7: Basics of JavaScript

• Description: Fundamentals of JavaScript as a scripting language.

• Content: Variables, data types, functions, DOM manipulation.

• Exercises: Add interactive alerts to the HTML forms.

Lesson 8: JavaScript – Events and Error Handling

• Description: Handling user interactions and errors in JavaScript.

• Content: Event listeners, error handling techniques.

• Exercises: Create interactive forms that validate user input and display messages.

Week 5: Advanced JavaScript and APIs

Lesson 9: Using APIs with JavaScript

• Description: Fetching data from APIs.

• Content: AJAX, JSON, Fetch API.

• Exercises: Connect to a public API and display data on your page.

Lesson 10: Asynchronous JavaScript

• Description: Advanced JavaScript operations.

• Content: Promises, async/await.

• Exercises: Modify the API connection to use async/await.

Week 6: Python for Backend Development

Lesson 11: Introduction to Python

• Description: Basics of Python programming.

• Content: Syntax, variables, data structures, loops, and conditionals.

• Exercises: Write a Python script that reads and processes user data.

Lesson 12: Building a Simple API with Django

• Description: Creating backend services with Python.

• Content: Flask framework, routing, HTTP methods.

• Exercises: Develop a simple API to handle CRUD operations for user data.

Week 7: PHP for Backend Development

Lesson 13: PHP Basics

• Description: Introduction to PHP for server-side scripting.

• Content: Syntax, variables, arrays, control structures.

• Exercises: Create a simple PHP application that handles form submissions.

Lesson 14: Integrating PHP with HTML

• Description: Dynamic web pages with PHP.

• Content: Embedding PHP in HTML, working with forms and data.

• Exercises: Build a web page that displays submitted form data on the same page.

Week 8: Introduction to Databases

Lesson 15: Working with Databases

• Description: Fundamentals of using databases in web development.

• Content: Database basics, SQL, integrating databases with Python/PHP.

• Exercises: Set up a SQLite database and perform basic CRUD operations from PHP.

Week 9-10: Programming Languages

Lesson 16: Introduction to C Programming

• Description: Basics of C programming language.

• Content: Syntax, data types, functions, pointers.

• Exercises: Write simple C programs like a calculator.

Lesson 17: Shell Scripting

• Description: Automating tasks using shell scripts.

• Content: Basic commands, script writing, automation concepts.

• Exercises: Write a script to automate setup processes for a web project.

Week 11-12: Capstone Project

Lessons 18-24: Building and Deploying a Complete Website

• Description: Apply all learned skills to build a complete website.

• Content: Planning, development, testing, and deployment of a web project.

• Exercises: Each student develops their own project, with milestones for frontend, backend, and database integration. This course plan should provide a solid foundation in web development, covering both the theoretical aspects and practical skills necessary to start building real-world web applications.