Skillset: CSS Guru

Skillset

Author of 8 skillsets

CSS Guru

Subject: Computing / Programming / Web programming / Web frontend development

Know how to create web sites with CSS

Share in MD format

## [Skills tree CSS Guru](https://infinite.education/view/CSS_Guru)

**[Responsive design](https://infinite.education/view/responsive_design)**
* **Responsive images**
* **Media queries**
* **Viewport meta - when need to control viewport?**
**[Images](https://infinite.education/view/images)**
* **Fading image**
* **Full screen image**
* **Fitting image into circle**
* **Using Icon fonts**
* **Fitting image: fill, contain, cover, scale-down, none**
* **Image filters**
* **<img> vs background-image**
* **Image hover effects**
* **Image transitions**
* **<img> vs <picture>**
**[Texts](https://infinite.education/view/texts)**
* **Vertical text - is it possible?**
* **What is text baseline**
* **Multi-color text using shadow**
* **Limit text width with ellipsis**
* **Make text UPPERCASE/LOWERCASE**
* **How to center text vertically**
* **Cross-device fonts**
* **Changing font**
* **Font styling: italic, bold, strikeout, undreline**
* **Alignt text: left, right, center**
* **Changing text size**
**[CSS Precompilers](https://infinite.education/view/css_precompilers)**
* **LESS**
* **SASS**
**[Layout](https://infinite.education/view/layout_1)**
* **Distinguishing Display modes**
* **Flexbox**
* **Box models: border-box vs content-box**
* **DIV vs TABLE layouting**
**[Aligning elements](https://infinite.education/view/aligning_elements)**
* **Center block element with margin: auto**
* **Why need to clear floating**
* **Alignment of inline vs block elements**
* **Float vs text-align**
**[CSS Syntax](https://infinite.education/view/css_syntax)**
 -- `Course` [CSS Reference](https://www.w3schools.com/cssref/default.asp)
**[CSS selector](https://infinite.education/view/css_selector)**
**[Colors](https://infinite.education/view/colors)**
* **RGBA() - color with transparency**
* **Hexadecimal colors**
* **RGB() - three-bytes color representation**
* **HSL() colors**
* **HSLA() - colors with transparency**
* **Named colors**
**[Browser differences](https://infinite.education/view/browser_differences)**
* **Chrome is not the only browser**
* **Why need to use vender prefixes**
* **Mobile vs Desktop**
**[Popular CSS frameworks](https://infinite.education/view/popular_css_frameworks)**
* **Bootstrap**
* **Bulma**
* **Foundation**
* **UI kit**
* **Materialize CSS**
**[Positioning elements on the page](https://infinite.education/view/positioning_elements_on_the_page)**
* **Absolute positioning - pros and cons**
* **Relative positioning**
* **Stick element to point via Fixed positining**
* **How to stick menu when scrolling?**
**[Basics of HTML](https://infinite.education/view/basics_of_html)**
 -- `Article` [](https://www.w3schools.com/html/default.asp)

Must-have Nice to have Optional

Recommended option

CSS Guru. Instruction on how to learn CSS Guru

Roadmap

by Ann Mary

Courses

Add

}

Auth

Or