Detailed Course Curriculum – QUBIT INSTITUTE

Introduction to Web Development

Course Outline

The Foundations of Web Development

Session 1: Understanding the Internet and Web Development

What is the Internet? How do websites work?
Overview of web development (frontend vs backend).
Introduction to HTML, CSS, and the role of browsers.
Setting up the coding environment (VS Code and browser tools).

Session 2: Getting Started with HTML

HTML syntax, elements, and attributes.
Creating your first HTML document: <!DOCTYPE html>, <html>, <head>, <body>.
Adding and structuring content using headings (<h1> to <h6>), paragraphs (<p>), and line breaks (<br>).

Basic HTML Elements

Session 3: Working with Text and Links

Formatting text: <strong>, <em>, <span>.
Adding hyperlinks with the <a> tag (absolute and relative links).
Introduction to anchor links (#section).

Session 4: Images, Lists, and Tables

Embedding images with <img> and its attributes (src, alt, width, height).
Creating ordered (<ol>) and unordered (<ul>) lists with <li>.
Introduction to tables: <table>, <tr>, <td>, <th>.

Advanced HTML Features

Session 5: Forms and Input Elements

Creating forms using <form>, <input>, <label>, <textarea>, <button>.
Different input types (text, email, password, checkbox, radio).
Adding a basic submit button.

Session 6: Multimedia Elements

Embedding videos using <video> and audio using <audio>.
Adding YouTube or external content with <iframe>.

CSS Basics

Session 7: Introduction to CSS

What is CSS, and how does it enhance HTML?
Methods to apply CSS: inline, internal, and external.
Writing basic CSS selectors and rules.

Session 8: Styling Text

Font properties: font-family, font-size, font-weight, color.
Text alignment (text-align), decoration (text-decoration), and line height.
Introduction to Google Fonts and importing fonts via CSS.

CSS Layout Basics

Session 9: The Box Model

Understanding the CSS box model: content, padding, border, and margin.
Adding and styling borders.
Controlling element spacing with padding and margins.

Session 10: Positioning and Display Properties

CSS positioning: static, relative, absolute, and fixed.
Using the display property: block, inline, and inline-block.
Using z-index to layer elements.

Advanced CSS Styling

Session 11: Backgrounds and Colors

Adding background colors and images.
Using gradients (linear and radial) for styling.
Working with transparency (opacity and rgba).

Session 12: Flexbox for Layouts

What is Flexbox?
Key Flexbox properties: justify-content, align-items, flex-direction.
Creating a basic navbar and grid layouts using Flexbox.

Responsive Web Design Principles

Session 13: Introduction to Media Queries

What is responsive design?
Writing CSS media queries for different screen sizes.
Creating a responsive layout with breakpoints (mobile-first design).

Session 14: Responsive Images and Grids

Making images responsive using max-width and height: auto.
Using percentage-based widths for flexible designs.
Introduction to CSS Grid layout for advanced responsiveness.

Interactivity with Pseudo-Classes

Session 15: Pseudo-Classes for Styling Interactivity

Introduction to pseudo-classes (:hover, :focus, :nth-child).
Styling buttons and links with hover effects.
Creating interactive navigation menus.

Session 16: CSS Transitions and Animations

Adding transitions for smooth hover effects (transition: all 0.3s ease).
Introduction to CSS animations with @keyframes.
Creating simple animations (e.g., fade-in, slide, bounce).

Semantic HTML and Accessibility

Session 17: Semantic HTML Elements

Introduction to semantic tags: <header>, <footer>, <main>, <section>, <article>.
Importance of semantic HTML for accessibility and SEO.

Session 18: Accessibility Basics

Adding alt attributes to images.
Using proper heading structures for screen readers.
Writing accessible forms with labels and placeholders.

Building Your First Website

Session 19: Planning Your Website

Brainstorming ideas for a personal project.
Creating a simple wireframe or design plan.

Session 20: Developing the Website Structure

Writing the HTML structure for your project.
Dividing the content into logical sections (header, main content, footer).

Designing and Enhancing the Website

Session 21: Applying CSS to Your Website

Linking an external CSS file.
Styling individual sections: header, footer, and content areas.

Session 22: Adding Finishing Touches

Adding images, links, and buttons.
Creating a consistent design with reusable classes.
Testing the website for responsiveness.

Finalizing and Showcasing Projects

Session 23: Debugging and Testing

Testing your website in multiple browsers.
Debugging common HTML and CSS issues.
Finalizing and organizing project files.

Session 24: Project Presentation and Feedback

Students present their final websites to the class.
Peer and instructor feedback.
Discuss next steps: introduction to JavaScript or advanced web design topics.

Additional Learning Materials

Tools: Visual Studio Code, Chrome DevTools.
Resources: FreeCodeCamp, W3Schools, MDN Web Docs.
References: Pre-made templates for practice, guided exercises, and CSS design examples.