This document outlines a course on web design and development that covers HTML, CSS, and WordPress. The 40 hour course includes 4 hours on HTML, 10 hours on CSS, 10 hours on WordPress, and 16 hours of hands-on lab work. The HTML section covers basic tags, attributes, and page layout. The CSS section covers color, background, box model, fonts, positioning, and responsive design. The WordPress section teaches how to install themes, plugins, and build a static 6 page site using Elementor page builder.

2. WEB
DESIGNING
AND
DEVELOPMENT
COURSE OUTLINE

3. COURSE DETAILS & Introduction
What is website?
Why Learn HTML?
Why Learn CSS?
Why Learn Word press?
What is a Domain? (Detailed)
What is a webhosting? (Detailed)
Duration: 40 Hours
Distribution
HTML: 4 Hours
CSS: 10 Hours
WordPress: 10 Hours
Hands on Lab: 16 Hours

4. COURSE OUTLINE | HTML
• Introduction to html
• Installation of code editor (Visual
Studio Code)
• Select an inspiration website &
Inspect it
• Create a basic html page
• Basic Html tags
• Html attributes
• Heading tags
• Paragraph tag
• Image tag
• Bold, italic & underline tag
• Br tag
• Text sizing tag
• Hr tag
• Subscript & super subscript
• Pre tag
• Create a page layout
• Link attributes
• The div tag
• The span tag
• What is list?
• What are tables?
• What are forms?
• Embedding videos
• Attribute for videos
• Introduction to SEO (Basic SEO)
• Types of SEO
• HTML SEO

5. COURSE OUTLINE | CSS
• Introduction to CSS
• What is CSS
• Why learn CSS?
• Write first line in CSS
• Html Refresher
• First CSS website
• What is Dom?
• Html ID & Classes
• Ways of adding CSS to
HTML
• CSS Selectors
• Element Selectors
• ID Selectors
• Class Selectors
• Comments in CSS
• Colors & backgrounds
• Color property
• Types of color values
• Background color property
• Background image property
• Background repeat property
• Background size property
• Background position property
• Background attachment
property
• Background short hand
• Background position property
• CSS Box model
• Margins & paddings
• Borders
• Border radius
• Margin collapse
• Box sizing
• Fonts & display
• Display property
• Display: inline

6. COURSE OUTLINE | CSS
• Display: block
• Display: inline block
• Display: none & visibility hidden
• Text aligning
• Text decoration
• Text transform
• Fonts
• Fonts family
• Safe Web fonts
• Generic font families
• Sizing, positioning & listing
• What is a pixel
• Relative lengths
• Min/max, height & width
• Position
• List style
• Z-index
• Flexbox
• Float
• Clear
• CSS flex box
• Flex direction box
• Flex for parent (Containers)
• Flex for children (flex items)

7. COURSE OUTLINE | CSS
• Responsive
• Grid & media queries
• Grid column gap
• Grid row gap
• Grid gap
• Properties of a grid container
• Properties of a grid Item
• CSS media queries
• Transform, transitions & animations
• What is transform
• Origin of transform
• CSS 2D transform methods
• CSS 3D transform methods
• CSS transitions
• Properties of transitions
• Multiple transitions
• CSS animations
• Properties to add animations
• Animations

8. COURSE OUTLINE | WORDPRESS
• Introduction to WordPress
• Why choose WordPress?
• Select color theme as per logo
• Install Theme in WordPress
• General Dashboard settings Details
• WordPress theme selection
• WordPress theme installation
• What are WordPress plugins?
• Uses & installation of plugins
• Details about WordPress Customizer
• Add slider to website
• Introduction to ELEMENTOR site builder in
WordPress
• Edit site with ELEMENTOR
• Create a static 6 Page cooperate
• Website
• Customizing theme with ELEMENTOR
• Pro & quick tips to create a professional website
• Final look of the demo store
• E-commerce plugin setting
• Demo E-commerce site
• Introduction to Woo commerce Plugin
• Setting up woo commerce plugin
• Uploading products for an e-commerce store
• Payment integration for e store via woo commerce
• Select domain and hosting for website
• Final look of the demo store