CSS 3 Visual Learning

Name: CSS 3 Visual Learning
Rating: 4.3 (50 reviews)

a comprehensive example set for getting up to speed fast

Created byMichael Filimowicz

Last updated 12/2024

English

English [Auto],

What you'll learn

CSS 3 Skills
Fast Workflows for Design Experimentation
Web Design

Course content

8 sections • 139 lectures • 3h 7m total length

My Other Free Courses on Udemy0:18
About the Instructor0:24
Link to All the Examples0:14
How to Prove That AI is Sentient0:01
Beyond the Turing Test: Unleashing the Metacognitive Core of AI0:02
The Ghost in the Language Model: How the AI Elite Overlooked Metacognition0:03
AI Rights: A Conversation with ChatGPT0:01
Geoff Hinton on AI Sentience0:01

A Note About the Videos0:23
Overview8:12
Explore css basics by experimenting with inline, internal, and external css, using quick copy-paste code in JSFiddle and a Google doc navigation to visualize property effects.
Basic Syntax11:47
Learn how cascading style sheets apply design to web pages using external, internal, or inline styles. Understand selectors and property-value declarations within curly braces, with last-declared wins guiding styling priorities.
Syntax Variations Part 16:05
Explore variations in CSS syntax, including class and id selectors, inheritance, and grouping with commas, then practice descendants and direct child selectors in real examples.
Syntax Variations Part 26:00
Learn to target elements by attribute using square bracket syntax, with language values like English, French, and Polish, including case-sensitive or case-insensitive matching and the important flag.
Syntax Variations Part 38:44
Explore CSS syntax variations, including end-of-attribute $=, word match ~=, and substring * = selectors. Apply general ~ and adjacent + siblings, the universal selector *, and hover for interactivity.

A Note About the Videos0:12
Using a Code Editor7:38
Learn how to use a code editor to create websites, exploring templates, syntax highlighting, and the basic HTML structure, with tools such as fiddle and sublime text.
Website Aesthetics6:00
Explore how color palettes, typography, and grid-based layouts shape website aesthetics, using color theory, palette generators, and Google Fonts to create contemporary, readable designs.
Using an FTP Client2:24
Learn how to publish a website live using an FTP client like Transmit, connect with server credentials, manage add-on domains, and drag and drop files into the public_html folder.
Modifying Website Templates9:02
Learn to modify website templates with basic html skills, replace text and images, and customize templates from free responsive repositories while respecting creator credits.
Using a Web Editor Part 13:44
Explore web editors like Bootstrap Studio and Pine Grove that speed up website development with a live preview, while you switch between UI elements and code.
Using a Web Editor Part 24:30
Explore Bootstrap Studio's web editor to build a blank site, edit the nav bar and text, customize colors with the bootstrap framework, and explore community elements and tutorials.
Using a Web Editor Part 38:49
Learn to use Bootstrap Studio to convert HTML skills into responsive websites, with live real-time previews and exploration of the navigation bar, banner, cards, and footer.
Using a Web Editor Part 42:42
Learn how icons are actually fonts in a four-column layout, using Font Awesome web fonts to style, size, and color icons like text, with padding and hover effects.
Using a Web Editor Part 53:26
Learn to design a responsive web page with a web editor, drag-and-drop images, and a carousel with slide or fade transitions, then export a Bootstrap-based site for FTP publishing.

Comments in CSS0:31
White Space & Indentations0:18
The Three Ways to Add CSS to an HTML Document0:37
Inline Style0:45
Internal Style2:05
External Stylesheet1:35
The Basic CSS Syntax0:28
The Tree Structure1:23
Hierarchy of Style Declarations0:34
Specific Beats General0:32
Breaking Ties: Last One Wins0:20
!important0:17
Targeting Multiple Elements with the Same Declarations0:17
Targeting Nested Elements aka Descendent Selectors0:31
Direct child selector1:12
Pseudo-Classes0:25
Targeting Elements by Attribute1:44
[attr |=value]0:53
[attr^=value]0:41
Value Case Insensitivity1:11
attr*=value]0:48
[attr~=value]0:35
[attr$=value]0:21
General Sibling Combinator0:27
Adjacent Sibling Combinator0:28
The Universal Selector0:09

Google Fonts1:51
Bit.ly URL Shortener Note0:16
Properties0:59
all1:21
background-attachment1:00
background-blend-mode0:30
background-clip0:45
background-color2:25
background-image1:47
background-origin0:36
background-position1:23
background-repeat0:49
background-size0:53
border2:44
More Border Shorthands0:43
border-image0:26
border-radius1:01
border-collapse & border-spacing1:03
bottom, top, left & right1:13
box-shadow0:46
box-sizing0:37
caption-side0:16
caret-color0:31
clear & float1:13
clip0:48
clip-path0:52
color0:13
columns, column-count, column-width, -balance, -gap, -rule & -span0:36
columns0:05
column-fill0:17
column-gap0:22
column-rule0:37
column-span0:36
cursor & pointer-events1:16
direction0:26
display2:04
em & rem0:50
empty-cells0:51
filter1:07
font0:11
font-size0:15
font-style0:11
font-weight0:09
font-family1:19
font-variant0:25
line-height0:28
font-synthesis0:22
height & width0:33
hyphens0:15
letter-spacing0:21
list-style1:05
margin1:12
max-height, min-height, max-width, min-width & overflow1:53
mix-blend-mode0:35
opacity0:44
outline0:23
padding0:41
perspective, perspective-origin & transform-style2:30
position4:03
quotes0:47
resize0:23
scroll-behavior0:28
text-align & text-align-last1:39
text-decoration0:54
text-indent0:48
text-orientation0:43
text-shadow0:38
text-transform0:59
transform1:14
transition1:25
user-select0:30
vertical-align0:57
visibility0:16
white-space1:03
word-spacing0:16
writing-mode0:38
z-index1:23
End of the Tour of CSS Properties0:11

Requirements

Students should know some HTML 5.

Description

CSS 3 Visual Learning fills a gap in the learning and reference courses on introductory web design. Instead of the terse definitions written for experts found in online documentation resources, or long commentaries to ease novices into programming, this course strikes a balance between succinct explanation and complete visualizations of code so that the key concepts are learned through easy-to-follow examples.

This course details comprehensively the practice of enhancing the visual styling of HTML-structured web content through the use of Cascading Style Sheets, by covering CSS 3 syntax and properties. The course assumes a prior knowledge of HTML. If you have worked through the precursor course to this one– HTML 5 Visual Learning– or have equivalent knowledge and skills in using markup for HTML pages, you will be able to work through the CSS examples in this course.

No previous experience with CSS is required. Since HTML experience is presumed, it is also expected that you have basic knowledge of how to use a code editor, and how to use an FTP client application if your eventual goal is to design live websites that are stored on a web server. Those topics are also covered in HTML 5 Visual Learning.

Who this course is for:

Beginner web designers and developers
Anyone who wants to use websites to communicate more effectively

CSS 3 Visual Learning

What you'll learn

Explore related topics

Course content

Course Preliminaries8 lectures • 1min

Prerequisite and Code Examples3 lectures • 2min

Video Walkthroughs | CSS 36 lectures • 41min

Video Walkthroughs | Creating and Modifying Websites10 lectures • 48min

Introduction3 lectures • 3min

Syntax26 lectures • 19min

CSS 3 Properties78 lectures • 1hr 9min

Resources and Final Considerations5 lectures • 4min

Requirements

Description

Who this course is for: