Course outline Website Design & Development
- 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