Modern HTML & CSS From The Beginning (Including Sass)

سرفصل های دوره

Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid

01 - 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

02 - HTML Basics

001 Section Intro

001 htmlsandbox-finished.zip

001 htmlsandbox-starter.zip

002 Create & Open HTML Pages

003 Doctype & Basic Layout

004 Setting Up Live Server (VSCode Extension)

005 Meta Tags & Search Engines

006 Headings, Paragraphs & Typography

007 Links, Images & Attributes

008 Lists & Tables

009 Forms & Input

010 Block & Inline Level Elements

011 Divs & Spans, Classes & Ids

012 HTML Entities

013 HTML5 Semantic Tags & Challenge

013 html5-semantics-start.zip

014 HTML5 Semantics Solution & Wrap Up

03 - CSS Basics

001 Section Intro

001 csssandbox-finished.zip

001 csssandbox-starter.zip

002 Implementing CSS

003 Basic CSS Selectors

004 Dev Tools Introduction

005 Fonts In CSS

006 Color Types

007 Backgrounds & Borders

008 Box Model, Margin & Padding

009 Float & Alignment

010 Link State & Button Styling

011 Navigation Menu Styling

012 Inline, Block & Inline-Block Display

013 Positioning

014 Form Style Challenge

014 form-styling-start.zip

015 Form Style Solution

016 Aside Visibility, Order & Negative Margin

04 - Hotel Website

001 Project Intro

001 hotel-website.zip

001 image-resources.zip

002 Aside Design & Ideas

003 File Structure & Navbar

004 Showcase & Home Info

005 Features & Footer

006 About Page

007 Contact Page

05 - Intro To Responsive Layouts

001 What Is Responsive Design

001 csssandbox-updated.zip

002 Getting Started With Media Queries

003 Em & Rem Units

004 Vh & Vw Units

005 Making The Hotel Website Fully Responsive

005 hotel-website-responsive.zip

06 - Intro To Flexbox

001 What Is Flexbox

001 csssandbox-updated.zip

002 Flexbox Basics

003 Flex Properties

004 Flex Alignment & Justify

07 - EdgeLedger Website (Flexbox)

001 Project Intro

001 edgeledger-website.zip

001 image-resources.zip

002 Header HTML & Navbar Styles

003 Hero Section & Overlay

004 Icons & Solutions Sections

005 Cases & Blog Sections

006 Finishing The Homepage

007 Responsive Media Queries

008 Inner Pages

009 Navbar & Lightbox Effects

010 Extra - Adding a Favicon

08 - Website Deployment - Shared Host

001 Types Of Web Hosting

002 Shared Hosting Setup

003 Hosting Company Links.html

004 Setting Up Email

005 Upload Your Site via FTP

006 BONUS Contact Form Submission (PHP Script)

006 contact.zip

006 edgeledger-website-final.zip

09 - More CSS Concepts - Advanced Selectors, Animation & More

001 Targeted Selectors

001 csssandbox2.zip

002 nth-child Pseudo Selectors

003 before & after Pseudo Selectors

004 Box Shadows

005 Text Shadows

006 CSS Variables (Custom Properties)

007 Keyframe Animation 1

008 Keyframe Animation 2

009 CSS Transitions

010 Transform Property

10 - Mini Projects With Keyframes, Transitions, etc

001 Presentation Website [1] - Intro & HTML

001 presentation-website.zip

002 Presentation Website [2] - Page CSS

003 Presentation Website [3] - Text Animation

004 Hamburger Menu Overlay [1] - HTML & Base CSS

004 hamburger-overlay-menu.zip

005 Hamburger Menu Overlay [2] - Creating The Hamburger

006 Hamburger Menu Overlay [3] - Animating The Hamburger Lines

007 Hamburger Menu Overlay [4] - Menu Overlay

008 Knowledge Timeline [1] - HTML & Base CSS

008 knowledge-resume.zip

009 Knowledge Timeline [2] - Boxes & Arrows

010 Knowledge Timeline [3] - Responsive Media Queries

011 Knowledge Timeline [4] - Scroll In Animation

012 Quick Dropdown Menu Project

012 dropdown.zip

11 - CSS Grid

001 What Is CSS Grid

001 grid-sandbox.zip

002 Grid Basics & Columns

003 Grid Rows

004 Spanning Columns & Rows

005 Auto-Fit & Minmax

006 Grid Template Areas

007 Media Queries & The Grid

12 - NewsGrid Website

001 Project Intro

001 image-resources.zip

001 newsgrid.zip

002 Setup & Favicon

003 Core Styles, Variables & Navbar

004 Showcase With Overlay & Button Styles

005 Home Articles Grid

006 Footer With Grid

007 About Page & Page Container

008 Article Page

009 Responsive Media Queries

010 Bonus Intro To Photoshop (NewsGrid Logo)

13 - Website Deployment With Netlify (FREE)

001 How It Works

002 Git & Pushing To Github

003 Git Commands & Links.html

004 Netlify Deploy & Form Submission

005 Custom Domain Name

14 - Learning Sass

001 What Is Sass

001 sass-sandbox-finished.zip

002 Environment Setup With Node-Sass

003 Koala Sass Compiler - GUI Alternative

004 Variables & Partials

005 Nesting & Structuring

006 Inheritance & Contrast

007 Functions, Mixins & More

15 - Portfolio Website With Sass

001 Project Intro

001 portfolio-website.zip

002 Project Setup

002 project-resources.zip

003 Header & Main Nav

004 Specialize & Stats Section

005 Process Section & Footer

006 About Page Info Section

007 About Page Logos & Testimonials

008 Work Gallery With Transitions

009 Contact Page

010 Responsive Media Queries

011 Deploy & Contact Form With Spam Filter

16 - Where To Go From Here

001 Where To Go From Here

179,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy