Confidently follow learning paths that help you develop the right skills in the right order to achieve your goals.
Web browsers are extremely capable graphics platforms with the ability to manipulate fonts, colors, shapes and even animations. The file format that controls these is cascading style sheets (CSS).
You should be confident with the basics of HTML markup
These first CSS tutorials will provide you with the knowledge to start working with CSS and web design. You’ll learn CSS tricks, including layouts, the HTML box model, styling text and CSS selectors. You will also learn the art of typography and how to keep your web pages looking good across all types of devices.
An Introduction to CSS will give you all the knowledge you need to start working with Cascading Style Sheets (CSS) and web design. During the course you'll see how to achieve 2 and 3 column layouts with CSS, and learn how to work with the HTML box model and CSS cascade feature. Along the way we'll also be styling text, changing colors, and using the flexibility and power of CSS selectors.
Understanding CSS positioning can be tricky, especially for beginners to CSS. It is also essential to understand if you want to be able to build complex layouts. In this CSS tutorial we'll learn about different methods for using CSS to position HTML elements including fixed, absolute, relative positioning, and also how to float and clear elements. We'll also take a look at the ways each type of positioning affects the element it is applied to, and how it affects the behavior of elements around it. We'll finish up this CSS training by answering one of the most common CSS questions about positioning: How to center elements. Software required: Brackets, Google Chrome.
Web fonts have been around for a few years now, as has Responsive Web Design. But there are still lots of questions about performance, usability and consistency across browsers and devices. This course explores the world of web fonts and responsive type, what web fonts are, how they work and why you should be using them. Course materials can be found at https://github.com/jpamental/workshop-rt and http://frontendmasters.com/assets/resources/jasonpamental/ResponsiveTypographySlides.zip
Now that you have a strong understanding of CSS and its capabilities, you will learn how to make your CSS more readable, maintainable and easier to write with LESS and SASS. You will also dive a little deeper into the world of responsive design, CSS gradients and even learn how responsive design can be made easier through Bootstrap.
CSS is a great way to separate your design and markup during HTML development, but there are key pain points that make it more difficult than it should be. Dynamic stylesheet languages like LESS and SASS can make style sheets more readable, maintainable, and easier to write. This course dives into both LESS and SASS and shows you how powerful these languages can be.
From smart phones to tablets and even 60″ HDTV sets, your site can be viewed everywhere on almost every device. But is your site built to respond for all the different size and display options? A pioneer in responsive web design, Ben Callahan, leads you through the process of what it means to build a web site in the 21st century. Ben tackles RWD process, prototyping and patterns down to specific coding tactics with media queries and responsive CSS.
Learn to create a modern, responsive website using Bootstrap 3. Major design patterns for responsive web pages will be covered along with Bootstrap's implementations of each one. We'll then create a trendy single page site with modern features. Some features include an animated navigation area, animated scrolling, fully responsive images, wallpaper images and video, and several animated elements used on many sites.
Learn how deep the CSS3 rabbit hole goes in this jam-packed course with CSS luminary Estelle Weyl. Estelle dives deep into the various components of CSS3 including: selectors, specificity, generated content, media queries, debugging, colors, fonts, shadows, text-effects, borders, backgrounds, gradients, transforms, transitions, animations…and more! Exercise files available at: http://estelle.github.com/CSS-Workshop.
Once you have some solid CSS experience and knowledge, you’re ready to go deep into the features of CSS3. In these tutorials, you’ll gain an understanding of CSS3 topics such as selectors, generated content, media queries, shadows, text-effects, transitions, animations and much more.