CSS

GRID

DATE	WEEK DATE	DAILY POINTS	WEEKLY POINTS	TOTAL POINTS	DAY STREAK	LEAGUE	LEARNED
22/05/2024	WEDNESDAY	1751	3457	16,476	23	SILVER	LEARNED div, span, background: linear-gradient(to right, #00416A, #E4E5E6) width and height for percentage combine Classes comma(no space) and selector with space
23/05/2024	THURSDAY	3160	6582	17601	24	SILVER	LEARNED z-index, position: absolute or relative; float: display: absolute or relative inline, block or inline-block img {clear: right or left}
24/05/2024	FRIDAY	2508	9090	21009	25	SILVER	LEARNED flex flex-direction: row collumn flex-direction: row-reverse collumn-reverse flex direction axis orientation (didn't make too much sense)
25/05/2024	SATURDAY	6482	19000	28471	26	SILVER	LEARNED justify-content: flex-start justify-content: flex-end justify-content:center justify-content: space-around justify-content: space-between alignment-items: start alignment-items: center alignment-items: end align-items: stretch
26/05/2024	SUNDAY	3400	3400	34073	26	SILVER	LEARNED justify-content: flex-start justify-content: flex-end justify-content:center justify-content: space-around justify-content: space-between alignment-items: start alignment-items: center alignment-items: end align-items: stretch

grid-are: item-a;

grid-gap:2px

grid-template-areas: "item-a item-b item-c"

grid-template-areas: "item-a item-a item-b" two columns in 1 line while b is in the right

grid-template-areas:

"item-a item-b item-c"

grid-

01. Learn Creating a CSS Grid

02. Learn Creating Grid Columns

03. Learn Creating Grid Rows

04. Learn Defining Grid Columns and Rows

05. Learn Grid Gaps

display: grid

class: grid-item

grip-column: span 3

grip-row: span 3

grid-template-columns: repeat (3, 1fr)

"item1 item2" "item3 item4 item5"

grid-template-row: repeat (3, 1fr)

06. Learn Defining a Grid Item's Size

07. Learn Creating Named Areas

grid-area: class...

grid-template-areas: class...

MAIN CONTENT

PHOTOS

BUTTON

Let's now learn a new method of placing grid items on a grid. We'll create named areas on the grid then assign grid items to those areas.

If we want to create different areas for different rows, we add each row in between quotes.

"item1 item2" 'item3 item4"

We use . to create an empty grid area

08. Learn Sections Using Named Areas

grid-area: class

09. Learn Aligning Grid Items

left

Right

Stretch

10. Learn Using CSS Grid and Flexbox

grid-area

FLEXBOX

01 Learn Understanding Flexbox

Let's learn about flexbox, one of CSS's newer features, and how it helps us create responsive webpages like the one below.

To apply flexbox to the items inside the container, we add display: flex; to the container.

And that's the first step! If we add more text inside the flex items we can see them adapting to fit their container. Don't worry if a lot seems to be going on. We'll cover what changes happen because of display: flex; in the next chapter.

What is a flex container?

By default, flexbox tries to fit items inside a container on only one row.

Use flexbox to display these list items on one row.

02 Learn Using Flex Direction

Flexbox lets us change the content layout without touching the HTML. Press the buttons to see it in action.

flex-direction: row or collumn

flex-direction: row-reverse or collumn-reverse

good for organisation or reviewing stuffs

03 Learn Flexbox Axes

Flexbox containers also have a cross axis, which is an imaginary line perpendicular to the main axis.

The flex-direction property denotes the main axis. So with flex-direction: row , the main axis will be horizontal and the cross axis vertical.

flexbox Axes: main axis and cross axis

04 Practice Flexbox Basics

05 Supercharge Flexbox Basics

06 Learn Justifying Groups of Items

justify-content: flex-start

Flex start means all of the flex items are grouped together at the beginning of the container.

justift-content: flex-end

07 Learn Justifying Rows and Columns

Let's learn more about how we can justify flex items inside their container.

Try out the different buttons to see what else flexbox can do.

justify-content: space-around

If we want to have items nicely spaced inside a container, we use the space-around value.

justify-content: center

flex-direction: column

justify-content: flex-start

justify-content: space-between

To keep space between items and have the first and last items close to the sides of the container, we use the "space-between" value.

To keep space between items and have the first and last items close to the sides of the container, we use space-between.

justify-content: flex-end

08 Learn Aligning Flex Items

align-items: flex-start

align-items: center

align-items: flex-end

end

align-items: strech

strech

09 Practice Flexbox Containers 1

10 Supercharge Flexbox Containers 1

11 Learn Wrapping Flex Items

let's learn how to stop flex items from overflowing outside of their container.

Try out the wrap button to see how elements stay inside their container when it gets smaller.

The default value for flex-wrap is nowrap . That means if objects can't shrink anymore inside the container, they overflow outside of it.

flex-wrap: wrap

flex-wrap: nowrap

flex-wrap: wrap-reverse

12 Learn Aligning Wrapped Rows

To control the space around wrapped rows of items, we use the align-content property. This affects rows across the cross axis.

align-content: flex-start

align-content: center

align-content: flex-end

align-content: space-between

align-content: space-around

13 Practice Flexbox Containers 2

14 Supercharge Flexbox Containers 2

15 Learn Setting an Initial Item Size

flex-basis: auto (auto is the default)

mix

30%

values in pixels, percentages, or auto

flex-basis: auto

16 Learn Growing Flex Items

flex-grow: 0 or 1 or even bigger number

defaut: 0

how do we control the growing of a flex item across the main axis?

with the flex-grow property

17 Learn Shrinking Flex Items

Flex-shrink: 1

Flex-srink default value is "1"

How do we make a flex item shrink more than another?

By giving it a bigger flex-shrink value

18 Learn Using the Flex Shorthand

Let's learn how to combine flex-grow, flex-shrink, and flex-basis into one property to create interesting results.

flex: 0 1 auto

19 Practice Flexbox Items

20 Supercharge Flexbox Items

21 Coding challenge Recreate the code output without additional guidance

Intro to CSS

Codes Basics 1

margin
border-radius

is a property that rounds the corners of an element

background-color
img border-radius

property used to round corners.
top-left
top-right
bottom-right
bottom-left

padding

top
right
bottom
left

border

border: solid 10px

Codes Basics 2

font-family
font-weight
font-style
font-size
"style" class change the colors as well

style=" color: green; background-color"

INTERMEDIATE CSS

1. STYLING GROUPS OF ELEMENTS

2. DISCOVERING CHILD ELEMENTS

border
margin
padding
font-weight: bold

3. USING CLASSES FOR LAYOUTS

4. CSS Intermediate 1

span

Attribute to style "id"

5. Supercharge CSS Intermediate 1

div
class="title" and how it can override the div

6. Learn Adding Color with Hex Values

We can add colors with a hexadecimal value, also known as a hex value. For example, black in hex is #000000.
linear-gradient

Linear gradient

Linear gradient

How many color combinations are there for hex values?

over 16 million

7. Learn Setting Size with Percentages

Setting the size of elements using absolute values, like 200px, means they are the exact same size on any screen.
Setting the image size to 50% means it will be half of its parent element's width. That means the image is now 125px wide.

8. Learn Combining Multiple Classes

Let's use three CSS classes: color, italic , and bold , to learn how to combine them in HTML.
doesn't need to use comma to fit inside the class for example class="color italic bold"

9. Learn Grouping Selectors

Instead of writing a new rule for each element, we can use a comma to style < p > and < button > elements using the same rule.

10. CSS Intermediate 2

Which is the correct way to assign two CSS classes to an element?

class="red blue"

Border-Bottom

11. Supercharge CSS Intermediate 2

4 test in 1 exercise
selectors doesn't have space after comma

for example: Make elements of class first, second , and fourth have their color set to coral.
.first,.second,.fourth

for ID we use "#" and the selector for example #email or #password

12. Learn Displaying Elements

Normal flow is the way elements display on a webpage by default. For example, headings and paragraphs appear on their own line while links and buttons get grouped on the same line.
The display property decides whether or not an element appears on the same line.

inline
block
inline-block

Which elements have inline-block as their default display value? button and img

13. Learn Floating Images

this img is going to be there in the conner
In that case, we set the element's "clear" property to the same value as the "img" element.
example h5 { clear:right;}
Which element needs to be first if we want to wrap text around an image?
image

14. Learn Relative Positioning

display: absolute or relative

top: 10px

bottom: 10px

position: relative or absolute

Normal Flow
To make all buttons appear on separate lines, set display to block.
display: inline-block;
Which property is given to an element so it doesn't wrap around an image?
Modify the p rule so that it appears on one line and has a fixed size. display: inline
Style the element of class .long by setting its width to 100px and making it display on the same line with adjustable size. .long{ width: 100px; display: inline-block;}

15. CSS Layout Fundamentals 1

16. Supercharge CSS Layout Fundamentals 1

17. Learn Absolute Position

To start placing an element at a particular spot on the screen, we set position to absolute.
To put the element on the right, we use right: 0px;. This means that the element is 0px away from the right side of the page.
position: absolute;
right: 0px;
Setting the link to position: absolute removes it from the normal flow and causes it to overlap the image instead.

18. Learn Z-index

Let's learn how to control overlapping elements.
We can control how images overlap with a property called z-index. Set z-indexto 0 , its default value.
To place an element behind another, we set z-index to lower number. In this case, code -1
img {position: absolute;
z-index: 1 or -1
-1 (set the image behing the text)
1 (infront of the img)

19. CSS Layout Fundamentals 2

20. Supercharge CSS Layout Fundamentals 2

21. Coding challenge Recreate the code output without additional guidance

<<CSS

Linear gradient

Linear gradient

CSS