https://github.com/moonhighway/css-layout
This course introduces the developers to layout concepts using css.
https://github.com/moonhighway/css-layout
Last synced: about 1 year ago
JSON representation
This course introduces the developers to layout concepts using css.
- Host: GitHub
- URL: https://github.com/moonhighway/css-layout
- Owner: MoonHighway
- License: mit
- Created: 2015-08-15T18:48:12.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-05-04T22:06:18.000Z (about 9 years ago)
- Last Synced: 2025-03-20T03:06:40.944Z (over 1 year ago)
- Language: HTML
- Size: 5.42 MB
- Stars: 5
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CSS Layout
=============================
This course introduces the developers to layout concepts using css. We take a look at all of the ways that elements and
text can be handled to address the challenges of varying screen sizes.
Topics
------
* Advanced Selection
* Images and Text
* Box Model and Positioning
* Effects and Filters
* Flexbox
* Javascript Integration
### Advanced CSS Selection
* [Selector Playground](http://jsbin.com/movuku/1/edit?html,css,output)
### Images and Text
* [Boxes and Backgrounds (1-3)](http://jsbin.com/fisufe/1/edit?css,output)
* [Embedded Images](http://jsbin.com/jevise/1/edit?css,output)
* [Sprites](http://jsbin.com/kerafu/1/edit?css,output)
* [google fonts](https://www.google.com/fonts)
### Box Model Positioning
* [barely fitz positions](http://www.barelyfitz.com/screencast/html-training/css/positioning/)
* [box positions (1, 2)](http://jsbin.com/tilarag/1/edit?html,css,output)
### Effects and Filters
* [vendor prefixer](http://pleeease.io/play/)
* [text shadow](http://jsbin.com/eboniki/1/edit?css,output), [box shadow](http://jsbin.com/Ulihaba/1/edit?css,output)
* [border radius, circles](http://jsbin.com/obekipa/1/edit?html,css,output)
* [gradients](http://jsbin.com/axahefo/1/edit?css,output)
* [colors, rgb, hsl, rbga, hsla](http://jsbin.com/otajix/1/edit?html,css,output)
* [Transform](http://jsbin.com/woluxa/1/edit?css,output)
* [filters on images (1-10)](http://jsbin.com/eGAlIdi/5/edit?html,css,output)
* [CSS3 Generator](http://css3generator.com/)
### Flexbox
* [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
* [Examples (1-5)](http://jsbin.com/rivawa/5/edit?html,css,output)