Mastering CSS - Second Edition [Video]

Mastering CSS - Second Edition [Video]

Rich Finelli

1 customer reviews
Get to grips with CSS best practices to create modern, responsive, and retina-ready websites
Mapt Subscription
FREE
$29.99/m after trial
Video
$10.00
RRP $124.99
Save 91%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$10.00
$29.99p/m after trial
RRP $124.99
Subscription
Video
Start 30 Day Trial

Preview in Mapt

Video Details

ISBN 139781787126794
Course Length6 hours and 9 minutes

Video Description

CSS is a deceptively simple presentation language that has significantly developed over the last few years. Front-end developers need to keep style sheets manageable and organized by taking a modular approach to building a website. They can either wrestle with it, or learn how to master it in order to easily apply layouts and styles with precision. This web development video course has been designed to help you build your knowledge of CSS and master one of the most valuable tools in modern web design.

We start off with a brief review of the foundations of CSS by using a good text editor to automate your authoring and set up a CSS baseline. We then move on to creating a layout with floats and a functioning menu with dropdowns, taking a modular-organized approach to CSS. We deep dive into a lot of details of CSS in this course, from creating a modern looking ghost button and a big call-to-action button to the supposedly difficult and scary SVG. We’ll also look in depth at CSS3 properties such as transforms, transitions, and animations.

By the end, you’ll have an understanding of responsive web design, web fonts, icon fonts, and techniques used to support retina devices; all things a modern frontend web developer must know. This course will arm you with all the knowledge, tips, and tricks you need to make you stand out in the world of developing complex, responsive, feature-rich web applications.

Style and Approach

This video course is an easy-going and pragmatic approach to authoring style sheets, and will help you gain a very solid understanding of CSS. The course keeps building your knowledge as each section discusses several features with CSS3 in order to create complex, feature-rich web applications.

Table of Contents

CSS Foundations
The Course Overview
The Anatomy of a Rule Set and the Three Types of Style Sheets
The Box Model and Block versus Inline Elements
Ramping Up
Text Editors
CSS Reset
Chrome Dev Tools
Renaming Elements: Classes and IDs
Descendant Selectors
Creating a Page Layout with Floats
Floats Introduction – Flowing Text around Images
Creating a Multicolumn Layout
Solving the Problems of Floats
Creating Buttons with Modular CSS
Creating Buttons with Modular CSS
Multiple Classes
Specificity Rules
Transitions
Transforms
Styling a Call to Action button
Gradients
Creating the Main Navigation
Starting the Navigation
Using Pseudo Classes
Absolute Positioning
Building the Dropdown
CSS Animations
CSS Animations (Continued)
Finalizing the Navigation
Becoming Responsive
Fluid Grid
Flexible Images
Media Queries
Mobile Menu
Viewport Meta Tag
Web Fonts
The @font-face Property
Font Kits and Font Services
Google Web Fonts
Subscription Font Foundries
Icon Fonts
The Workflow for HiDPI Devices
2x Images
The JavaScript Approach
1.5x images
Background Images
SVG
Srcset
Flexbox
Introduction to Flexbox
From Floats to Flexbox
Understanding flex-grow, flex-shrink, flex-basis, and flex
More Layout, More Positioning
Building the Product Listing
flex-wrap and align-content
Changing the Display Order of Content
Vendor Prefixes
Wrapping Up
Next Steps
Conclusion and Links

What You Will Learn

  • Take advantage of the Chrome developer tools to troubleshoot CSS
  • Explore some of the most solid techniques used to solve the problems of floats, such as the clearfix hack
  • Rename elements with classes, use descendant selectors, and understand specificity rules
  • Become proficient with CSS3 properties such as transitions, transforms, gradients, pseudo classes, and animations
  • Leverage the power of absolute, relative, static, and fixed positioning techniques
  • Delve into modular, reusable, and scalable CSS for more organized and smaller style sheets
  • Understand media queries and the other fundamentals of responsive web design
  • Get creative with the @font-face property, font kits, Google Web Fonts, subscription font services, and icon fonts
  • Optimize the workflow for HiDPI (retina) devices using 2x images, 1.5x images, SVG, and the srcset attribute
  • Learn how to layout features of your web page using flexbox, which solves many of the layout challenges we were accustomed to with float-based layout

Authors

Table of Contents

CSS Foundations
The Course Overview
The Anatomy of a Rule Set and the Three Types of Style Sheets
The Box Model and Block versus Inline Elements
Ramping Up
Text Editors
CSS Reset
Chrome Dev Tools
Renaming Elements: Classes and IDs
Descendant Selectors
Creating a Page Layout with Floats
Floats Introduction – Flowing Text around Images
Creating a Multicolumn Layout
Solving the Problems of Floats
Creating Buttons with Modular CSS
Creating Buttons with Modular CSS
Multiple Classes
Specificity Rules
Transitions
Transforms
Styling a Call to Action button
Gradients
Creating the Main Navigation
Starting the Navigation
Using Pseudo Classes
Absolute Positioning
Building the Dropdown
CSS Animations
CSS Animations (Continued)
Finalizing the Navigation
Becoming Responsive
Fluid Grid
Flexible Images
Media Queries
Mobile Menu
Viewport Meta Tag
Web Fonts
The @font-face Property
Font Kits and Font Services
Google Web Fonts
Subscription Font Foundries
Icon Fonts
The Workflow for HiDPI Devices
2x Images
The JavaScript Approach
1.5x images
Background Images
SVG
Srcset
Flexbox
Introduction to Flexbox
From Floats to Flexbox
Understanding flex-grow, flex-shrink, flex-basis, and flex
More Layout, More Positioning
Building the Product Listing
flex-wrap and align-content
Changing the Display Order of Content
Vendor Prefixes
Wrapping Up
Next Steps
Conclusion and Links

Video Details

ISBN 139781787126794
Course Length6 hours and 9 minutes
Read More
From 1 reviews

Read More Reviews

Recommended for You

Mastering Python - Second Edition [Video] Book Cover
Mastering Python - Second Edition [Video]
$ 104.99
$ 10.00
Responsive Web Design with HTML5 and CSS3 - Second Edition Book Cover
Responsive Web Design with HTML5 and CSS3 - Second Edition
$ 31.99
$ 10.00
RESTful Web API Design with Node.js - Second Edition [Video] Book Cover
RESTful Web API Design with Node.js - Second Edition [Video]
$ 124.99
$ 10.00
Learning Angular components - Second Edition [Video] Book Cover
Learning Angular components - Second Edition [Video]
$ 124.99
$ 10.00
Migrating to Angular 2 - Second Edition [Video] Book Cover
Migrating to Angular 2 - Second Edition [Video]
$ 124.99
$ 10.00
HTML5 Game Development - Second Edition [Video] Book Cover
HTML5 Game Development - Second Edition [Video]
$ 74.99
$ 10.00