css/front end/ By Nima shokouhfar
This mind map offers a comprehensive overview of CSS fundamentals and styling techniques, drawing from Brad’s course on web design. It covers a variety of key topics essential for both beginners and advanced web developers. The mind map is divided into sections: CSS Styling Basics: Detailed explanations of core CSS properties such as overflow, borders, padding, and positioning. It also highlights how to use inline, internal, and external CSS styles and touches on nested selectors and styling...
1. Styles
1.1. bad
1.2. good
1.3. not as good
1.4. not as bad
1.5. important
1.6. warning
2. main
2.1. brad course
2.1.1. 004
2.1.1.1. overflow: auto;
2.1.1.1.1. so the background shows
2.1.2. 003
2.1.2.1. 002
2.1.2.1.1. options
2.1.2.1.2. syntax
2.1.2.2. 003
2.1.2.2.1. style with id
2.1.2.2.2. by class
2.1.2.2.3. nested selector
2.1.2.3. 005
2.1.2.3.1. 005
2.1.2.4. 006
2.1.2.4.1. color
2.1.2.5. 007
2.1.2.5.1. borders
2.1.2.5.2. image
2.1.2.5.3. background
2.1.2.6. 008
2.1.2.6.1. reset
2.1.2.6.2. padding add to size
2.1.2.6.3. padding
2.1.2.7. 009
2.1.2.7.1. why container
2.1.2.7.2. text-align: center;
2.1.2.7.3. text-align: justify
2.1.2.7.4. floating
2.1.2.8. 011
2.1.2.8.1. li:lastchild
2.1.2.8.2. nested style
2.1.2.9. 012
2.1.2.9.1. display
2.1.2.10. 013
2.1.2.10.1. positions
2.1.2.11. 016
2.1.2.11.1. display: none
2.1.2.11.2. visibility:hidden
2.1.2.11.3. to overwrite styles you can use
2.1.3. 005
2.1.3.1. 001
2.1.3.1.1. media queries
2.1.3.1.2. use rem units
2.1.3.1.3. mobile first
2.1.3.2. 002
2.1.3.2.1. media queries
2.1.3.3. 003
2.1.3.3.1. em and rem
2.1.3.4. 004
2.1.3.4.1. VH & VW
2.1.4. 006
2.1.4.1. 001
2.1.4.2. flex
2.1.4.2.1. align-items: center;
2.1.4.2.2. flex-direction: column;
2.1.4.2.3. flex-wrap:wrap;
2.1.4.2.4. justify-content
2.1.4.2.5. flex sizes on screen change
2.1.5. 011
2.1.5.1. 001
2.1.5.1.1. grid
2.1.5.2. 002
2.1.5.2.1. grid-template-columns: 200px 200px 200px;
2.1.5.2.2. grid-template-columns: repeat(3, auto);
2.1.5.2.3. grid-template-rows: 1fr 2fr 3fr;
2.1.5.2.4. fr unit
2.1.5.2.5. grid-gap:1rem
2.1.5.2.6. grid-column-start
2.1.5.3. 004
2.1.5.4. 005
2.1.5.4.1. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
2.1.5.5. 006