Web Development course

Week HTML, CSS, and JavaScript Course

This repository contains the materials and assignments for a 3-week HTML, CSS, and JavaScript course.

Week 1: Introduction to HTML

HTML Basics

• Topics: Understanding HTML structure, Tags, elements, and attributes.
• Assignment: Create a basic HTML document with headings, paragraphs, and at least two images.
• Link to Assignment

HTML Lists and Links

• Topics: Ordered and unordered lists, Embedding links.
• Assignment: Create a webpage that includes an ordered list of your favorite movies and an unordered list of hobbies, with links to their respective Wikipedia pages.
• Link to Assignment

HTML Forms and Input Elements

• Topics: Form elements, Types of inputs.
• Assignment: Create a contact form with fields for name, email, message, and a submit button.
• Link to Assignment

Semantic HTML

• Topics: Understanding semantic tags, Importance of semantic HTML.
• Assignment: Redesign the basic HTML document from Day 1 using semantic HTML tags.
• Link to Assignment

Multimedia Elements

• Topics: Embedding multimedia elements.
• Assignment: Create a webpage that includes an embedded YouTube video, an audio file, and a description.
• Link to Assignment

Week 2: Introduction to CSS

DCSS Basics

• Topics: Inline, internal, and external CSS, CSS syntax.
• Assignment: Apply basic CSS styling to your contact form from Week 1, Day 3.
• Link to Assignment

Styling Text and Containers

• Topics: Font properties, Text properties, Box model.
• Assignment: Style a web page with custom fonts, text alignment, and a defined container using box model properties.
• Link to Assignment

CSS Layouts

• Topics: Display properties, Positioning, Flexbox basics.
• Assignment: Create a flexbox-based layout for a navigation bar and a main content area with a sidebar.
• Link to Assignment

Advanced CSS Selectors and Pseudo-elements

• Topics: Advanced selectors, Pseudo-classes, Pseudo-elements.
• Assignment: Enhance your landing page's navigation bar with hover effects and pseudo-elements for additional styling.
• Link to Assignment

Responsive Design

• Topics: Media queries, Responsive units, Mobile-first design approach.
• Assignment: Make your landing page responsive with media queries.
• Link to Assignment

Week 3: Introduction to JavaScript

JavaScript Basics

• Topics: Variables, Data types, Basic operators and expressions.
• Assignment: Write a JavaScript code to perform basic arithmetic operations and display the results on a webpage.
• Link to Assignment

Control Structures and Functions

• Topics: Conditional statements, Loops, Functions.
• Assignment: Create a JavaScript function that takes an array of numbers and returns the maximum value.
• Link to Assignment

DOM Manipulation

• Topics: Selecting elements, Modifying content and styles, Event listeners.
• Assignment: Create an interactive contact form with JavaScript validation.
• Link to Assignment

Advanced JavaScript

• Topics: Object-oriented JavaScript, Intro to ES6 features.
• Assignment: Refactor the contact form validation using ES6 features.
• Link to Assignment

Project Integration and Final Touches

• Topics: Integrating HTML, CSS, and JavaScript, Debugging and performance optimization.
• Assignment: Complete the landing page project.
• Link to Assignment

Final Project Submission

Final Landing Page Requirements

• Header with navigation
• Hero section with image and call to action
• Feature section
• Contact form
• Footer
• Responsive design

Submission Checklist

• Ensure all assignments are completed.
• Push the final project to this GitHub repository.
• Submit the repository link and a hosted version.