English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 8h 45m | 1.09 GB
CSS is a must-know language for all web developers. In this practical book, you’ll explore numerous techniques to improve the way you write CSS as you build 12 tiny projects.
In Tiny CSS Projects you’ll build twelve exciting and useful web projects including:
- A loading screen created by styling SVG graphics
- A responsive newspaper layout with multiple columns
- Animating social media buttons with pseudo-elements
- Designing layouts using CSS grids
- Summary cards that utilize hover interactions
- Styling forms to make them more appealing to your users
The projects may be tiny, but the CSS skills you’ll learn are huge! Tiny CSS Projects teaches you how to make beautiful websites and applications by guiding you through a dozen fun coding challenges. You’ll learn important skills through hands-on practice as you tinker with your own code and make real creative decisions about the projects you’re building. You’ll rapidly master the basics and then press on into CSS’s exciting layout features including grid and flexbox, animations, transitions, and media queries.
Don’t settle for boring web pages! With Cascading Style Sheets you can control color, layout, and typography to make your sites both functional and beautiful. CSS is an essential skill for web developers and designers. This book will help you get started the right way.
Tiny CSS Projects builds your CSS skills by guiding you through 12 creative mini-projects. Each interesting challenge starts with a downloadable HTML skeleton. As you flesh it out with your own design ideas, you’ll master CSS concepts like transitions, layout, and styling forms, and explore powerful features including Flexbox and Grid. All the skills you’ll learn are easy to transfer to full-size applications. When you finish, you’ll have an exciting portfolio of designs ready to go for your next project.
What’s Inside
- Transitions and animations using keyframes
- Layout techniques including Grid and Flexbox
- Styling form elements including radio buttons
- Embedding fonts and typography-related styles
- Conditional styling using pseudo-elements and media queries
Table of Contents
1 CSS introduction
2 Getting started with CSS by creating an article layout
3 Adding CSS to our HTML
4 The cascade of CSS
5 Specificity in CSS
6 CSS selectors
7 Different ways to write CSS
8 Summary
9 Designing a layout using CSS Grid
10 Display grid
11 Grid tracks and lines
12 Grid template areas
13 Media queries
14 Accessibility considerations
15 Summary
16 Creating a responsive animated loading screen
17 SVG basics
18 Applying styles to SVGs
19 Animating elements in CSS
20 Accessibility and the prefers-reduced-motion media query
21 Styling an HTML progress bar
22 Summary
23 Creating a responsive web newspaper layout
24 Using CSS counters
25 Styling images
26 Using the CSS Multi-column Layout Module
27 Adding the finishing touches
28 Summary
29 Summary cards with hover interactions
30 Laying out the page using grid
31 Styling the header using the background-clip property
32 Styling the cards
33 Using transitions to animate content on hover and focus-within
34 Summary
35 Creating a profile card
36 Setting CSS custom properties
37 Creating full-height backgrounds
38 Styling and centering the card using Flexbox
39 Styling and positioning the profile picture
40 Setting the background size and position
41 Styling the content
42 Styling the actions
43 Summary
44 Harnessing the full power of float
45 Styling the quote
46 Curving text around the compass
47 Wrapping text around the dog
48 Summary
49 Designing a checkout cart
50 Theming
51 Mobile layout
52 Medium screen layout
53 Wide screens
54 Summary
55 Creating a virtual credit card
56 Creating the layout
57 Working with background images
58 Typography
59 Creating the flipping-over effect
60 Border radius
61 Box and text shadows
62 Wrapping up
63 Summary
64 Styling forms
65 Resetting fieldset styles
66 Styling input fields
67 Styling drop-down menus
68 Styling labels and legends
69 Styling the placeholder text
70 Styling the Send button
71 Error handling
72 Adding hover and focus styles to form elements
73 Handling forced-colors mode
74 Summary
75 Animated social media share links
76 Setting up
77 Sourcing icons
78 Styling the block
79 Styling the elements
80 Animating the component
81 Summary
82 Using preprocessors
83 Sass variables
84 @mixin and @includ
85 Nesting
86 @each
87 Color functions
88 @if and @else
89 Final thoughts
90 Summary
91 Working with vendor prefixes and feature flags
Resolve the captcha to access the links!