Shopping Cart

Become a Learning.ly Instructor

Mastering CSS

291 minutes of course content

Review course syllabus

$19.99 $75.00 (taxes calculated at checkout)

100% money-back guarantee  |  Click here to read more

Share this course:
Facebook Google LinkedIn Pinterest Twitter

Course Description

In this course you'll learn the skills that make up the entire Product Management job and process: from ideation to market research to UX wireframing to prototyping, technology, metrics, and finally to building the product with user stories, project management, scoping, and leadership.

Right now, there are over 3,000+ job listings worldwide that are looking for Product Managers, that pay on average $100,000 / year. The demand for Product Management is increasing at an insane rate. More and more companies are finally figuring out how important this discipline and this role is to their success.

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

About This Video

  • Understand the role of CSS in responsive web design
  • Write modular, reusable CSS for better management of stylesheets
  • Learn everything there is to know about creating a multi-column layout and menu using floats
  • Explore web fonts, icon fonts, SVG, and techniques used to support HiDPI devices

In Detail

CSS is a deceptively simple presentation language that has significantly developed over the last few years. Frontend 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’ll also go into detail about 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.

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. Mastering CSS 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.

    After taking this course, you will be able to:

    • Master the fundamental CSS concepts, such as the box model, the anatomy of a rule set, and the types of style sheets
    • Explore some of the most solid techniques used to solve the problems of floats, such as the clearfix hack
    • Become proficient with CSS3 properties such as transitions, transforms, gradients, pseudo classes, and animations
    • Delve into modular, reusable, and scalable CSS for more organized and smaller style sheets
    • Get creative with the @font-face property, font kits, Google Web Fonts, subscription font services, and icon fonts
    • Take advantage of the Chrome developer tools to troubleshoot CSS
    • Rename elements with classes, use descendant selectors, and understand specificity rules
    • Leverage the power of absolute, relative, static, and fixed positioning techniques
    • Understand media queries and the other fundamentals of responsive web design
    • Display the workflow for HiDPI (retina) devices using 2x images, 1.5x images, JavaScript approaches, and SVG

    This course is for professionals within the following business functions:

    • If you know a little bit about CSS but struggle with floats, or creating tricky UI elements such as a dropdown menu, and you want to expand on your knowledge of CSS to learn responsive web design, web fonts, SVG, retina techniques, icon fonts, and other advanced-level topics, this is the course for you.

        1. CSS Foundations - 20 Minutes

          1. The Course Overview
          2. The Anatomy of a Rule Set and the Three Types of Style Sheets
          3. The Box Model and Block versus Inline Elements
        2. Ramping Up - 32 Minutes

          1. Text Editors
          2. CSS Reset
          3. Chrome Dev Tools
          4. Renaming Elements: Classes and IDs
          5. Descendant Selectors
        3. Creating a Page Layout with Floats - 18 Minutes

          1. Floats Introduction – Flowing Text around Images
          2. Creating a Multicolumn Layout
          3. Solving the Problems of Floats
        4. Creating Buttons with Modular, Reusable CSS Classes, and CSS3 - 39 Minutes

          1. Creating Buttons with Modular CSS
          2. Multiple Classes
          3. Specificity Rules
          4. Transitions
          5. Transforms
          6. Styling a Call to Action Button
          7. Gradients
        5. Creating the Main Navigation and Drop - 54 Minutes

          1. Starting the Navigation
          2. Using Pseudo Classes
          3. Absolute Positioning
          4. Building the Drop-down
          5. CSS Animations (Part 1)
          6. CSS Animations (Part 2)
          7. Finalizing the Navigation
        6. Becoming Responsive - 44 Minutes

          1. Fluid Grid
          2. Flexible Images
          3. Media Queries
          4. Mobile Menu
          5. Viewport Meta Tag
        7. Web Fonts - 32 Minutes

          1. The @font-face Property
          2. Font Kits and Font Services
          3. Google Web Fonts
          4. Subscription Font Foundries
          5. Icon Fonts
        8. The Workflow of HiDPI Devices - 34 Minutes

          1. 2x Images
          2. The JavaScript Approach
          3. 1.5x Images
          4. Background Images
          5. SVG
        9. Wrapping Up - 18 Minutes

          1. Next Steps
          2. Conclusion and Links

        About the Expert

        Packt

        Packt

        Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work. With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now. From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer. Packt Learning.ly courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.
        Read more