Share Description
In this course, you will :
- Create a number of high-quality website and user interface projects.
- CSS Fundamentals & HTML5 Semantic Layout
- Projects involving Flexbox and CSS Grid.
- CSS Variables, Transitions, Dropdowns, Overlays, and Other Features
- FTP & Git Website Hosting & Deployment
- All Skill Levels are Accepted.
Syllabus :
1. HTML Basics
- Create & Open HTML Pages
- Doctype & Basic Layout
- Setting Up Live Server (VSCode Extension)
- Meta Tags & Search Engines
- Headings, Paragraphs & Typography
- Links, Images & Attributes
- Lists & Tables
- Forms & Input
- Block & Inline Level Elements
- Divs & Spans, Classes & Ids
- HTML Entities
- HTML5 Semantic Tags & Challenge
- HTML5 Semantics Solution & Wrap Up
2. CSS Basics
- Implementing CSS
- Basic CSS Selectors
- Dev Tools Introduction
- Fonts In CSS
- Color Types
- Backgrounds & Borders
- Box Model, Margin & Padding
- Float & Alignment
- Link State & Button Styling
- Navigation Menu Styling
- Inline, Block & Inline-Block Display
- Positioning
- Form Style Challenge
- Form Style Solution
3. Hotel Website
- File Structure & Navbar
- Showcase & Home Info
- Features & Footer
- About Page
- Contact Page
4. Intro To Responsive Layouts
- What Is Responsive Design?
- Getting Started With Media Queries
- Em & Rem Units
- Vh & Vw Units
- Making The Hotel Website Fully Responsive
5. Intro To Flexbox
- What Is Flexbox?
- Flexbox Basics
- Flex Properties
- Flex Alignment & Justify
6. EdgeLedger Website (Flexbox)
- Header HTML & Navbar Styles
- Hero Section & Overlay
- Icons & Solutions Sections
- Cases & Blog Sections
- Finishing The Homepage
- Responsive Media Queries
- Inner Pages
- Navbar & Lightbox Effects
7. Website Deployment - Shared Host
- Types Of Web Hosting
- Shared Hosting Setup
- Hosting Company Links
- Setting Up Email
- Upload Your Site via FTP
8. More CSS Concepts - Advanced Selectors, Animation & More
- Targeted Selectors
- nth-child Pseudo Selectors
- before & after Pseudo Selectors
- Box Shadows
- Text Shadows
- CSS Variables (Custom Properties)
- Keyframe Animation
- CSS Transitions
- Transform Property
9. Mini Projects With Keyframes, Transitions, etc
- Presentation Website [1] - Intro & HTML
- Presentation Website [2] - Page CSS
- Presentation Website [3] - Text Animation
- Hamburger Menu Overlay [1] - HTML & Base CSS
- Hamburger Menu Overlay [2] - Creating The Hamburger
- Hamburger Menu Overlay [3] - Animating The Hamburger Lines
- Hamburger Menu Overlay [4] - Menu Overlay
- Knowledge Timeline [1] - HTML & Base CSS
- Knowledge Timeline [2] - Boxes & Arrows
- Knowledge Timeline [3] - Responsive Media Queries
- Knowledge Timeline [4] - Scroll In Animation
10. CSS Grid
- What Is CSS Grid?
- Grid Basics & Columns
- Grid Rows
- Spanning Columns & Rows
- Auto-Fit & Minmax
- Grid Template Areas
- Media Queries & The Grid
11. NewsGrid Website
- Core Styles, Variables & Navbar
- Showcase With Overlay & Button Styles
- Home Articles Grid
- Footer With Grid
- About Page & Page Container
- Article Page
- Responsive Media Queries
12. Website Deployment With Netlify
- How It Works
- Git & Pushing To Github
- Git Commands & Links
- Netlify Deploy & Form Submission
- Custom Domain Name
13. Learning Sass
- What Is Sass?
- Environment Setup With Node-Sass
- Koala Sass Compiler - GUI Alternative
- Variables & Partials
- Nesting & Structuring
- Inheritance & Contrast
- Functions, Mixins & More
14. Portfolio Website With Sass
- Header & Main Nav
- Specialize & Stats Section
- Process Section & Footer
- About Page Info Section
- About Page Logos & Testimonials
- Work Gallery With Transitions
- Contact Page
- Responsive Media Queries
- Deploy & Contact Form With Spam Filter
