Skip to content

Commit 335edee

Browse files
vbsmbbvbsmbb
committed
Learning sections complete
1 parent 955ec81 commit 335edee

39 files changed

+5310
-8
lines changed

‎Inter.zip

1.72 MB
Binary file not shown.

‎Notes/Section3.md

Lines changed: 307 additions & 0 deletions
Large diffs are not rendered by default.

‎Notes/Section4.md

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
# Layouts: Floats, Flexbox, and CSS Grid
2+
3+
## Section Intro
4+
5+
## The Three Ways of Building Layouts
6+
7+
1. Layout is the way that text, images, and other content are arranged on the web page
8+
2. The layout gives the page a visual structure into which content is placed
9+
3. Building a layout means to arrange page elements into a visual structure instead of having the elements palced one after the other in normal flow
10+
4. Page layout vs. Component layout
11+
12+
A. Components also need layout
13+
14+
B. It would not make sense to create a page layout and then let components get placed in a normal flow.
15+
16+
C. You also need to layout components within the page layout
17+
18+
5. The three ways of building layouts in CSS
19+
20+
A. Floats
21+
22+
- This is an old way of building layouts
23+
- It uses the FLOAT property
24+
- This technology is being replaced by Flexbox and CSS Grids
25+
26+
B. Flexbox
27+
28+
- This is a modern way of laying out components in a one dimensional direction without using floats
29+
- The flexboxis perfect for component layouts
30+
31+
C. CSS Grid
32+
33+
- This is a two-dimenaional way of laying out components on a web page
34+
- It also works well with complex components
35+
36+
37+
## Using Floats
38+
39+
1. When an element is floted, it is removed from the normal flow of the web page
40+
2. Unlike absolute positioning, text and inline elements will wrap around the floated element
41+
3. The container element will not adjust its height due to the floated element
42+
4. If all child elements of a container are floated, the height of the container will collapse (return to 0)
43+
44+
## Clearing Floats
45+
46+
1. You can clear the floats by adding a block element (<div>) with no content to the container with the floated children
47+
2. Then add the clear property to the block element with no content and the floated properties are added back to the container
48+
3. This can get cumbersome and also add numerous empty elements to the HTML code which is not a best practice
49+
4. The clearfix hack is a better way to fix this issue caused by floating all of the children of the container.
50+
51+
* First add another class to the container where the children were floated
52+
* Call it "clearfix"
53+
* Now create a pseudo-element in the clearfix class named after (.clearfix::after)
54+
* This will create a pseudo element as the last element in the container
55+
* The pseudo-element must have content so add an empty text content to the element
56+
* Use the clear: both; property
57+
* Remember psuedo-elements are inline elements
58+
* However, the clearfix element must be a blcok element for the clearfix hack to work
59+
* Add the property, display: block;
60+
* Now, the floated elements are part of their container again
61+
62+
## Building a Simple Float Layout
63+
64+
1. The main header has already been floated so it does not need any further changes
65+
2. However, the article, aside and foother containers need to be layed out to meet the new specs
66+
3. Before the layout is formatted, it makes sense to make the container wider since we are laying out containers side by side
67+
4. Therefore change the width of the container from 800px to 1200px.
68+
5. Float the article container to the left
69+
6. Float the aside container to teh right
70+
7. Notice now that the footer is floated under the aside container
71+
8. Since the footer is its own container, all we need do is add the (clear: both) property to the footer and it will display at the bottom of the page
72+
9. This simple layout is complete
73+
74+
## Box-Sizing: Border-Box
75+
76+
1. If right and left padding is added to our aside then the aside is no longer at the top of teh page, but moves to teh bottom
77+
2. This happens because of the calculation of teh width of the aside container using the standard box model
78+
3. When the left and right padding was added, then the aside container became 380 pixels wide and no longer fit beside the article container
79+
4. A quick fix for this issue is to add the box-sizing property to the aside container and set it to border-box
80+
5. Now, the aside container is back beside the article container where it should be
81+
6. The reason this happened is that the box model sizing was changed due to the border-box property.
82+
7. The aside container will always be it's set width and height regardless of margin and padding.
83+
8. This is such an issue that most CSS developers set the box-sizing property with the broder-box value in the universal selector.
84+
9. Now, the box-sizing is set to border-box for all elements.
85+
10. Our universal selector now has three properties that are applied to every element on teh page:
86+
87+
* margin: 0;
88+
* padding: 0;
89+
* box-sizing: border-box;
90+
91+
## Challenge #1
92+
93+
## Introduction to Flexbox
94+
95+
1. Flexbox is designed to work with a set of children in a container
96+
2. by setting the display proerty to FLEX in the container, the child elements are automatically aligned horizontally across teh web page
97+
3. ALl of the children take the height of the tallest element in the container
98+
4. To center items in the flexbox, add the property align-items to the container with teh value od CENTER
99+
5. To center the items horizontallly across the web page, add the property justify-content to the container with the value of CENTER
100+
6. To add space between the items change the value of the justify-content property to space-between
101+
7. STRETCH is teh default value of teh align-items property
102+
103+
## A Flexbox Overview
104+
105+
1. Flexbox is a set of CSS properties to build a one-dimensional layout
106+
2. The main idea of Flexbox is that empty space inside a container element can be equally divided by its child elements
107+
3. Flexbox makes it easy to align items to one another inside a parent container both horizontally and vertically
108+
4. Flexbox solves common problems such as vertical centering and equal-height columns
109+
5. Flexbox replaces the Floats display mechanism allowing cleaner and fewer HTML and CSS code
110+
111+
### Flexbox Terminology
112+
113+
1. The element upon which flexbox is used is called the flex container
114+
2. To use flexbox on a container, set its display property to the value FLEX
115+
3. The main flow of the itmes in the flex container is called the main axis
116+
4. The perpendicular axis is called the cross axis
117+
118+
### Main Properties of the Flex Container
119+
120+
1. Gap - space between items (length) [default: 0]
121+
2. Justify-Content: How to place items along the main axis
122+
123+
* flex-start [default]
124+
* flex end
125+
* center
126+
* space-between
127+
* space-around
128+
* space-evenly
129+
130+
3. Align-Items: How to place items along the cross axis
131+
132+
* flex-start [default]
133+
* flex-end
134+
* center
135+
* baseline
136+
137+
4. Flex-Direction
138+
139+
* row
140+
* row-reverse
141+
* column
142+
* column-reverse
143+
144+
5. Flex-Wrap
145+
146+
* nowrap
147+
* wrap
148+
* wrap-reverse
149+
150+
6. Align-content
151+
152+
* stretch
153+
* flex-start
154+
* flex-end
155+
* center
156+
* space-between
157+
* space-around
158+
159+
### Properties of Flex Items
160+
161+
1. Align-Self: Used to override align-items for individual items
162+
163+
* auto
164+
* stretch
165+
* flex-start
166+
* flex-end
167+
* center
168+
* baseline
169+
170+
2. Flex-grow: length [default: 0]
171+
3. Flex-shrink: length [default: 1]
172+
4. Flex-basis: auto (define an items width)
173+
5. Flex: shorthand for grow,shrink,basis [default: 0 1 auto]
174+
6. Order: integer (Change order of item w/o changing the HTML code)
175+
176+
## Spacing and Aligning Flex Items
177+
178+
1. Items can be individually by using the Flex Items properties
179+
2. The most used item property is align-self
180+
3. Order can be used to reorder the items in teh flex container
181+
182+
* An order number less than all of the other items will move the selected item to flex-start
183+
* An order number larger than all of the other items will move the selected item to flex-end
184+
185+
4. Easily add space between the flex items with the GAP property on the flex container
186+
187+
## The Flex Property
188+
189+
1. This item property is actually used to size flex items
190+
2. This property is a shorthand property for the item properties
191+
192+
* flex-grow
193+
* flex-shrink
194+
* flex basis
195+
196+
3. Never use the individual properties of the flex shorthand
197+
4. Always use the flex shorthand property
198+
5. Setting flex-grow to 1 (0 is default) will allow the flex items to grow to fill the container
199+
6. Setting flex-shrink to 0, keeps the flex items from shrinking so that they do not overflow teh container
200+
201+
## Adding Flexbox to Our Project
202+
203+
1. In order to get the layouts you want you may need to add some more containers around elements
204+
2. Use a div container to group elements
205+
3. Put a div around the image and link to get them into the correct orientation
206+
4. Use the gap property on the flex container to add space between the flex items
207+
5. Add other margins as required to create the required layout
208+
209+
## Building a Simple Flex Layout
210+
211+
1. You need to group the article and teh aside into another container
212+
2. Add the display property with the FLEX value to teh new container
213+
3. Set the flex shorthand property to allow the items to grow and the width to be 825px for the article and 300px for the aside
214+
4. There should also be a gap of 75px between teh flex items in the new flex container
215+
5. Be sure to set the align-items property
216+
6. The default value for align-items is STRETCH
217+
7. This causes the ASIDE to stretch alll teh way to the end of the article
218+
8. Set the align-items property on the flex container to the value FLEX_START and the aside is now it's normal height
219+
220+
## Challenge #2
221+
222+
## Introduction to CSS-Grid
223+
224+
1. Use display: grid; to create a grid layout
225+
2. The containers are GRID containers
226+
3. The items are GRID items
227+
4. Create the number of columns wanted using the grid-template-columns property
228+
5. Each column will be the size that has been specied in the property
229+
6. Specify the number of rows with the property grid-template-rows
230+
7. Each row will be the size that has been specified in the property
231+
8. Gaps can be cretaed between the rows and columns using the GAP property
232+
9. If you want to be more specific you can use the column-gap and row-gap properties
233+
10. This may be the easiest layout tool yet
234+
235+
## CSS-Grid Overview
236+
237+
1. CSS-Grid is a set of CSS properties that are used for building two-dimensional layouts
238+
2. A CSS-Grid layout can be divided into rows and columns and filled with it's child elements
239+
3. CSS-Grid allows to to write less nested HTML elements and easier to read CSS
240+
4. CSS-Grid is not meant to replace flexbox, but is meant to work with flexbox
241+
242+
### CSS-Grid Terminology
243+
244+
1. Create a grid container by setting its display property to GRID
245+
2. The child elements of the grid container will be the grid items
246+
3. Grid has a row axis and a column axis and the direction of these cannot be changed
247+
4. Grid lines divide up the grid into rows and columns
248+
5. The areas where grid items can be placed are called teh grid cells
249+
6. Gaps can be cretaed between columns and rows. The gaps are called gutters.
250+
7. A grid track can be either a grid row or a grid column
251+
8. Grid container properties
252+
253+
* Grid-Template-Rows: <track size>
254+
* Grid-Template-Columns: <track size>
255+
* Gap: <size>
256+
* Row-Gap: <size>
257+
* Column-Gap: <size>
258+
* Justify-Items
259+
260+
- Stretch <default>
261+
- Start
262+
- Center
263+
- End
264+
265+
* Align-Items
266+
267+
- Stretch <default>
268+
- Start
269+
- Center
270+
- End
271+
272+
* Justify-Content [only used if container larger than grid]
273+
274+
- Start
275+
- Center
276+
- End
277+
278+
* Align-Content [only used if container larger than grid]
279+
280+
- Start
281+
- Center
282+
- End
283+
284+
9. Grid Item Properties
285+
286+
* Grid-Column: Start column / End column or Span
287+
* Grid-Row: Start row / End row or Span
288+
* Justify-Self [Horizontal Alignment]
289+
290+
- Stretch
291+
- Start
292+
- Center
293+
- End
294+
295+
* Align-Self [Vertical Alignment]
296+
297+
- Stretch
298+
- Start
299+
- Center
300+
- End
301+
302+
303+
## Sizing Grid Columns and Rows
304+
305+
1. Using pixels for column and row sizing is a rigid standard that will not flow well and may not display properly on some displays
306+
2. Use the fractional (fr) unit to allow the columns and rows to resize depending upon the disply size
307+
3. Most of the time it is ok just to specify columns and let the rows automatically adjust
308+
4. The fractional unit is more useful with columns
309+
310+
## Placing and Spanning Grid Items
311+
312+
1. Items can be individually placed into any given cell
313+
2. Use the properties GRID_COLUMN and GRID-ROW to place the indivisual cells
314+
3. An item can spane multiple columns or rows by setting the value of GRID-COLUMN or GRID-ROW to span more than one row or column
315+
4. You can use the SPAN property with the number of cells to span as the second value of teh GRID-COLUMN or GRID_ROW property
316+
317+
## Aligning Grid Items and Tracks
318+
319+
1. Align tracks within the grid container with
320+
321+
* Justify-Content (Horizontally)
322+
* Align-Content (Vertically)
323+
324+
2. Align items within cells
325+
326+
* Justify-Items (Horizontally)
327+
* Align-Items: (Vertically)
328+
329+
3. You can align the tracks only when the container is larger than teh content
330+
331+
## Building a Simple CSS-Grid Layout
332+
333+
1. Updated the index.html file from Flexbox layout to grid layout
334+
2. Left the flexbox foprmats for 1-dimensional layouts
335+
3. Removed the flexbox layouts for the actual 2-dimenaional page layout
336+
4. Removed the container that we added for the flexbox page layout
337+
5. For the grid layout, we used two columns
338+
6. The main header was set to span across the whole page
339+
7. The footer was set to span across the whole page
340+
8. The template columns were set to 1fr and 300px because 300px was teh size of the Aside
341+
9. A column gap of 75px was set
342+
10. A row gap of 60px was set
343+
11. THe margin-bottom was removed from the product container and the main header
344+
345+
## Challenge #3
346+

0 commit comments

Comments
 (0)