Just enough CSS to build Modern UI
Building user interfaces is an essential skill for every web developer to continue to level up in. It’s a core skill that you need to keep sharp. Below we’ve laid out a guide for you to refine what you know and keep your skills sharp regardless of your circumstance. Each section is estimated to be 2-3 weeks worth of study and project material. As you work through the guide, layer on the skills you learn in one section to the concepts and challenges you take on in the next
Fundamentals
CSS Fundamentals
Tyler Clark・33m・Course
All developers can learn something new when it comes to using and understanding how the browser interprets CSS. We will slowly style a website according to a mocked image.
Page Layouts with Flexbox and Grid
One of the best skills to learn in the UI space is how to layout a page. You’ll see dev’s joke about the struggles of centering a div. It can be hard. But learning the underlying principles of layouts will have you positioning elements where ever you’d like on the page. CSS has really great built in solutions for layouts with Flexbox and Grid. Flexbox is the solution we suggest reaching for first, it has good default behaviors and great for small layout problems you encounter around your app. CSS Grid is for getting serious about the macro layout of a page or when you have many items of varying size you want to display. The line between Flexbox and Grid can be fuzzy sometimes which is why Stephanie created a course to demonstrate how you can use both together to handle all your page layouts.
Ready for a CSS Layout Challenge?
Apply what you know to this Portfolio Challenge that will test your ability to create a responsive design with two different layouts.
Flexbox Fundamentals
Garth Braithwaite・18m・Course
Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support.
Build Modern Layouts with CSS Grid
Hiroko Nishimura • 22m • Course
CSS Grid Layout introduces a system allowing both fixed and flexible track sizes. In this course, you'll build pages that behave how you expect it to on any device.
Create a Landing Page with CSS Grid and Flexbox
Stephanie Eckles・20m・Course
Learn how to progressively style a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario.
CSS in Modern Apps
How you write your CSS within a modern project can vary greatly. At egghead, we use Tailwind to solve a two big problems for us, naming classes and organizing CSS. Naming things is hard and Tailwind eliminates this category of problem with utility classes. Utility classes are essentially standardized, pre-defined, composable CSS classes that you have at your disposal to apply the stying you want where you want it (no selectors involved as it goes directly on the element). Organizing CSS is also hard and Tailwind utilizes component architecture to eliminate this problem. When you couple your CSS with the components you build you don’t need to worry about maintaining extra files as your styles go where your components are.
Craft Scalable, Custom-Made Interfaces with Tailwind CSS
Sam Selikoff • 2h 34m • Course
Learn the fundamentals of styling a modern web application with Tailwind CSS's utility classes, as well as integrating it with component-based frameworks like React and Vue.
Ready for a TailwindCSS Challenge?
Apply what you know to this Portfolio Challenge that will test your ability to create a responsive design with two different layouts.