Take your first step into the world of Web Development
Course Summary
In this 8-week course, students will engage in three weekly sessions of 1.5 hours each, covering the fundamentals of web development. The course is structured around three key pillars: structuring, styling, and adding behavior to web pages. Each session is designed to be highly interactive, with a focus on practical, project-based learning, enabling students to build functional projects as they go. By the end of the course, students will have created a fully responsive and dynamic website from scratch. Additionally, there is an optional bonus workshop on React for those interested in further expanding their skills. Whether you’re a complete beginner or looking to strengthen your web development fundamentals, this course is structured to help you take your first big step toward becoming a web developer.
Week 1: HTML Basics and Structuring Web Pages
Class 1: Introduction to HTML Tags and Elements
- Overview of web development and the role of HTML
- Basic HTML syntax and structure
- Creating your first HTML file
- Text elements: headings, paragraphs, bold, italic, emphasis tags
- Lists: ordered, unordered, and nested lists
- Interactive Exercise: Create a simple web page with headings, paragraphs, and lists.
Class 2: Forms and Tables in HTML & Semantic Tags
- Creating basic forms (input, textarea, radio, checkbox, select)
- Structuring data with tables (rows, cells, headers)
- Introduction to semantic HTML (header, section, article, aside, footer)
- Interactive Exercise: Design a contact form and a table with student data.
Class 3: Structuring Content and Adding Media
- Using divs, spans, and sections to structure content
- Adding images, videos, and links
- Introduction to accessibility (alt attributes, aria-label)
- Project Start: Begin a personal webpage project with the content created in this week.
Week 2: CSS Basics – Styling Web Pages
Class 1: Introduction to CSS
- Understanding CSS and its role in styling
- Basic CSS syntax: selectors, properties, and values
- Inline, internal, and external CSS
- Integrating Fonts and Icons
- Interactive Exercise: Style the personal webpage created in Week 1 (colors, font sizes, margins).
Class 2: CSS Box Model and Layout
- Class 2: CSS Box Model and Layout
- Centering content with CSS
- Introduction to CSS Flexbox for layout design
- Interactive Exercise: Style a multi-column layout using Flexbox.
Class 3: CSS Layout and Positioning
- Deep dive into page layout techniques
- Positioning elements with position (static, relative, absolute, fixed, sticky)
- Interactive Exercise: Build a multi-section webpage with varied element positioning.
Week 3: Advanced CSS Techniques and First Project
Class 1: Advanced CSS - Classes, IDs, and Navigation Bars
- Classes and IDs for reusable styles
- Designing a responsive navigation bar
- Color theory and choosing color palettes
- Interactive Exercise: Create and style a navigation bar for the personal webpage.
Class 2: CSS Transitions and Animations
- Adding transitions to hover effects
- Introduction to keyframe animations
- Interactive Exercise: Implement hover effects and simple animations (e.g., fade-ins)
Class 3: Project – Implementing a Multi-Section Web Page
- Structuring and styling a multi-section page (home, about, services, contact)
- Testing for responsiveness
- Project Submission: Complete and submit the multi-section webpage.
Week 4: Tailwind CSS – Utility-First Styling + Responsive Web Page Project
Class 1: Introduction to Tailwind CSS
- Setting up Tailwind CSS in a project
- Basic utility-first styling (colors, spacing, typography)
- Interactive Exercise: Style a simple webpage using Tailwind utilities.
Class 2: Tailwind Layout and Responsive Design
- Flexbox and Grid layouts using Tailwind
- Mobile-first design principles
- Interactive Exercise: Implement a responsive layout using Tailwind Flexbox and Grid.
Class 3: Project – Building a Responsive Web Page
- Planning and structuring the project
- Creating a responsive portfolio page using Tailwind CSS
- Project Submission: Submit the responsive portfolio page
Week 5: JavaScript Basics and DOM Manipulation
Class 1: Introduction to JavaScript
- JavaScript syntax: variables, data types, operators
- Writing simple functions and event handlers
- Interactive Exercise: Add basic JavaScript to the portfolio page (button clicks, alerts).
Class 2: DOM Manipulation with JavaScript
- Accessing and modifying HTML elements with the DOM
- Adding and removing elements dynamically
- Interactive Exercise: Create a dynamic FAQ section using DOM manipulation.
Class 3: Project – Adding Interactivity to a Web Page
- Structuring a project for interactivity
- Implementing JavaScript to add dynamic content
- Project Update: Enhance the portfolio page with interactive elements (tabs, accordions).
Week 6: Advanced JavaScript and Project
Advanced JavaScript Concepts
- Arrays, objects, loops, and conditionals
- Handling form inputs and validations
- Interactive Exercise: Build a form validation script.
Class 2: Event Handling and Local Storage
- Working with different event types (click, scroll, submit)
- Storing and retrieving data using local storage
- Interactive Exercise: Implement a "dark mode" toggle with local storage.
Class 3: Project – Building a Complete Website (Part 1)
- Structuring and planning a multi-page website
- Creating headers, navigation bars, and sliders with JavaScript
- Project Start: Begin building a complete website (e.g., a business website)
Week 7: Final Project Implementation and Completion
Class 1: Building a Complete Website (Part 2)
- Adding content sections (team, testimonials, services)
- Integrating media (images, videos, sliders)
- Interactive Exercise: Implement smooth scrolling and transitions between sections.
Class 2: Finalizing the Website
- Ensuring responsiveness and cross-browser compatibility
- Testing the website for functionality and design consistency
- Project Finalization: Refine and finalize the complete website project.
Class 3: Course Wrap-Up and Presentations
- Presenting final projects
- Peer feedback and instructor review
- Discussing next steps and opportunities in web development.
Week 8: Optional Bonus Workshop – Introduction to React
Setting Up a React Environment
- Introduction to React and component-based architecture
- Setting up a development environment with Create React App
- Interactive Exercise: Build a simple "Hello World" React app
Class 2: Creating Your First React Component
- Understanding JSX and props in React components
- Interactive Exercise: Build a functional component that displays user input.
Class 3: React State Management and Final Project
- Managing state with useState in React
- Project: Build a small, interactive React app (e.g., a counter).
Program Details
Course duration
2 Months
Course Fee
15000 PKR
Class schedule
Monday, Wednesday, Friday
Timings
8:30PM-10:00PM
Programs
Reserve Your Seat
Meet The Trainer
Muqaddas Zahra
Software Engineer
