Mastering CSS – Second Edition

Mastering CSS – Second Edition

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6h 09m | 1.56 GB

Get to grips with CSS best practices to create modern, responsive, and retina-ready websites

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.

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.

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
Table of Contents

01 The Course
02 The Anatomy of a Rule Set and the ThreeTypes of Style Sheets
03 The Box Model and Block versus Inline Elements
04 Text Editors
05 CSS Reset
06 Chrome Dev Tools
07 Renaming Elements – Classes and IDs
08 Descendant Selectors
09 Floats Introduction – Flowing Text around Images
10 Creating a Multicolumn Layout
11 Solving the Problems of Floats
12 Creating Buttons with Modular CSS
13 Multiple Classes
14 Specificity Rules
15 Transitions
16 Transforms
17 Styling a Call to Action button
18 Gradients
19 Starting the Navigation
20 Using Pseudo Classes
21 Absolute Positioning
22 Building the Drop- down
23 CSS Animations
24 CSS Anima-tions(Continued)
25 Finalizing the Navigation
26 Fluid Grid
27 Flexible Images
28 Media Queries
29 Mobile Menu
30 Viewport Meta Tag
31 The @font-face Property
32 Font Kits and Font Services
33 Google Web Fonts
34 Subscription Font Foundries
35 Icon Fonts
36 2x Images
37 The JavaScript Approach
38 1.5x images
39 Background Images
40 SVG
41 Srcset
42 Introduction to Flexbox
43 From Floats to Flexbox
44 Understanding flex-grow, flex-shrink, flex-basis, and flex
45 More Layout, More Positioning
46 Building the Product Listing
47 flex-wrap and align-content
48 Changing the Display Order of Content
49 Vendor Prefixes
50 Next Steps
51 Conclusion and Links