Learn your way! Get started

HTML and CSS Vol 1, Part 3 of 5: Animations and Icons

with expert Jordan Hudgens

Watch trailer

Course at a glance

Included in these subscriptions:

Dev & IT Pro Video
Dev & IT Pro Power Pack

	Release date	9/8/2021
	Level	Intermediate
	Runtime	2h 15m
	Closed captioning	Included
	Transcript	Included
	eBooks / courseware	N/A
	Hands-on labs	N/A
	Sample code	Included
	Exams	Included

Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

HTML and CSS are the backbone of web publishing. In this series you'll learn all the tools necessary to create professional websites. This course covers CSS animations, Styling Navigation, embedding google maps as well CSS selectors.

Prerequisites

this course assumes viewing previous parts in the series: HTML and CSS Vol 1, Part 1 of 5: Basics HTML and CSS Vol 1, Part 2 of 5: Flexbox and Fonts

Meet the expert

Jordan Hudgens has certifications for Ruby on Rails, Thinkful; Ruby on Rails, Bloc.io; Front End Development, Thinkful; and AngularJS, Thinkful. He is currently vice president of engineering for TRACKR in Midland, Texas and is working on his PhD in Computer Science from Texas Tech. In addition to Ruby, Jordan works with PHP, JavaScript, MySQL, Postgres, CSS3, C, C++, C#, Objective-C, and Python. He also works with the frameworks Rails (Ruby), Zend (PHP), and Django (Python), plus the libraries AngularJS, jQuery, and Backbone.js.

Course outline

Module 4

Animations (23:18)

Introduction (00:08)
Introduction to CSS Animations (09:17)
Styling Right Column of Nav Bar (13:44)
Summary (00:08)

Style Files (26:16)

Introduction (00:08)
Finalizing Nav Bar Styles (08:00)
Building a Parallax Feature in CSS (10:46)
Adding Text Overlays on Parallax Image (07:12)
Summary (00:08)

Structure and Icons (23:06)

Introduction (00:08)
Html Structure and Icons Features Section (09:13)
Creating Columns with Animated Hover Effects (13:37)
Summary (00:08)

Module 5

nth Child Selectors (22:27)

Introduction (00:08)
nth Child Selectors (08:17)
How to Create Box Shadows (09:27)
Embed Google Map (04:26)
Summary (00:08)

Footer HTML Structure (21:31)

Introduction (00:08)
Footer HTML Structure (11:28)
Footer Flex Direction (09:46)
Summary (00:08)

Image Filters and Opacity (19:06)

Introduction (00:08)
CSS Image Filters and Opacity (02:56)
Finalizing Footer Styles (15:54)
Summary (00:08)