PAC | Modern HTML And CSS From The Beginning (Including Sass) (2019 EN)

Company: Packt Publishing
Author: Brad Traversy
Full Title: Modern HTML And CSS From The Beginning (Including Sass)
Year: 2019
Language: English
Genre: Educational: Web Development
Skill Level: -
Price: €138.99
-
Files: MP4 (+ Code Files)
Time: 20:52:20
Video: AVC, 1920 x 1080 (1.778) at 30.000 fps, 350 kbps
Audio: AAC at 162 Kbps, 2 channels, 48.0 KHz



Build modern responsive websites and UIs with Sass! Learn Flex and CSS Grid.

This course is for both beginners and seasoned developers that want to learn to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies like Flexbox and CSS Grid as well as the Sass pre-compiler. This course includes hours of both learning & studying sections along with real-life projects. Stop having to rely on frameworks like Bootstrap for your user interface and learn to create your own layouts and utility classes to build custom responsive websites and app UIs.

The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. If you already have experience with basic HTML & CSS, just move to section 3 or 4 and get started.


Learn:
✓ Flexbox & CSS Grid Projects
✓ CSS Variables, Transitions, Dropdowns, Overlays & More
✓ Website Hosting & Deployment With FTP & Git
✓ All Skill Levels

Features:
✓ Build Multiple High-Quality Website and UI Projects
✓ HTML5 Semantic Layout & CSS Fundamentals


Lessons:
1. Introduction
001. Welcome To The Course
002. How The Web Works (Summarized)
003. The Roles Of HTML & CSS In Web Development
004. Getting Setup With Visual Studio Code
2. HTML Basics
005. Section Intro
006. Create & Open HTML Pages
007. Doctype & Basic Layout
008. Setting Up Live Server (VSCode Extension)
009. Meta Tags & Search Engines
010. Headings, Paragraphs & Typography
011. Links, Images & Attributes
012. Lists & Tables
013. Forms & Input
014. Block & Inline Level Elements
015. Divs & Spans, Classes & Ids
016. HTML Entities
017. HTML5 Semantic Tags & Challenge
018. HTML5 Semantics Solution & Wrap Up
3. CSS Basics
019. Section Intro
020. Implementing CSS
021. Basic CSS Selectors
022. Dev Tools Introduction
023. Fonts In CSS
024. Color Types
025. Backgrounds & Borders
026. Box Model, Margin & Padding
027. Float & Alignment
028. Link State & Button Styling
029. Navigation Menu Styling
030. Inline, Block & Inline-Block Display
031. Positioning
032. Form Style Challenge
033. Form Style Solution
034. Aside: Visibility, Order & Negative Margin
4. Hotel Website
035. Project Intro
036. Aside: Design & Ideas
037. File Structure & Navbar
038. Showcase & Home Info
039. Features & Footer
040. About Page
041. Contact Page
5. Intro To Responsive Layouts
042. What Is Responsive Design
043. Getting Started With Media Queries
044. Em & Rem Units
045. Vh & Vw Units
046. Making The Hotel Website Fully Responsive
6. Intro To Flexbox
047. What Is Flexbox
048. Flex Basics
049. Flex Alignment & Order
7. EdgeLedger Website (Flexbox)
050. Project Intro
051. File Structure & Flex Navbar
052. Showcase Header
053. What We Do Section
054. Who We Are & Clients Sections
055. Contact Form, Map & Footer
056. Smooth Scrolling With JS
057. Widescreen & Tablet View
058. Smartphone View
8. Website Deployment - Shared Host
059. Types Of Web Hosting
060. Setting Up Email
061. Showcase Header
062. Upload Your Site via FTP
063. BONUS: Contact Form Submission (PHP Script)
9. More CSS Concepts - Advanced Selectors, Animation & More
064. Targeted Selectors
065. nth-child Pseudo Selectors
066. before & after Pseudo Selectors
067. Box Shadows
068. Text Shadows
069. CSS Variables (Custom Properties)
070. Keyframe Animation 1
071. Keyframe Animation 2
072. CSS Transitions
073. BONUS: Transform Property
10. Mini Projects With Keyframes, Transitions, etc
074. Presentation Website [1] - Intro & HTML
075. Presentation Website [2] - Page CSS
076. Presentation Website [3] - Text Animation
077. Hamburger Menu Overlay [1] - HTML & Base CSS
078. Hamburger Menu Overlay [2] - Creating The Hamburger
079. Hamburger Menu Overlay [3] - Animating The Hamburger Lines
080. Hamburger Menu Overlay [4] - Menu Overlay
081. Knowledge Timeline [1] - HTML & Base CSS
082. Knowledge Timeline [2] - Boxes & Arrows
083. Knowledge Timeline [3] - Responsive Media Queries
084. Knowledge Timeline [4] - Scroll In Animation
085. Quick Dropdown Menu Project
11. CSS Grid
086. What Is CSS Grid
087. Grid Basics & Columns
088. Grid Rows
089. Spanning Columns & Rows
090. Auto-Fit & Minmax
091. Grid Template Areas
092. Media Queries & The Grid
12. NewsGrid Website
093. Project Intro
094. Setup & Favicon
095. Core Styles, Variables & Navbar
096. Showcase With Overlay & Button Styles
097. Home Articles Grid
098. Footer With Grid
099. About Page & Page Container
100. Article Page
101. Responsive Media Queries
102. Bonus: Intro To Photoshop (NewsGrid Logo)
13. Website Deployment With Netlify (FREE)
103. How It Works
104. Git & Pushing To Github
105. Netlify Deploy & Form Submission
106. Custom Domain Name
14. Learning Sass
107. What Is Sass
108. Environment Setup With Node-Sass
109. Koala Sass Compiler - GUI Alternative
110. Variables & Partials
111. Nesting & Structuring
112. Inheritance & Contrast
113. Functions, Mixins & More
15. Portfolio Website With Sass
114. Project Intro
115. Project Setup
116. Header & Main Nav
117. Specialize & Stats Section
118. Process Section & Footer
119. About Page Info Section
120. About Page Logos & Testimonials
121. Work Gallery With Transitions
122. Contact Page
123. Responsive Media Queries
124. Deploy & Contact Form With Spam Filter
16. Where To Go From Here
125. Where To Go From Here

Our members see more. Join us!
-------------
Our members see more. Join us!