Scribd
Upload
22 views5 pages

Syllabus For Website Development Training Class

Sy

Uploaded by

rambabu mahato
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views5 pages

Syllabus For Website Development Training Class

Sy

Uploaded by

rambabu mahato
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like