GST Technologies
WebDesign Training
🔹 Module 1: Introduction to Web Designing (1 Week)
- What is Web Design?
- Role of a Web Designer
- Website Types: Static vs Dynamic
- Understanding the Internet, Browsers & Servers
- Introduction to Front-end & Back-end
- Tools Required: Code Editors (VS Code), Browsers, Design Tools
🔹 Module 2: HTML5 – HyperText Markup Language (1.5 Weeks)
- Basic Structure of an HTML Page
- Doctype, <html>, <head>, <body>
- Elements, Tags, Attributes
- Headings, Paragraphs, Line Breaks, Horizontal Rules
- Text Formatting Tags (bold, italic, underline)
- Lists: Ordered, Unordered, Description Lists
- Links and Anchors
- Images and Image Attributes
- Tables: Rows, Columns, Headers
- Forms: Input, Textarea, Select, Checkbox, Radio
- Semantic HTML5 Tags (<header>, <footer>, <article>, <section>)
- Iframes and Embedding Videos/Maps
- HTML Entities & Symbols
🔹 Module 3: CSS3 – Cascading Style Sheets (2 Weeks)
- Introduction to CSS
- Types of CSS: Inline, Internal, External
- Syntax, Selectors, Properties
- Colors (Hex, RGB, HSL)
- Fonts & Google Fonts Integration
- Text Styling: Alignment, Decoration, Transformation, Spacing
- Backgrounds (color, image, gradient)
- Box Model (Margin, Padding, Border, Content)
- Display Property: Block, Inline, Inline-block, None
- Positioning: Static, Relative, Absolute, Fixed, Sticky
- Float and Clear
- Flexbox Layout
- CSS Grid Layout
- CSS Pseudo-classes and Pseudo-elements
- Transitions and Basic Animations
- Media Queries & Responsive Design
🔹 Module 4: JavaScript – Programming the Web (2 Weeks)
- Introduction to JavaScript
- Variables (var, let, const)
- Data Types and Operators
- Conditional Statements: if, else, switch
- Loops: for, while, do-while
- Functions and Events
- Arrays and Objects
- String & Array Methods
DOM Manipulation:
- getElementById, querySelector
- Changing HTML & CSS using JS
- Event Listeners (click, mouseover, keypress)
- Form Validation using JavaScript
🔹 Module 5: jQuery – Simplifying JavaScript (1 Week)
- What is jQuery?
- jQuery Syntax and Selectors
- Events (click, hover, focus, blur)
- Hide/Show, Toggle, Slide, Fade Effects
- DOM Manipulation using jQuery
- CSS Manipulation and Class Handling
- jQuery Animation (animate)
- AJAX with jQuery (basic introduction)
- Form Handling & Validation
🔹 Module 6: Bootstrap 5 – CSS Framework (1–1.5 Weeks)
- What is Bootstrap and Why Use It?
- Setting Up Bootstrap (CDN and Download)
- Bootstrap Grid System
- Responsive Layouts
- Utility Classes
Bootstrap Components:
- Navbar
- Buttons
- Cards
- Forms
- Modals
- Alerts
- Carousel
- Collapse
- Bootstrap Icons
- Creating a Responsive Website Using Bootstrap
🔹 Module 7: Real-World Project Development (2 Weeks)
- Project Planning and Wireframing
- Design Mockup with Figma (optional)
- Convert Design to HTML/CSS/JS
- Create:
- Personal Portfolio Website
- Product Landing Page
- Blog Template
- Implement Responsive Design
- Host on GitHub Pages or Netlify
🔹 Module 8: Deployment and Best Practices (1 Week)
- Introduction to Version Control (Git & GitHub)
- Basic Terminal Commands
- Pushing Projects to GitHub
- Free Hosting Platforms (GitHub Pages, Netlify)
- SEO Basics (Meta Tags, Titles, Alt Text)
- Accessibility & Web Standards (W3C Guidelines)
GST TECHNOLOGY
