IIRF Online > Development > Web Development > CSS > How to Create A Website: An HTML Tutorial and CSS Tutorial
How to Create A Website: An HTML Tutorial and CSS Tutorial by Udemy
Learn How To Make Websites - HTML - CSS - Flexbox - Transitions - Animations - SVGs - The Box Model - CSS Specificity
Course Highlights
- Build beautiful webpages using today's best practices
- Understand the importance of performance and build performant websites
- Acquire an outstanding foundation in the fundamentals of web programming
- Taught by a professor with 20 years of experience teaching individuals of all abilities
- Achieve mastery in the understanding and application of HTML & CSS
- Apply cutting-edge techniques such as Flexbox and SVGs
Skills you will learn!
Curriculum
5 Topics
Welcome
Course outline
Code resources
How To Succeed
The Art of Building Websites
3 Topics
Having Fun #1 - HTTP Status Codes
Having Fun #2 - Making The News
Having Fun #3 - The Dinosaur Video Game
6 Topics
History of the Internet
History of the World Wide Web
Who Controls the Internet & WWW?
Web Documentation
Highlighting Webpages & Chrome Extensions
How The Web Works
3 Topics
Your First Webpage
Anatomy of an HTML Page
HTML Terminology
4 Topics
A Separation of Concerns
CSS Rule-sets
Linking CSS to HTML
Multiple CSS Selectors
5 Topics
Integrated Development Environments
WebStorm
Atom.io
Sublime
Dreamweaver
9 Topics
Github Overview
Git & Github - The Story
Setting up git and github on Windows
Setting up git and github on Mac
Terminal Essentials
Creating a “Master” Local Git Repository
Creating an “Origin/Master” Remote Github Repository
Using Github - Basic Commands
Using Github - Deleting A Repo
13 Topics
Section Overview
FIle Naming Conventions
Folder Naming Conventions
Opening A Project in Webstorm
Essential Tags
Emmet.io
Modifying Webstorm Formatting
Tag Attributes
Relative URLs
Absolute URLs
Comments
Hands-On Exercises
Hands-On Exercises - Solutions
11 Topics
Section Overview
All HTML Tags & Attributes All CSS Selectors & Properties
border Property
border-radius Property
display Property
padding & margin Properties
Box Model
box-Sizing Property
Review
Hands-On Exercises
Hands-On Exercises - Solutions
17 Topics
Section Overview
CSS Resets
CSS Selectors: element class id
Selectors: attribute
Selectors: pseudo-classes
Selectors: pseudo-class :focus
Selectors: pseudo-class nth child - part I
Selectors: pseudo-class nth child - part II
Selectors: pseudo-class typography
Selectors: nested selectors
margin: 0 auto & The Display Property
Hands-On Exercise - The Surfer Page
Hands-On Exercise - The Surfer Page - Solution
Hands-On Exercises
Hands-On Exercises - Solutions I
Hands-On Exercises - Solutions II
Review
8 Topics
Section Overview
The Browser’s Application of CSS
Challenge & Solution #1
Challenge & Solution #2 3 4
Challenge & Solution #5 6
Hands-On Exercise
Hands-On Exercises - Solutions
Review
15 Topics
Section Overview
font Property
font-family Property
font-size Property
font-weight & font-style Properties
font-variant & text-transform Properties
line-height Property
letter-spacing word-spacing & color Properties
Google Fonts
text-align & text-shadow Properties
text-decoration Property & <del>
text-indent Property
Hands-On Exercises
Hands-On Exercises - Solutions
Review
15 Topics
Section Overview
Document Structure - Terminology
Semantic HTML
Hands-On Exercises - Semantic HTML
Hands-On Exercises - Semantic HTML - My Solutions
Semantic HTML - header nav main
Semantic HTML - article section
Semantic HTML - aside & footer
Semantic HTML - Examples
Semantic HTML - headings - h1 - h6
Semantic HTML - figure figcaption
Hands-On Exercises
Hands-On Exercises - Solutions
Hands-On Exercises - Learning HTML Elements - My Solutions
Review
9 Topics
Section Overview
Layout Resources & Review
Display Property Review
Hands-On Exercise - Page of Divs
Hands-On Exercise - Page of Divs - Solution
Hands-On Exercise - Horizontal Menu
Hands-On Exercise - Horizontal Menu - Solution
Taco Shop - Display Property
Review
20 Topics
Section Overview
Understanding Flexbox - Container & Items
Containers & Creating A Flex Container
Container Property: flex-wrap
Container Property: flex-direction (primary-axis & cross-axis)
Container Property: flex-flow
Container Property: justify-content
Container Property: align-items
Container Property: align-content
Item Property: align-self
Item Property: order
Item Property: flex-grow
Item Property: flex-shrink
Item Property: flex-basis
Item Property: flex
Hands-On Exercise - Flexbox Froggy
Hands-On Exercises
Hands-On Exercises - Solutions - 8 Pages
Hands-On Exercises - Solutions - 6 Pages
Review
10 Topics
Section Overview
Understanding Media Queries
Min-Width & Max-Width
Print Media Query
Media Type & Expressions
Taco Shop & Scaling Font - Examples
Responsive Design & Mobile First Design
Hands-On Exercises
Hands-On Exercises - Solutions
Review
12 Topics
Section Overview
Google’s Flexbox Design Pattern #1
Google’s Flexbox Design Pattern #2
Google’s Flexbox Design Pattern #3
Hands-On Exercises
Hands-On Exercises - Solutions
Flexbox Example #1 - Responsive Menu
Flexbox Example #2 - Above The Fold
Flexbox Example #3 - Holy Grail Example
Flexbox Example #4 - Holy Grail Redux
Hands-On Exercises
Review
10 Topics
Section Overview
Layout Essentials - A Quick Reference
Position Overview
Position Fixed
Position Relative
Position Absolute
Taco Shop - Position Property
Hands-On Exercises
Hands-On Exercises - Solutions
Review
8 Topics
Section Overview
Float Images & Overflow: Auto
Float Layout & Clearing Floats
Float Example - Holy Grail
Taco Shop - Float Property
Hands-On Exercises
Hands-On Exercises - Solutions
Review
9 Topics
Section Overview
Background Color
background-image background-repeat background-size
background-position background-origin
background-attachment
background
Hands-On Exercises
Hands-On Exercises - Solutions
Review
4 Topics
Section Overview
Analyzing The Starting Files
inline-block Refactor
flexbox Refactor
14 Topics
Section Overview
Step #1: HTML Structure
Step #1: HTML Structure - Solution
Step #2: Layout
Step #2: Layout - Solution
Step #3: background image
Step #3: background image - Solution
Step #4: Format Text
Step #4: Format Text - Solution
Step #5: Style The Button
Step #5: Style The Button - Solution
Step #6: Mobile
Step #6: Mobile - Solution
Review
12 Topics
Section Overview
q blockquote & cite elements; cite attribute
pre samp code kbd abbr elements
HTML Entities
Linking Images & Bookmarks
box-shadow Property
vertical-align property
mobile devices - mobile history & font-boosting
mobile devices - meta viewport width=device-width
mobile devices - meta viewport initial-scale=1
meta viewport - picture example
Review
23 Topics
Section Overview
Colors
Picking Color Combinations - Adobe Color ( Kuler )
Image Types - Raster/Bitmap & Vector
Font Awesome
Font Awesome - Performance
Font Awesome - Instructions on Use Review
Font Awesome to SVG - Adobe Illustrator
Understanding SVG - Basic SVG Shapes
SVG Terminology
SVG Path Element
SVG Path - More Examples
SVG Stroke & Fill
SVG - Notes & Resources
SVG - Viewbox
Styling SVGs with CSS
SVG - Symbol & Use Elements
Symbol Use & CSS
Symbol with Multiple Paths
Leave Room For Strokes
Stroke %
symbol & use vs img
Review
17 Topics
Section Overview
Fixed Header
Fixed Header - Solution
Header Containers
Header Containers - Solution
Make SVG’S
Make SVG’S - Solution
Insert SVGs
Insert SVGs - Solution
Style SVGs - Solution
Dev Tools Styling & Company Naming - Solution
Adding Links & Style - Solution
Responsive Mobile-First
Responsive Mobile-First - Solution
Mobile Menu
Mobile Menu - Solution
Review
9 Topics
Section Overview
Create An Image
Generate Favicon
Generate Favicon - Subfolder
Generate Favicon - Clears Cache
Generate Favicon - Compression
Favicon Essentials
Full Page Background - Favicon
Review
8 Topics
Section Overview
Counter
Counter - Solution
Tab Menu
Tab Menu - Solution
Header Menu
Header Menu - Solution
Review
8 Topics
Section Overview
Transitions
Transition Examples
Animations
Animation Examples & Hands-On Exercise
Hands-On Exercise Solution & Another Hands-On Exercise
Hands-On Exercise Solution
Transform & Animations
8 Topics
Section Overview
Footer Saving - Solution
Sidebar Menu - Solution
Welcome Page - Solution
Dial Icon - Solution
Feature List - Solution
Card - Solution
Card Group - Solution
12 Topics
Section Overview
Above-The-Fold Flexbox Practice
Side-Bar Fly-Out
Linear-Gradient
Audio & video
Markdown
Vendor Prefixes AutoPrefixer Task-Runners Gulp & Grunt
Publishing Your Site - An Overview
Publishing Your Site - Buying A Domain
Publishing Your Site - Google Cloud
Publishing Your Site - Google Cloud II
Review
9 Topics
Section Overview
The Form Element
The Input Element
The Label Element
The Input Element - Types
textarea select option optgroup
fieldset & legend
Form Examples progress meter
Review
5 Topics
Overview of Three Projects
Game Plan - Contractor Website
Starting Files - Contractor Website
Game Plan - Travel Website
Starting Files - Travel Website
2 Topics
Congratulations!
Bonus lecture
How to Create A Website: An HTML Tutorial and CSS Tutorial
Related CSS Courses
Thank You!
Your review has been submitted successfully.