Syllabus for Website
Development Training Class
By Ranjit Shrestha
Module 1: Introduction to Web Development
Understanding the Web
● How websites work (Client-Server Model)
● Key technologies: HTML, CSS, JavaScript
Setting Up the Development Environment
● Installing and configuring a code editor (e.g., Visual Studio Code, Xampp)
● Browser Developer Tools overview
Introduction to Version Control
● Basic Git commands for beginners
Module 2: Basics of HTML
HTML Document Structure
● Basic structure: <!DOCTYPE html>, <html>, <head>, <body>
Core HTML Elements
● Text content: Headings (<h1> to <h6>), paragraphs (<p>), blockquotes (<blockquote>)
● Lists: Ordered (<ol>), unordered (<ul>), and description lists (<dl>)
● Links: Internal and external hyperlinks (<a> tag), anchor attributes (target, rel)
● Media: Adding images (<img>), embedding videos, and audio elements
● Tables: Creating tables with <table>, <tr>, <th>, <td>
HTML Forms and Inputs
● Creating forms with <form> tag
● Various input types: text, password, email, submit, etc.
● Form attributes: action, method, placeholder, required
● Form validation basics and accessibility considerations
Module 3: Basics of CSS
Introduction to CSS
● Understanding CSS syntax and structure
● Applying CSS: Inline, internal (in <style>), and external stylesheets
Selectors and Specificity
● Types of selectors: Element, class, ID, attribute, pseudoclasses
● Importance of specificity and the cascade in CSS
Styling Basics
● Text properties: color, fontsize, fontfamily, lineheight
● Box model: margin, border, padding, content
Background and Colors
● Background properties: background-color, background-image, background-repeat
● Using gradients: Linear and radial gradients
Units and Measurements
● Absolute units (px) vs. relative units (%, em, rem)
Module 4: Layout Techniques
Positioning Elements
● Position property: static, relative, absolute, fixed, sticky
● Z-index and stacking context
Flexbox Layout
● Introduction to Flexbox: display: flex
● Main axis vs. cross axis
● Flex properties: justifycontent, alignitems, flexdirection, flexwrap
● Practical exercises to build flexible layouts
CSS Grid Layout
● Grid container properties: display: grid, grid-template-columns, grid-template-rows
● Placing items: grid-column, grid-row
● Gap properties and responsive grid design
Responsive Design
● Media queries: Creating breakpoints for different screen sizes
● Mobile-first vs. desktop-first design strategies
Module 5: Tailwind CSS Essentials
● Getting Started with Tailwind CSS
● Setting up Tailwind in a project (CDN and PostCSS method)
● Overview of utility-first CSS
Applying Tailwind Classes
● Styling text, backgrounds, and borders using Tailwind classes
● Spacing and layout classes (m, p, w, h)
● Responsive design utilities (sm:, md:, lg:, xl: breakpoints)
Module 6: Advanced CSS Techniques
Pseudoclasses and Pseudo elements
● Hover effects (:hover), focus (:focus), active (:active)
● Styling with ::before and ::after pseudoelements
CSS Transitions and Animations
● Basics of transition property for smooth effects
● Creating keyframe animations with @keyframes
● Practical animations: Simple hover effects, loading spinners
CSS Variables
● Defining and using custom properties (var)
● Best practices for theming with CSS variables
Module 7: Web Design Best Practices
Accessibility Principles
● Why accessibility matters: WCAG standards
● Semantic HTML elements for better accessibility
● ARIA roles and attributes
SEO Best Practices
● Structuring content for SEO: Using <header>, <section>, <article>, <footer>
● Meta tags and social media previews (og: tags)
Cross browser Compatibility
● Tools for cross browser testing (e.g., BrowserStack)
● Common issues and CSS fallbacks
Module 8: Hands on Projects and Practical Exercises
Mini Projects
● Creating a personal portfolio page with navigation, images, and forms
● Building a responsive landing page with Tailwind CSS
Final Project
● Developing a multi page website integrating all key concepts
● Use of Flexbox and Grid layouts, responsive design, and Tailwind customization
