CSS Resources
Kevin Powell
A simple approach to layouts when going from design to code
Note: Figma, Display Grid, Grid
VS Code |
Modern CSS |
Smashing Magazine Figma Tuts
W3 Schools CSS
** W3 CSS ** |
w3 CSS References
CSS Templates
** CSS
Templates ** |
** w3 Schools CSS
** |
**
Shay Howe CSS ** |
** Shay How CSS Box Model ** |
** Speckboy CSS Layouts and Codepen **
CSS Clock
CSS Tricks CSS Only Clock
CSS Alignment, Centering
Alignment |
Bootstrap Horizontal Alignment |
Smashing Magazine CSS Alignment
CSS Tricks Centering |
CSS Centering |
Geeks for Geeks Align
form {
max-width: 620px;
margin: auto;
padding: 10px;
background: #2196f3;
}
CSS Grid
CSS
Tricks Grid |
Grid Layout it
CSS Font
W3 CSS
Font |
CSS Tricks Font Properties |
Typography
w3 Icons
Font Awesome
Font Awesome Cheat Sheet
Loading...
Loading...
Loading...
Loading...
Loading...
V5 Get Bootstrap
** V5 Bootstrap **
CSS in General
* CSS Layout io * |
CSS Reference io |
** Shay Howe CSS **
* CSS Tricks Almanac * |
CSS Learn Layout TOC |
CSS Learn Layout |
CSS Position Marksheet io
CSS Position Educative io |
CSS Position Medium |
CSS Position Flaviocopes
Opacity CSS Tricks
CSS W3 Schools
* W3 Schools CSS Home * |
* W3 Schools CSS Reference *
Align Center Left Right |
W3Schools CSS
CSS Grid |
CSS Align |
CSS Layout
* CSS Ultimate Guide * |
* CSS Zen *
Kevin Powell CSS
Improve your CSS by Keepin' it DRY |
Kevin Powell YouTube Channel
CSS Bootstrap
Bootstrap CSS |
Grid |
Align
Images Align |
Bootstrap Vertical Alignment |
CSS
Display inline block |
CSS Flexbox
CSS Flexbox
Foundation Zurb
Foundation |
Site Docs |
Email Docs
CSS Tips and Tricks
li first child for
navigation of logo |
CSS Responsive Images
W3 Responsive Images |
MDN Responsive Images |
Bootstrap
4 Responsive Image
Ul Li Example...Not Good I think due to bootstrap..
VS Code, Emmet, ! Tab, cdn Bootstrap https://www.bootstrapcdn.com/,
Example:
Templates Main |
Fonts
Importing |
Short List Best Of
* Development Process * |
* Outline Design and Development * |
* Bootstrap Quick Start *
CDN JS Font Awesome |
Coggle Thoughtmap |
Wireframe
|
Canva
Best Leveraging Tools
Emmet |
* Dev Hints Emmet Cheatsheet * |
Scotch IO Emmet |
** Text Expander **
CSS Images
CSS
Background Image Size |
Gulp Image Compression |
SVG Go |
Image Responsive Bootstrap 4
SASS
SASS Basics
CSS Colors, Gradients and Opacity
MDN CSS Colors |
CSS Tricks Gradients |
CSS Opacity |
Code Pen Example Opacity
UX/UI
Design Course YT |
TailBlocks |
Tailwind CSS
SASS
Sass Meister
Layout Grids, Rows and Columns
Canva |
Colorlib |
Idealware |
Mockflow
Moqups |
Figma Layout-Grids
Canva Golden Ratio
Get Bootstrap
* Bootstrap CDN * |
Bootstrap Starter Template |
Bootstrap Getting Started
Layout Overview |
Grid Mix and Match
Themes
Generic CSS
Shay Howe Box Model |
w3 Box Model |
CSS Tricks Box Model
CSS Layout TOC |
CSS Reference io |
MDN CSS Reference
CSS Flexbox and Grid Row
Youtube Flexbox Tutorial |
Box Sizing Border Box
Codepen Flexbox Examples |
MDN Grid Row CSS |
** Grid by Example **
CSS Tricks Grid Guide |
BEM and Other Naming Conventions
BEM Info |
BEM 101
Other Tips and Tricks
UL
** Canva Color Themes **
Images
Placeholder |
Pexels |
Pixabay
Google Dev Image Optimization |
Kraken IO |
Litmus Image Compression |
Images Guide
Daily Top Favorites
Write Box |
A Soft Murmur Rain Sounds |
JS Console
:load https://cdn.jsdelivr.net/momentjs/latest/moment.min.js
moment().format('dddd MMMM Do YYYY, h:mm A')
Table Styling
CSS-Tricks Table Styling