HTML & CSS

Finish the surfaces and the text

1. 28Lay the groundwork for this chapterRebuild widths, centring and spacing so you have something solid to build on.5 slides · 13 exercisesGo to the exercises
2. 29A band outside, the contents insidePut a box of a set width inside a band that runs edge to edge, and stack up the frame of a page.5 slides · 13 exercisesGo to the exercises
3. 30Lay a picture behind it to make a showpieceSpread a background picture across a box to make a big showpiece at the top of the page.5 slides · 13 exercisesGo to the exercises
4. 31Transparency and letter spacing lift the feelSee through a colour, open up the space between letters, and settle how the page feels to the hand.5 slides · 13 exercisesGo to the exercises
5. 32Round the corners into a buttonTake the underline off, puff it up with space, round the corners, and make something that looks pressable.5 slides · 13 exercisesGo to the exercises
6. 33Shift things and lay them over each otherTake an element out of the flow with position, put it where you like, and lay it over something else.6 slides · 13 exercisesGo to the exercises
7. 34Use the pictures provided as decorationMatch the sizes of the pictures that come with the course and put them beside text or behind a box as small decorations.5 slides · 13 exercisesGo to the exercises

Build a header and a list

1. 35Send things to the left and the rightLearn float: right and split what is in the header into a group on the left and a group on the right.5 slides · 13 exercisesGo to the exercises
2. 36Make the small button in a headerChange the weight of the text, wrap it in a border with rounded corners, and make the small part that goes at the right of a header.5 slides · 13 exercisesGo to the exercises
3. 37Write different space for top and bottom and for the sidesLine up values, as in padding: 8px 16px;, and set different space on different sides.5 slides · 13 exercisesGo to the exercises
4. 38Get the place for a list readyA band with a colour, and inside it a container of a set width. Build the base for a list out of two boxes, one inside the other.5 slides · 13 exercisesGo to the exercises
5. 39Set widths as a share and line them upSet widths as a share, as in width: 50%;, and line up cards of the same shape in equal parts.5 slides · 13 exercisesGo to the exercises
6. 40Clear up after the boxes you floatedStop things wrapping with clear: both; and put the collapsed list back on its feet.5 slides · 13 exercisesGo to the exercises

React when you touch it

1. 41Make a band that calls out to peoplePut one line and nothing else on a deep-coloured band, and make a place in the page where people stop.5 slides · 13 exercisesGo to the exercises
2. 42Lift things with a shadowDrop a shadow under a box with box-shadow and make depth on a flat screen.5 slides · 13 exercisesGo to the exercises
3. 43Change how it looks when it is touchedWrite styles with :hover that only apply while the cursor is over something, and say that it can be pressed.5 slides · 13 exercisesGo to the exercises
4. 44Finish a footer quietlyA dividing line, smaller text, a pale colour. Build the place whose whole purpose is not to stand out.4 slides · 13 exercisesGo to the exercises
5. 45Fix a header to the screenTake it out of the flow and stick it to the screen with position: fixed;, then decide what sits in front with z-index.5 slides · 13 exercisesGo to the exercises

Switch by screen width

1. 46Watch it fall apart on a narrow screenThe same HTML takes a different shape on a phone. Start by writing widths as percentages to soften the overflow.5 slides · 13 exercisesGo to the exercises
2. 47Write CSS that only works when it is narrowWrap rules in @media and they only take hold at the widths you decide.6 slides · 13 exercisesGo to the exercises
3. 48Switch the arrangement by widthRewrite display and width inside @media to turn a row into a stack.5 slides · 13 exercisesGo to the exercises
4. 49Count the space inside the widthWith box-sizing: border-box;, width becomes the size including the space and the border.5 slides · 13 exercisesGo to the exercises

A layout for each device

1. 50Build the base before you switch by widthSettle the three layers — band, container, card — and one way of counting, and you have a foundation to switch on.5 slides · 13 exercisesGo to the exercises
2. 51Start with the middle widthFrom the wide shape, go to two columns with @media (max-width: 700px) and narrow things a step at a time.5 slides · 13 exercisesGo to the exercises
3. 52Find the cause of an overflow and fix itA fixed width, the way space is counted, a picture that will not shrink. Sort the causes into three and fix them in order.5 slides · 13 exercisesGo to the exercises
4. 53Stack them at phone widthGo back to display: block; and width: 100%; inside @media (max-width: 480px) for a single column of cards.5 slides · 13 exercisesGo to the exercises
5. 54Finish the details at phone widthTidy the space, the alignment and the lines after the restack, and complete the narrow-width page.5 slides · 13 exercisesGo to the exercises

Let text and width follow along

1. 55Change the text size with the width tooRewrite font-size inside a media query so headings still fit on a narrow screen.5 slides · 13 exercisesGo to the exercises
2. 56Put a cap on so it cannot spread too farSet an upper limit with max-width so the contents do not sprawl on a big screen.5 slides · 13 exercisesGo to the exercises
3. 57Swap what you show by widthSwitch between display: none; and display: block; by width and change how a menu is shown on a narrow screen.5 slides · 13 exercisesGo to the exercises

Line them up in a row

1. 58Putting things side by side was this much workThe chapter opener. Build a row the way you know now, and take a peek at the finished form of the new way you start using next lesson.5 slides · 13 exercisesGo to the exercises
2. 59The parent decides the arrangementWrite display: flex; on the parent and the children inside go across. Decide where they sit from the parent too.5 slides · 13 exercisesGo to the exercises
3. 60Share out what is left overWrite flex-grow on the children to decide what share of the leftover space each one takes.5 slides · 13 exercisesGo to the exercises

Wrap them and change direction

1. 61Children that do not fit go onto the next lineAdd flex-wrap: wrap; to the parent to send children that do not fit on one line onto the next.5 slides · 13 exercisesGo to the exercises
2. 62Combine it with width conditionsWrite Flexbox settings inside @media and change the arrangement itself for each screen width.5 slides · 13 exercisesGo to the exercises
3. 63Stack them downwards on a narrow screenChange the direction the children line up with flex-direction: column; and stack them on a phone.5 slides · 13 exercisesGo to the exercises