by Rich Finelli | Publisher: Packt Publishing | Release Date: March 2017 | ISBN: 9781787126794

Get to grips with CSS best practices to create modern, responsive, and retina-ready websitesAbout This VideoThe popular Mastering CSS video course is brought up to date in its second edition to include the newest techniques with CSSDeep 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 SVGIt 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 applicationsIn DetailCSS 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.

1. Chapter 1 : CSS Foundations
   • The Course 00:05:55
   • The Anatomy of a Rule Set and the ThreeTypes of Style Sheets 00:07:18
   • The Box Model and Block versus Inline Elements 00:06:27
2. Chapter 2 : Ramping Up
   • Text Editors 00:06:52
   • CSS Reset 00:07:52
   • Chrome Dev Tools 00:04:57
   • Renaming Elements: Classes and IDs 00:06:33
   • Descendant Selectors 00:05:54
3. Chapter 3 : Creating a Page Layout with Floats
   • Floats Introduction – Flowing Text around Images 00:05:08
   • Creating a Multicolumn Layout 00:05:39
   • Solving the Problems of Floats 00:07:24
4. Chapter 4 : Creating Buttons with Modular CSS
   • Creating Buttons with Modular CSS 00:05:17
   • Multiple Classes 00:04:43
   • Specificity Rules 00:07:42
   • Transitions 00:06:45
   • Transforms 00:07:01
   • Styling a Call to Action button 00:05:24
   • Gradients 00:03:47
5. Chapter 5 : Creating the Main Navigation
   • Starting the Navigation 00:06:46
   • Using Pseudo Classes 00:05:44
   • Absolute Positioning 00:05:20
   • Building the Drop- down 00:07:44
   • CSS Animations 00:06:19
   • CSS Anima-tions(Continued) 00:07:46
   • Finalizing the Navigation 00:07:18
6. Chapter 6 : Becoming Responsive
   • Fluid Grid 00:11:14
   • Flexible Images 00:08:18
   • Media Queries 00:09:38
   • Mobile Menu 00:10:54
   • Viewport Meta Tag 00:03:23
7. Chapter 7 : Web Fonts
   • The @font-face Property 00:04:17
   • Font Kits and Font Services 00:06:24
   • Google Web Fonts 00:04:38
   • Subscription Font Foundries 00:06:15
   • Icon Fonts 00:10:41
8. Chapter 8 : The Workflow for HiDPI Devices
   • 2x Images 00:06:06
   • The JavaScript Approach 00:07:39
   • 1.5x images 00:04:32
   • Background Images 00:06:06
   • SVG 00:08:01
   • Srcset 00:12:13
9. Chapter 9 : Flexbox
   • Introduction to Flexbox 00:05:37
   • From Floats to Flexbox 00:08:44
   • Understanding flex-grow, flex-shrink, flex-basis, and flex 00:13:32
   • More Layout, More Positioning 00:10:13
   • Building the Product Listing 00:10:55
   • flex-wrap and align-content 00:08:59
   • Changing the Display Order of Content 00:08:45
   • Vendor Prefixes 00:07:30
10. Chapter 10 : Wrapping Up
    • Next Steps 00:11:08
    • Conclusion and Links 00:06:41