practicewebsiteweek2

This is revision and practise of flexbox

The flex-direction is set to column.

So the individual items stack from top to bottom.

What's slightly confusing is that the outcome looks like 3 rows! But it's also 1 column.

The flex-direction is set to row.

So the individual items spread from left to right.

You can see how this is clearly 1 row.

There are 3 boxes here, all containing text. This exercise is about positioning of the boxes.

It is NOT about positioning of the text within the boxes!

The class of alignItems was targeted, then all 3 boxes were set to align-items: center so that they appear in the middle of the big blue rectangular box's y axis.

This is only slightly different, it's about the position of the boxes on the x axis.

I set it to justify-content: flex-end.

This places the 3 boxes on the right of the container.

To be perfectly centred, you have to set both align-items AND justify-content to center.

Moving onto Jake's Eatery, final activity for Tuesday. The logo at the top was from an image, and used as background image. Interestingly, they applied background-repeat: no-repeat; without this, it defaults to repeating.

To get the pictures of food to go underneath each other, that section had to be treated as 1 column with 3 rows (I think!). Then the 'parent' had to be given display: flex AND flex-direction: column.

I stole the footer html and CSS from Jake's Eatery for reference. When doing this alone, I had trouble with the three links, for Facebook, Twitter and Instagram. They are in the middle but spaced evenly, and I was confused about using space-evenly, space-around, etc. The actual solution was to justify-content: center AND to give each item a little padding. The justify-content had to be applied to the parent, which was the footer. The padding was applied to the individual items. The individual items also had text-decoration: none applied to stop them being underlined.

Week 2, day 2 was about grids. I decided not to replicate things here, it's best to look it up. However, some points: it is the CONTAINER element that has to have display: grid, in the same way that it was the CONTAINER element that had to have display: flex above.
background-size: cover was applied to the pictures in the bottom half of the furniture shop. Maybe if you had done this to your week 2 challenge, the photos might have looked better? Also, the photo sections (bookcases, bedroom, etc.) were themselves grids, so this was an exanple of nested grids. They also had display: grid and align-content: end, which is what made the captions all go to the bottom of the photos. The README for this exercise (week 2, day 2, activity 2) contains links to guidance about using grids.

Week 2, day 2, activity 3: their solved version doesn't quite work for media queries. It may be worth reviewing this later when you have more experience.

Week 2, day 3, activity 4. We can across the hover feature in CSS for links. This makes them do various things you ask. e.g. when the mouse hovers over the link, it can change from a simple arrow to a picture of a hand that suggests you're about to be taken to a different webpage; you can also change what the word underneath looks like, e.g. change colour, make it go bold, etc. The syntax is not easy to remember though. This is what they wrote to make the links hover and change colour. The hover doesn't appear to be a separate command in itself. They used, to target the links in the nav: nav a:hover {[then the instructions in here, e.g. color: white]}

Week 2, day 3, activity 6 was about root variables (though they might not actually be called this!).
It allows you to set the styling for all types of something. e.g. If you want all whites to be a specific shade of white, all dark blues to be a specific dark blue, all tans to be a specific tan, etc. It can apply to things other than colours too. In the example below (point 5), it sets all border-radii to be 50px.
The point behind this is to save you retyping throughout the document, you set it up at the start of the CSS.
So there will be various points of syntax to remember.

At the start, write :root {see point 2}
Then work through each characteristic. For example
If you want all whites to be a particular shade, use [--white: value]
If you want all border radii to be 50px, it will look like this
--border-radius: 50px;
Then the body of the CSS has to refer back to this root, like so:
color: var(--white);

This is their full example
:root {
--white: #fff;
--dark-blue: #13293d;
--tan: #d8a47f;
/* You can use it with any value that is repeated throughout the sheet */
--border-radius: 50px;
}

I now want to practise making a table

Heading 1, e.g. Name	Heading 2, e.g. Year of birth	Heading 3, e.g. Current Status
Phil	1972	Between jobs
Bec	1974	Examinations Officer
Oliver	2002	3rd year student
Elliot	2004	1st year student
Natasha	2006	Lower Sixth student