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.
About the Author
Rich Finelli is a husband and a father living in Piscataway, NJ, working as a frontend developer. He's truly passionate and excited for all frontend technologies and enjoys learning about web design and development. He also teaches two courses on CSS at Mercer County Community in NJ, and writes about web design on his blog.
The course needs a summary that describes what will be learned over the course of each section, provide a course overview, and describe what will be learned.
In order to style websites with CSS, you must understand the syntax for writing CSS rules.
All CSS elements conform to a box model. If the box model isn't understood completely, CSS cannot be mastered. The same goes with block and inline elements.
Writing code is error-prone and hard; a good text editor like Sublime Text 3 solves this problem.
Browsers add a lot of default styling, especially margins and padding. A nice CSS reset can solve this and allow you to provide the styling.
CSS doesn't always work without failing. Usually, it's a tiny overlooked mistake that causes something not to work and is hard to find and fix. Enter the Chrome Dev Tools.
CSS allows you to position, style, and control elements on a page. What if you want to style one div differently than another? You can name an element with a class.
Renaming elements with classes is an extremely powerful feature in CSS. However, this is not the only way to target a specific type of element. Descendant selectors allow you to target elements on a page based on their parent element.
How to have text flow around an image? The origin of floats.
How do we create a page layout without abusing tables? Using Floats.
When all elements inside a container are floated, the container "collapses." We'll go over three methods of fixing this.
Buttons appear all over a site (Go Premium, Learn More, Submit, and so on) and usually have the same general style but vary in things such as color, width, and position. Creating modular lightweight classes to handle this variation can be very efficient.
Buttons vary throughout the site, but a good portion of the button style remains the same. Multiple classes on an element will allow variation in our style with an object-oriented approach.
Understanding which selectors overrule other selectors can be confusing. Throughout a site, overriding styles tends to be common, so understanding specificity and weight is important.
Creating an added experience layer, transitioning elements from the default to hover state and vice versa.
CSS3 allows us to transform elements like never before.
Most sites need a call to action button to drive users toward a desired result.
Writing gradient syntax by hand is lengthy and difficult. Use an online tool to automate it.
How to target elements based on their order of appearance without adding a class to the HTML.
How to get the shark positioned properly, and how to get the menu to be “sticky” to the top and always visible.
How do we build the drop-down menu?
Need to smoothly animate the drop-down menu sliding down.
In the previous video, we explained the surface of animations, in this video; we will take a deeper dive into what animations can do.
We have a z-index bug, and we need the box shadow and the nav on all pages.
How to make images squishy like our content.
How to fix remaining issues with the site at narrower widths.
The navigation really is terrible looking at mobile widths, and we need a design pattern that will withstand adding more menu items.
Need to test a device on a phone.
There were only so many “web safe” fonts out there until Web Fonts came along.
It's kind of hard to make Web Fonts work in all browsers by yourself. Here's how font kits solve this when hosting your own web fonts.
Where can you get free quality web fonts?
How do you obtain fonts that aren't free? Through subscription font foundries.
Have a lot of solid color images or icons on your site and want to reduce the number of http requests? Icon Fonts can help.
Retina devices make our images look blurry. We need to supply larger images.
Double-sized images can be 3-4 times as large as their regular sized counterpart. Creating two images to account for retina and non-retina is a lot of work. There is a middle ground: 1.5x images.
How do we account for background images on retina?
We don't have a perfect solution to the retina trials and tribulations, but SVG is pretty darn good.
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 Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.