WEB DESIGNING COURSE

Week 1: Introduction to Web Design

• What is web design vs web development?
• Understanding how websites work (browsers, servers, domains, hosting)
• Introduction to development tools (VS Code, browser DevTools)
• File structure & naming conventions
• Introduction to version control (Git basics)

Practical Tasks:

• Set up VS Code
• Explore live websites using DevTools

Week 2: HTML Essentials

• HTML structure & syntax
• Headings, paragraphs, links, images & lists
• Tables, forms, & multimedia elements
• Semantic HTML (header, footer, section, article)
• HTML5 best practices

Practical Tasks:

• Create a personal portfolio HTML page
• Build a contact form

Week 3: CSS (Cascading Style Sheet)

• CSS basics: selectors, properties, & values
• Internal, external, & inline CSS
• Colors, typography, & box model
• Padding, margin, & borders
• Using fonts & icons (Google fonts, Font awesome)

Practical Tasks:

• Style your HTML portfolio
• Re-create a simple landing page design

Week 4: Advanced CSS & Layout

• CSS Flexbox & Grid
• Responsive design with media queries
• Positioning (static, relative, absolute, fixed, sticky)
• Backgrounds, gradients, & transitions
• Introduction to CSS animations

Practical Tasks:

• Create a fully responsive homepage using flexbox/grid
• Add hover animations & transitions

Week 5: Introduction to UI/UX Design

• What is UI (user interface) & UX (user Experience)?
• Design principles: balance, contrast, alignment, proximity, & hierarchy
• Color psychology & typography in web design
• Wireframing & prototyping with Figma
• User flow & usability basics

Practical Tasks:

• Create a wireframe & mockup of a simple website in Figma

Week 6: JavaScript for Web Designers

• JavaScript basics: variables, data types, functions
• DOM (Document Object Model) manipulation
• Handling user events (clicks, forms, hover)
• Adding interactivity (menus, pop-ups, sliders)

Practical Tasks:

• Create an interactive navigation menu
• Build a simple image slider

Week 7: Responsive Web Design & Frameworks

• What is responsive design?
• Mobile-first approach
• Bootstrap framework basics
• Containers, grids, & responsive components
• Using icons & utility classes

Practical Tasks:

• Re-create a responsive portfolio using Bootstrap

Week 8: Design to Code Conversion

• How to convert Figma designs into real websites
• Exporting assets, colors, & fonts
• Building a webpage from a mockup
• Common design-to-code workflows

Practical Tasks:

• Convert your Figma homepage into a functional HTML/CSS/JS site

Week 9: Web Performance & SEO Basics

• Optimizing images & code
• Website speed & performance tools
• Basic SEO tags & structure
• Accessibility (A11y) & best practices
• Introduction to website analytics

Practical Tasks:

• Optimize an existing project for speed & accessibility

Week 10: WordPress for Web Designers

• Introduction to CMS (Content Management Systems)
• Setting up WordPress locally
• Installing themes & plugins
• Customizing pages with Elementor or Gutenberg
• Creating menus & pages

Practical Tasks:

• Build & customize a WordPress site for a business or portfolio

Week 11: Portfolio Development

• Creating your designer brand
• Building your online portfolio
• Writing case studies & project descriptions
• Creating a resume website
• Preparing for client or freelance work

Practical Tasks:

• Build your complete web designer portfolio website

Week 12: Final Project & Presentation

• Plan, design, & build a complete responsive website
• Incorporate all learned tools (HTML, CSS, JS, Figma, BOOTSTRAP, SEO)
• Peer review & instructor feedback
• Showcase & presentation

Practical Tasks:

• Final website project presentation