Learn HTML & CSS – Full Course for Beginners

Aug 15, 2023

Learn HTML & CSS – Full Course for Beginners

Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser-version: https://scrimba.com/links/htmlandcss

⭐️ Code ⭐️
🔗 Interactive version: https://scrimba.com/links/htmlandcss
🔗 GitHub repo: https://github.com/scrimba/learn-html…

✏️ This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: / perborgen

🛠 Tools used:
🔗 Netlify: https://www.netlify.com/
🔗 VS Code: https://code.visualstudio.com/
🔗 GitHub Desktop: https://desktop.github.com/
🔗 Figma: https://www.figma.com/
🔗 Coolors: https://coolors.co/
🔗 Google Fonts: https://fonts.google.com/
🔗 1001 Fonts: https://www.1001fonts.com/

⭐️ Contents ⭐️
0:00:00 Introduction

Build and deploy your first website
0:01:32 1: Welcome to the HTML \u0026 CSS Course
0:04:12 2: HTML Tags
0:07:33 3: Write a news article
0:09:43 4: The image tag
0:14:43 5: Nesting
0:17:33 6: Internet superpowers - Change the BBC news!
0:22:34 7: Interactive elements - Button
0:24:37 8: Interactive elements - input tags — Experiment with input types 100%
0:29:37 9: Let’s build Google!
0:33:28 10: Aside - Anchor tags
0:38:04 11: Add an anchor tag to Google.com
0:39:43 12: Proper document structure
0:45:29 13: Aside: Lists
0:49:27 14: Build a personal Website
0:58:15 15: Deploy your Personal Website
1:01:30 16: HTML Recap

Build a Google.com clone
1:03:06 1: Let’s learn CSS!
1:03:53 2: Write your first lines of CSS!
1:08:10 3: Write your first lines of CSS! Solution
1:11:46 4: Let’s destroy wikipedia - recording
1:13:43 5: Link to the CSS file
1:16:22 6: Set the width of the elements
1:18:31 7: Inline vs block elements
1:20:49 8: Margin top
1:22:05 9: Divs rule the world
1:24:10 10: CSS classes
1:28:07 11: Aside - Learn margins via flags
1:34:04 12: Add space between our elements
1:35:12 13: Aside - Centering with margins
1:38:39 14: Centering our content
1:40:01 15: Aside - padding
1:45:23 16: Aside - Border and border-radius
1:50:33 17: Aside challenge - style Twitter button
1:55:36 18: Fix the input field
2:00:22 19: Center the button
2:02:42 20: Style the button
2:07:13 21: Why we can’t have two block-level buttons
2:11:42 22: Aside - Flexbox
2:15:25 23: Centering both buttons with flexbox
2:18:20 24: Google clone recap

Build a Digital Business Card
2:20:27 1: Building your digital business card
2:21:00 2: Fix the image path
2:23:56 3: Add alt attribute
2:28:24 4: Make image smaller
2:29:40 5: Add a border and padding
2:33:30 6: Aside - flexbox child containers
2:37:11 7: Flex item containers
2:38:51 8: Add a utility class
2:42:04 9: Justify the items
2:44:13 10: Center the card
2:46:13 11: Aside - inheritance
2:50:31 12: Center the text via inheritance
2:53:32 13: Add colors
2:56:57 14: Web-safe fonts
3:02:06 15: Aside - margin/padding shorthand
3:06:09 16: Use the margin \u0026 padding shorhands
3:07:26 17: Deploy your Digital Business Card
3:12:16 18: Business Card Recap

Build a Space Exploration Site
3:14:17 1: Let’s go to space
3:14:54 2: Add a background image from unsplash
3:18:54 3: Center elements and Style button
3:22:12 4: Add a Google font
3:26:34 5: @font-face
3:28:39 6: Aside - spans
3:32:37 7: Add an underline using a span
3:34:27 8: Use an ID for the logo
3:38:51 9: Replace the jpg with a webp
3:41:25 10: Choose a color palette from an image
3:44:18 11: Add the terms \u0026 conditions section
3:48:17 12: Aside - text shadow
3:54:17 13: Improving the readability with text shadows
3:56:17 14: Space - Exploration recap

Build a Birthday GIFt Site
3:58:02 1: Let’s build a Birthday GIFt site
3:59:13 2: Add basic header styling
4:02:47 3: Set the colors
4:04:13 4: Add shadow on text
4:07:34 5: We have a problem that flexbox can fix
4:10:10 6: Aside - align-items
4:16:13 7: Aside - flex-direction
4:20:42 8: Turn the header into a flexbox
4:22:26 9: Fix date and age design
4:26:36 10: Create the first gift
4:31:56 11: Replace the img with a div
4:36:14 12: Aside - make elements change on hover
4:39:08 13: Add the hover effect
4:41:17 14: Create the next GIFt
4:45:39 15: Create two more GIFts
4:48:15 16: Create the final GIFt
4:51:38 17: Add the footer
4:55:18 18: Add a background gradient
4:58:46 19: Personalize the Birthday GIFt Site
5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site
5:05:44 21: Deploying your Birthday GIFt Site
5:06:45 22: Use VS Code to edit your Birthday GIFt
5:11:36 23: GIFt site recap

Solo Project: Hometown Homepage
5:13:29 1: It’s time to go solo!
5:15:47 2: Solo Project - Hometown Homepage
5:19:54 3: Congrats on completing the course!

Content

0.08 -> this beginner's course will teach you

1.68 -> html and css through building and

4.08 -> deploying five awesome projects and you

7.279 -> will learn by solving over 75 coding

9.84 -> challenges

10.96 -> pair is your instructor pair borgen has

13.36 -> created many extremely popular courses

15.44 -> and is also the co-founder of scrimba

17.76 -> this course makes it easy to learn html

20 -> and css

21.52 -> hi there free cold campers and welcome

23.279 -> to this interactive scrimba course where

25.439 -> you are going to learn how to build

27.519 -> beautiful looking websites using html

30.48 -> and css we're going to go from scratch

32.8 -> so there are no prerequisites required

35.44 -> however the special thing about this

37.44 -> course is that it's fully challenge

39.52 -> based which means that you will need to

41.76 -> get your hands on the keyboard again and

44.16 -> again as you progress through this

46 -> course and if you now are a little bit

47.68 -> afraid or like setting up your local dev

50.239 -> environment don't worry for that reason

52.96 -> we have created an interactive version

55.52 -> of this course over on scrimba.com there

58.64 -> you'll be able to solve all of the

60.32 -> challenges directly in your browser so

62.96 -> just click on the link below and you'll

64.72 -> get to that interactive version now if

66.96 -> you prefer to instead solve the

68.799 -> challenges locally i've created a github

71.119 -> repository that you can clone and there

73.2 -> you'll get access to all of the starter

75.04 -> files for the challenges one final thing

77.68 -> if you like this course please give it a

79.759 -> thumbs up here at youtube that is highly

82 -> appreciated and if you have any feedback

84 -> for me just reach out to me at twitter

86.4 -> at pierre borgen

88.24 -> with that let's get started

93.84 -> hello there my dear internet friend i am

96.32 -> so happy that i get the opportunity to

98.479 -> teach you two of the most important

100.159 -> technologies on the world wide web html

103.119 -> and css and who am i my name is pierre

106.24 -> i'm the ceo of scrimba and i'm also a

108.56 -> front-end developer and coding teacher

110.32 -> and over a million students have gone

112.32 -> through my tutorials when i'm not coding

115.04 -> i enjoy posing in front of fast cars

118.24 -> but enough about me let's talk about

119.92 -> what you are going to build with your

121.92 -> own two hands throughout this course

124.159 -> the first project you'll build is the

126.24 -> world's most popular website

128.479 -> thegoogle.com homepage you're also going

130.72 -> to build a space exploration landing

132.879 -> page a digital business card and even a

135.36 -> birthday site which we are going to

136.879 -> deploy to the web so that you can send

138.879 -> it off to your best friend on their

140.56 -> birthday to make them feel special

143.28 -> because check it out it has these

145.84 -> virtual birthday presents that reveal

148 -> themselves when you hover over them so

150.319 -> this gift says here's how happy i am for

152.56 -> you today and when your friend hovers

154.959 -> over it boom they will feel your love

158.16 -> flowing to them through the magical

160.319 -> tubes of the internet

162.4 -> and we are going to build all of this in

164.4 -> html and css

166.64 -> so now you're probably wondering well

168.48 -> what is html it is short for hypertext

171.92 -> markup language

174.8 -> oh my god i'm getting tired of all this

177.12 -> theory let's instead say that you're

179.519 -> gonna build a car well then you'd start

181.519 -> with probably gathering the contents of

183.519 -> the cars like tires doors steering wheel

187.12 -> mirrors and stuff like that and that is

189.04 -> kind of the html of your car when you

191.28 -> stitch it together you at least have the

192.959 -> shell of a car the next step is probably

195.36 -> to paint the car so that it looks good

197.2 -> and that's the css and finally if you

199.44 -> want your car to drive you've got to

200.879 -> give it an engine and that is kind of

202.72 -> the javascript of your car or very often

205.28 -> referred to as js

208 -> now in a world wide web context the html

210.959 -> is then the content of the website that

213.12 -> is buttons images text and so forth the

216.64 -> css sd styling and the javascript is

219.28 -> what allows your website to solve

221.2 -> problems so that users for example can

223.12 -> check off tasks communicate with

225.2 -> databases you can also handle payments

227.44 -> and so forth now we're only going to

229.44 -> focus on html and css in this course and

232.159 -> then you can learn javascript and

233.599 -> another course i've created here on

235.2 -> scrimba as well

236.64 -> but knowing html is already hugely

239.68 -> valuable in today's job market and is

242.08 -> also the most natural first step as you

244.56 -> embark on a journey into the world of

246.72 -> web development so i hope you are ready

248.959 -> for this let's get started

253.68 -> the french philosopher rene descartes

256.32 -> once said three clever words pogito ergo

260.32 -> zum which translates in english to i

263.12 -> code therefore i am

265.44 -> so let us prove to ourselves that we

267.52 -> actually do exist by coding this out in

270.16 -> html and the way we do that is actually

273.04 -> not too different from how you would

275.04 -> write this out in a regular text editor

277.28 -> as there you would simply write out the

279.199 -> sentence and then if you wanted it a bit

281.199 -> more prominent you'd probably highlight

283.52 -> it and then click on normal text here

286 -> and choose another content type for your

288.32 -> text

289.199 -> you can see heading one heading two

290.96 -> heading three let's hover over heading

293.28 -> one and then click on it and there you

295.199 -> can see that the text became a lot more

297.44 -> prominent it became a heading 1. now if

300.4 -> we want to do this in html we'd simply

302.72 -> create an html file which you can see

304.8 -> here it's called

306.039 -> index.html as that is a common name to

308.639 -> give your html files

310.8 -> and here i would write

312.24 -> icode

313.36 -> therefore

314.56 -> i am

316 -> now if we open up a browser and point

318.88 -> this browser to our html file and then

321.44 -> run it then we can see that the text

323.44 -> indeed appears in the browser

325.759 -> however it's pretty small so if we

328 -> wanted to turn it into a heading 1

329.68 -> instead what we do is wrap the text in

332.479 -> html tags

334.08 -> so before the text we'll do this

337.12 -> two angle brackets with the text h1

340.32 -> inside of them that's short for heading

342.32 -> one

343.199 -> and then at the very end of the text i

345.039 -> would do the same h1 but since this is a

347.6 -> closing tag and not an opening tag i

350.16 -> would also have to give it a slash

352.24 -> before the text

354 -> and now if i rerun the code

356.16 -> there you go we have made our text a lot

358.479 -> more prominent

360.24 -> now i think our website should give

361.84 -> proper credit here so let's write rene

364.479 -> the cart underneath the h1

367.199 -> like that if we now rerun the code you

369.759 -> can see that

370.96 -> the text is just normal it's not an h1

373.759 -> that's because it is only the text which

376.16 -> is within the opening h1 and closing h1

379.6 -> that gets formatted

381.44 -> as a proper heading in the browser in my

384.08 -> view this line right here should be a

385.84 -> bit bigger i want it to instead look

388 -> something like this where the name is

390.24 -> pretty thick and big but not as big as

393.039 -> the heading one and that brings me to

395.44 -> your first challenge i'm going to paste

397.68 -> it in here so what you are going to do

399.919 -> is try to make our web page look like

402.319 -> the design in the provided slide and if

404.639 -> you are struggling to think of what kind

406.72 -> of html tag you'll have to wrap this

409.039 -> name in well i've got a little hint for

411.039 -> you what comes after one

413.84 -> so pause this scrim jump into the code

416.24 -> and try to solve this challenge right

418.08 -> now and then when you return back to me

420.08 -> i will of course show you the solution

421.84 -> as well

422.8 -> good luck

428.639 -> okay hopefully that went well way to

430.88 -> solve this is by instead of using the h1

434.16 -> using its smaller sibling the age two

437.759 -> like that it has the exact same

439.759 -> so-called syntax as the age run so

442.319 -> instead of a one you use a two

445.039 -> if we now run this

446.56 -> there you go we have achieved the design

448.88 -> we wanted so great job let's move on

455.28 -> before we move on to the next challenge

457.599 -> there's one thing i want to make sure

459.36 -> that you are aware of and that is that

461.52 -> if you have an html file locally on your

464.24 -> computer and you have a browser what you

466.8 -> can do is simply drag and drop that file

469.759 -> into the browser and then it'll be

471.84 -> rendered

473.039 -> so that is actually more or less the

474.96 -> same thing that's happening here on

476.479 -> scrimba though here we have a mini

478.96 -> browser and the text editor inside of

481.599 -> well your browser because scrim by

483.759 -> itself is browser based so a little bit

485.84 -> meta but it's essentially the same thing

488.4 -> okay now it's time for you to get some

490.4 -> more muscle memory on how to write html

492.96 -> tags and also get to know two new tags

495.36 -> because i want you to create a news

497.52 -> article and more specifically this news

499.759 -> article right here which has a title

501.759 -> that says humans have reached mars it

503.919 -> has a subheading right here and also

506 -> some regular text

507.52 -> and the html tags are h1 for the title

510.639 -> h3 for this one you haven't used an h3

513.44 -> for but i think you know how to do it

515.039 -> and then there's finally a p tag for the

517.44 -> text at the bottom p is short for

519.599 -> paragraph

520.56 -> and i have provided a little syntax

522.959 -> example for you here however if you've

525.04 -> understood the logic of how to write

526.64 -> these tags by now it shouldn't come as a

528.48 -> surprise how you do that

530.56 -> okay here is also the text so that you

532.72 -> don't have to write all of that out you

534.48 -> can just copy paste it instead so now

537.04 -> starting here on line 13 write the html

539.839 -> we need in order to create this news

542.08 -> article

547.12 -> okay hopefully that went well let's

549.519 -> start with the h1 i'm going to create

551.839 -> the open and closing tag and then paste

554.32 -> in the text like that running the code

556.88 -> yes

557.839 -> it works moving on to the h3

562.8 -> copying the text

565.12 -> then rerunning the browser and there we

567.12 -> go

568.24 -> finally there is the paragraph

572.48 -> like this

575.36 -> re-running the code and there we go we

577.519 -> have achieved this exact layout great

580.16 -> job let's move on

585.44 -> now you're going to learn about images

587.6 -> because i really think our mars article

590.16 -> needs an image the way to do that is by

592.48 -> using the img tag

594.959 -> so we start with our angle brackets and

597.6 -> then write simply img inside of those

600.24 -> and what's unique about this tag is that

602.48 -> you don't need a closing tag so there is

604.88 -> no closing img as there is a closing age

608.08 -> run or closing paragraph this is simply

611.04 -> not needed so it's often called a

613.279 -> self-closing tag and some people use the

616.72 -> slash at the end of the opening tag like

619.04 -> this just to signify that it is closing

621.6 -> itself however it's not really needed so

624.48 -> we can skip it and i think in general

626.24 -> that less code is better code so i am

628.64 -> just going to skip it however if you

630.72 -> prefer to have it like this that's

632.48 -> totally fine as well okay enough syntax

635.839 -> how do we get this image to work because

637.76 -> right now if we re-render this page

640.399 -> nothing has happened and that is because

642.16 -> we haven't told the image tag which

644.399 -> image we want to render and the way to

646 -> do that is by writing src which is short

649.44 -> for source and then we write equals then

652.24 -> two quotes because inside of these two

654.72 -> quotes we're going to specify the image

656.88 -> we want to render and here on the left

658.72 -> hand side you can see i have

660.519 -> mars.jpg it is in the same directory as

663.519 -> our index.html file meaning i can simply

666.48 -> do mars

668.079 -> dot jpg then run the code and there we

671.6 -> go we have our image that is super cool

675.44 -> however you can see that this image

677.36 -> behaves a little bit differently from

679.2 -> our paragraph for example because

681.519 -> where's the paragraph take up the entire

683.68 -> width the image just take up whatever

686 -> width it needs leaving us with white

688.16 -> space on the right hand side if the

689.839 -> browser is too wide or cutting off the

692.56 -> image if the browser is too narrow and i

695.519 -> actually want this image to behave like

697.76 -> our other paragraphs so i'm going to

699.44 -> show you a little hack to do that

701.36 -> because normally you'd use css for doing

703.839 -> this but there is a little trick we can

706 -> use by simply utilizing the with

708.959 -> attribute that is an attribute just like

711.36 -> source is an attribute and it uses the

713.68 -> same syntax we'll do with equals and

716.24 -> then two quotes and then inside of the

718.64 -> quotes we can write for example 100

721.6 -> percent we now rerun this you can see

724.72 -> yes our image is now scaling with the

728.16 -> size of our browser looking super neat

731.279 -> now as i said this is a hack so if you

733.92 -> show this around to people you might get

735.92 -> this annoying guy saying well

738.24 -> actually that's not valid html according

740.959 -> to the specification but you know what

743.36 -> let's not care about that at this point

745.6 -> you should not give a darn about

747.24 -> specifications validity in aka correct

750.8 -> html you should instead look at yourself

753.12 -> like a hacker who grabs whatever tool

755.2 -> you need in order to get the job done so

757.6 -> now we're going to use this even though

759.519 -> we know it's a hack because later down

761.44 -> the line you're going to learn the

762.72 -> proper way of doing this using css the

766 -> language we use for styling websites so

768.8 -> with that out of the way i want to show

770.16 -> you one more thing before i give you a

772.16 -> challenge because one thing that's super

774.16 -> cool is that you can actually borrow

776 -> images from wherever you want online so

779.04 -> if you find an image you like you can

780.88 -> borrow it and use it in your project let

783.2 -> me show you how so if we google mars for

785.68 -> example

786.48 -> and click on the images tab and then

788.32 -> click on whatever image we think is cool

790.56 -> for example this one right here and then

792.32 -> in this image view on the right hand

793.839 -> side here you can right click and choose

796 -> copy image address once you've copied

798.72 -> that you can simply paste it into the

801.839 -> source attribute so i'm going to remove

804.24 -> mars.jpg and paste in the image address

807.76 -> which i just copied if we now run the

810.24 -> code you can see there we go we have

812.959 -> borrowed this super cool image from

815.279 -> another website online

817.839 -> so it's time for a challenge what i want

820.399 -> you to do now is add a second image to

822.88 -> our article i want you to find one via

825.2 -> google and then place it under the h1

828.079 -> element but above the h3 element so that

830.88 -> is right here and finally remember to

833.44 -> use the width attribute to make the

835.12 -> image as wide as the other elements

837.92 -> i'm going to leave you here with the

839.36 -> mars image again and wish you good luck

841.519 -> go ahead and solve this challenge right

843.199 -> now

846.32 -> okay hopefully that went well what you

848.56 -> need to do is write the angle brackets

850.8 -> img and set the source to whatever image

853.519 -> you found online i'm going to reuse the

855.6 -> one i found earlier like that if we're

857.76 -> rendering this

859.12 -> this is a really wide image by default

861.6 -> that's not what we want we want to scale

863.92 -> with our browser so we need the with

865.92 -> attribute with equals a 100 percent like

870.72 -> that and now we have two super cool

873.519 -> images in our article

875.6 -> both scaling up and down

877.92 -> with the size of the browser great job

880.56 -> let's move on

884.88 -> okay now you're going to learn about

886.72 -> something called nesting which is the

888.959 -> act of nesting html elements inside of

892.24 -> other html elements so let me show it to

895.04 -> you in practice let's say that we want

897.12 -> to group all of these elements here

899.519 -> together what we then do is above all of

902.959 -> the html tags write another html tag and

906.32 -> in this case we'd use the so-called div

908.639 -> which is short for divider however i

911.12 -> don't think that is a very good name i

912.48 -> would rather call this for example a

914.32 -> container though div is what it's called

916.639 -> so we're just going to have to stick

918.079 -> with that now in order to nest elements

920.8 -> inside of this div we'd write the

923.04 -> closing tag below all of the html tags

926.079 -> in our article and then for readability

928.16 -> purposes we'd indent all of the tags in

930.88 -> our article so now our h1 image h3p and

934.32 -> image here are all children of this div

937.36 -> tag right here this doesn't change our

939.6 -> layout at all so this div tag here is

943.04 -> invisible however it has now given us

945.12 -> the ability to target the entire article

949.04 -> just by targeting this div right here

951.199 -> and that is useful if we for example

953.279 -> want to add some styling to our entire

955.759 -> article using css or somehow manipulate

958.639 -> it using javascript which is the

960.56 -> programming language that you use in

962.399 -> browsers and very often you'll actually

964.88 -> see a ton of divs on a page so for

966.959 -> example you'd see another div around

969.6 -> this image element here which then would

971.519 -> have been indented yet another time in

973.519 -> order to signal that this is indeed a

975.519 -> child of this div which again is a child

978.32 -> element of this div now if we were to

981.199 -> visualize an html document it would look

983.92 -> something like this you'd have for

985.6 -> example a div up here and it would have

988 -> two children which could be their own

990.16 -> divs like this

991.839 -> and then this left hand div here for

993.68 -> example have an image tag as its first

995.839 -> child and also an h3 as his second child

998.8 -> the other div on the right hand side

1000.32 -> could have an h1 tag as its child p tag

1003.44 -> as its child maybe even another div as

1005.759 -> its child and then if we go yet another

1008.16 -> level deep this paragraph tag might have

1010.639 -> its own child which could be for example

1012.72 -> an a tag which you haven't learned about

1014.8 -> yet but which you'll learn about soon as

1016.88 -> that is the so-called anchor tag that

1018.8 -> allows you to create links on websites

1021.519 -> and looking at this visualization you

1023.36 -> might think well this kind of looks like

1024.959 -> a family tree and yes it does and that

1027.36 -> is exactly why we call this structure

1030 -> the html document tree because we are

1033.12 -> inside of an html document and how they

1035.919 -> are nested inside of each other becomes

1038.16 -> kind of like a tree where you have a

1040.319 -> trunk and then branches going out from

1042.48 -> that and then yet again new branches

1044.48 -> going out from those branches and so on

1047.12 -> and so on

1048.24 -> so now that you know that let's move on

1050.64 -> to the next grim

1055.6 -> okay now we're gonna use your newly

1057.28 -> acquired internet super powers in order

1059.6 -> to perform a little practical joke

1062.24 -> because you might have a friend who is

1064.08 -> far too obsessed with a sports team for

1066.72 -> example i myself am a manchester united

1069.2 -> fan and one of the worst things i can

1071.28 -> imagine is if some rich billionaire buys

1074.72 -> the club and changes its name that would

1077.52 -> make me truly outrageous so what we're

1080.24 -> gonna do now is change the news on bbc

1083.6 -> sports so that you then can show this

1085.84 -> page to a man united fan and thus make

1088.559 -> them really upset while you get a good

1091.28 -> laugh

1092.48 -> so let's go ahead and do this here on

1094.72 -> the bbc sports page on this top article

1097.12 -> here i'm going to right click on the

1099.44 -> text and then you can see it gives me

1101.36 -> the option to choose inspect

1103.44 -> now note that this is on a chrome

1105.44 -> browser as that is what i'm using if

1107.52 -> you're in a different browser there

1108.96 -> might be slightly different steps here

1110.72 -> or a different wording but overall in

1113.2 -> general the steps are the same so i'm

1115.36 -> going to click on expect and then you

1117.28 -> can see that it opens up this

1119.44 -> panel on the bottom of the browser this

1121.84 -> is called the developer tools and here

1124.4 -> you can see we are in the elements tab

1126.799 -> and that shows us the html elements that

1129.76 -> are on the page

1131.12 -> and here the one we have chosen now

1133.039 -> which happens to light up this area on

1135.52 -> the bbc site contains the title of our

1138 -> article and it is an a tag which i've

1140.32 -> just briefly mentioned and that you're

1141.76 -> going to learn more about later now we

1144.08 -> can't see any text here so i'm going to

1146.16 -> click on this age tag and there you can

1148 -> see it contains an h3 tag nested inside

1151.2 -> of it if we click on that one as well

1153.84 -> you can see that there we see the text

1156.4 -> that is rendered in the browser so here

1158.72 -> we can double click on that text and

1161.12 -> change it for example to something as

1162.96 -> awful as jeff bezos to buy man united

1166 -> and rename the club after himself oh my

1169.12 -> god that is about the worst piece of

1171.52 -> news any united fan can read so if we

1174.4 -> now hit enter there you can see boom we

1177.12 -> have changed the text on bbc now let's

1180.559 -> click on this paragraph here as well

1182.48 -> open it up because there we can also

1184.32 -> change the text that is written

1186 -> underneath the title let's paste in the

1187.919 -> u.s billionaire says he doesn't follow

1190 -> the premier league but wants to own the

1192 -> club to grow his personal brand

1194.72 -> this just gets worse and worse so now if

1197.679 -> we hit enter that is also rendered in

1199.679 -> the browser now i'm going to scroll a

1201.52 -> little bit up in the dev tools here and

1203.28 -> hover over this div tag here because as

1205.919 -> you can see that highlights our image so

1208.32 -> it seems to be that our image is nested

1210.24 -> inside of a div tag let's open it up by

1212.72 -> clicking on this triangle and there we

1214.72 -> can see another div tag well okay still

1217.28 -> highlighting the image let's open up

1219.12 -> that one as well oh wow

1221.44 -> there we have yet another div tag a div

1224.16 -> inside of a div inside of a div this is

1226.16 -> web development in a nutshell let's open

1228.4 -> it up again and there yes we can see our

1230.88 -> image tag i'll scroll a bit down and you

1234 -> can see there are tons of different

1236.24 -> attributes here we're going to ignore

1238.48 -> almost all of these and then instead

1240.88 -> direct our attention towards the src

1243.52 -> attribute that one we know because that

1245.6 -> is the one we need to change in order to

1247.52 -> change this image so now let's open up a

1250.4 -> new window search for jeff bezos click

1253.52 -> on an image we like for example this one

1255.36 -> right here right click on it and choose

1257.76 -> copy image address then can do now is

1260.64 -> double click on this source and then

1262.559 -> remove the existing source inside of the

1264.96 -> quotes like that and then paste in our

1267.679 -> image of jeff bezos however if we now

1269.919 -> hit enter you can see nothing changed

1272.48 -> and that is because bbc is a little bit

1274.64 -> fancy here they use another attribute

1277.2 -> called src set which helps the browser

1280.559 -> render different sized images on

1282.88 -> different types of screens depending on

1284.96 -> what kind of image is appropriate for

1286.96 -> the given screen the website is rendered

1289.039 -> on so what we're going to do here is

1291.28 -> just double click on the src set so that

1293.919 -> everything's highlighted and just delete

1295.76 -> all of it and then hit enter and boom

1298.4 -> there you go we have jeff bezos looking

1301.36 -> pretty ready to acquire this football

1303.44 -> club and rename it bezos united finally

1306.559 -> i'm going to close this panel by

1308.24 -> clicking on the x in the right corner

1310.4 -> here and there you go we have our

1312.64 -> article so now the final step is just to

1314.88 -> take this site show it to someone who is

1316.88 -> a manchester united fan and get a good

1319.919 -> laugh

1320.799 -> now a final notice if you refresh this

1323.12 -> page you will lose your changes because

1325.36 -> you only made your changes locally and

1327.44 -> when you refresh it the entire page gets

1330.08 -> the fresh data from the database of bbc

1332.88 -> and not from whatever local changes you

1335.12 -> did and since it is local that also of

1336.96 -> course implies that your changes only

1338.72 -> happen on your computer you don't change

1341.12 -> bbc in production of course so go ahead

1343.679 -> and play around with some sites online

1346 -> see if you can come up with a fun little

1348 -> practical joke for a friend

1350.48 -> have fun and i'll see you in the next

1352.32 -> scrim

1356.08 -> now you're going to learn about your

1357.52 -> very first interactive html element and

1360.48 -> that is the button tag because the

1362.4 -> buttons are all over the web so to

1364.96 -> create a button simply start with your

1366.88 -> angle bracket and a button opening tag

1369.36 -> and then a button closing tag like that

1371.6 -> and in between the two tags you write

1373.52 -> whatever text you want inside of your

1375.12 -> button

1376.559 -> now as you can see it's styled with a

1378.72 -> background color that also has a border

1380.64 -> around it and you can even click it now

1383.36 -> this button doesn't do anything in order

1385.44 -> to hook this up with some kind of

1387.36 -> feature for example trigger a purchase

1389.6 -> then you'd have to learn javascript and

1391.76 -> that is outside the scope of this course

1393.679 -> but something you'll learn later in the

1395.52 -> front-end developer career path so for

1397.52 -> now our button will just be there and

1399.36 -> pretend to do something while actually

1401.28 -> being pretty useless now that you've

1403.36 -> seen this once i want to put you on the

1405.28 -> spot and give you a challenge i want you

1407.84 -> to create a layout according to the

1409.84 -> design in this slide so imagine that you

1413.2 -> are building a website where people are

1415.039 -> to sign up then it would be very natural

1417.12 -> to have something like this where you

1418.72 -> have an h1 at the top welcoming them a

1420.96 -> paragraph with a little message and then

1422.96 -> a sign up button so i want you to create

1425.36 -> this layout you don't have to write the

1427.6 -> text because i've provided it here just

1429.6 -> make sure that you set up the html tags

1431.919 -> correctly so that it renders properly on

1434.08 -> the page

1435.12 -> good luck

1440.159 -> okay hopefully that went well let's now

1442.559 -> do it together i'll start with the

1444.48 -> welcome h1 tag like that paste that in

1448.159 -> and boom there we go

1450.24 -> next up there's the paragraph

1452.24 -> opening tag closing tag then pasting the

1455.36 -> text in between running this code it

1457.76 -> still looks correct

1459.6 -> finally the button like that with sign

1462.72 -> up written inside of it and boom there

1465.12 -> we go we have our completely useless

1467.84 -> signup form that doesn't do anything but

1470.72 -> in the next scrim we're going to add on

1472.799 -> to this so stay tuned and then i'll see

1474.88 -> you there

1478.72 -> the sign up section we have here is

1480.559 -> actually pretty useless because there's

1482.799 -> no way for our users to add for example

1485.12 -> their username or password so in this

1487.2 -> script we're gonna fix that which leads

1489.039 -> us to the input tag the input tag is

1492.08 -> just like images a self-closing tag so

1494.72 -> we only write the opening tag and not

1496.72 -> the closing tag like we do with buttons

1498.72 -> for example however we have to specify

1501.039 -> what kind of a type our input should be

1503.52 -> so it has this type attribute

1506.159 -> just as the image has a source attribute

1508.799 -> and the value of the type can be a range

1510.64 -> of different options but we're going to

1512 -> start off with the most common one and

1513.679 -> that is text

1515.2 -> if we run this you can see we get this

1517.039 -> nice little text box in the browser

1519.44 -> another handy attribute is the

1521.2 -> placeholder that's where we can give the

1523.52 -> user a hint about what kind of data

1525.44 -> we're asking for so for example enter

1528.159 -> username like that if we run this you

1530.48 -> can see it says enter username okay

1533.279 -> let's do a mini challenge we of course

1535.039 -> want them to enter their password as

1536.72 -> well so i want you to create a new input

1538.96 -> field on line 4 which is identical to

1541.52 -> the one on line three though it should

1542.96 -> say enter password in the placeholder as

1545.36 -> opposed to enter username and don't just

1547.76 -> copy this line and change this word i

1550.32 -> want you to get some muscle memory here

1552.24 -> so go ahead and do that right now

1559.279 -> okay hopefully you did like this input

1562.72 -> type equals text

1564.559 -> placeholder enter password like that

1568.4 -> and there we go now you can enter a

1570.48 -> username and a password however in the

1573.12 -> real world passwords are never exposed

1575.52 -> like that the characters are always

1577.36 -> masked and the way we achieve that is

1579.52 -> simply by changing the type from text to

1582.4 -> password like that if we run the code

1584.24 -> now you can see the username is shown

1586.64 -> but the password is a mask really nice

1589.84 -> and speaking of this type attribute here

1592.159 -> it can take a range of different values

1594.159 -> which turn into really interesting

1596.32 -> interactive elements on the page

1598.64 -> for example you can do type equals date

1601.12 -> let's say you want the user to add their

1603.12 -> birth date during sign up and then you

1605.2 -> get this nice little date picker or you

1607.919 -> can do type equals time for example if

1610.32 -> you want the user to be able to

1611.76 -> configure when they should get some kind

1613.44 -> of notification that gives the user a

1615.6 -> nice time picker

1617.6 -> or let's say you want to give the user

1619.2 -> way to configure the theme of their

1621.039 -> profile with colors then you can do type

1623.44 -> equals color and then you get this

1625.039 -> powerful color picker where the user can

1627.36 -> add basically any color there is through

1629.52 -> moving around on these dots so the input

1632.4 -> tag is a really versatile tool in your

1634.96 -> toolbox

1636.08 -> okay let's move on to the main challenge

1638.48 -> because i want our users

1640.4 -> to have profile pictures which means

1642.799 -> that you need to add an html input field

1645.76 -> that lets them upload image files and

1648.4 -> i'm not going to tell you what kind of

1650.24 -> type that input field has

1652.32 -> i'm just going to show you how it looks

1654.159 -> or just like this you've probably seen

1655.84 -> it online before it's basically a button

1658.08 -> and when you click it it lets you choose

1659.84 -> an image from your local file system and

1662.64 -> the reason i want you to figure out what

1664.64 -> the type attributes should be here is

1666.88 -> because being good at googling is

1668.48 -> actually a huge part of being a good

1670.4 -> programmer and the two are actually not

1672.88 -> that easy to separate from each other so

1675.2 -> this gives you a way to practice those

1677.36 -> googling skills and i'm going to give

1679.279 -> you a hint that the keywords you should

1681.44 -> use are found in this last sentence

1684.24 -> right here

1685.679 -> so go ahead and solve this challenge

1687.52 -> right now and then i will of course show

1689.6 -> you the solution when you return back to

1691.679 -> me

1703.12 -> okay hopefully that went well let's do

1705.919 -> this the keywords i think are important

1708.159 -> here are html input because we know

1710.88 -> we're looking for an html input tag and

1713.36 -> then what is our intent well it is to

1715.12 -> upload image files and i think google

1717.12 -> can handle this just by combining html

1719.679 -> input upload image files if we just

1722.24 -> paste that into google let's see what we

1724.399 -> get and as you can see when we search

1726.32 -> for that we get a first hit from

1728.159 -> developer.mozilla.org

1730.32 -> let's click into that and here you can

1732.399 -> see the title is input type equals file

1735.279 -> and we get this little code snippet here

1737.44 -> it also says input elements with type

1739.52 -> file let the user choose one or more

1741.84 -> files from their device storage sounds

1744.48 -> pretty good so far let's zoom in on the

1746.559 -> code here and there you can see that

1748.159 -> they are actually using the profile

1749.52 -> picture example themselves choose a

1751.6 -> profile picture with this button which

1753.44 -> looks suspiciously similar to what i

1755.44 -> just showed you a couple of minutes ago

1757.44 -> so i think we've found it what we're

1759.279 -> looking for is type equals file

1762.08 -> let's add this up above the sign up

1764.84 -> button but

1767.12 -> type equals file like that we run this

1770.72 -> code yes there we go we get this button

1773.36 -> which looks like exactly what we're

1775.12 -> looking for

1779.279 -> okay now we're gonna move on from using

1781.679 -> google to building google i mean how

1784.799 -> cool is that you've learned html for

1787.279 -> just about 30 minutes and now you're

1789.36 -> gonna build the most visited website in

1792 -> the world that is just amazing as you

1794.08 -> can see here on the similar web overview

1796.72 -> google is at the very top amongst the

1798.96 -> most visited websites in the world

1800.88 -> beating sites like youtube facebook

1803.44 -> instagram wikipedia and all the way at

1806 -> 10th a pornography site of course

1809.12 -> and by the way it's a little bit sad to

1811.12 -> see that this adult site has almost

1813.52 -> three times the average visa duration of

1816.48 -> wikipedia so a pretty deep insight about

1819.36 -> humankind right there

1821.52 -> anyway we are going to build google.com

1824.48 -> and it'll look like this

1826.72 -> however now you're probably wondering

1828.559 -> how can we make a page look like this

1830.24 -> this doesn't look like regular html and

1832.96 -> that is because i've cheated a little

1834.799 -> bit and added this line up here which is

1837.2 -> a link tag to

1839 -> styles.css and if you look at the file

1841.279 -> menu in the left hand side you can see

1843.039 -> that actually we have a file called

1845.2 -> styles.css which contains exactly that

1848.399 -> cascading style sheets which is the

1850.24 -> language for styling websites and which

1852.559 -> you're going to learn all about a little

1854.48 -> bit later in this course however for now

1856.88 -> i want you to completely ignore this

1859.279 -> what you should do instead is just

1861.039 -> create the four html tags we need in

1864.08 -> order to create a google.com clone and

1867.039 -> then this css will be pulled in and take

1870.32 -> care of styling the elements as they

1872.88 -> should be so that it will look like this

1874.96 -> and to give you a hint this is an image

1877.679 -> file pointing to google.png the file

1881.039 -> i've added here and png is just a file

1883.6 -> format just like jpeg you can use it in

1886.08 -> the exact same way as we used jpegs

1888.159 -> earlier on so you should know how to do

1889.76 -> that and this is an input field you have

1892.399 -> to figure out what kind of type it is i

1894.159 -> think you might have a clue

1895.679 -> this is a button on the left hand side

1897.2 -> and this is also a button so basically

1899.44 -> it is these four tags you need to create

1901.519 -> in order to build a clone of the world's

1904.08 -> biggest website so go ahead and do that

1906.559 -> start down here and ignore the line up

1909.279 -> here and then when you return back to me

1911.44 -> i will of course show you the solution

1913.44 -> as well

1914.559 -> good luck

1921.2 -> okay hopefully that went well

1923.6 -> if not no worries let's do it together

1926.72 -> so starting with the image tag for the

1929.76 -> google logo

1931.12 -> i'm going to do

1932.24 -> imd like that and it's a self-closing

1935.519 -> one so i don't need a closing tag but i

1937.44 -> need a source attribute and it should

1940.08 -> point to the google.png file so i'll

1942.48 -> just do google.png

1944.559 -> like that and let's run this and oh

1947.36 -> there we go we got the logo

1950 -> okay moving on

1951.36 -> let's do the input field also a self

1953.76 -> closing tag

1958.32 -> running the code and there we go we have

1960.799 -> a input field looking pretty good

1963.519 -> okay next up there's the two buttons one

1966.08 -> saying google search and one saying i'm

1967.919 -> feeling lucky so i'm gonna add both of

1970.24 -> these

1971.279 -> button google search

1973.6 -> and then since i'm lazy i'm gonna copy

1975.679 -> it

1976.399 -> and do i'm feeling lucky like that

1979.12 -> let's run this

1980.399 -> and there we go we have a google clone

1984.24 -> with just four html elements

1987.12 -> so if you did this give yourself a pat

1989.36 -> on the back it is fantastically well

1991.36 -> done you should really be proud of

1993.279 -> yourself and if you didn't manage to do

1995.039 -> it just try it again and i think you'll

1997.12 -> make it

1998.24 -> at this point it might be a good idea to

2000.08 -> take a little break and digest

2001.679 -> everything you've learned and then when

2003.039 -> you are ready to continue i will see you

2005.279 -> in the next scrim

2009.679 -> okay now that you've built google.com

2012.24 -> you probably want to showcase your

2014.08 -> project on some kind of a portfolio page

2016.72 -> so let's pretend we're creating exactly

2018.96 -> that

2019.76 -> here we have the index.html page the

2022.24 -> main page of our portfolio and as you

2024.48 -> can see it says pierre harold borgen

2026.64 -> developer teacher procrastinator so a

2029.44 -> really good description of myself though

2031.679 -> what it lacks is some kind of page or

2033.6 -> section which describes my projects

2036.559 -> though i have actually created the

2038.559 -> underlying page for exactly that over

2040.72 -> here on

2041.799 -> work.html as you can see this is a few

2044.399 -> tags that describes my google.com

2046.72 -> project however there's no way for the

2048.8 -> users to know this the only way they can

2051.119 -> get to this page now is by actually

2053.119 -> typing

2054.28 -> work.html up in the browser here and

2056.48 -> then it is rendered we don't want that

2058.399 -> instead we want some kind of link from

2060.8 -> the index page that is this one that

2063.839 -> points towards the work.html

2066.879 -> and in order for us to achieve that you

2068.879 -> have to learn about anchor tags aka

2071.679 -> links an anchor tag is simply an html

2074.72 -> tag with an a so let's open and close an

2077.44 -> anchor tag and write for example

2079.599 -> check out my projects

2082.56 -> here

2083.44 -> like that if we run this

2086.72 -> it seemingly looks just like our

2088.399 -> paragraph and we can't click it either

2090.879 -> and that is because for anchor tags you

2092.96 -> also have to provide it with an href

2095.44 -> attribute that's short for hypertext

2097.76 -> reference really fancy scary looking

2100.4 -> word right there don't worry about it

2102.16 -> all this attribute does is decide where

2104.56 -> the link should point to so if we do

2106.8 -> equal and then two quotes we can inside

2109.119 -> the quotes simply write work dot html if

2112.64 -> we now run this you can see that it

2114.56 -> renders as a link and when we click it

2117.2 -> boom we're taken to the work.html page

2121.28 -> really nice

2122.88 -> now another thing i want to show you

2124.24 -> with anchor tags is that you can nest

2126.4 -> them inside of other tags and actually

2128.8 -> inline in a text block so let's say that

2131.2 -> we want to link to google.com from this

2134 -> site then we'll create a paragraph which

2136.64 -> can say something like check out the

2139.44 -> live

2140.32 -> demo here

2142 -> and we only want the here word to be a

2144.32 -> clickable link well then we'll simply

2146.48 -> wrap the anchor tag around here as well

2150.48 -> and we'll close it before we close the

2152.88 -> paragraph and then we'll do the href

2155.52 -> paste in the url to google.com

2158.56 -> now this is a link that points to an

2160.32 -> external website not to any of our pages

2163.28 -> so if we run this you can see that the

2165.119 -> link is now only over the here word

2167.839 -> however if i click this link now the

2170.32 -> scrimba mini browser will try to head

2172.4 -> over to google.com and we only allow the

2174.48 -> mini browser to render scrimba projects

2176.72 -> at the moment so that won't work instead

2178.88 -> what i'm going to do is make this link

2180.88 -> open in a new tab the way we do that is

2183.52 -> through a new attribute so first i'm

2185.52 -> just going to break this into a new line

2187.76 -> just to improve the readability a little

2189.599 -> bit

2190.4 -> and then here i'm going to write target

2193.359 -> equals

2194.56 -> underscore blank

2196.64 -> now that is a cryptic way of saying that

2200.079 -> you want the link to open up in a new

2202.32 -> tab i know but if we now run this if you

2204.8 -> click on this link what you'll see is

2206.72 -> that in your main browser a new tab will

2209.839 -> be opened at the google.com homepage so

2213.04 -> i'm not going to go deeper into why it's

2215.2 -> called target equals underscore blank

2218.079 -> but this is the way to do it i of course

2220.48 -> wish that html had a better solution for

2223.04 -> this for example new tab equals yes that

2226.96 -> would have made a lot more sense to me

2229.359 -> but this is how it is you just have to

2231.76 -> accept it okay that was a lot of talking

2234.24 -> from me now it's time for challenge

2236.56 -> i want you to create an anchor tag that

2238.96 -> links back to the index.html page

2241.839 -> because if user ends up on this page

2244.4 -> they also need a way to get back to the

2246.16 -> main page so create that link here

2248.8 -> however you want and then i will show

2250.64 -> you the solution when you return back to

2252.32 -> me

2258.24 -> okay hopefully that went well let's

2260.48 -> create this anchor tag i'll wrap it

2262.56 -> inside of a paragraph and right turn to

2266 -> home page and then i'll simply wrap the

2268.4 -> homepage word in an anchor tag like that

2271.44 -> and point that anchor tag

2273.44 -> to

2274.359 -> index.html if we run this you can see

2276.88 -> return to homepage and if we click that

2278.96 -> we are back at the homepage

2281.28 -> great job let's move on

2286.56 -> okay we're back at our google example

2288.24 -> here and now i want you to add a anchor

2290.4 -> tag to the page because sometimes you'll

2292.8 -> see that google ads a little text

2294.8 -> underneath the buttons for example

2296.48 -> something about privacy like we protect

2298.48 -> your privacy and then with a learn how

2300.32 -> link then you can click on to read more

2302.16 -> about that so that is exactly what i

2304.56 -> want you to do

2305.76 -> i want you to add an anchor tag that

2307.839 -> points to blog.html

2310.16 -> as you can see i've added a blog.html

2312.56 -> file up here and i want you to wrap the

2314.96 -> link inside of a paragraph tag so just

2317.44 -> as it is here you can see it's an entire

2319.44 -> paragraph here

2320.8 -> but the anchor tag is only wrapping the

2323.599 -> second sentence so go ahead and do that

2326.48 -> right now

2332.64 -> okay hopefully that went well let's do

2335.119 -> it we'll start with the paragraph

2337.28 -> opening and closing tag and then we

2339.92 -> protect your privacy like that here

2343.52 -> we're going to add the anchor tag inline

2346.16 -> so i'll do a

2348 -> open and close

2349.28 -> and do an href as well point it to

2352.079 -> blog.html

2354.32 -> and the text should be

2356.32 -> learn how let's run this and boom there

2358.88 -> we go we have added a nice little link

2361.68 -> here if we want to learn more about

2363.44 -> google privacy then we can click this

2365.04 -> link but

2367.04 -> not much to see here turns out that

2369.52 -> privacy probably isn't as important for

2371.359 -> a company who makes money by showing ads

2373.68 -> to users

2375.28 -> anyway we can click on this link return

2377.2 -> back to google and there we are great

2379.359 -> job solving this challenge let's move on

2385.04 -> okay now we're going to talk about how

2386.56 -> to structure html documents because the

2389.76 -> structure we have here isn't actually

2391.839 -> correct it's a very simplified structure

2394.32 -> compared to how it should be though it

2396.16 -> does work so i didn't want to give you

2398.24 -> all of these theoretical boring

2400.64 -> structure things up front i wanted you

2402.88 -> to build stuff from the get-go without

2404.96 -> the added complexity of the proper html

2407.52 -> structure as my philosophy is first make

2410.079 -> it work and then make it better however

2412.56 -> now we're at the point where we should

2414.32 -> make it better

2415.52 -> so let's have a look at how to structure

2417.599 -> html documents properly and html is

2420.64 -> actually quite like us humans it has a

2422.8 -> head and a body and what do you place

2424.96 -> inside of these elements well in the

2426.64 -> body that's where you place the tags you

2429.44 -> see on the page and that is these ties

2432.24 -> here so our image our input button

2435.04 -> paragraph and our anchor tag because

2437.28 -> these are visible on the page now of

2439.359 -> course the css styling up here also

2441.92 -> results in a different layout but the

2444.48 -> link tag in itself is not something that

2446.48 -> is rendered on the page so it should not

2448.96 -> be in the body tag

2450.8 -> so let's just add the body right here

2453.359 -> ravi starting tag and then the closing

2455.68 -> tag down here on line nine and then

2457.359 -> we'll indent everything inside of the

2459.359 -> body like that

2461.04 -> so moving on to the head that's where we

2463.44 -> add metadata and what do i mean about

2465.44 -> that well it can be many things for

2467.119 -> example styles so this link right here

2469.92 -> should be inside of the head

2472.24 -> we'll do head

2473.52 -> and then close it off here like that

2475.44 -> other things we'll have in the head is

2477.359 -> the title tag so let's have a look at

2479.44 -> what that is

2480.8 -> if we navigate over to the bbc football

2482.88 -> page and zoom in on the top you can see

2485.119 -> up in the tab it has a icon it says

2487.839 -> football dash bbc sport

2490.319 -> and all of this data both the fav icon

2493.2 -> at the beginning here and this sentence

2495.359 -> is controlled by elements we place

2497.04 -> inside of the head tag so if we want to

2499.2 -> add a title text in a tab

2501.839 -> simply write title and then for example

2504.24 -> google.com would be natural to write

2505.839 -> here though we haven't implemented tabs

2508.64 -> in the mini browser here on scrimba so

2510.48 -> you won't see that but had we done that

2512.72 -> it would have looked like this though it

2514.24 -> of course would have said google.com

2515.68 -> instead so we don't need that so let's

2517.76 -> just remove it another thing that is

2519.76 -> controlled by tags inside of the heads

2521.92 -> tag is how articles are shown on social

2525.04 -> media so if we zoom out a little bit

2527.2 -> here and click in on this article at the

2529.119 -> top here and if we now were to take this

2531.76 -> url and share it for example on twitter

2534.4 -> what we then would get is a different

2536.8 -> heading on the twitter card than what

2539.04 -> the article natively has and also a

2541.44 -> different image than the main image on

2543.599 -> the article so this is metadata that has

2546.079 -> told twitter that if this article is

2548.64 -> shared on twitter we want you to use

2551.28 -> this heading instead of the heading that

2553.04 -> is inside of the article and also this

2555.04 -> image instead of this image right here

2557.44 -> so that was a lot about the head tag

2560.4 -> we're not going to use the head that

2561.68 -> much but i wanted to give you an

2562.88 -> understanding about why it is important

2565.359 -> now there's one more html tag we need

2567.92 -> and that is the html tag in itself which

2571.119 -> should wrap all other html tags so we

2574.4 -> need to up here at the very top right

2577.52 -> html and at the very bottom close it off

2580.8 -> and also then indent everything inside

2583.04 -> of it

2583.839 -> like that

2585.2 -> and then there's one more thing which is

2587.44 -> to me a little bit annoying that we need

2589.44 -> that is the doctype declaration because

2592.56 -> you have to tell the browser that we're

2594.4 -> actually using html5 and not html4

2597.839 -> that's just a version of the html

2599.839 -> specification and that is done by this

2601.599 -> line up here you can see it's blue and

2603.599 -> it starts with an exclamation mark so

2605.2 -> it's actually not an html tag it's just

2608 -> metadata for the browser because if you

2610.4 -> don't do this browser will assume that

2612.24 -> you're not using html5 but an earlier

2614.64 -> version of html and that might result in

2617.2 -> some quirks on the page though in 99 of

2619.839 -> cases there will be no difference

2621.599 -> between adding this and not having it so

2623.839 -> at times you'll probably see tutorials

2625.68 -> on scrimba where i've forgotten to add

2627.76 -> this because for the purposes of our

2629.839 -> example it won't make any difference but

2632.24 -> if you have something that you want to

2633.76 -> deploy to the world and have in

2635.44 -> production then you just have to accept

2637.119 -> that you need this sign up at the top

2639.28 -> and sometimes you'll see people write it

2641.44 -> in capital letters as well doesn't

2643.119 -> really matter i prefer having lowercase

2645.28 -> letters okay that was a lot of theory

2648.24 -> it's time to get your hands on the

2649.839 -> keyboard

2650.88 -> and luckily though we have a blog.html

2653.119 -> file which doesn't have the proper html

2655.2 -> structure so your challenge is simply to

2658.16 -> add the proper html document structure

2660.56 -> to this page and i don't want you to

2662.72 -> copy paste my tags but write them out on

2665.04 -> your own instead so that you build up

2666.8 -> that ever so important muscle memory go

2669.359 -> ahead and give this one a shot right now

2670.88 -> and then i will of course do it myself

2672.8 -> when you return back to me

2679.52 -> okay let's do this

2681.44 -> i'll start with the body

2684 -> as that should wrap our visible elements

2686.64 -> on the page

2687.76 -> like that

2689.2 -> then i'll do the head though we haven't

2691.68 -> linked to the styles on this page so the

2693.599 -> head will actually just be empty like

2695.2 -> this so i'll keep it on one line moving

2696.96 -> on it is the html document and that

2698.96 -> should wrap everything

2700.48 -> so i'll do like that and at the very end

2703.44 -> i'll add the doctype html to tell the

2705.92 -> browser that we are working with html5

2708.56 -> and not html4

2710.48 -> so if we now navigate over to the

2712.8 -> blog.html site you can see that nothing

2715.119 -> has seemingly changed and as goes for

2717.359 -> the main page itself this structure

2719.599 -> we've added doesn't result in any

2721.28 -> visible change we just have a more

2723.359 -> correct underlying code file to work

2725.28 -> with great job let's move on

2730.72 -> now you are going to learn about lists

2732.96 -> because let's say that you for example

2734.96 -> want to create some kind of a tribute

2736.72 -> site it could be for whatever for

2738.8 -> example

2739.839 -> uh i don't know the beijing winter

2742 -> olympics

2743.52 -> if that's one of your interests you

2744.72 -> might want to create a tribute site

2746.4 -> where you list out the top nations who

2749.2 -> competed or something like that and if

2751.359 -> so you would have to use an html list

2754.48 -> so let's first just figure out which

2756.16 -> nation actually won the most medals in

2758.16 -> the beijing olympics so i'm gonna click

2759.92 -> on the medals tab here on the olympic

2762.16 -> site and here we got it and zoom in a

2765.68 -> little bit and oh wow

2768.24 -> it turns out that actually norway

2772.079 -> my country completely

2774.44 -> obliterated

2776 -> the other countries with 16 gold medals

2779.68 -> over other nations like

2781.52 -> germany china and the us

2786.16 -> that is

2787.119 -> really astonishing especially

2788.64 -> considering the fact that the size of

2790.4 -> the norwegian population is this

2793.04 -> compared to the other nations here i

2795.359 -> mean way to go norway we gotta create

2799.359 -> this list in html okay so how do we do

2802.88 -> that well we have to use two different

2805.52 -> tags one tag for wrapping the entire

2808 -> list and another tag for each list item

2810.64 -> the wrapper tag

2812.319 -> is one called ol that's short for

2814.96 -> ordered list

2816.56 -> and then inside of the ordered list we

2818.72 -> place the list items the li tags

2822.16 -> so when we do this and write no right

2824.64 -> here

2825.52 -> render this you can see that the browser

2828 -> gives us a number as it is the first

2830.319 -> item in the list and also indents it a

2832.88 -> little bit from the left hand side

2835.359 -> so adding another one

2837.52 -> here

2838.319 -> it then gets the number two and is

2839.92 -> stacked below the first one

2842.319 -> so let's add the final ones

2846.16 -> like that

2847.599 -> looking pretty good we have a list just

2850.72 -> like on the olympic site

2852.64 -> now if we wanted to be a little bit more

2854.4 -> diplomatic here and not brag too much

2856.319 -> about this insane victory by norway we

2859.119 -> could change this ol to a ul

2862.48 -> that is an unordered list

2864.64 -> and as you can see then the numbers are

2867.119 -> replaced with dots

2868.88 -> now you might ask yourself well why do

2870.96 -> we need these unordered lists they look

2872.72 -> like kind of boring elements you just

2874.8 -> use in word documents or something like

2876.8 -> that well once you learn about css

2879.92 -> you'll be able to style your list

2881.76 -> however you want and thus make it much

2884.56 -> more usable if we for example head over

2886.88 -> to bbc sports here and right click on

2890.079 -> the navbar here and click inspect then

2892.64 -> we'll see that actually this entire

2894.8 -> navbar is an unordered list item

2897.839 -> with each of the categories being its

2900.16 -> own list items so lists are all over the

2903.119 -> web and important to learn

2905.76 -> okay now i'm going to remove all of this

2908.24 -> and give you a quick little challenge

2910.64 -> because i want you to create an ordered

2912.72 -> list inside of the body tag

2914.72 -> and then fill it with your top three

2916.64 -> favorite foods

2918.64 -> so go ahead and give this a shot right

2920.64 -> now

2927.04 -> okay hopefully that went well let's do

2929.599 -> it so we start out with an old tag

2932.559 -> that we're opening up and closing

2935.119 -> and as for the list items even though

2937.68 -> norway is a great winter olympics

2940 -> country it is a truly mediocre country

2942.8 -> when it comes to food so my favorite

2944.4 -> food is definitely from other places

2946.4 -> than where i'm from i love italian pasta

2950.16 -> i love japanese ramen soup

2953.119 -> and lately i've been really into podtai

2957.359 -> so there we have it rendered out on the

2959.28 -> page really good job learning about html

2962.24 -> lists let's keep up the pace and move on

2964.88 -> with the course

2968.72 -> okay now you have arrived to the main

2971.04 -> project of this section you are going to

2973.04 -> build a website about yourself and we're

2975.839 -> going to personalize it as well plus

2978 -> deploy to the world so that anyone

2979.839 -> around the world can visit this website

2982.24 -> it is going to be so much fun

2984.559 -> and here is the website itself as you

2986.64 -> can see it's pretty simple with hardly

2988.72 -> any styling by default just a little bit

2991.04 -> on the button and the input field here

2993.28 -> as with the border around this image and

2995.92 -> building this lightly styled design

2998.48 -> is the first part part one of the

3000.72 -> challenge and then in part two of the

3002.8 -> challenge we are going to go crazy on

3004.88 -> the styling with just a few parameters

3007.119 -> that you are to tweak and it's going to

3008.64 -> look so cool but let's not get ahead of

3011.04 -> ourselves here let's first just run

3012.96 -> through what kind of tags you need in

3014.88 -> order to build this website

3016.88 -> so first off there is an image tag and

3019.2 -> the image you should use should be added

3021.359 -> to the file system on the left hand side

3023.28 -> here as you can see there is a pair.jpg

3025.68 -> image here and the way to add an image

3027.92 -> to this file system is simply by drag

3030.16 -> and dropping it over this section

3032.72 -> next up there's an h1 here as well with

3034.88 -> the title

3035.92 -> of course you should write your own name

3037.599 -> not my name and then there's an h2

3039.839 -> heading as we need some fun facts about

3042.16 -> you the fun facts itself are built using

3044.8 -> an unordered list plus list items inside

3047.44 -> of the ul element then there is a

3049.68 -> paragraph with a link nested inside of

3052 -> it that should go to your linkedin

3053.68 -> profile

3054.48 -> so the point here obviously is to

3056 -> replace all of this information with fun

3058.48 -> facts about you with your name with your

3060.96 -> image your linkedin profile so that when

3063.68 -> you share this with the scrimba

3065.119 -> community other people will be able to

3067.119 -> get to know you better

3068.72 -> and then finally we have an input field

3070.559 -> here and a button that won't really do

3073.68 -> anything because we're not hooking this

3075.599 -> up with a real newsletter we are just

3077.839 -> pretending that you have a newsletter

3079.599 -> that people can sign up to so once

3081.52 -> you've done this you've completed part

3083.599 -> one of the challenge and you've also

3085.68 -> filled up this body element here with

3088.079 -> html tags

3089.92 -> next you'll move on to part two of the

3092.16 -> challenge what you'll do there is take

3094.48 -> your existing design and modify it

3097.359 -> so if we head over to the

3098.92 -> index.javascript file you can see that

3101.04 -> there are a bunch of so-called

3102.559 -> javascript functions which probably look

3104.88 -> really scary at this point but don't

3106.8 -> worry the only thing you're going to do

3108.8 -> here is take the word that you see

3111.28 -> inside of the quotes right here and

3113.76 -> replace them with one of the words that

3116.079 -> are commented out in the line above

3118.48 -> because this will give you the

3119.76 -> opportunity to change the styling on the

3122.079 -> page

3123.2 -> according to what word you change this

3125.68 -> argument to so what you are to do here

3128 -> is look at the name of this function it

3129.599 -> says favorite movie genre and what is

3132 -> that do you like space movies scary

3134.319 -> movies military movies romantic movies

3136.319 -> cowboy movies and so on and then just

3138.8 -> take your preference and change it like

3141.28 -> this so if you choose cowboy for example

3143.359 -> what then will happen is that the font

3145.839 -> on the website suddenly became like a

3147.52 -> western movie that's pretty cool

3150 -> and moving on

3151.28 -> here you are to answer what is your

3153.119 -> favorite fruit is it watermelon tomato

3155.92 -> banana if it for example is banana then

3158.319 -> you should replace regular with banana

3160.72 -> and what will then happen if you run the

3162.559 -> cold then suddenly your page is banana

3165.52 -> colored

3166.48 -> really nice

3167.839 -> so now you are a cowboy banana that's

3170.4 -> pretty cool

3171.839 -> finally there's two more parameters you

3173.599 -> can tweak first tell me is your favorite

3176.319 -> mode on your computer light mode or dark

3178.72 -> mode if you choose dark

3180.96 -> and run the code again then you can see

3183.04 -> the colors have flipped and now it is

3185.119 -> primarily dark with the brown background

3187.359 -> and the light yellow color

3189.359 -> as opposed to how it was previously with

3191.44 -> the yellow background and brown text

3193.28 -> color

3194.64 -> and then at the very end you are to

3196.64 -> choose what kind of style you like your

3198.64 -> edges to be

3200 -> sharp soft or round let's say you like

3202.559 -> round well then you'll simply replace

3204.319 -> sharp with round and there we go we have

3207.2 -> a nice round layout where the image and

3210.16 -> the input and button

3211.92 -> now have a much more round feeling to it

3215.119 -> so what happens here is that these are

3217.04 -> javascript functions that execute code

3220.24 -> which you can see further down in the

3221.92 -> index.js file and change the layout

3224.64 -> accordingly

3225.76 -> though you should ignore everything

3227.92 -> below this line don't even try to

3230.24 -> understand it it's far outside the scope

3232 -> of this course and you're gonna learn

3233.599 -> javascript later in the front-end

3235.119 -> developer path anyway so it's nothing

3237.119 -> for you to worry about right now

3239.76 -> now i'm going to reset all of these

3242.319 -> set these two to regular and these two

3244.559 -> to light and

3246.559 -> sharp as that is the default styling

3248.559 -> that we should have and then i'll leave

3251.28 -> you with this image right here as it now

3253.76 -> is your turn to build this layout

3256.16 -> personalize it with the javascript

3257.76 -> functions so that you have your very own

3259.92 -> completely unique website

3262.72 -> so go ahead and do this right now and

3264.559 -> then i will see you when you return back

3266.319 -> to me

3271.68 -> okay hopefully that went well let's now

3273.92 -> do this together first we need the image

3276.079 -> tag so i'm gonna do img

3278.64 -> the source is the

3280.359 -> pier.jpg which i'd already added

3283.52 -> yes there we can see it is rendering

3285.359 -> properly

3286.559 -> next up there is an h1

3289.28 -> hi my name is pear like that

3293.119 -> very good

3294.24 -> moving on we have the h2

3296.88 -> fun facts

3298.319 -> about me

3299.76 -> like that and then there's the

3302.72 -> unordered list and the list items

3304.96 -> so i'll do ul

3306.8 -> close that ul because the list items

3308.88 -> need to be inside of the ul and the

3311.28 -> first one is 36 years old

3314.88 -> i'm gonna copy this one

3317.52 -> like that and

3319.44 -> i live in

3320.88 -> norway

3322 -> and i sing

3323.599 -> in a choir

3325.76 -> and there we go looking pretty good

3328.24 -> next up there is the paragraph with the

3330.4 -> inline anchor tag

3331.92 -> here's the paragraph

3334.079 -> connect with me on

3337.2 -> linkedin like that

3338.64 -> oops it should say let me on linkedin

3341.68 -> here and then

3343.52 -> we are to wrap linkedin here

3346.4 -> into an ahref

3348.4 -> like that

3350.16 -> and then i'm going to paste in the url

3352.079 -> to my linkedin right here and if you

3354.48 -> actually want to connect with me on

3355.839 -> linkedin

3356.88 -> feel free to click on this link as soon

3358.64 -> as i've added the target equals

3361.359 -> underscore blank so that it opens up a

3364.319 -> new tab

3365.52 -> okay finally we we need to add the input

3368.079 -> and the button

3369.92 -> input type

3371.599 -> text like that and button

3374.839 -> with join

3376.799 -> newsletter as the text

3380 -> yes that worked and we finally just need

3382.88 -> the placeholder in the input

3386.319 -> and here we're going to write enter

3388.079 -> email

3389.119 -> enter email

3390.88 -> like that and

3393.119 -> that actually

3395.119 -> looks pretty good to me that is what we

3398 -> were looking for yes

3400.079 -> okay next step we are going to

3401.92 -> personalize it this will be easy for me

3404.72 -> i really love movies about space so i'm

3407.28 -> going to choose space here as my

3408.64 -> favorite movie genre it gives me this

3410.559 -> really neat sci-fi-ish font and i am a

3413.68 -> huge avocado fan so gotta do that

3417.76 -> looking pretty good

3419.68 -> i tend to prefer both light mode and

3421.599 -> dark mode but let's try dark yeah

3424.16 -> not bad

3425.52 -> and as for favorite edge style i'm not

3428.4 -> gonna do completely round not completely

3430.319 -> sharp but something in between

3432.559 -> as i think the answer often is something

3434.4 -> in between

3435.52 -> and yes there we go pretty cool website

3439.52 -> now the final thing i want you to do is

3442.16 -> head back to your note where you created

3443.92 -> your website and then click on the

3446.079 -> bottom right icon the cog wheel and

3449.2 -> choose download as zip because that'll

3452.319 -> download your project through your local

3454.4 -> machine and we need that in order to

3456.16 -> deploy this project over the next few

3458.319 -> scripts

3459.44 -> so what i'd recommend you to do is on

3461.76 -> your computer create a dev folder

3464.319 -> and move that zip file you just

3465.92 -> downloaded to this dev folder double

3468.319 -> click on it to open it that'll give it

3470.24 -> this long obscure id so if i were you i

3473.2 -> would change that to something

3474.48 -> understandable for example personal site

3476.96 -> and just save it so that you have your

3478.72 -> project neatly placed with a good name

3481.359 -> on your local computer so that we are

3483.44 -> ready to share it with the world over

3485.52 -> the next few scrims it is going to be

3487.599 -> epic so i look forward to see you in the

3490.24 -> next room after you've done all of this

3492.72 -> i'll see you there

3497.04 -> in order to get your personal site live

3499.28 -> on the world wide web we are going to

3501.28 -> use a service called netlify as it is

3504 -> both free easy to use and powerful as

3506.88 -> it's used by tons of professional

3508.799 -> developers so if you're following this

3510.799 -> course on scrimba.com just click on this

3513.599 -> slide right here and you'll be taken to

3515.28 -> netlify or if you're following this

3517.52 -> course on youtube just head over to

3519.799 -> netlify.com and you'll get to the exact

3522.079 -> same page once you're there i want you

3524.24 -> to click at the sign up button as

3526.4 -> that'll take you to an authentication

3528.079 -> screen where you can choose a bunch of

3529.839 -> different options i am going to go with

3532.079 -> the email option so i'll click on that

3534.319 -> and fill in my email and also choose a

3536.4 -> password then i'll click sign up which

3539.119 -> again will trigger netify to send a

3541.2 -> verification email to my inbox so i'll

3544 -> head over to my inbox and click on

3546.079 -> verify email that'll take me to the

3548.559 -> netlify onboarding page where i have to

3550.559 -> tell them a little bit about myself so

3552.64 -> here i'm going to say that i'm using

3554.24 -> netlify for personal reasons and opening

3556.72 -> up this select box here i'm going to

3558.4 -> classify myself as a hobby developer and

3560.96 -> my first project will be a personal

3562.88 -> slash portfolio site then i'll scroll up

3565.359 -> it down and give my team a name i'm just

3567.92 -> going to call my team peer as it's

3569.68 -> common to use your first name but you

3571.44 -> can choose whatever name you want on

3573.359 -> your team once you're done with all of

3575.04 -> that click on the setup and continue

3577.599 -> then you are taken to the page where you

3579.2 -> are to deploy your first project you can

3581.68 -> either import an existing project start

3584.319 -> from a template or deploy manually and

3587.04 -> that's exactly what we are going to do

3589.28 -> so what i want you to do here is return

3591.44 -> back to the folder you created in the

3593.839 -> previous scrim called personal site and

3596.72 -> then mark all of the files and drag and

3599.359 -> drop them into this rectangle once

3602.079 -> you've done that your browser might ask

3603.92 -> you if you actually want to upload the

3605.52 -> files to the site just confirm that by

3608.079 -> clicking on upload and then netlify

3610.559 -> starts its magic at this point they are

3613.119 -> working under the hood deploying your

3615.119 -> site to the web so here you might have

3617.2 -> to wait for a couple of minutes until

3618.799 -> you see this icon right here turn into a

3621.119 -> screenshot of your personal site now if

3623.92 -> that doesn't happen within a couple of

3625.359 -> minutes just try to refresh the site

3627.359 -> itself as that'll probably do the trick

3629.68 -> then you can simply click on this url

3631.76 -> right here and boom you have deployed

3634.319 -> your site so that anyone in the world

3636.48 -> can access it that is a phenomenally

3639.359 -> great job and you should truly be proud

3641.599 -> of yourself

3642.88 -> the final step i think you should do now

3645.28 -> is to share your creation with the world

3647.92 -> i would recommend you to use either

3649.68 -> linkedin or twitter as both of those

3651.839 -> have huge communities of developers so

3654.559 -> what you should do is basically what

3656.079 -> jolene and jess are doing here share a

3658.559 -> link to your personal site write a

3660.4 -> couple of sentences about it and also

3662.24 -> feel free to mention anyone else who've

3664.16 -> been involved in this project and add a

3666.64 -> relevant hashtag like jess is doing here

3669.2 -> for example 100 days of code that is a

3671.76 -> great hashtag to follow and to use as it

3674.4 -> puts you in touch with a bunch of other

3676.559 -> people online who are going through the

3678.319 -> same learning journey as you are so i am

3681.359 -> looking forward to see your personal

3683.119 -> site either on linkedin or twitter and

3685.52 -> i'm also looking forward to see you in

3687.52 -> the next scrim

3691.92 -> guess who is my favorite person in the

3694.16 -> world right now you are because you have

3696.88 -> just completed the html section of this

3699.52 -> course and that is really well done now

3702.4 -> let's have a quick look at what you've

3704.079 -> learned starting off you learned about

3705.92 -> the core html tags that is for example

3708.4 -> the heading tags like the h1 and h2 and

3711.04 -> also the paragraph tag next you learned

3713.52 -> about nesting which is how we place

3715.599 -> certain tags inside of other tags which

3717.839 -> again are inside of other tags creating

3720.4 -> this tree-like html structure

3723.2 -> and you learned about buttons and input

3725.2 -> fields which are two tags that help us

3727.2 -> make our website interactive so that

3729.359 -> users can perform actions on our website

3732.559 -> we also learned about the important

3734.319 -> anchor tag as that is what allows you to

3736.319 -> create links in between different

3738.24 -> websites or internally on a website in

3740.559 -> between pages

3742.16 -> another thing which we had to look at

3743.599 -> was the document structure because a

3745.839 -> proper html document requires a doctype

3748.48 -> an html tag a head tag and a body tag

3751.839 -> and then of course you learned about

3753.44 -> lists both the unordered list you can

3755.359 -> see here and also ordered lists and then

3757.92 -> at the end we did something super cool

3759.839 -> which was to deploy our website using

3762.319 -> netlify so that it lives out on the

3764.24 -> world wide web so at this point you

3766.72 -> might be a little bit overwhelmed that's

3768.799 -> totally okay feel free to take a little

3770.96 -> break now and when you return back you

3772.559 -> are going to learn about css aka

3775.119 -> cascading style sheets which is the tool

3777.359 -> we use in order to make our websites

3779.52 -> look good so that is going to be a lot

3781.44 -> of fun i'm looking forward to see you in

3783.28 -> the next section

3787.52 -> welcome to the second section of this

3789.359 -> course where you are going to graduate

3791.52 -> from html into the world of css or

3795.039 -> cascading style sheets as it stands for

3798.319 -> this is super exciting because now

3800 -> you'll be able to make your sites look

3801.839 -> beautiful as well

3803.52 -> so the main project of this section is

3805.839 -> actually the google.com homepage because

3808.319 -> this time around you are going to

3810.4 -> write the css as well

3812.96 -> and this probably looks a little bit

3814.559 -> frightening right now but don't worry

3816.64 -> i'm going to take you through it step by

3818.4 -> step and actually before we get going

3820.72 -> with google we're going to get you

3822.079 -> familiar with the syntax here and have

3824.079 -> some fun destroying wikipedia.org so

3827.359 -> it's going to be a lot of fun and we

3828.64 -> have no time to lose let's just get

3830.96 -> started

3834.799 -> okay so let's get you writing your first

3837.039 -> lines of css

3838.48 -> straight out of the gate

3840.24 -> as you can see here we have an html file

3842.4 -> which has a body that simply has please

3845.119 -> accept our cookies as text directly in

3848 -> the body tag and that is rendered here

3850.319 -> in the mini browser however as you'll

3852.96 -> notice the style doesn't exactly look

3855.2 -> like default browser styling and that is

3857.839 -> because we've added this line here which

3860.4 -> says link meaning it's linking to

3862.72 -> something and what kind of relation does

3865.039 -> this link cast to our html well it's rel

3868.16 -> stylesheet it is a sheet that contains

3871.28 -> styles

3872.48 -> and where does this sheet live well that

3875.28 -> is dictated by the href attribute which

3878.079 -> you probably recognize from anchor tags

3880.64 -> and it's pointing to styles.css

3883.44 -> and lo and behold in our file system we

3885.92 -> have a styles.css

3887.839 -> file and there we can see a few lines of

3890.48 -> scary looking codes you've never seen

3892.48 -> before perhaps however don't worry we're

3894.72 -> going to go through this

3896.48 -> so what happens here is that this css

3898.799 -> code is being pulled into the html file

3901.76 -> by this line 3 here and then it is

3903.92 -> applied to the website when it is

3905.52 -> rendered so if we were to comment out

3908.88 -> this line three here and re-run the

3911.2 -> example it'll look very boring like this

3913.68 -> so let's undo that it doesn't exactly

3915.839 -> look great now either but

3918.16 -> it's at least some styling although this

3920.88 -> cookie widget is a little bit weirdly

3922.96 -> designed in my opinion which leads me to

3925.68 -> your challenge you are going to redesign

3928.319 -> this cookie widget by

3930.88 -> changing the values inside of this body

3934.64 -> selector and now you might ask well what

3937.119 -> is a selector

3938.64 -> okay let's go through that because that

3940.48 -> is the basic css syntax you need to know

3943.52 -> in order to solve this challenge

3945.76 -> so css works by selecting certain

3948.88 -> elements on the page that is html

3951.44 -> elements and then styling them however

3953.44 -> you want

3954.48 -> and the element you select is what you

3956.96 -> start with when writing a css rule here

3960.16 -> we are selecting the body that is the

3962.72 -> exact same thing we're doing here and

3964.559 -> what's our body well that is this tag

3966.88 -> right here

3968.079 -> then in order to apply some specific

3970.16 -> styling to the body tag we write an

3972.4 -> opening curly bracket and a closed curly

3974.88 -> bracket and then inside of those

3977.039 -> brackets we have something called a

3979.039 -> property which in this case is color and

3981.28 -> a value which in this case is red

3983.76 -> so here we're saying that the color

3985.92 -> which is actually text color that's what

3988.24 -> color means here the text color in the

3990.88 -> body should be red so if i now change

3994.799 -> the color property from blue to red you

3998.559 -> can see in the mini browser we have

4000.4 -> changed the text inside of our body to

4003.359 -> red because if we head over to the html

4006 -> this text is indeed inside of our body

4010 -> now

4010.88 -> as you might have noticed as well the

4012.72 -> property is followed by colon and the

4015.2 -> value is followed by semicolon and you

4018.4 -> have to have that notation

4020.559 -> otherwise you'll break the example

4023.52 -> so what i want you to do now is redesign

4026.48 -> this cookie widget

4028.079 -> make sure you change all of the listed

4030.24 -> css properties that's background color

4033.359 -> font size font way text align and margin

4035.839 -> top and what you'll change it to is up

4038.16 -> to you but i've given you the hint of

4040 -> what kind of values the properties

4042.799 -> expect here in the comments on the right

4045.359 -> hand side you can see comments in css is

4048.24 -> done with this star and slash character

4051.359 -> so the grayed out text as in with the

4053.2 -> html is not interpreted by the browser

4056.079 -> it's just help text for you in order to

4058.4 -> solve this challenge

4060.24 -> and i'm intentionally not giving you any

4062.96 -> more information about what each of

4065.359 -> these properties mean because i think

4068.16 -> they're pretty self-explanatory so i

4070.64 -> want you to experiment with changing

4072.88 -> them and draw your own conclusions as to

4075.68 -> what for example the font size does to

4078.48 -> the styling on our page and then once

4080.64 -> you've done this once you've redesigned

4082.319 -> the cookie widget move on to the next

4084.64 -> scrim and then i will show you how i

4086.64 -> would do it as well

4088.319 -> good luck

4092.64 -> so really good job writing your first

4095.2 -> lines of css that is no small

4097.839 -> accomplishment now i'm going to show you

4100 -> how i would design my cookie widget so i

4102.96 -> want my widget to have cookie colors so

4105.679 -> for my background property which is what

4107.839 -> sets the background color of the body

4109.839 -> which fills up the entire browser at

4111.679 -> this point i'm going to choose a color

4113.839 -> called

4114.88 -> saddle brown like that and you might

4117.52 -> wonder well how do i know that saddle

4119.679 -> brown is a color that css supports well

4123.12 -> you might have noticed as you wrote css

4125.359 -> values that vs code or editor starts

4128.319 -> suggesting values for you as you start

4130.64 -> typing so that is how i found saddle

4132.719 -> brown

4133.6 -> this suggestion box here isn't recorded

4136.319 -> by scrimba itself so you won't see it in

4138.719 -> recording but you will see it as you

4140.56 -> interact with the code yourself so we

4142.48 -> have the background now let's move on to

4144.4 -> the color here i don't have red i want

4146.319 -> to have something a bit more cookie-ish

4148.159 -> and it just happens to be a color called

4150.719 -> chocolate like that starting to look

4153.359 -> pretty cookish

4155.199 -> the font size i want to be larger so i'm

4158 -> going to set that to 25 yes that's

4160.48 -> pretty good okay font weight that

4163.199 -> dictates the thickness of the font can

4166.159 -> be lighter normal or bold i want it to

4168.88 -> be

4169.6 -> bold like that because we want to state

4171.92 -> clearly to our users please accept our

4174.08 -> cookies and text align can be left

4177.199 -> center or right

4178.719 -> let's first see what it does if i do

4180.719 -> left you can see now it start on the

4183.279 -> left hand side will be a bit more

4184.88 -> visible if i enlarge in the browser and

4188 -> i can do center yep there it is centered

4191.359 -> and right there it is pushed all the way

4193.199 -> to the right hand side let's center it

4195.36 -> for this time

4196.64 -> which means that we only have the margin

4198.4 -> top left and that is also a pixel value

4200.88 -> as the font size was but it's set to

4203.36 -> five pixels let's remove that let's

4205.679 -> bring it down to zero and see what

4206.96 -> happens oh you can see the text jumped

4209.199 -> up a little bit and now there's no

4210.719 -> spacing in between the top of the

4212.32 -> browser and the text itself

4214.8 -> so it adds margin that is spacing to the

4218.64 -> top so this means that we can use this

4221.12 -> in order to push the text down to the

4223.199 -> middle of the browser kind of centering

4225.36 -> it vertically let's try for example 20

4228.88 -> not fully centered let's do 40 yes that

4231.84 -> looks really good

4234.32 -> now before we move on there's one thing

4236.32 -> i want to mention which is that normally

4238.719 -> when you deal with colors in css you

4241.04 -> likely won't see these plain english

4243.199 -> descriptions of colors instead you'll

4245.6 -> rather see is something like this so

4248.32 -> this weird

4249.76 -> six character long expression with a

4252.48 -> hashtag in front of it and this is

4254.159 -> called a hex color code and that is a

4256.239 -> description of the color it's a recipe

4258.56 -> for how much red green and blue this

4261.36 -> specific saddle brown color consists of

4263.76 -> because as you can see nothing changed

4265.44 -> in our browser when i did this but if i

4267.28 -> change the recipe for example changing

4269.12 -> this 8 to 1 boom you can see that the

4271.28 -> color is suddenly completely different

4273.92 -> now we're not going to go into how these

4276.08 -> hex color codes work on the inside as

4278.48 -> that's outside of the scope of this

4280.159 -> lecture and it's certainly not expected

4282.719 -> that you remember what kind of colors

4284.96 -> the different hex codes refer to so now

4287.76 -> you might be a little bit confused and

4289.28 -> overwhelmed about all of these

4290.719 -> properties don't worry about it you're

4292.64 -> not expected to remember everything

4294.4 -> right now i just wanted to dip your toes

4296.32 -> into the water so that you were exposed

4298 -> to them and then you'll certainly get

4299.44 -> plenty of practice with all of these

4301.36 -> properties later down the line so let's

4304.08 -> just move on

4308.56 -> now that you know enough css to be

4310.56 -> dangerous

4311.6 -> let's use your newly acquired superpower

4314.159 -> in order to destroy wikipedia

4316.8 -> and for that we need a wikipedia page

4319.28 -> and about the coolest one there is is

4321.76 -> this list of helicopter prison escapes i

4324.719 -> mean oh my god how insane is that so

4328.56 -> click this image and you'll be taken to

4330.4 -> this article and then i'll show you step

4332.32 -> by step how we can destroy it with css

4335.44 -> so the first thing you need to do is to

4337.84 -> right click that'll open this menu where

4339.84 -> you can choose inspect and once you

4341.52 -> click that the dev tools will open then

4344.32 -> choose the icon in the far left as that

4346.88 -> allows you to use your cursor to select

4349.04 -> elements on the page so that when you

4350.88 -> hover over an element like this one

4352.64 -> you'll see that the dev tools select

4354.64 -> sets for you so if you move your cursor

4356.719 -> over to the logo you'll see that one

4358.32 -> selected and if you move your cursor

4360 -> over to the main part of the screen here

4361.76 -> you can see it selects the entire

4363.52 -> article

4364.48 -> once you're on that selection i want you

4366.08 -> to click because that'll select the

4368.32 -> specific html element here in the

4370.56 -> elements tab

4371.76 -> and don't worry about all of this you do

4374.08 -> not need to recognize the tags and

4376 -> attributes and everything you see here

4377.44 -> what i instead want you to do is head

4379.36 -> over to the right hand side where you

4380.88 -> see element dot style click there and

4383.199 -> you'll be able to actually apply css

4385.679 -> directly to this page so you can for

4387.44 -> example write background red and boom

4390.64 -> there we have really ruined this article

4394.08 -> then if you select another element on

4396.239 -> the page from this body content element

4398.159 -> here you can do the exact same thing

4400.48 -> click on the element style and now for

4402.48 -> example write font size and 30 pixels

4405.52 -> and there you go now you can click on

4407.679 -> the x icon in the far right corner here

4410.08 -> and then you can read about these

4411.28 -> helicopter prison escapes with a really

4413.44 -> bad background and huge text if that's

4416.08 -> what you prefer so feel free to spend an

4418.48 -> hour in this article and i will see you

4420.48 -> in the next scrim

4425.44 -> okay so now it's time for you to yet

4427.76 -> again build the google.com homepage but

4430.8 -> this time around you're also going to

4432.64 -> write the css so that you'll understand

4435.12 -> everything that goes into building this

4437.12 -> elegantly designed search engine as you

4440.4 -> can see i've set up the basic skeleton

4442.56 -> here in the html file for you

4445.12 -> in the body tag we have an image

4447.92 -> which is pointing to the google.png

4450.159 -> image which lies in the same directory

4452.64 -> as our index.html folder up here

4455.36 -> and we have an input type text which is

4457.6 -> our search field and we're only going to

4459.44 -> start with these two elements and then

4461.12 -> later move on to the buttons now as you

4463.6 -> can see in the mini browser here this

4465.52 -> looks horrible it has no styling so the

4468.64 -> logo is far too large the input field

4470.96 -> doesn't look very good so in short

4472.48 -> there's a lot of work to do here but

4474.4 -> before we can start writing css you need

4476.719 -> to link to the css file you can see i

4479.04 -> have a style css here which just sets

4481.199 -> the background of the body to red as a

4483.6 -> way of testing whether it is actually a

4485.44 -> link to the html currently it's not you

4488.56 -> are going to have to link to the css

4490.56 -> file on your own and if you remember a

4492.64 -> couple of scrims back i showed you how

4494.239 -> to do that though please don't look back

4496.64 -> at that scrim in order to solve this

4498.239 -> challenge instead google it because i do

4500.64 -> that almost every single time i have to

4502.64 -> link from an html file to a css file so

4505.199 -> you should not be ashamed for googling

4506.96 -> such a quote-unquote simple thing

4509.12 -> instead just do that right now because

4511.12 -> it's important practice and then when

4513.04 -> you come back i will show you how i

4514.56 -> would do it as well

4522.32 -> okay hopefully that went well

4524.48 -> now let's have a look at how we can

4526.4 -> solve this

4527.6 -> so i would simply type how to link to

4529.52 -> css into google and click at the top

4532.4 -> result this happens to be a w3schools

4535.28 -> article here you can see that there's a

4537.36 -> few different ways you can import css

4539.84 -> into the html file but we're only going

4542.239 -> to worry about the first one here called

4544 -> external css

4545.679 -> as you can see if we scroll a bit down

4547.44 -> what we do is we type link rel equal

4549.679 -> style sheet and href with a pointer with

4552.4 -> the css file itself so

4554.8 -> we'll do

4556 -> link l equals

4558.8 -> i'll sheet

4560.56 -> href equals

4562.92 -> styles.css

4564.64 -> and then closing it and if we now

4566.8 -> refresh the browser boom there we go it

4569.199 -> is red looking horrible

4571.52 -> so we can remove that so that it looks

4573.84 -> white again but now we know that we have

4575.92 -> linked the css and the html together so

4578.48 -> we are ready to move on and start

4580.239 -> styling our page

4584.8 -> the first thing we want to fix in our

4586.56 -> example here are the widths of the

4588.56 -> elements because if we compare it to the

4590.8 -> finished sign you can see that the input

4593.6 -> field is meant to be wider than the logo

4596.48 -> however in our example that's not the

4598.719 -> case quite the opposite actually the

4600.48 -> logo is much wider than the input field

4603.28 -> so we need to shrink the logo and then

4605.44 -> make the input field wider so i'm going

4607.92 -> to start and do one of these and then

4609.52 -> you will do the other

4611.52 -> i happen to know that the width we want

4613.679 -> to have on this input field is 400

4616.239 -> pixels

4617.36 -> what i'm then going to do is

4619.28 -> target the input field

4621.04 -> using the element name

4623.04 -> and create a css selector just writing

4625.679 -> input then open and close curly bracket

4628.159 -> and then simply write

4629.679 -> with and 400 px and boom there you can

4633.679 -> see suddenly the input field widened

4636.4 -> quite a lot and as you might have

4638.32 -> noticed we're using this pixels value

4640.48 -> here again which we've used a couple of

4641.84 -> times already actually and if you're a

4643.679 -> little bit confused as to what a pixel

4645.84 -> is you can think of it as the smallest

4648.4 -> unit of space that our screens can

4650.96 -> render so a pixel is just a tiny square

4654.64 -> so tiny that we actually need 400 of

4656.96 -> them stacked up besides each other in

4659.12 -> order to get a width

4660.8 -> of this size

4662.4 -> so with that i want you to fix the width

4665.28 -> of the google logo

4667.04 -> select the image tag and set the width

4670 -> of the logo to 300 pixels

4672.96 -> go ahead and do that right now and then

4674.64 -> i will show you how to do it as well

4676.48 -> when you return back to this scrim

4685.199 -> okay let's do this i'm going to break

4687.679 -> this down into a few lines so i get some

4689.6 -> space above the input field and then

4691.44 -> target the img element the image element

4694.8 -> open up the curly brackets and do with

4697.679 -> 300 pixels like that

4700.719 -> we're not quite yet at the finish design

4703.28 -> but the ratio between the logo and the

4706 -> input field is now a lot better great

4708.4 -> job let's move on

4713.12 -> okay i've discovered a problem with our

4715.36 -> google site which is that if we make the

4717.36 -> browser really wide you can see that

4719.76 -> suddenly the items stack up besides each

4722.88 -> other on the same line and that's

4724.88 -> obviously not the kind of behavior we

4726.64 -> want we want them to always be stacked

4729.12 -> on top of each other and in order to fix

4731.28 -> this you have to learn about inline

4733.12 -> elements versus block elements and

4735.6 -> that's best understood through the lens

4737.44 -> of an example so let's say that you for

4739.679 -> example have a collection of things you

4741.6 -> want to showcase you could be like

4743.36 -> george franson for example and collect

4745.199 -> dinosaur poo he actually has the world's

4747.679 -> largest collection of fossilized feces

4750.56 -> and naturally he wants to exhibit them

4752.64 -> in a posium and if he were to use

4755.44 -> display inline on his images they would

4758.32 -> stack up besides each other like this so

4761.199 -> kind of like in a line horizontally

4763.92 -> however had he used display block on his

4766.56 -> images then they would stack up on top

4769.12 -> of each other so rule of thumb is

4771.679 -> display block stacks on top another way

4774.4 -> to look at this is that the block level

4776.48 -> element blocks out the rest of the

4778.719 -> available horizontal space so that

4781.04 -> nothing else can be placed there and

4782.64 -> that is regardless of how wide this

4784.4 -> image is the content itself this play

4786.56 -> block requires control over all the

4788.88 -> horizontal space in its given container

4791.28 -> so when this block image is placed here

4793.679 -> and you add a new image it would have to

4796 -> be placed underneath the previous one

4798.239 -> and if it does display block as well

4799.92 -> it'll block out the rest of the

4801.36 -> available horizontal space and the next

4803.28 -> image have to be placed below that one

4805.28 -> again and so on

4806.8 -> so the solution is obviously to turn

4809.36 -> these elements into blocks and i'm just

4811.679 -> going to give you the syntax here this

4813.6 -> is how you write it display colon block

4816.56 -> go ahead and do that for both of these

4818.48 -> and observe what happens to the example

4820.88 -> when you make the browser wide good luck

4825.28 -> okay let's do this

4827.12 -> so i'll do display

4829.84 -> block up here and the same

4833.76 -> here if we look at the browser seemingly

4835.92 -> nothing has happened

4837.44 -> however if we now make it wide you can

4839.36 -> see yes no matter how wide the browser

4842.08 -> is these will always stack up on top of

4844.48 -> each other

4845.44 -> so great job let's move on

4850.719 -> the next thing we need to fix is the

4852.64 -> lack of white space above our google

4854.8 -> logo because if we take a look at the

4856.32 -> design here we want quite a lot of space

4858.56 -> in between the top of the browser and

4860.239 -> the logo and i'm not going to tell you

4862.48 -> how to add that but if you can think

4864.719 -> back to the very first scrim in this

4866.8 -> section we added some space above the

4869.36 -> text in our cookie widget

4871.6 -> and that specific space is called margin

4873.679 -> or margin top to be specific so your job

4876.48 -> is to add some margin on top of our

4878.88 -> image

4879.92 -> right here you can start on line seven

4881.679 -> so there are example here get some

4883.36 -> breathing room some white space above

4885.6 -> the logo and the input field go ahead

4888 -> and give this one a shot and then i will

4889.52 -> of course show you the solution when you

4891.04 -> return back to me

4896.96 -> okay hopefully that went well if not no

4899.52 -> worries i really pushed you out on thin

4901.52 -> ice here so it's completely okay if you

4903.36 -> didn't remember that the

4905.04 -> property is called margin top and what

4907.36 -> you add there is a pixel value so for

4909.679 -> example 100 px and there we go we've now

4913.679 -> added a margin on the top of our image

4917.28 -> and while we're still quite far off from

4919.28 -> our provided design here we are getting

4921.44 -> closer great job let's move on

4926.96 -> now while it totally works to add the

4928.96 -> margin top directly on the image here

4931.52 -> you'd most likely not see professional

4933.44 -> developers do this

4935.199 -> because what they do instead is wrap

4937.679 -> these two elements in some kind of

4939.28 -> container and then control the

4940.88 -> positioning of these elements indirectly

4943.6 -> via that container and in order to do

4946 -> this you have to learn about the div i'm

4948.639 -> going to create an opening div and then

4950.4 -> indent these two and then a closing div

4953.44 -> below here

4954.56 -> now if we run this code seemingly

4956.719 -> nothing has happened because the div

4958.719 -> actually does very little in itself

4961.36 -> though it is indispensable for web

4963.36 -> developers just to show you how

4965.36 -> important it is let's take a look at

4967.199 -> facebook and my timeline here i've

4969.6 -> opened up devtools and inspected one of

4972.08 -> the timeline items and you can see it is

4974.8 -> actually a div inside of a div inside of

4976.88 -> another div inside of yet another inside

4979.28 -> of the inside of a div

4982.4 -> divs really do rule the world so it's

4985.52 -> important that you learn about them and

4987.76 -> the way we'll use this div now is by

4990.159 -> removing the margin top styling from the

4993.36 -> image and then add it to the div itself

4996.239 -> and the reason this is important is

4998.08 -> let's say that for example google

4999.679 -> decides to create a video here instead

5002 -> or a interactive doodle or some kind of

5004.08 -> game they often play around with the

5005.84 -> google logo well if so it's a really bad

5008.239 -> idea that it is the image itself that

5011.04 -> controls the margin from the top of the

5013.6 -> browser and down to the content

5016.08 -> because that image might be removed so

5017.92 -> it is a solution that will get you into

5019.679 -> trouble in the future so what we'll do

5021.76 -> here is we'll simply instead target the

5025.04 -> div

5026 -> and then remove the margin top from the

5028.719 -> image and boom it has popped up now we

5031.36 -> lost all of our white space but if we

5033.36 -> add it back to our div we are back at

5035.679 -> the design we started out with seemingly

5037.92 -> nothing has changed but as you know

5040.719 -> we have a better html structure so we

5043.6 -> have definitely made good progress here

5045.679 -> so with that let's move on to the next

5048 -> scrim

5051.76 -> the reason you need to learn about

5053.52 -> classes now is because our current setup

5056.32 -> where we simply have the elements like

5058 -> this and then selecting the element

5060.48 -> using the element selector in css will

5063.36 -> give us bugs down the line because when

5066 -> we add the two buttons beneath the input

5068.56 -> field

5069.52 -> we'll actually wrap these two in a div

5071.84 -> as well and let's see what happens at

5074.159 -> this point

5075.28 -> what i'll do now is simply add the html

5078.08 -> for these buttons down here beneath the

5080.48 -> input field

5081.92 -> so it is a div with two buttons inside

5085.12 -> of it

5086 -> and then you can see we are closing that

5087.6 -> div

5088.719 -> the inner div

5090.08 -> and then we are closing the outer div

5092.32 -> let's run this code and oh wow

5095.04 -> what you can see is that the spacing

5096.88 -> between the input field and the buttons

5098.719 -> is totally off and that is because our

5101.199 -> css element selector here selects any

5104.48 -> div it can find in the html document and

5107.199 -> applies the margin top to it

5109.52 -> so it doesn't just select the first one

5111.28 -> but it can select thousands of divs so

5114.159 -> this is a very generic solution and

5116.239 -> likely not something we want to use as

5118.159 -> we want to have multiple divs with

5120 -> different types of styling in our html

5122.4 -> element

5123.6 -> so let's now instead fix this by doing

5126.639 -> the following i'll write class

5129.04 -> equals

5130.239 -> then for example main

5132.4 -> this here is an attribute called class

5135.04 -> so it's built into html and this here is

5137.84 -> the name i'm giving my class i want to

5140.08 -> call this div my main element

5143.52 -> and now the way i select that in the css

5146.4 -> is by instead of just writing the

5148.239 -> element name simply doing dot

5151.12 -> main like that

5152.639 -> now if i rerun this code you can see now

5155.12 -> the margin top is only applied to the

5157.76 -> outer div our main class and not to the

5160.88 -> div which wraps the two buttons

5163.52 -> so that is exactly what we needed

5165.92 -> now i'm going to remove these two

5168.159 -> buttons here because we don't want to

5169.679 -> deal with them just yet and then i'm

5171.76 -> going to give you a challenge

5174.239 -> first you're going to add a class to

5176.4 -> each of these two elements that is the

5178.719 -> image and the input you have to decide

5181.36 -> what you will call the two classes but

5183.36 -> make sure to give them different names

5185.52 -> and then you're going to in the css

5189.199 -> replace the element selectors with class

5192.159 -> selectors so that is the img selector

5194.96 -> here and the input selector here and

5196.88 -> obviously

5197.92 -> the css class selectors you're going to

5199.92 -> replace them with is the ones you have

5201.6 -> added to the elements right here so go

5204.08 -> ahead and do this right now

5212.8 -> okay hopefully that went well let's now

5215.52 -> do it together

5216.8 -> so for the image tag i'm simply going to

5219.199 -> do class equals then i'll call this

5222.84 -> logo dash

5224.719 -> img

5226 -> so here i'm using a convention where i'm

5228.32 -> first giving my class a descriptive name

5230.8 -> and then using a dash and then

5232.32 -> specifying the element as well this is

5234.88 -> an img element but it could have been

5236.639 -> for example an svg or something else

5240 -> now i don't expect you to have followed

5241.76 -> the same convention there are plenty of

5243.6 -> css conventions and it doesn't matter at

5246.08 -> all what you used in your example you

5247.92 -> can call your classes whatever you want

5250.719 -> okay for the input we'll do class equals

5253.6 -> search dash

5255.36 -> input like that okay let's move through

5258 -> the css then i'll replace this with bot

5261.44 -> now you can see it broke the layout

5262.8 -> because this styling now is not applied

5264.96 -> to any element

5266.48 -> so we need to do logo dash img

5269.679 -> like that and here do dot search

5273.12 -> dash

5274.08 -> input

5275.199 -> and there we have the exact same example

5277.28 -> didn't change at all but we now have a

5279.6 -> more flexible solution that scales

5282.32 -> better so great job solving this

5284.4 -> challenge let's move on

5288.96 -> now it's time to take a closer look at

5291.6 -> margins and you've already dipped your

5294 -> toes into this as you have used margin

5296.4 -> top so you might have some intuition

5298.719 -> about what margins do however now you're

5301.679 -> going to learn it properly through

5303.6 -> creating flags with css because flags

5307.12 -> are just awesome i mean take a look at

5309.36 -> this flag here for example from the

5311.04 -> republic of venice estate which existed

5313.52 -> for over a thousand years in europe and

5316 -> it contains of course a flying lion

5319.36 -> holding a book i mean what's more

5321.6 -> natural than that

5323.12 -> or this one right here for the isle of

5325.44 -> man i mean have you ever seen a more

5327.92 -> creepy creature than this three-legged

5330.4 -> thing right here imagine having that

5332.96 -> thing running after you

5335.52 -> that would not be fun and this flag

5338.08 -> would be really hard to create in css

5340.159 -> actually so we're not going to create

5341.44 -> this one we're going to start off at a

5342.88 -> much easier level with just some very

5345.44 -> simple shapes so let's have a look at

5347.6 -> those actually

5348.96 -> here is what we're going to work with as

5350.8 -> you can see there's simply three divs

5353.199 -> inside of the body tag and each div has

5355.92 -> a class red blue or green if we check

5359.04 -> out the styles.css you can see that

5361.6 -> these three classes apply a background

5363.76 -> color to each of the elements and sets

5365.679 -> the height to 100 pixels and here we

5367.84 -> have the result three rectangular boxes

5370.88 -> that are stacked on top of each other

5372.88 -> and that tells us that these are display

5375.12 -> block because display block stacks on

5377.84 -> top there's one thing that bothers me

5379.92 -> here and that is that we have a little

5381.6 -> bit of white space around the three

5384.32 -> items why is that well actually it's

5387.28 -> because our browser is trying to help us

5389.52 -> here it's assuming that we want a little

5392.239 -> bit of space around the body tag

5395.36 -> so that these three don't touch the

5397.92 -> edges of the browser so what's actually

5400.159 -> going on here in code is that the

5402.56 -> browser

5404.159 -> targets the body and sets a margin of

5408.4 -> eight pixels if you notice when i added

5411.04 -> this nothing changed so if i remove this

5413.92 -> it's still the same meaning that this

5416 -> style here is applied automatically so

5418.32 -> that means that margin is actually the

5421.28 -> space around an element because now if

5424.4 -> we change this to zero boom there you

5427.04 -> can see suddenly our divs touch the

5429.76 -> edges of the browser

5431.52 -> now here at the bottom they stop after

5434.4 -> 300 pixels since we've told them to so

5436.719 -> this margin zero here seemingly didn't

5439.28 -> change anything at the bottom because

5441.04 -> the bottom contains white space anyway

5443.04 -> if we make our browser tall enough but

5445.199 -> anyway that's a digression let's get it

5447.28 -> back so that the browser is completely

5449.12 -> filled up with these three items and now

5451.84 -> let's play a little bit around with

5453.36 -> margins so what do you think will happen

5455.12 -> if i add a margin top of 10 pixels on

5458.159 -> the red here

5459.679 -> take a guess

5462.88 -> okay

5464 -> margin top

5465.199 -> 10 pixels boom it added 10 pixels on the

5468.4 -> top what do you think will happen if i

5470.159 -> add margin left 10 pixels as well

5473.76 -> let's try

5474.84 -> it

5476.719 -> okay so it added

5478.88 -> 10 pixels on the left hand side

5481.12 -> it's only on the red rectangle not the

5484.08 -> blue or green rectangle likewise if i do

5486.56 -> margin

5487.92 -> 8

5488.88 -> and pixels it adds 10 pixels to the

5491.44 -> right hand side as well

5493.199 -> if i do a 100 it eats up almost a third

5496.639 -> of our red rectangle okay so now it's

5499.44 -> your turn

5501.04 -> i want you to add 100 pixels of margin

5504.88 -> on the bottom of the red box so go ahead

5507.12 -> and give that a shot right now

5513.6 -> okay

5514.639 -> if you did margin

5516.48 -> bottom

5517.52 -> 100px like that

5519.44 -> i want to congratulate you because you

5521.44 -> just created the flag of monaco really

5523.92 -> good job creating your first css flag

5526.8 -> now let's do that yet again

5530.239 -> here is your challenge you are going to

5532.159 -> create the flag of the gambia and here

5534.88 -> we have that flag however there's a

5536.719 -> catch you can only do this by applying

5539.36 -> styles to the blue box so by adding

5541.679 -> margin to this css rule right here so go

5544.639 -> ahead and give that a shot right now

5551.52 -> okay hopefully that went well the way to

5554.159 -> do it is by doing margin top let's try

5557.6 -> 10 pixels and see

5559.76 -> actually i think we want our white space

5561.44 -> to be a little bit more than 10 pixels

5563.36 -> so let's do 20 like that then

5566.32 -> margin

5567.28 -> bottom as well

5568.96 -> 20 pixels and

5571.36 -> there i think we have a pretty good flag

5574.32 -> for the gambia

5576 -> now before we move on to our google

5577.679 -> project there's one little weird thing i

5580.159 -> want to tell you about margin top and

5582 -> bottom

5582.96 -> because what do you think happens if i

5584.8 -> add for example margin bottom of 15 to

5587.6 -> this red element here well according to

5589.84 -> my logic the margin right here would be

5592.56 -> 35 pixels because we added 20 pixels on

5595.76 -> top of the blue and if we add 15 at the

5597.76 -> bottom of the red one

5599.36 -> that should be

5601.84 -> total

5603.04 -> however

5604.32 -> now that i added this nothing happened

5606.639 -> and that is because margin top and

5608.56 -> margin bottom will in many situations

5611.28 -> collapse into each other so that as long

5613.44 -> as this margin is smaller than this this

5616.4 -> will take precedence and it's only when

5618.56 -> this one becomes larger for example 25

5621.6 -> that it will kick in so let's take it

5623.52 -> back to 15 and to make things even worse

5625.84 -> there's actually scenarios where this

5627.52 -> doesn't happen however digging into that

5629.6 -> is outside of the scope of this lecture

5632 -> i just want you to be aware of it

5633.679 -> because if you're suddenly in a

5634.8 -> situation where your margins don't seem

5636.88 -> to add up it's probably because of

5639.04 -> so-called collapsing margins okay with

5641.679 -> that let's move on

5646.159 -> okay we're back at our google project i

5648.639 -> want to give you a quick challenge i

5650.48 -> want you to add some space between the

5652.56 -> logo and the search field because as you

5655.12 -> can see here there's some spacing in

5656.96 -> between the elements in our design

5658.8 -> however in our project now they are

5660.639 -> crammed together

5662.4 -> there are two ways you can do this using

5664.239 -> margins and i want you to think about

5666.08 -> which two ways that is and choose one of

5668.32 -> them go ahead and do this right now

5675.36 -> okay hopefully that went well let's do

5677.76 -> it

5678.56 -> so you can either add a margin bottom to

5681.36 -> the logo or you can add a margin top to

5684.239 -> the search field i'm going to go with

5687.04 -> adding margin bottom to the logo as i

5689.28 -> think either way is as good as the other

5691.04 -> at this stage margin bottom and how much

5694.239 -> do we want to add well let's try 20px

5697.28 -> and yeah as you can see we've got some

5699.12 -> spacing the bottom of the g is not

5701.04 -> touching the top of the input field and

5703.12 -> if we compare that to the example i

5705.44 -> think it looks more or less the same

5708.08 -> so great job let's move

5712.84 -> on okay now you are going to learn about

5715.76 -> centering elements in css and that is a

5719.12 -> scary topic for a lot of developers so

5722.239 -> scary that this stack overflow question

5724.639 -> about how to horizontally center an

5726.639 -> element has been viewed 4.5 million

5729.76 -> times

5730.8 -> so if you think this is a little bit

5732.56 -> confusing you are in very good company

5735.36 -> so don't worry about it

5737.76 -> so with that in mind let's move over to

5740.08 -> our example

5741.6 -> you are going to center this dinosaur

5743.84 -> poo

5744.96 -> as you can see in the css it has just

5747.36 -> one property set at this point which is

5749.679 -> a width of 200 pixels that is because

5752.4 -> the image is so wide originally that if

5754.8 -> i don't set that width it'll just take

5756.639 -> up more space than we have available

5759.12 -> and setting the width of it is actually

5760.96 -> an important thing in order to center it

5762.8 -> because there are three things that need

5765.28 -> to be in place when we are to center

5767.84 -> elements with the technique you are

5769.679 -> about to learn aka centering with

5772 -> margins and these three components are

5774.48 -> first the element needs to be display

5776.8 -> blocked because how is an element

5778.719 -> supposed to center itself if it doesn't

5780.719 -> command full control over all the

5782.96 -> horizontal space

5784.719 -> if it's display inline and allows other

5787.199 -> elements to stack themselves besides the

5789.6 -> element well then it won't be able to

5791.76 -> center itself because that space now is

5794.08 -> busy with other things

5795.76 -> so in order to center this poo it needs

5798.48 -> to control

5799.76 -> all the horizontal space

5802.32 -> so it needs this

5805.04 -> block like that now that didn't change

5807.76 -> anything but under the hood the poo now

5810.56 -> controls the full horizontal space

5813.36 -> okay the second part is that it must

5815.28 -> have a width

5817.36 -> and that is what we've done here already

5819.84 -> because how is this item supposed to be

5822.48 -> centered inside the browser if it is

5824.4 -> wider than the browser itself that's

5826.56 -> often what happens with either large

5828.639 -> elements or with some html elements who

5830.88 -> just naturally actually expand to take

5833.679 -> up all the available space in the block

5836.239 -> so we have to make sure that our element

5838.32 -> has a width

5839.6 -> and finally we set the margin on the

5841.92 -> left hand side and the right hand side

5843.679 -> to the value auto

5846.08 -> let's just do that

5847.679 -> margin

5848.88 -> left

5849.92 -> auto oh wow

5852 -> now it pushed the poo all the way to the

5854.88 -> right hand side

5856.32 -> because auto here means take up all the

5858.88 -> available space and since this is a

5861.199 -> block element the available space is all

5864 -> the space that's left after the poo has

5866.48 -> taken up its 200 pixels

5868.88 -> so it just ate up all of this space and

5870.88 -> turned it into margin

5872.48 -> however at this point margin right

5874.48 -> enters the party

5875.84 -> margin right

5877.44 -> and says i want the available space as

5879.6 -> well and at that point the margin left

5881.92 -> and margin right goes into discussion

5883.52 -> and decides well actually since there

5885.44 -> are two of us here pushing on each of

5887.52 -> the side of the element trying to get

5889.679 -> all of the available white space let's

5891.76 -> just divide it evenly amongst both of us

5894.719 -> and the result well it is that the item

5897.28 -> is centered

5898.56 -> so that was a long explanation of

5900.88 -> centering with margins if you feel

5903.119 -> confused don't worry about it right now

5905.28 -> all you need to do is remember these

5907.36 -> three conditions and just be aware of

5909.679 -> the 4.5 million other developers who are

5912.719 -> in or have been in the same boat as you

5915.28 -> let's move on to the next scrim

5920.88 -> okay we are back at our google project

5923.28 -> now your challenge is to center the logo

5926.239 -> and the search field using the technique

5928.4 -> you just learned

5929.76 -> so go ahead and give that a shot right

5931.44 -> now and then i will of course show you

5933.44 -> the solution afterwards as well

5940.32 -> okay as you hopefully remembered the way

5942.88 -> to center an element which is display

5944.88 -> block and has a width is by adding

5947.679 -> margin left auto and margin right auto

5950.159 -> so let's do that margin

5952.719 -> left

5953.679 -> auto and as you can see that pushes the

5955.92 -> logo all the way to the right hand side

5957.84 -> because the margin left is set to auto

5960 -> and it takes up as much space as it can

5962.719 -> we'll do the same thing with the right

5964.159 -> hand side margin right auto

5968.08 -> then the right hand side starts pushing

5970.159 -> back again and when they're both taking

5972.08 -> up equally as much space the margin left

5974.96 -> and margin right kind of decides yeah

5976.719 -> let's not argue anymore now we have a

5978.96 -> nice balance and whoa lo and behold our

5981.36 -> element is centered

5983.119 -> so

5984 -> now what we can do is be super lazy and

5986.4 -> copy that code and paste it in down here

5988.88 -> and boom

5990.48 -> our input field is centered as well and

5992.8 -> our project is starting to look a little

5994.96 -> bit like our finished design so this is

5997.199 -> super cool let's just keep up the pace

5999.52 -> and move on

6004 -> we need to take a little step back and

6005.84 -> learn a new css concept

6008.4 -> which is the close relative of margins

6011.52 -> called padding

6013.6 -> and we're of course going to learn that

6015.44 -> through the lens of an example

6017.52 -> so here i have just a simple div

6020.56 -> which contains a little bit of text or

6022.88 -> specifically the two first sentences in

6025.44 -> the white paper behind bitcoin and let's

6028.239 -> say we want to turn this into a nice

6030.4 -> looking card that people can read if so

6032.88 -> we'd probably create a class can call it

6034.96 -> card then of course in the style.css

6037.76 -> we'd select that card and apply the

6039.679 -> styling as for now it just has one

6041.84 -> property set which is the color that

6043.92 -> we've set to a shade of black that isn't

6046.08 -> pure black but a little bit softer so to

6048.56 -> speak that is because by default the

6051.44 -> browser uses pure black as the text

6053.84 -> color and pure white as the background

6056.8 -> color and as a rule of thumb you never

6058.96 -> want to have pure black on pure white

6061.92 -> that's not a pleasant experience for the

6064 -> eyes so instead we went for this but

6066.8 -> that was the digression let's move on

6068.239 -> with turning this into a nice looking

6070.56 -> card

6071.52 -> so a card needs a background color so

6073.44 -> let's just

6074.56 -> do background

6075.84 -> light

6076.719 -> gray for example like that and we also

6079.04 -> don't want our card to be full width

6081.04 -> because as you remember divs are block

6083.28 -> by default and take up the full width if

6085.52 -> you don't specify any width on it so

6087.84 -> we're going to do with for example 300

6090.32 -> pixels like that and then we also want

6092.8 -> some space above the card that is of

6094.88 -> course margin top

6097.199 -> let's push it 50 pixels down from the

6099.04 -> top and finally it should be centered so

6102.159 -> let's do margin

6103.76 -> left

6104.719 -> auto and margin

6106.48 -> right

6107.76 -> like that okay so now we have something

6109.76 -> that looks at least a little bit like a

6111.44 -> card but there's one problem here

6113.6 -> you can see the text is crammed all the

6115.84 -> way into the edges of the which doesn't

6118.32 -> look particularly good and that is where

6121.199 -> padding comes into play

6123.04 -> so now i'm just going to apply the

6124.48 -> padding

6125.52 -> by doing padding and for example 20

6128.239 -> pixels like that as you can see

6130.8 -> that created a little bit of space

6132.8 -> basically some breathing room in between

6134.8 -> the text and the edge of our div

6137.36 -> container here and if i do 50 you can

6140.239 -> see it's even more breathing room so

6142.8 -> where's margin adds space

6145.84 -> on the outside of our div the card which

6148.32 -> we've selected here

6149.92 -> padding will add space on the inside in

6153.28 -> between the content and the edges of the

6156.32 -> container or the div

6158.48 -> so margin kind of lives

6161.119 -> up here

6162.8 -> and down here if we are to visualize

6164.88 -> this in our html where's padding lives

6167.6 -> on the inside of our element that is

6170.56 -> here and here

6173.44 -> and now you might wonder well why did i

6175.6 -> just write padding whereas for martin

6177.52 -> we're specifying each of the sides

6179.84 -> and well you can do exactly that on

6181.44 -> padding as well

6182.719 -> this padding 20 pixels right here is the

6184.96 -> exact same thing as writing the

6186.48 -> following

6187.92 -> padding top 20 bottom 20 left 20 and

6190.56 -> right 20. so with these four lines we

6193.679 -> can actually delete this one up here and

6196.239 -> then we have the same convention as

6198.4 -> we're using with margins

6200.08 -> it's just that you can use

6202.08 -> padding 20 pixels like that if all of

6204.8 -> the values are the same it's basically a

6207.04 -> shorthand

6208.4 -> and now that we have all of them written

6210.159 -> out we can play around a little bit with

6211.92 -> it perhaps add a 100 pixels on the left

6214.719 -> hand side looks really weird and 100

6217.04 -> pixels on the top as well and suddenly

6219.44 -> our card does not look very good but

6221.84 -> let's get it back and now i want to give

6224.159 -> you a challenge

6225.679 -> i want you to add padding to make our

6228.32 -> card look like the provided design and

6231.52 -> the provided design is right here you

6233.76 -> can see it's a completely broken card as

6236.4 -> we've been ruthless about our padding

6238.56 -> and i've actually removed all of the

6240.08 -> padding rules from the css as i want you

6242.08 -> to build some muscle memory writing

6244 -> padding so go ahead and make this card

6246.48 -> look like it does in the slide and then

6248.32 -> return back to me once you've done it

6255.28 -> okay hopefully that went well

6257.679 -> if not no worries let's do it together

6260.48 -> as you can see here it's completely

6262.239 -> crammed into the bottom left corner

6265.199 -> which means that it doesn't have any

6267.04 -> padding on the left hand side or any

6269.199 -> padding on the bottom but a ton of

6271.52 -> padding on the top and a ton of padding

6274 -> on the right

6275.199 -> so i'm just gonna do padding

6277.92 -> top

6278.8 -> 100 pixels something like that

6281.6 -> yeah seems

6283.679 -> pretty much what we have in the design

6285.76 -> as well

6286.719 -> and then do the same padding

6289.119 -> right

6290.08 -> 100 pixels like that and to me that

6292.96 -> looks actually pretty much like our

6294.639 -> design

6295.92 -> i don't need to write padding bottom or

6298 -> padding left now so i could do it i

6300.08 -> could do padding bottom

6302.8 -> zero pixels or just zero

6305.6 -> and padding

6307.04 -> left

6307.92 -> zero as well

6309.28 -> though

6310.08 -> that didn't change anything

6312.159 -> so it's actually not needed because by

6314.48 -> default the padding of a div is zero

6318.159 -> so however you solve this great job

6320.96 -> let's move on

6325.119 -> so now you've learned about controlling

6327.44 -> the space on the outside of the element

6330 -> with the margin and on the inside of the

6332.32 -> element with the padding but wouldn't it

6334.719 -> be nice if we could also control the

6336.88 -> border in between the margin and the

6339.6 -> padding

6340.56 -> and it turns out we can through you

6342.96 -> guessed it the border property because

6345.76 -> if i write border here and then specify

6348.239 -> for example

6349.679 -> two pixels thickness solid in shape and

6353.44 -> then color red

6355.44 -> you can see then we get a border which

6357.84 -> is on the outside of the padding but on

6359.84 -> the inside of the margin

6361.679 -> and if we change any of these three

6364.159 -> values here it'll update accordingly so

6366.719 -> let's try eight pixels with instead you

6369.28 -> can see it's much thicker now instead of

6371.679 -> solid we can do

6373.28 -> odded like that pretty weird

6375.84 -> and instead of red we can do for example

6378.32 -> fff

6379.6 -> white in hexadecimal or just right white

6382.8 -> like that

6384.32 -> or just blue so it's a little bit

6386 -> clearer

6387.04 -> now there are many types of borders but

6389.52 -> in 99.9

6391.28 -> of the cases you want to use solid like

6393.44 -> that

6394.4 -> and also very often you'd want to soften

6397.199 -> up these corners

6399.199 -> and you can do that with the border

6402.639 -> radius property and there you specify a

6404.56 -> pixel value for example 30 pixels and

6407.199 -> boom there you can see

6408.8 -> we have this much softer corners

6411.6 -> if we crank this up to 100 or a thousand

6414.639 -> it stops at some point because then the

6416.4 -> edges have simply turned into half

6418.48 -> circles so at some point there's no use

6420.96 -> going any higher

6422.4 -> now this looks pretty bad so what i want

6425.44 -> you to do now is fix it up so that it

6427.6 -> looks like this

6429.6 -> and i'm not going to give you any of the

6431.28 -> values i've used here just a little hint

6433.6 -> i took an already existing color in our

6435.76 -> box and used it for the border so that's

6438 -> a common web design trick to reuse

6440.4 -> colors and not have too many different

6442.159 -> colors so if you think this is pure

6444.32 -> black

6445.28 -> you are wrong

6446.719 -> so go ahead and change the values of the

6449.679 -> border and border radius so that our

6451.92 -> example here matches the design i've

6454.48 -> provided in the slide good luck

6461.92 -> okay hopefully that went well so let's

6464.32 -> start with the border 8 pixels here

6466.56 -> looks a bit too thick for me so let's

6469.119 -> try four instead

6471.44 -> like that

6472.88 -> i think that matches better yes

6476.08 -> and the color

6477.36 -> i gave you a hint was just the blackish

6480.159 -> color we have for our text like that

6483.52 -> and the border radius is much smaller

6486 -> let's try 10.

6488.239 -> it's this still looks a little bit

6490 -> rounder

6491.04 -> so

6492 -> let's try 20 yes there i think we got it

6496.239 -> great job

6497.36 -> now a cool thing to do in order to

6499.199 -> inspect the margin border padding and

6503.199 -> size of the element in general

6505.28 -> is to open up the dev tools which can be

6508.4 -> done by right clicking on the nav bar

6510.8 -> here and then clicking in spec and then

6513.119 -> this dev tools panel will open

6515.84 -> here clicking on the select icon on the

6518.08 -> left hand side

6519.76 -> and then hovering over the element

6522.4 -> finally clicking at it

6524.239 -> there you will see that we have selected

6526.32 -> the element in the elements tab and

6528.639 -> under the styles tab you can see the

6530.8 -> styling we have applied using css so

6533.52 -> here you can actually modify them if you

6535.28 -> want but we're not going to do that

6536.96 -> right now we're going to scroll down and

6539.52 -> verify that our margin border and

6541.36 -> padding are correct so if i hover over

6543.6 -> the margin here you can see up here in

6545.28 -> the mini browser it is marked in orange

6547.76 -> and the values are provided down in the

6549.76 -> box here if i move over to the border

6551.84 -> you can see that border is now selected

6554 -> in the browser and is indeed four pixels

6556.32 -> as we code it up a minute ago if i move

6558.4 -> over to the padding you can see that is

6560.239 -> also indeed 20 on each side just as we

6562.639 -> want it to be and finally if i hover

6564.4 -> over the center here the content is

6566.56 -> highlighted and the content of this div

6568.639 -> is just the text and as you can see it

6570.8 -> is 300 pixels wide just as we said it

6573.6 -> has so it's working as expected and the

6576.56 -> height is dictated by how many lines of

6578.88 -> text are two sentences required

6581.6 -> so using this technique of inspecting an

6584.159 -> element and its sizing properties like

6586.56 -> this is a really good way of debugging

6588.8 -> if something for example looks wrong

6590.639 -> because it gives you an ability to

6592.08 -> verify if the numbers here match up with

6594.639 -> what you've tried to write in your css

6597.119 -> so now that you've learned all of that i

6598.96 -> want to tell you the name of this and

6600.48 -> it's actually called the box model and

6602.8 -> to be honest i've never really liked

6604.8 -> this word it sounds more complex than it

6607.6 -> is in my opinion it's just spacing

6609.52 -> around the element a border spacing on

6611.84 -> the inside of an element and the content

6613.52 -> itself but in web development we call

6615.6 -> this the box model so you'll probably

6617.92 -> hear this name come up from time to time

6620 -> but you shouldn't fare it you know

6621.84 -> exactly what it is and you've used all

6623.44 -> of the properties in the box model so

6625.36 -> don't worry about it actually let's give

6627.28 -> you a new box model practice in the next

6629.679 -> scrim

6630.639 -> i'll see you there

6634.639 -> okay now you are going to create a

6636.719 -> really neat looking button namely the

6639.36 -> following button on twitter let's zoom

6641.52 -> in a little bit and here you can see it

6642.88 -> this is the button you see if you

6644.239 -> already are following someone and we

6646.239 -> zoom out again this is the scrimba

6648.56 -> twitter profile you should definitely

6650.239 -> just click this image and follow us

6652.639 -> because we share a ton of useful tips

6654.96 -> and tricks and career advice for

6656.719 -> aspiring coders here so it's definitely

6658.8 -> worthwhile anyway now you are going to

6661.36 -> use the things you've learned about

6663.44 -> padding border border radius and so

6666.48 -> forth in order to make this button right

6669.119 -> here with the ugly default styling

6672.08 -> look exactly like this

6674.4 -> or not exactly as we're not going to

6676.88 -> worry about the font it is a little bit

6678.8 -> different but other than that you should

6680.56 -> try to make it look identical

6682.719 -> i've given you some hints here for

6684.48 -> example the border color is this hex

6686.4 -> color right here and the text color is

6688.239 -> this one right here and also you need to

6690.4 -> remember to adjust the font weight and i

6692.8 -> don't think you've done that ever since

6694.639 -> the very first scrim where you wrote

6696.719 -> your first lines of css so you might

6698.88 -> have to look back so that you figure out

6701.119 -> how to adjust the font weight or you can

6704 -> google it up to you anyway just go ahead

6706.639 -> and give this your best shot and if you

6708.8 -> at some point get stuck or don't know

6711.04 -> how to do it no worries we are going to

6712.96 -> do it together afterwards as well

6715.599 -> good luck

6721.119 -> okay hopefully that went well let's do

6723.36 -> it together

6724.48 -> i'm going to target the button just

6726.48 -> using an element selector like this and

6728.56 -> now let's pick the low hanging fruit

6730.88 -> namely the ones we've gotten here

6732.159 -> already for example by doing color

6735.52 -> and then copying this

6737.28 -> color right here okay that didn't change

6739.599 -> much

6740.48 -> at least not visibly then let's do

6742.48 -> border

6743.679 -> and i'm going to start with one pixel

6745.679 -> solid

6747.04 -> and then the border color right here

6750.56 -> like that okay so it looks a little bit

6752.639 -> different now but not quite

6754.8 -> this

6755.679 -> one thing we can clearly see is that

6757.679 -> this image has a white background

6759.599 -> whereas ours is still a little bit gray

6761.679 -> so let's do that as well background

6764.719 -> white okay yes

6767.04 -> but our button is much more crammed

6768.96 -> there's too little padding

6771.04 -> whereas here you can see we have a

6772.4 -> little bit of padding on the top and the

6774.08 -> bottom and actually quite a lot of

6775.599 -> padding on the left and right hand side

6778.159 -> and that's actually a little design tip

6780.48 -> right there what you'll often see is

6782.08 -> that buttons have more padding on the

6784.4 -> left hand side and the right hand side

6786.32 -> and they have above and below

6788.48 -> so let's try

6789.92 -> padding top 5 pixels for example padding

6794.32 -> bottom 5 pixels

6796.48 -> and then we'll try

6798.32 -> left

6799.28 -> 10 pixels and

6801.599 -> write 10 pixels as well

6804 -> how does that look not too bad but

6806.96 -> actually it looks like this button has

6808.639 -> even more so we've added half as much on

6811.679 -> the top and bottom as we have on the

6813.119 -> sides so let's crank up both of these a

6815.52 -> little bit

6816.48 -> i'm going to select both of these and do

6818.32 -> eight top and below and select both of

6821.119 -> these and do 16 left and right yeah i

6823.679 -> think that's more like it

6825.52 -> now one thing that definitely is

6827.119 -> remaining is the rounded edges here

6829.92 -> so that is the border radius added up

6832.56 -> here with the border let's try 10 pixels

6835.52 -> it's a little bit round now but not as

6837.44 -> round as the twitter button

6839.44 -> so let's do 16. yeah more like it

6843.92 -> can we go higher yeah i think we can go

6846.239 -> to 18

6847.599 -> that looks quite good to me if we

6849.52 -> compare to this one

6851.04 -> and then finally we needed to remember

6852.8 -> the font weight which i can do font

6855.36 -> weight

6857.119 -> bold like that

6858.719 -> that looks a lot better

6861.599 -> i think the final adjustment i want to

6863.679 -> make is adding even a little bit more

6866.08 -> padding around it because now that i

6867.52 -> look at it it feels like this is a bit

6869.84 -> more spacious so here we are really in

6872.32 -> the nit picking area

6874.159 -> but let's try 10 on both of the top and

6877.199 -> bottom and let's try 20 on the left and

6880.4 -> right and what's interesting now is that

6882.239 -> since the box now has grown in size

6884.56 -> because it's affected by the padding the

6886.639 -> border radius can also be cranked up a

6888.8 -> little bit i think actually we can do 20

6890.96 -> now

6891.92 -> yes because the bigger a box is

6894.56 -> more pixels you need to add in order to

6896.639 -> get this fully soft looking button which

6899.119 -> essentially has two half circles on each

6901.199 -> of its sides so

6903.04 -> looking at the example and comparing it

6905.199 -> with ours i think we have reached our

6906.96 -> goal

6907.76 -> and if your values are different than

6910.159 -> mine that does not matter at all you're

6912.48 -> actually creating the button of a huge

6914.48 -> public company here you are just

6916.32 -> learning basic css so it's totally not

6918.719 -> expected that you create buttons as

6920.639 -> neatly as twitter does as they probably

6923.04 -> have a team of developers and designers

6925.84 -> working just on this profile page so

6928.48 -> however it went be proud of yourself and

6930.8 -> get ready to move on with our google

6932.96 -> project i'll see you in the next scrim

6938.48 -> okay we are back at our google project

6940.88 -> and now you are going to fix the design

6942.88 -> of our search field and you're actually

6944.719 -> going to get a design spec the proper

6947.04 -> walkthrough of how i want it to look

6949.36 -> so here i've opened up the dev tools

6952.48 -> actually on the right hand side as i

6954.4 -> want to inspect the box model of this

6956.32 -> element with you and if you wonder how i

6958.96 -> managed to stick the devtools to the

6960.8 -> right hand side here just click these

6962.96 -> three icons if you're in chrome then you

6965.04 -> can choose the dock side so let's move

6967.76 -> on down here to the box model of the

6970.239 -> input field and if i hover over the

6972.56 -> content in the box model here you can

6974.639 -> see that it says 400 pixels times 24

6977.92 -> pixels and you can see the content is

6980.88 -> marked in blue in the mini browser here

6983.92 -> so that means that our width is 400

6986.32 -> pixels we know that because we set it

6988.56 -> ourselves here and the height of the

6990.639 -> content should be 24 pixels okay let's

6993.52 -> move on to the padding if i hover over

6995.679 -> that you can see it's green and it's

6997.84 -> highlighted in green in the mini browser

6999.92 -> the padding at the top and the bottom

7002.08 -> are 10 pixels as you can see down here

7005.199 -> and the left hand side and right hand

7006.96 -> side have 30 pixels each and then if we

7010 -> move over to the border you can see that

7012 -> it's simply one pixel all around so

7015.599 -> here is your design spec given to you by

7018.239 -> your hipster designer down in the bottom

7020.4 -> right corner here

7022 -> height of content 24 pixels but do

7024.48 -> remember that that is actually the

7026.4 -> height of the inner box here not the

7028.719 -> height of the total input field as that

7031.199 -> also contains the padding and the border

7033.76 -> but the height property should be 24

7036 -> pixels the padding above and beyond as

7038.239 -> said 10 pixels right and left hand side

7040.88 -> 30 pixels thickness of border 1 pixel

7043.679 -> the color of border is this and then

7045.76 -> finally also the border radius is also a

7048.4 -> value that our designer has been kind

7050.4 -> enough to give to you so

7052.639 -> take this design spec and implement it

7054.96 -> using css

7061.119 -> okay hopefully that went well if not no

7063.52 -> worries we'll do this together right now

7066.159 -> so starting with the height of 24. there

7068.8 -> i'm going to just write

7070.4 -> 8 24 pixels like that okay so it became

7073.76 -> a little bit taller now

7075.36 -> next step is the padding top and bottom

7077.119 -> was 10 pixels so

7078.96 -> padding top 10 px

7082.08 -> bottom was also

7083.679 -> mpx like that

7085.44 -> okay the padding left and right hand

7087.28 -> side were 30 pixels according to the

7089.52 -> spec so let's implement that

7092 -> like that and then we'll move on to the

7094.159 -> border one pixel and this hex code right

7096.88 -> here

7097.679 -> so i'll do border and here we have to

7099.76 -> provide it with three values so one

7102.08 -> pixel

7103.28 -> it is going to be solid and the color is

7107.4 -> dfe1e5 like that looking pretty good

7111.52 -> the final thing then is the border

7113.36 -> radius and that should be 24 pixels

7116.08 -> according to the design and look at this

7118.32 -> it is starting to look really

7120.4 -> professional so really good job if you

7122.719 -> did this challenge if you did a couple

7124.32 -> of mistakes no worries at all actually i

7127.36 -> also did a little mistake here according

7129.119 -> to best practices when setting heights

7131.04 -> for input fields because actually i want

7133.44 -> to show you that this height of 24

7135.36 -> pixels here is actually not the way we

7137.28 -> want to do it because if i google

7139.92 -> set height of input field css and then

7142.4 -> click the first link that is a stack

7144.48 -> overflow question and here you can see

7146.719 -> someone who's been having problems with

7148.159 -> this so they've asked a question about

7149.84 -> it if we scroll a little bit down you

7151.92 -> can see that people are saying try with

7153.92 -> padding and line height

7156.96 -> line height that's not something we've

7158.639 -> used if we scroll a little bit down you

7160.48 -> can see that some browsers will honor a

7162.56 -> css height rule some not so it seems to

7165.28 -> be a little bit difficult to use height

7167.599 -> for the input field

7169.599 -> and this person's wall suggests line

7171.52 -> height and likewise with this third

7173.199 -> person here so i'm going to trust the

7174.719 -> wisdom of the crowds here and use line

7176.8 -> height instead

7179.28 -> like that

7180.239 -> didn't change anything but we are using

7182.239 -> a property that more browsers apparently

7184.8 -> will honor

7186 -> and line height is actually just the

7188.08 -> height of one line of text and since

7190.56 -> that is everything we have inside of an

7192.4 -> input field it's just one line of text

7194.8 -> that'll be the exact same thing as

7196.719 -> setting the height of the inner content

7199.04 -> of the input field so if that was a

7201.28 -> little bit confusing and you prefer to

7202.96 -> just use height that's totally fine as

7204.96 -> well it's more important that you are

7206.719 -> using what you are comfortable with than

7208.239 -> that you are doing it the 100 correct

7210.239 -> way according to conventions so just use

7212.56 -> whatever you want i just wanted you to

7214.56 -> be aware of the fact that this is the

7216.88 -> recommended way according to stack

7218.8 -> overflow with that let's move on

7224.639 -> okay now we're gonna add the first

7226.719 -> button to our google project

7228.88 -> so i'm gonna head over to the html and

7231.04 -> here beneath the input field i'm just

7232.88 -> gonna type

7233.92 -> button

7235.199 -> like that

7236.48 -> and this will be the google search

7238.88 -> button so there we have it it doesn't

7241.44 -> exactly look good but don't worry about

7243.119 -> that

7244.32 -> now i want to give this a class as well

7246.639 -> and a class name you'll often see used

7248.4 -> for buttons is simply btn like that

7251.52 -> okay

7252.56 -> now that we have that i want you to

7254.88 -> center the button and add some space

7257.28 -> above it so go ahead and use the class

7259.76 -> selector to select this button and solve

7262.48 -> this challenge good luck

7269.04 -> okay so what i'll do is do dot vtn to

7272.4 -> select the button

7273.92 -> here you might have been tempted to

7275.28 -> simply do margin left auto and then

7278.96 -> margin right

7280.88 -> auto however that doesn't seem to do

7283.119 -> anything

7284 -> why is that well if you remember the

7286.239 -> criteria you needed in order to use this

7288.8 -> technique to center elements one of them

7291.28 -> was that you need your element to be

7293.44 -> display block whereas buttons are

7295.92 -> actually display inline by default

7299.28 -> so if we do display

7301.44 -> block

7302.4 -> boom there we go the button is centered

7305.28 -> and now you might ask well what about

7306.719 -> the width we also set the width on the

7309.04 -> input field and the logo

7311.92 -> well we could do that as well with this

7313.84 -> one let's do with

7315.36 -> 200 pixels for example

7317.36 -> however it's not needed because if we

7319.92 -> remove the width you can see that it

7321.36 -> still has a width which is certainly not

7323.84 -> full width across the entire page so it

7326 -> kind of has an implicit width without us

7328.239 -> setting the width so even though it is a

7330.48 -> criteria that your element needs with in

7333.84 -> order to use this technique here in

7335.92 -> order to center it you don't necessarily

7337.84 -> have to set the width yourself if the

7340.4 -> element already has some kind of width

7342.88 -> so it works perfectly fine just doing

7344.88 -> display block and margin left right auto

7347.28 -> in this example

7349.36 -> finally we are going to add some space

7351.04 -> above it so let's do that i'll do margin

7353.92 -> top and do for example 30 pixels yeah

7357.36 -> looking pretty good great job solving

7359.44 -> this challenge let's move on

7364.4 -> now we are going to style the button in

7367.04 -> our google project

7368.56 -> because as you can see this is how our

7370.08 -> button currently looks but

7372.32 -> this is how we want it to look so we got

7374.88 -> to do a bunch of changes however there's

7377.84 -> one thing i want to change actually on

7379.76 -> this google.com homepage because notice

7382.8 -> how low the contrast is between the

7385.36 -> background color of the button and the

7387.28 -> background color of the entire website

7389.599 -> it's hardly possible to see that there's

7391.84 -> any difference and that's not good

7393.84 -> because it reduces the accessibility of

7396.48 -> the site and makes it hard for people

7398.32 -> who are visually impaired to use it

7400.48 -> actually to prove this let's take these

7402.639 -> two colors the light gray here and the

7405.04 -> white and put them into a contrast

7407.599 -> checker online for example this one

7409.44 -> right here on userray.org

7411.76 -> they have this nice little contrast

7413.44 -> checker where you can paste in the

7414.8 -> foreground color and the background

7416.48 -> color and then get a contrast ratio and

7419.28 -> this

7419.96 -> f8f9fa hex color is the one that google

7424.08 -> is using

7425.36 -> and if we scroll a bit down you'll see

7427.119 -> that google indeed fails miserably on

7430.08 -> this test complete failure

7432.48 -> the ratio is 1.05 though it should have

7435.199 -> been 4.5 or more so not good google

7440.08 -> so what we will do instead is change the

7442.4 -> background from this

7443.84 -> to something like this here you can see

7446.159 -> it's much easier to see that it is

7448.32 -> indeed a button

7449.76 -> so even though the real background color

7451.76 -> is this one right here we are going to

7453.52 -> use this one right here

7455.92 -> so with that in mind i want you to style

7458.239 -> the button according to the provided

7460 -> design you now have

7461.52 -> and the only hint i'll give you is that

7463.679 -> these are the properties you are going

7465.44 -> to use however i'm not giving you the

7467.599 -> values of any of them because i want you

7469.44 -> to practice looking at an example and

7471.44 -> making your best guess as to what the

7473.199 -> values for the css properties should be

7475.44 -> as that's how you'll work out in the

7477.28 -> real world when a designer for example

7479.119 -> gives you a design file so go ahead and

7481.36 -> do this right now and then i will show

7482.88 -> you the solution afterwards as well

7489.679 -> okay let's do this i'm going to bring up

7492.239 -> the example here have it on the side so

7494.56 -> that we can

7495.599 -> see how it develops

7497.199 -> and then start with the background color

7498.88 -> as we have the value for that one

7501.36 -> down here

7503.199 -> round

7504.48 -> like that okay next i would try to see

7507.04 -> what is the most apparent difference

7508.88 -> between this button

7510.56 -> and this one right here well the border

7512.96 -> is certainly different this button does

7515.199 -> not have a border at all

7517.119 -> whereas this one has got has a border so

7520.08 -> let's just remove it

7521.76 -> border

7522.8 -> none like that okay good

7525.04 -> now we can see that the text is much

7526.96 -> more crammed into this box than there is

7529.52 -> this one right here so that is the

7531.119 -> padding and also you can notice that

7533.04 -> there's more padding on the left and

7534.639 -> right hand side than on the top and

7536.639 -> bottom so i'm going to try to add for

7538.88 -> example padding

7540.88 -> top 5 pixels

7543.679 -> ah that actually looks like this one

7545.679 -> here has more than 5 pixels because this

7548.4 -> space is still pretty crammed so i'm

7550.48 -> gonna do for example eight

7553.52 -> yeah i think that is more like it i'm

7556.719 -> gonna give that on the bottom as well

7560.4 -> like that

7561.599 -> on the sides i'm just going to try the

7563.199 -> double

7564.159 -> padding left 16 pixels padding right 16

7569.199 -> pixels and you know what i think that

7571.679 -> button and our button looks pretty

7574 -> similar in size

7576.08 -> so next up is the border radius because

7578.639 -> you can see this one is totally

7580.32 -> rectangular

7581.52 -> whereas this one has softer corners

7584.56 -> so i'm going to do border

7586.719 -> radius

7587.76 -> something like 4 pixels so that is

7590.239 -> pretty good

7591.599 -> the final minor adjustments i'm going to

7593.52 -> make is reduce the font size ever so

7596.159 -> little from what it is here down to what

7598.4 -> it is here i mean it's almost identical

7600.96 -> but i happen to know that this one is

7602.88 -> indeed 14 pixels

7604.96 -> so i'm going to do font size

7607.199 -> 14 pixels like that and there we

7610 -> actually have the buttons this one and

7612.48 -> this one

7613.44 -> identical

7614.639 -> now if you chose any other values than

7617.119 -> the ones i've chosen don't worry about

7619.119 -> it at all the point was not for you to

7621.679 -> reach the exact same values as me but

7623.76 -> just in the same range basically so

7626 -> regardless of how your example ended up

7628.159 -> good job reaching this far let's just

7630.079 -> keep up the pace and move on

7635.119 -> now we are going to add the second

7637.28 -> button to our google project this i'm

7640.079 -> feeling lucky button right here

7642.48 -> and i want you to do that on your own

7644.8 -> first so that's your challenge add the

7647.52 -> next button and do remember to give that

7650 -> button a btn class so that it's styled

7652.719 -> as our search button and once you've

7654.8 -> done that and executed the code i want

7657.28 -> you to take a look in the mini browser

7659.04 -> and ask yourself

7660.48 -> why aren't our buttons behaving as we

7663.28 -> want them to because as you'll see

7665.36 -> there's something wrong with the layout

7667.52 -> at least when comparing it to this

7669.44 -> layout right here we'll go ahead and do

7671.599 -> that right now and try to think of why

7673.84 -> our layout is wrong and then i will do

7676 -> it as well when you return back to me

7678 -> and explain what's going on

7684.48 -> okay let's do this

7686.32 -> so i'm lazy so i'm just going to copy

7688.48 -> this one like that and write

7691.679 -> um

7692.56 -> feeling

7693.76 -> lucky

7695.04 -> run the code and as you can see

7698.159 -> the buttons are now stacked on top of

7700.48 -> each other

7702.56 -> what we can do in order to figure out

7704.239 -> what's going on here is actually use the

7706.639 -> built-in dev tools in the browser which

7708.88 -> you've seen a few times now so let me

7710.56 -> show you this debug session using slides

7713.119 -> i'm going to right click in the nav bar

7715.44 -> and then choose inspect

7717.28 -> open up the elements tab and then click

7719.679 -> on the selector icon here so that i can

7722.079 -> select this button by hovering over it

7725.52 -> and then down in the styles tab i can

7728.239 -> scroll down until i see the box model

7731.199 -> for our button and what you'll notice is

7733.599 -> that our button is taking up all the

7735.599 -> available space on the left hand side

7737.679 -> and the right hand side

7739.199 -> and if we move down to the second button

7741.599 -> you can see that that button is also

7743.599 -> doing that that is because they are

7745.76 -> display block

7748.079 -> exactly this line right here if you

7750.719 -> remember from previous lectures display

7752.88 -> block kind of takes up all of the

7754.8 -> available space on the horizontal axis

7757.84 -> so as we said earlier display block

7760.32 -> stacks on top we aren't able to get the

7762.32 -> layout we want if our buttons are

7764.239 -> display block and then you might be

7766.079 -> tempted to do well let's just remove the

7768.079 -> display block

7769.36 -> however

7770.639 -> if we do they will be on the same line

7772.56 -> yes they are now inline elements but

7774.639 -> they will just be crammed all the way to

7776.56 -> the left hand side because

7778.8 -> margin left right auto doesn't work if

7781.52 -> you remember from the lecture about

7783.199 -> centering you learned that display block

7786.159 -> and margin left right auto works

7788.32 -> together in order to center something

7790.56 -> you can't have just one of them

7792.719 -> which means that in order to go from

7794.96 -> this layout to this layout we have to

7797.76 -> use a different technique for centering

7799.84 -> the elements and there's actually two

7802 -> ways we could do this there's the simple

7804.32 -> and inflexible way using text align and

7806.96 -> then there's the slightly harder but

7809.119 -> super flexible way using flexbox and

7812.239 -> since you're going to use flexbox

7814.079 -> several times throughout this course i

7816.239 -> want you to get familiar with it right

7818.079 -> away so in the next scrim we're going to

7820 -> talk about flexbox but before we do that

7822 -> i just want to show you the simple way

7823.679 -> as well so that you've seen it because

7825.52 -> as you might remember from one of the

7827.199 -> very first scrims in this section we

7829.52 -> used something called text align in

7831.92 -> order to align our text either to the

7834 -> left right or center now the text align

7837.28 -> property actually works on all inline

7840.4 -> elements not just on text so what we can

7843.36 -> do is remove the display block from our

7846.96 -> buttons

7848.239 -> as you know that turns them into inline

7850.719 -> elements and they are crammed to the

7852.639 -> left

7853.599 -> and as inline elements only take up the

7856 -> available space they need according to

7858.239 -> their content there is no available

7860.48 -> margin to use so auto here which

7862.719 -> basically means take up whatever

7864.719 -> available margin there is serves no

7867.119 -> purpose so we can remove both of these

7869.44 -> two as well as you can see it made no

7871.28 -> difference and then we can move up to

7873.36 -> the main the parent will do text align

7878.32 -> center like that and boom both buttons

7880.96 -> are now centered so here we have told

7884 -> the container the main element all

7886.96 -> inline elements inside of it should

7889.119 -> align to the center

7890.88 -> so that was the easy but inflexible way

7893.44 -> of doing this let's instead of using

7895.52 -> this technique move on to do it how the

7898.159 -> pros do it using flexbox

7903.76 -> flexbox is everywhere let's just have a

7906.639 -> look at twitter for example here the

7908.96 -> menu on the left hand side is created

7910.8 -> with flexbox as with the tweet options

7913.44 -> menu and the timeline itself and guess

7916.079 -> what the trends for you and who to

7917.599 -> follow it's created with you guessed it

7919.44 -> flexbox so this is something you need to

7922.4 -> learn

7923.599 -> let's imagine then that you have a

7925.52 -> e-commerce website which you can see

7927.119 -> here that sells shoes hoodies and

7929.28 -> t-shirts well then you probably have a

7931.36 -> navigation menu like this one where

7933.36 -> users can click and then probably open

7935.28 -> up a sub menu or something like that

7937.92 -> as you can see the items stack on top of

7939.84 -> each other that is to be expected as

7942 -> these are divs and divs are display

7944.32 -> block they want to take up all the

7945.84 -> available space in the width and if

7948 -> you're wondering how i styled these we

7950.159 -> can head over to the styles.css and just

7952.48 -> have a quick look at that you can see

7954.159 -> i've aligned the text to the center

7955.92 -> inside of all the items hadn't i done

7958.079 -> that it would have been aligned to the

7959.36 -> left

7960.48 -> also there's a border as you can see

7962.4 -> there's some padding on the inside and

7964.239 -> there's some margin in between the

7966.079 -> elements

7967.52 -> now the question is what if i instead of

7969.84 -> this vertical layout wanted a horizontal

7972.56 -> layout which is more common for

7974.159 -> so-called navigation bars

7976.8 -> so something that looks like this well

7979.36 -> this is where flexbox comes to the

7981.119 -> rescue and in order to turn this into a

7983.44 -> flexbox layout i would first have to

7985.679 -> wrap these three items in a container

7987.92 -> because a flexbox layout always consists

7990.079 -> of a container and its direct children

7993.52 -> so

7994.96 -> let's wrap it in a div

7997.52 -> and give this a class of

7999.44 -> for example nav dash wrapper like that

8002.96 -> if i run this now nothing happens

8004.8 -> because divs as you know are invisible

8006.88 -> unless you give them any styling or

8008.4 -> content

8009.52 -> so let's head over to the styles.css and

8012.639 -> now target the nav wrapper like that in

8015.679 -> order to turn this into a flexbox

8017.44 -> container all i have to do is write

8019.599 -> display

8020.96 -> flex and boom suddenly we have forced

8024 -> our three divs into one row now this

8026.4 -> layout flows from left to right along

8028.8 -> the horizontal axis and that is pretty

8031.199 -> significant given that these items were

8033.28 -> display block by default but flexbox as

8036.159 -> powerful as it is overrides that and

8038.4 -> forces them on to one line

8040.48 -> however we haven't got quite the layout

8042.48 -> we want yet as you can see it's centered

8044.639 -> and there's also some space in between

8046.32 -> the items

8047.76 -> now let's start with the centering

8049.36 -> because flexbox now has control over

8052.4 -> these items and can decide where along

8055.119 -> the main axis they should be positioned

8057.36 -> so we can do justify content that is a

8059.76 -> little bit of a weird name for a

8061.599 -> property but that's just how it is and

8063.52 -> then set that to center like that

8067.119 -> now all of the items are centered and

8069.199 -> the final step is just to get some

8070.719 -> spacing in between these items and that

8072.639 -> is done with our good old friend margin

8074.88 -> so we'll do margin left let's do 10

8077.28 -> pixels and let's add the same thing on

8080.159 -> the margin

8081.599 -> right

8083.119 -> like that

8084.239 -> and there we have the layout we wanted

8086.88 -> now a final cool thing i want to show

8088.48 -> you is that we can do for example end

8091.119 -> here as well that'll push it all the way

8092.719 -> to the right hand side or start

8095.76 -> at the beginning or alternatively you

8098 -> space that around that's pretty cool

8101.36 -> now we've distributed all the white

8103.199 -> space around each of the items and

8105.599 -> another one is space between now all of

8108.32 -> the available space is between the items

8110.48 -> so they're spread out like this

8112.96 -> now we are getting ahead of ourselves

8114.639 -> here i just wanted to demonstrate this

8116.079 -> to show how powerful flexbox is what you

8118.32 -> are going to work with is the center

8120.4 -> here so with that let's return back to

8123.199 -> our google clone

8127.199 -> okay we are back at our google project

8129.599 -> and now your job is to center these two

8132 -> buttons besides each other meaning

8134.96 -> getting to this layout right here

8137.84 -> and the way to do that is of course

8139.36 -> using flexbox so you'll wrap the two

8141.92 -> buttons in a flexbox div and then center

8144.56 -> them

8145.92 -> and then also

8147.04 -> i want you to give the div a class of

8149.8 -> btn-wrapper so you'll need to modify

8151.76 -> both the html and the css here

8154.88 -> now before you start i'm going to remove

8157.84 -> these three lines here because they are

8159.84 -> solely there in order to center our

8161.76 -> buttons

8162.719 -> using this display block and margin left

8165.04 -> right auto technique however now we're

8167.52 -> going to use the flexbox technique and

8170 -> we don't want to use both techniques at

8172 -> the same time because that'll just be

8173.76 -> confusing as they will affect each other

8176.88 -> so i will remove these lines

8179.44 -> and now you're left with this left

8180.96 -> aligned layout here

8183.52 -> so please take over here do this

8185.679 -> challenge and then return back to me

8187.84 -> when you've done it or when you feel you

8189.679 -> need some guidance good luck

8196.639 -> okay hopefully that went well if not no

8199.439 -> worries we'll do it now together

8201.84 -> so i'm going to start with this flexbox

8204 -> div that we want in our html

8206.479 -> it should wrap our buttons and only our

8208.8 -> buttons so we want to start it up here

8211.359 -> if class of btn dash wrapper

8216.16 -> at i'm going to indent my buttons

8219.12 -> and then end the div down here so now it

8222.639 -> is simply wrapping our two buttons

8225.439 -> if i run this code seemingly nothing has

8227.679 -> happened

8228.719 -> but under the hood we have the button

8231.439 -> wrapper which we can target using

8233.679 -> btn.wrapper

8236 -> like that and then we can do display

8238.96 -> flex that's turned our div into a

8241.359 -> flexbox and now we can use the

8244.08 -> justify content and do

8246.559 -> center like that

8248.399 -> there you can see both our buttons are

8250.639 -> centered however they are totally

8253.599 -> crammed into each other now there's no

8255.439 -> margin in between them

8257.2 -> so in order to fix that we want to add a

8259.359 -> little bit of margin left and right to

8261.679 -> these buttons so i'm going to do margin

8264.399 -> left

8265.599 -> perhaps 4 pixels and margin

8268.319 -> right

8269.359 -> or pixels as well

8270.88 -> like that

8273.2 -> that's looking pretty good to me so if

8276.719 -> you didn't do this no worries at all and

8279.2 -> also if you are a little bit confused

8281.04 -> about flexbox that is totally okay as

8283.28 -> well we're going to work with that

8284.96 -> several times throughout this course

8286.639 -> you'll get more opportunities to

8288.399 -> practice this just feel proud that

8290.16 -> you've at least dipped your toes into

8292.24 -> flexbox as that is a super important

8294.719 -> tool for any front-end developer so

8297.84 -> great job let's move on

8302.719 -> now there's one final thing i want you

8304.88 -> to know and that is that you are amazing

8308.399 -> because you have taken your very first

8310.399 -> step into the world of css and that is

8313.359 -> more than most people ever do so take

8316.16 -> this moment to feel great about yourself

8318.96 -> and also let's take this moment to recap

8321.439 -> what you've learned starting out you

8323.28 -> learned about the css syntax that is how

8325.84 -> you select elements and also use

8327.679 -> properties and values and then you learn

8330.08 -> the key concept about inline elements

8332.24 -> versus block elements so block elements

8334.88 -> stacking on top of each other like these

8336.88 -> two and inline elements standing kind of

8339.28 -> in a horizontal line like the buttons

8341.599 -> here moving on you learned about margins

8344.16 -> which is how you create white space

8345.92 -> outside of elements for example above

8348 -> the google logo here and you learned

8349.679 -> about its close cousin the padding which

8352 -> is how you create space on the inside of

8354 -> elements for example in between the text

8356.24 -> and the edges of these buttons also

8358.88 -> borders is what is between padding and

8361.12 -> margin and we use that on the input

8363.359 -> field here we decided its thickness its

8365.84 -> type and color and also the radius of

8368.319 -> the corners so we didn't want the sharp

8370.24 -> edges but rather soft circular edges

8373.12 -> which we achieved with this border

8374.96 -> radius property what we also did was

8377.04 -> take a closer look at the div tag which

8379.2 -> you saw briefly in the html section this

8381.84 -> time around though you actually created

8383.84 -> two divs one to wrap the entire project

8386.88 -> and another to wrap the buttons and we

8389.2 -> had to separate those from each other so

8391.359 -> you had to learn about classes that is

8393.6 -> the attribute you set like this and you

8396.16 -> select by using the dot notation in the

8399.2 -> css

8400.319 -> also a big thing is centering in css you

8403.28 -> learned three different ways of doing

8405.2 -> this and the final way you centered

8407.359 -> elements was through the use of flexbox

8409.84 -> a super powerful tool that all frontend

8412.399 -> developers need to be comfortable with

8414.88 -> so you have learned a lot

8418.08 -> now i think you should take a little

8419.68 -> break you have to digest these things

8422 -> recharge and then i will see you back

8423.76 -> here when you are ready in the next

8425.92 -> section

8430.08 -> welcome to the second css section of

8432.72 -> this course where you are going to build

8434.8 -> a business card for yourself and it's

8436.8 -> going to look more or less like this

8438.64 -> though you're going to personalize it

8440.319 -> make it your own not only with your own

8442.319 -> information but also with a beautiful

8443.92 -> color palette of your choice and a font

8446.64 -> that you like so you are going to level

8449.12 -> up your design skills as well as your

8451.84 -> css skills meaning that this is going to

8454 -> be a lot of fun so let's just get

8456.8 -> started with it right away

8461.76 -> okay let's start out by having a quick

8463.52 -> look at the basic skeleton for our app

8466.479 -> as you can see in the file system here

8468.16 -> we have an index.html file also a

8470.84 -> styles.css file and finally we have an

8473.28 -> images folder which contains my avatar

8475.92 -> it's a png file called pair.png

8479.12 -> now starting with the html it's just a

8481.6 -> very simple setup with the html tag and

8484.08 -> then the head tag which links to the

8486.319 -> styles.css

8487.84 -> as for the body it has one direct child

8490.24 -> which is a div which will work like kind

8492.24 -> of the container for our business card

8494.479 -> and inside of that div we have an image

8496.64 -> tag we have an h3 with my name we have a

8499.52 -> paragraph with the title and an h4 with

8502.399 -> the location

8504.64 -> moving over to the css we only have one

8507.2 -> rule here we're setting the margin to 20

8509.52 -> pixels on the body

8511.359 -> and if you remember how this works when

8513.359 -> we're not specifying either margin top

8515.52 -> margin bottom left or right

8517.92 -> just setting the margin in general these

8520.399 -> 20 pixels will be added on all four

8522.319 -> sides on the top on the left bottom and

8524.72 -> right and that's simply because i want

8526.72 -> to avoid that these elements touch the

8528.88 -> edges of the mini browser

8531.2 -> so

8532 -> there's a problem though as you can see

8533.84 -> the image isn't rendering properly it's

8536 -> just an icon that is as far as i can

8538.399 -> remember not how my face looks like and

8541.04 -> the problem is in the image tag

8543.6 -> so i want you to try to fix that and i'm

8545.68 -> not going to give you any more hints

8547.04 -> rather than if you are stuck try to

8548.96 -> google html file paths that should help

8551.92 -> you so go ahead and give this one a shot

8553.6 -> and then i will show you how to solve it

8555.12 -> as well when you return back to me

8561.68 -> okay let's do this

8563.439 -> let's take this string right here and

8565.2 -> paste it into google there you can see

8567.04 -> that the top result is a w3schools

8569.76 -> article let's head into that one here

8571.76 -> you can see file path examples let's

8574.16 -> zoom in on this one and if we have image

8576.479 -> source equals picture.jpg which would be

8579.28 -> the same as we have here although our

8580.96 -> image is called pair.png that means that

8583.52 -> the file is located in the same folder

8586.319 -> as the current page

8588.08 -> well is that the case now looking at our

8590.72 -> current page index.html you can see that

8593.76 -> the image is not located in the same

8595.76 -> folder as the index.html because the

8598.24 -> image lives inside of the images folder

8601.28 -> so what we then might need is something

8603.12 -> like this where we do images slash and

8605.68 -> then the picture name

8607.12 -> here it means that the picture is

8608.64 -> located in the images folder in the

8610.96 -> current folder and that looks correct

8613.76 -> the images folder is in the same folder

8616.24 -> as index.html and the headshot of me is

8619.359 -> located inside of that images folder

8622.24 -> that means that we can try to do images

8624.479 -> like that slash run the code oh

8627.6 -> there we go

8629.6 -> we have my avatar imported and are ready

8632 -> to move on to the next scrim i'll see

8634.24 -> you there

8637.92 -> okay now we're gonna do a little bit of

8639.92 -> housekeeping here because this image

8642.24 -> element actually has a serious flaw

8645.359 -> because it lacks an important ingredient

8647.92 -> that all image tags should have which is

8650.72 -> called the alt text or the alternative

8653.52 -> text

8654.479 -> and that is simply an attribute that is

8657.12 -> written like this alt equals and then

8660.56 -> inside of quotes you are to write a

8662.72 -> description of the image so here it

8665.28 -> could be for example pierre

8667.84 -> smiling like that however if we run this

8670.72 -> code now we can see that seemingly

8672.64 -> nothing has changed so why do we at all

8675.12 -> write these old texts well first of all

8677.76 -> it makes your site accessible because

8679.6 -> imagine that a person who is visually

8682 -> impaired or who is blind is trying to

8684.479 -> visit your website in that case they

8686.72 -> would use a screen reader which goes

8689.28 -> through the html and reads it out loud

8692.16 -> to the user

8693.439 -> and as for the h3 tag it would be simple

8696.08 -> for the screen reader to read out loud

8698.319 -> what that says because that is text

8700.88 -> however for an image like this one you

8703.12 -> need to add an alt tag to describe the

8705.6 -> image so that the screen reader has

8707.52 -> something to read out loud and secondly

8710 -> this also works as a fallback if your

8712.16 -> image doesn't render properly because

8714.319 -> let's say you have a spelling mistake in

8716.399 -> the source attribute for example an

8718.96 -> extra r well in that case the image

8721.439 -> won't render but the alt tag provides as

8724 -> a backup so that the user seeing this

8726.399 -> can kind of understand what was at least

8728.16 -> supposed to be there and finally writing

8730.8 -> alt text will help your site rank higher

8733.6 -> on google meaning you get more search

8735.92 -> traffic and that is because the alt tag

8738.399 -> most likely provide important metadata

8740.8 -> about the image so that google knows how

8742.64 -> to use it in a search results page and

8744.96 -> if your site is not accessible it might

8746.72 -> be punished in the form of ranking lower

8749.439 -> so with that in mind let's look at how

8751.439 -> to write these old texts and the first

8753.68 -> thing you need to know is that you

8754.8 -> should not include for example image of

8757.12 -> because that's simply not necessary the

8759.2 -> screen reader knows that it is an image

8761.2 -> because it is an image tag

8763.84 -> secondly should be concise meaning less

8766.24 -> than 125 characters because a lot of

8769.04 -> screen readers will cut off after this

8771.04 -> limit has been reached and finally a

8772.88 -> trick you should use in order to come up

8774.72 -> with a good old text is imagine that you

8777.359 -> are describing this image to a person

8780 -> over the phone so let's try to do that

8782.319 -> with an example

8783.6 -> here we have an iconic image of muhammad

8785.92 -> ali in a boxing match and one way to

8788.24 -> write an old text for this could be just

8790.64 -> a boxing match but it would actually be

8792.88 -> a pretty poor way of describing it

8795.04 -> because there's so much more going on

8796.64 -> here you have plenty more characters you

8798.24 -> can use in order to describe it so a

8800.319 -> better one would be two boxers in the

8802.24 -> ring one lying down and the other

8804.16 -> standing up

8805.28 -> that's a good factual explanation but

8807.84 -> we're not quite there yet because it

8809.52 -> isn't actually describing this iconic

8812 -> moment when muhammad ali knocked out

8814.319 -> sunny listen so if you were to describe

8816.72 -> this over the phone you would probably

8818.88 -> understand that this description is

8820.96 -> pretty shallow so what i would rather

8823.04 -> write as an old text for this image

8825.12 -> would be muhammad ali in the boxing ring

8827.76 -> screaming at sunny listen after knocking

8830.08 -> him out that in my opinion properly

8832.72 -> describes the intent of this image what

8835.359 -> the person who has decided to show this

8837.439 -> image on a website is trying to convey

8840.8 -> so with that example in mind

8843.12 -> i want you to

8844.8 -> write what you think is an appropriate

8846.96 -> alt text for this image go ahead and do

8849.68 -> that right now and then i will show you

8851.84 -> what i would write when you return back

8853.68 -> to me

8859.04 -> okay let's do this

8860.96 -> we'll do alt equals quotes and here i

8863.92 -> would use my name pair harold bergen

8867.6 -> and you can see i'm smiling and i'm

8869.6 -> looking at the camera i think that's

8871.12 -> important so i'd write smiling at the

8874.08 -> camera

8875.68 -> finally the background is really playful

8878.319 -> and colorful

8880.08 -> so i want to include for example

8882.08 -> with a

8883.28 -> colorful

8884.88 -> background like that so if yours was a

8887.359 -> bit simpler or shorter don't worry about

8889.6 -> it the most important thing is that you

8891.68 -> add an alt text and do as best as you

8893.6 -> can and actually plenty of developers

8896 -> never add this so just by adding it you

8898.08 -> are actually separating yourself from

8899.76 -> most other beginners so with that let's

8902.08 -> just move on

8906.16 -> the next thing we're going to do is

8908.72 -> shrink this image to a suitable size for

8911.52 -> our business card because as it is now

8913.439 -> it is far too big

8915.2 -> so i want you to head over to the

8916.8 -> styles.css and solve this challenge you

8919.359 -> are to set the width of the image to 150

8922.319 -> pixels

8923.359 -> and you need to use a class to select

8925.84 -> the image element so go ahead and give

8928 -> this a shot right now

8934.319 -> okay hopefully that went well let's now

8936.88 -> do it together so first we need to

8938.72 -> actually create the class that we are

8940.72 -> going to select from the css so let's

8943.12 -> head over to the html file here we'll

8945.76 -> just do

8946.72 -> class equals and i'm going to call this

8949.2 -> one an avatar

8951.2 -> like that actually now that we have

8953.2 -> three of these

8954.72 -> on the image element i think for

8956.399 -> readability purposes

8958.16 -> it works well to break them into three

8960.08 -> lines

8961.52 -> i think this is a little bit easier to

8963.12 -> read then i'll head over to the

8964.88 -> styles.css and target the class dot

8968.24 -> avatar

8969.84 -> and reset the width

8971.439 -> to 150 pixels now rerun the code there

8975.04 -> we go

8976.399 -> so great job solving this challenge

8978.56 -> let's move on

8982.479 -> okay now you're soon going to start

8984.399 -> building the layout of this card however

8987.359 -> right now the card kind of blends into

8990.399 -> the background there's no separation

8992.319 -> between the card and the background so i

8994.399 -> want to add a little helper style in

8996.56 -> order for us to more clearly separate

8998.8 -> the card from the background and for

9001.28 -> that we need to grab hold of the outer

9003.68 -> element of the card and can you take a

9006.479 -> guess what kind of html element do you

9008.72 -> think should wrap the entire card

9013.12 -> if you guessed a div that is correct

9016.16 -> and heading over to the html you can see

9018 -> we are actually already wrapping the

9019.92 -> entire thing in a div so here we have

9022.479 -> our container div or card div or

9025.28 -> whatever we want to call it

9027.439 -> so what i want you to do now is to first

9029.92 -> give that div a class and actually i

9032.319 -> think you should call it card and then i

9034.56 -> want you to select the card class in css

9037.76 -> and give it a dotted blue border this is

9040 -> our helper styles it'll give us a little

9042.24 -> blue border around the element so that

9044.8 -> we can see how our card div kind of

9047.12 -> behaves

9048.24 -> and also as you can see from the design

9050.319 -> here

9051.2 -> none of the elements

9052.64 -> touch the edge of the border so it seems

9054.88 -> like there's some padding in play here

9056.88 -> let's just add 20 pixels of padding on

9059.28 -> all sides of the card as well

9061.52 -> so go ahead solve these three challenges

9063.68 -> and then i'll of course show you the

9065.12 -> solution as well

9071.04 -> okay let's do this

9072.96 -> so first we need to give the card div a

9075.439 -> class

9077.359 -> i'll head over here and do class equals

9080.56 -> card

9082.24 -> i'll run this code so that we have this

9084.56 -> class in the dom

9087.12 -> the next step is to select the class

9090.08 -> by doing card

9092.24 -> and then adding a border if you remember

9093.92 -> from previously that is done through the

9095.68 -> border property which takes three values

9099.28 -> the first one being the thickness of the

9100.88 -> border i'm just gonna set it to one

9102.479 -> pixel the second being the quality for

9104.56 -> example solid or dotted or dashed or a

9107.12 -> few others we're going to use the dotted

9109.439 -> one and the color will be blue and there

9112.16 -> you can see

9113.2 -> boom

9114.16 -> we have a border around our entire card

9118.16 -> and this will make it a lot easier for

9119.68 -> us to work with the card now that we can

9121.68 -> see it clearly on the page

9123.52 -> finally we want to add 20 pixels of

9125.439 -> padding because as you can see here the

9127.52 -> elements touch the border on these sides

9130.56 -> and we don't want that we want some

9132.16 -> space so we'll do padding

9134.8 -> 20 pixels like that

9136.8 -> and there we go

9138.08 -> we have solved the challenge

9140.399 -> with this in place i think we're ready

9142.319 -> to start moving on with fixing the

9144.72 -> layout and as you can see on the

9147.04 -> finished design here there's a big

9148.64 -> difference between this one and our

9150.88 -> current one and that is that the current

9153.12 -> one is vertical whereas this one is more

9156.16 -> horizontal so they stack up differently

9158.72 -> we want the image on the left hand side

9160.56 -> and the text on the right hand side not

9162.479 -> everything on top of each other so

9164.08 -> basically we want two columns one for

9166.56 -> the image and one for the text

9169.04 -> and as you might remember from

9170.319 -> previously flexbox helps us create

9172.72 -> columns so let's now just experiment by

9175.12 -> adding display flex to the card

9177.439 -> let's see what happens oh wow

9179.52 -> okay so what happened there it actually

9182.64 -> turned every single element into a

9185.52 -> column in itself that's not exactly what

9188.479 -> we want here

9189.68 -> so display flex

9191.439 -> isn't the entire solution so what we're

9193.6 -> going to do now is go out on a tangent

9196.08 -> learn a little bit more about this

9198 -> flexbox concept in css and then return

9200.72 -> back to this business card project once

9202.8 -> we're ready to build a layout like this

9205.6 -> so let's move on and learn more about

9208 -> flexbox

9212 -> okay so let's say that you've built some

9213.84 -> kind of software as a service and now

9216.56 -> you want to sell it then you might have

9218.56 -> a page like this

9220.08 -> where people can upgrade to pro and they

9222.08 -> can choose the individual plan which

9224.24 -> gives them one gigabyte and no support

9226.08 -> or the enterprise plan which gives them

9228.08 -> 10 gigabytes and priority support now

9230.72 -> i've purposely not given any design to

9233.12 -> this example as i wanted to make it as

9235.12 -> easy as possible to grasp but hopefully

9237.52 -> if you are to create a pricing page to

9240.08 -> make it look a lot better than what we

9242 -> have here so you can see the html right

9245.04 -> here for the entire pricing layout i've

9247.92 -> wrapped it in a div and i'm using an h2

9250.64 -> unordered list a button and so on now

9253.68 -> let's say that you instead of having

9255.359 -> this one column layout here where

9257.359 -> everything stacks on top of each other

9259.52 -> you want this two column layout where

9261.76 -> you have the individual plan at the left

9263.52 -> hand side and the enterprise plan at the

9265.28 -> right hand side well if so we know that

9268.16 -> flexbox will help us create columns but

9271.12 -> if we try turning our container that is

9273.76 -> the div with the class of pricing

9276.319 -> into a flexbox

9278.399 -> you'll see that

9281.52 -> it'll break the layout just as we saw in

9284.08 -> our business card example because what's

9286.08 -> going on here is that flexbox

9289.12 -> takes every single item that is every

9292.16 -> single direct child

9294.08 -> and turns it into a column in itself so

9296.8 -> we get a column for the h2 for the

9299.439 -> unordered list for the buy button for

9301.92 -> the h2 again and so on and this is

9304.399 -> obviously not what we want it's far from

9306.88 -> this two column layout right here

9309.12 -> however there's one hint to be drawn

9311.359 -> from this example and that is that if

9314.16 -> you check out the unordered list here

9316.64 -> see that it has two children of itself

9318.96 -> li element

9320.399 -> and those two are not their own columns

9323.439 -> they are in the same column stacking on

9325.68 -> top of each other so it seems as if

9328 -> flexbox only turns the direct children

9331.68 -> into their own columns

9333.52 -> so the direct children are the h2 here

9336.24 -> the ul the button but not the list items

9339.359 -> and once we know that we can use that

9341.68 -> knowledge in order to get to this layout

9344.319 -> because this layout has two columns that

9346.64 -> means that our flexbox container should

9348.8 -> have two direct children not six as it

9351.76 -> has now and how can we achieve that

9354.8 -> well we want this group to be inside of

9357.12 -> a direct child of this container and we

9360.24 -> want

9361.2 -> this group of html elements to also be

9364.08 -> inside of another direct child of the

9366.479 -> flexbox container so what we'll simply

9368.399 -> do is we'll wrap both of these

9371.28 -> inside of a div

9372.64 -> like that

9374.24 -> and we'll indent it for readability

9376 -> purposes

9377.12 -> let's try to run this code having

9379.12 -> wrapped one of the two groups into its

9381.359 -> own div

9382.64 -> and there you can see the four

9384.399 -> individuals plan now stacks up just how

9387.68 -> we want it

9388.88 -> but the rest of the layout is still

9390.72 -> broken so we need to do the same thing

9392.56 -> down here

9395.52 -> like that

9396.72 -> run the code and there we go

9399.359 -> now our flexbox container actually only

9401.76 -> contains two items

9403.52 -> this div and this div as it doesn't care

9406.319 -> about what's inside of both of those

9408.399 -> children it only cares about its direct

9410.56 -> children and the result is that we get

9413.04 -> the layout we wanted here at least in

9415.359 -> terms of having two columns

9417.76 -> there's still a problem with lacking

9420.16 -> space in between these two children but

9422.16 -> we're not going to deal about that right

9423.76 -> now for now i'm gonna send you back to

9425.76 -> the business card example so that you

9427.359 -> can use this to improve our layout

9432.479 -> okay we are back at our business card

9434.479 -> example and now i want you to use what

9436.56 -> you've just learned in order to fix our

9439.12 -> cards broken column layout because you

9441.439 -> are going to make this card into a two

9443.439 -> column instead of a four column which it

9445.6 -> is now set as the image name

9448.88 -> title and location at four different

9451.6 -> columns

9452.399 -> but instead we want two columns one for

9454.56 -> the image and another one for the text

9456.88 -> elements

9458 -> so

9458.8 -> this challenge is solved in the html as

9461.76 -> you know we already have a display flex

9463.84 -> on the card and the only thing you need

9465.68 -> to do is one change inside of our

9467.76 -> flexbox so hopefully you're able to do

9469.92 -> that go give it a shot and then i will

9471.52 -> show you the solution as well

9477.76 -> okay hopefully that went well let's do

9480.24 -> it together

9481.359 -> so the problem is that flexbox treats

9485.12 -> each of these elements

9487.12 -> as a single child and thus each of them

9489.92 -> get its own column

9491.6 -> however we only want two columns so we

9494.08 -> want these three to be governed by one

9496.88 -> flex child so we need to wrap them

9499.92 -> inside of a div 12. we'll do like this

9503.359 -> open the div and then close the div down

9505.439 -> here

9506.24 -> and we'll indent these so that we get

9508.319 -> some better readability now you can see

9510.479 -> the flexbox only has two direct children

9513.2 -> this one and this one and that means

9515.76 -> that we should get two columns in our

9517.76 -> layout and yes we do

9520 -> brilliant of course there's still a long

9522.24 -> way from this design to this design but

9525.04 -> we are making great progress here so

9526.72 -> let's just keep up the pace and move on

9528.399 -> to the next scrim

9532.96 -> okay i think looking at this example now

9536 -> i gotta admit that i'm pretty pleased

9537.92 -> with this border one pixel dotted blue

9540.16 -> here i think it serves a very nice

9542.16 -> purpose which is to highlight for us how

9544.56 -> our card is being laid out on the page

9546.64 -> so wouldn't it be nice if we could use

9548.64 -> that exact technique on other elements

9551.12 -> on the page as well for example the

9552.88 -> children of the flexbox container that

9555.04 -> is this image right here and the div tag

9557.52 -> that would have been really neat and we

9559.68 -> can do that by for example just copying

9562.16 -> this one and adding it for example to

9563.92 -> the avatar see there the avatar is got

9566.64 -> that blue border as well

9568.479 -> however wouldn't it be neat if we

9571.04 -> in our html could just quickly apply a

9573.6 -> class to any element for example this

9576.16 -> one and it would get the same thing as

9578.16 -> well so basically the argument i'm

9579.84 -> making is that we should create a

9581.359 -> dedicated class for this blue border

9585.12 -> and what that is is a utility class aka

9588.319 -> a class that only sets a single css

9590.96 -> property so let me show you how this

9593.2 -> would work

9594.319 -> let's say that we for example want a

9595.92 -> class to make our text italic

9598.399 -> then we'll simply do class equals

9600.8 -> italic like that

9602.56 -> if we run this code nothing has happened

9604.479 -> because the class hasn't been created

9606.319 -> yet but here we can create the italic

9609.2 -> class

9610.08 -> and do

9611.2 -> font style

9612.399 -> italic like that

9614 -> and now you can see

9615.52 -> the name is in italic

9617.84 -> now if we want to reuse this we can just

9620.319 -> do

9621.2 -> class

9622.24 -> italic here as well from the code and

9625.12 -> the location is also italic and if we

9627.12 -> want the entire card italic we can even

9629.12 -> add the class here up on the container

9631.28 -> element itself

9632.64 -> run the code and now this has been

9634.72 -> inherited down to all of these elements

9637.359 -> and if you're a bit confused about what

9638.8 -> i'm doing here it is simply adding two

9641.04 -> css classes to a single element do that

9643.92 -> simply by adding a space in between the

9645.84 -> two classes okay

9647.68 -> let's

9648.64 -> get rid of these

9650.24 -> like that

9652.319 -> and delete this one as well now what i

9654.319 -> want you to do is create a utility class

9657.76 -> for the dotted blue border this is the

9660.319 -> styling we have here and then give the

9662.399 -> class to both flexbox children in the

9664.96 -> html that is the flexbox items you can

9667.52 -> see

9668.24 -> here and here and also

9670.72 -> i think you should give the same class

9672.08 -> to the card as well so that you can

9673.52 -> remove this line 10 here so go ahead and

9675.92 -> give this one a shot and then i will

9677.359 -> show you how to do it afterwards as well

9684.24 -> okay hopefully that went well let's

9686.24 -> start out by creating the class

9688.479 -> all right border blue here

9692 -> and then inside of it i'll just

9694.08 -> cut this away and paste it in here

9696.08 -> instead now we have a utility class for

9698.56 -> blue borders

9699.84 -> i'll copy it

9701.439 -> and add it

9702.72 -> to this flex item and as a second as to

9706.16 -> the

9706.88 -> image element if we run this code you

9708.88 -> can see now both of these

9711.04 -> have the blue border around them let's

9713.28 -> also add the border blue class to the

9715.359 -> flexbox container run the code and boom

9717.52 -> there we go now we have an even better

9719.84 -> overview over how our elements are laid

9722 -> out

9725.68 -> okay with these blue borders around the

9727.68 -> flexbox children it's pretty easy to see

9730.16 -> that our layout is pretty far from how

9732.479 -> we want it to be

9733.92 -> because here you can see in the card

9735.68 -> that there's some space in between the

9738.16 -> two elements whereas in our example

9740.399 -> they're completely crammed together and

9742.72 -> also pushed all the way to the left hand

9744.88 -> side whereas here they're kind of spaced

9747.6 -> out there's some space on the left-hand

9749.6 -> side in between the element and also

9752.16 -> some space on the right-hand side so

9754 -> they're kind of spaced out in a nice way

9756.479 -> and now i want you to add that

9758 -> horizontal space around the flex

9760 -> children there's a flexbox property that

9762.24 -> does this and you've seen that property

9764 -> before however you might have forgotten

9765.76 -> it if so then google justify content and

9769.04 -> you might find the answer i'm not going

9770.88 -> to give you any more hints than that

9772.479 -> because if you have forgotten about it

9773.92 -> it is a great practice to google it

9776.8 -> then once you've figured out the answer

9778.399 -> go ahead and add the horizontal space so

9780.319 -> that our example becomes a little bit

9781.84 -> more like this layout

9783.6 -> and just so you know you only need to

9785.359 -> add one property for this not multiple

9788.24 -> so give it your best shot and then i

9790.08 -> will show you the solution afterwards as

9791.92 -> well

9797.359 -> okay let's do this so the property is

9800.24 -> called

9801.2 -> justify content

9803.359 -> a little bit of a weird name i agree but

9805.04 -> that's how it is

9806.24 -> and here we can use a range of different

9808.399 -> values and the one we're looking for is

9810.24 -> called space

9812.08 -> around like that and now you can see

9814.64 -> both elements now have some space around

9817.12 -> them and also we could do space between

9820.72 -> then all of the available space will be

9823.04 -> between the two items

9825.279 -> or we could even do

9826.88 -> center as you've seen before then

9828.399 -> there's no space in between them but

9830.16 -> both of them are centered

9831.84 -> and end pushes it all the way to the end

9835.2 -> and start keeps it at the start

9838.479 -> so this is a super powerful property and

9841.52 -> we want the space round value for it as

9844.56 -> you can see it's at least getting closer

9847.12 -> to the layout we have in our finished

9849.359 -> design

9850.399 -> so great job let's move on

9855.52 -> okay time for a new challenge you are

9857.6 -> going to set a fixed width on the card

9860.399 -> and then center it on the page because

9862.56 -> its behavior is a little bit weird right

9864.399 -> now as you can see if we enlarge in the

9866.88 -> screen the card gets enlargened as well

9869.68 -> and that makes the spacing between the

9871.2 -> elements look super weird the aspect

9873.6 -> ratio becomes very different from a

9875.2 -> business card so we don't want that

9877.279 -> instead we want the width to be 400

9879.92 -> pixels

9880.96 -> so it should be a fixed width and then

9883.2 -> we also want the card to be centered on

9885.439 -> the page now one thing i want you to

9887.439 -> notice when i enlarge in this is that

9890.319 -> the card is a display block

9893.12 -> even though we've set it to display flex

9896.08 -> so that means that flexbox containers by

9898.8 -> default our display block and hopefully

9901.359 -> you remember from previously that

9902.72 -> display block takes up all the available

9904.88 -> space in the horizontal axis

9907.52 -> and there is also one of the three

9909.2 -> ingredients you need in order to center

9911.92 -> an element using margins so hopefully

9914.8 -> you remember from the google project how

9916.72 -> to center block elements so go ahead and

9919.12 -> give this one your best shot and then i

9921.12 -> will show you the solution as well when

9922.56 -> you return back to me

9928.88 -> okay let's do this i'll start by setting

9931.2 -> the width

9932.399 -> to 400 pixels like that now you can see

9934.64 -> if we enlarge the screen the card is

9937.04 -> stuck to the left-hand side of the

9938.72 -> website

9940.16 -> so in order to fix that and instead

9942 -> center it we'll use margins and

9944 -> hopefully you remember that we'll do

9945.76 -> margin

9946.8 -> left

9947.68 -> and set that to auto that pushes it all

9950.479 -> the way to the right hand side because

9952.16 -> all of the margin is now on the left

9953.68 -> hand side but then in order to even it

9956.24 -> out and center it we'll do margin

9958.8 -> right as well and set that to auto

9962.08 -> and the result of having an equal margin

9964.56 -> on the left hand side and the right hand

9966 -> side is that the card is centered so

9969.12 -> great job on solving this challenge

9970.96 -> let's move on

9974.96 -> okay now let's talk a little bit about

9977.279 -> css inheritance and why is that

9980.16 -> important well css inheritance allows

9982.8 -> you to write so-called dryer code and

9985.6 -> dry hair stands for don't repeat

9988.08 -> yourself meaning that with css

9990.24 -> inheritance you can write less code

9992.24 -> though still receive the same result and

9994.72 -> that's a good thing because less code

9996.88 -> means a smaller surface area for bugs

9999.76 -> and it also means that you will be a

10001.359 -> more efficient developer

10003.359 -> so let's have a look at how css

10005.439 -> inheritance works in practice

10007.76 -> here i've pulled in a wikipedia article

10009.92 -> in our mini browser a really wacky

10012.08 -> article about a dancing plague that

10014.24 -> happened in 1518

10016.399 -> in modern day france where either dozens

10018.88 -> or hundreds of people took to the street

10021.279 -> and danced for days without no one

10023.52 -> really knowing the reason so this is

10025.6 -> really weird but properly documented

10028.24 -> from multiple sources and here is an

10030 -> illustration i have no idea what caused

10033.04 -> this dance epidemic but i think the

10035.12 -> modern theory about their grains being

10038 -> poisoned by fungus that gave them the

10040.319 -> same high as you get from lsd sounds

10042.96 -> pretty reasonable

10044.479 -> anyway let's not get too far into this

10046.72 -> rabbit hole what i want to do is use

10049.04 -> this article in order to show you how

10051.359 -> inheritance works

10053.12 -> so if we head over to the html here you

10055.279 -> can see that we are using a bunch of

10056.8 -> different tags h1 h4 h2 paragraph and so

10060.96 -> forth and let's now say that we want the

10063.439 -> text in this article to be aligned to

10065.279 -> the center and not to the left side well

10067.84 -> then a very poor way of solving that

10069.84 -> would be to target the age one first and

10072.24 -> then do text align

10074.479 -> center like that and then the center is

10076.64 -> text and then we can copy that we can do

10080 -> the same for the h2 and there you see

10082.08 -> the h2 is centered

10084 -> and then we can do it for the

10085.76 -> paragraph like that and so on and so on

10089.04 -> however

10090.08 -> this is not a drive we are repeating

10092 -> ourselves a lot here and it's not

10094 -> necessary because

10095.68 -> since

10096.8 -> the h1 and the h4 and all of these live

10100.24 -> inside of the body they will also

10102.479 -> inherit some properties from the body

10104.88 -> tag so what we can do instead is just

10107.68 -> delete all of these now it's back to

10109.84 -> left aligned and then here we can add

10112.479 -> text align

10114.319 -> enter like that

10115.76 -> now all of these

10117.84 -> elements inside of the body are centered

10120.88 -> so as simple as that however there's

10123.279 -> only a certain set of properties that

10125.84 -> are inherited and actually most

10127.92 -> properties are not inherited so then

10130.08 -> you're probably wondering well how do i

10131.6 -> know which are inherited well let's do

10134.64 -> what we always do when we are unsure of

10136.399 -> something when we're coding we'll google

10138.479 -> it which css properties are inherited

10141.04 -> here's the stack overflow question let's

10142.88 -> click into that

10144.16 -> and scroll down to the first answer and

10146 -> you can see here is a list of all

10147.52 -> inheritable properties you can see it's

10150 -> down to 19 if we scroll a bit down down

10152.16 -> to 41 in total that is quite a lot

10155.68 -> however you only need to care about very

10158.16 -> few of these one of them being the text

10160.56 -> line that you just saw and the others

10162.72 -> being the font properties so font family

10165.6 -> font weight font size and so on and

10168 -> finally also the color other than that

10170.64 -> don't worry about any of these at this

10172.56 -> point you're going to learn some of them

10174.24 -> later but to be completely honest

10176.08 -> there's a ton of css properties here i

10178.08 -> have never heard about before i recorded

10180.08 -> this scrim okay now it's time to get

10182.88 -> your hand on the keyboard so i want you

10185.6 -> to navigate to this stack overflow

10188 -> question this one right here

10189.84 -> and then pick a few random inherited css

10192.56 -> properties

10193.6 -> and then add them to the body tag up

10195.439 -> here to see how they work

10197.6 -> you probably have to google them to

10199.6 -> figure out what kind of value you should

10201.359 -> set to the properties but that's also

10203.04 -> just good practice now some of these

10205.279 -> just warn you are meant for screen

10207.279 -> readers or audio for for example speech

10209.84 -> rate and volume and stuff like that so

10212.24 -> they might not result in any visual

10214 -> change on the page but others will so

10216.319 -> just pick a few try it out see how it

10218.64 -> works in order to experiment a little

10220.56 -> bit you can click on this image to get

10222.64 -> to the stack overflow question

10224.88 -> and then when you have experimented with

10226.64 -> a couple of properties i will see you

10228.56 -> back in the next scrim

10233.6 -> okay now it's time for a challenge in

10236.08 -> the business card project because you

10238.319 -> are going to center the text inside of

10240.56 -> the paragraph and the h4 elements

10243.6 -> and that is the

10244.96 -> paragraph right here which says

10246.399 -> front-end developer and the h4 right

10248.72 -> here

10249.6 -> because as you can see

10251.04 -> both of those elements are now crammed

10253.52 -> all the way to the left hand side

10255.2 -> whereas in our finished design

10257.439 -> they are aligned at the center of this

10260 -> flex children

10261.6 -> directly underneath the name pair harold

10264.16 -> borgen and if you're wondering why we're

10266.08 -> not caring about centering this one it's

10268.24 -> because it takes up the full width of

10270.56 -> the container so you can't center or

10272.64 -> left or right align it because it takes

10274.319 -> up the full width anyway it is the

10276.16 -> element that actually decides how wide

10278.8 -> this container should be

10280.8 -> so

10281.52 -> you will only see the paragraph and the

10283.68 -> h4 change when you fix this

10286.319 -> and the way you should do it is by only

10287.84 -> adding one property and then have

10290.319 -> inheritance take care of applying that

10293.439 -> property to both elements so you're only

10295.68 -> going to write one line of code i'm not

10297.76 -> going to tell you where you should add

10299.439 -> that line of code you have to figure

10301.12 -> that out on your own and i'm also not

10302.96 -> going to tell you what the property is

10304.479 -> called for the value you'll give it but

10306.399 -> you have seen it before

10308 -> so hopefully it's not that foreign to

10309.6 -> you so jump into the code and try to

10311.84 -> solve this challenge now then of course

10313.92 -> revert back to me when you want to see

10315.6 -> my solution

10321.52 -> okay hopefully that went well now we're

10324.16 -> going to use the text align property and

10327.04 -> set it to center

10328.64 -> but before we do that we need to decide

10331.04 -> which element we should target with that

10333.359 -> property should we add it to the entire

10335.6 -> body for example if so it'll inherit

10337.84 -> down

10338.88 -> from the body

10340.319 -> into the card and then into our flex

10343.279 -> children right here and then finally to

10345.359 -> these elements as well that works

10346.96 -> perfectly fine we can actually try it

10349.439 -> text align

10351.279 -> center and boom

10352.8 -> these two are now centered however

10355.04 -> imagine that this card is a part of a

10356.64 -> bigger website if so we've now centered

10359.6 -> all text inside of the body

10362.72 -> which is where all of the html both now

10365.2 -> and in the future will live so this

10367.2 -> might have second order consequences

10369.04 -> perhaps you want to have a nav bar with

10370.8 -> a title that isn't text align center but

10372.96 -> rather text line right or left

10375.12 -> so actually i think it's better to scope

10377.04 -> this to for example our card we at least

10379.68 -> know now that all the text we currently

10381.6 -> have in our card should be aligned to

10383.68 -> the center so let's do that instead

10386.08 -> let's just remove it from the body and

10387.76 -> paste it in here and now we're not

10389.279 -> causing any unwanted second order

10391.2 -> effects outside of the card so this is

10393.84 -> in my opinion a better solution but if

10395.84 -> you added it to the body that is a

10397.359 -> perfectly valid solution as well so

10399.359 -> don't feel that you did a mistake in

10400.96 -> coding there's always plenty of ways to

10402.88 -> solve things and there's rarely one

10404.88 -> right answer there's just consequences

10406.96 -> for whatever choice you make so really

10409.359 -> good job doing this let's move on

10414.56 -> all right now the fun stuff remains

10416.88 -> which is adding colors according to the

10419.12 -> specified design here so this is a

10421.04 -> really rewarding little challenge

10422.88 -> that'll make a ton of difference as

10424.64 -> you'll go from this boring white layout

10426.64 -> here to a nice colorful layout so you're

10429.84 -> going to add these three colors as you

10432.08 -> can see i've added the hexadecimal

10434.399 -> values for each of the colors the black

10436.88 -> the blue and the purple

10438.64 -> the purple is the border at the bottom

10440.72 -> here the blue is the background color of

10442.88 -> course and then finally you might wonder

10444.64 -> well what's the black well that is

10446.479 -> actually the text color as the text here

10449.2 -> isn't pure black

10450.96 -> as it uses this shade of black instead

10453.92 -> now you might wonder well

10455.84 -> how do i create this order at the bottom

10458 -> here i've only learned how to create

10459.6 -> borders around an entire element

10461.6 -> previously well the way to solve any

10463.84 -> problem when coding is to google it so

10466.56 -> let's just write border bottom css in

10469.12 -> google there you can see a w3schools

10471.439 -> article click in on it and here it has

10473.92 -> some code examples which we can zoom in

10475.84 -> on

10476.56 -> set the style of the bottom border for

10478.72 -> different elements and here it shows us

10481.2 -> how to set the border bottom so we do

10483.04 -> border dash bottom and then for example

10485.6 -> 5px solid red well that's exactly how

10488.88 -> we'd set the border itself except that

10491.439 -> we would omit this dash bottom in the

10494.08 -> property name so you'll use the exact

10496.399 -> same technique you've used for the

10497.84 -> entire border just with this extra word

10500.479 -> added to the end so hopefully you'll be

10502.319 -> able to do that so here is the design

10505.359 -> and a final thing i'm going to do before

10507.52 -> i'll leave it to you is to remove these

10510.399 -> blue borders here because we don't need

10512.479 -> them anymore so let's head into the html

10515.76 -> i'm going to mark the border blue

10517.76 -> utility class we've added do command

10520.319 -> plus d that enables you to select

10522.479 -> multiple instances of whatever you've

10524.479 -> highlighted and then

10526.64 -> boom i'm going to remove it like that

10529.2 -> then also we don't need any class in the

10531.92 -> div

10532.8 -> for this flex children anymore in the

10535.12 -> code our borders are gone

10537.439 -> i'll leave this for now

10539.279 -> in case you want to add it back again

10540.96 -> but now it's your turn

10542.88 -> go ahead and try to solve this challenge

10544.8 -> and then of course i will show you the

10546.08 -> solution when you return back to me

10552.8 -> okay hopefully that went well let's now

10555.2 -> do it together i'm going to start with

10557.2 -> the blue background as that'll make the

10559.2 -> biggest difference so i'll do

10561.2 -> background

10562.56 -> and copy this hex value like that very

10565.84 -> good

10566.8 -> then i'll do the text color that is

10569.04 -> color

10570 -> and copy the one right here

10572.64 -> yes not as visible as the previous

10574.64 -> change but something surely happened

10576.96 -> we're now using that shade of black for

10578.88 -> the text and finally the purple border

10581.359 -> bottom will be added by doing border

10583.6 -> dash

10584.56 -> autumn

10585.52 -> and then let's try two pixels and we

10588 -> want to use solid

10589.84 -> then the purple color

10591.92 -> okay we can see a thin border at the

10593.76 -> bottom let's have a look at the design

10596.319 -> it looks like it is definitely thicker

10597.92 -> here so let's crank it up a little bit

10600 -> for example six pixels

10602.24 -> yes that looks pretty good to me

10604.88 -> actually so

10606.56 -> really good job reaching this far you

10608.72 -> are very close to the end right now so

10610.56 -> let's just keep up this great pace and

10613.04 -> finish up this project over the next few

10615.12 -> scripts

10619.12 -> okay now i want to talk a little bit

10620.8 -> about fonts because fonts are actually

10622.64 -> really important let's say that you for

10624.479 -> example have created a computer

10626.24 -> specialist company called click lovers

10628.72 -> well you might want to think about which

10630.399 -> font you choose in that case or if

10632.24 -> you're the owner of the megaflix shop

10634.479 -> you should also think carefully about

10636 -> which font you choose finally if you are

10638.16 -> the head of the wig and pen association

10640.88 -> make sure that your font spaces out

10642.64 -> words correctly now these are of course

10645.359 -> extreme cases and they're all on prints

10647.92 -> you'll rarely see cases as bad as this

10650 -> on the web but fonts really matter

10652.16 -> online as well let's take wikipedia for

10654.24 -> example here is a random article about

10656.08 -> people who have died from laughter as

10657.92 -> you can see wikipedia has this very

10659.52 -> serious nice font but if we change that

10661.84 -> to something like comic sans you can see

10663.92 -> the text gives a whole different type of

10665.68 -> association it went from being very

10667.439 -> serious like this to being more like a

10669.279 -> comic book

10670.399 -> so when you are building projects it is

10672.16 -> important that you choose a font that

10674.24 -> kind of suits your project

10676.479 -> so let's move on to look at how it works

10678.399 -> technically under the hood

10680.08 -> because when you visit a website for

10681.84 -> example scrimba.com you visit it via a

10684.72 -> client that could be your mobile tablet

10686.8 -> desktop or whatever

10688.399 -> what happens is that when you type

10690.92 -> www.scramble.com into the url bar it

10693.359 -> sends a request to scrimbus server and

10696 -> then the server says yeah okay you want

10698.08 -> to visit our website yeah of course here

10700.24 -> you go and it takes everything you need

10702.08 -> in order to run the scrimba in the

10703.52 -> browser that is the html the css the

10706.08 -> javascript the assets which can be

10708.24 -> images and videos and so forth then also

10710.8 -> the recipe for the font and then it

10713.359 -> sends that back to the client

10715.439 -> however for some websites they won't

10717.84 -> send you the recipe for the font over

10720.16 -> the network because they will instead on

10722 -> their website use a font that most

10724.24 -> likely is already pre-installed in your

10727.68 -> client that is also called a web safe

10730.56 -> font meaning that the recipe for

10732.88 -> rendering that font exists in most

10735.359 -> clients now of course there might be

10737.359 -> some clients that don't have that

10738.8 -> specific font but in almost all cases

10741.359 -> it's safe to use one of the web safe

10743.279 -> fonts without sending the recipe for it

10745.92 -> over the network

10747.359 -> so what are these web save fonts well

10750 -> here is an article on v3 schools where

10752.319 -> you can see all of the web save fonts

10754.24 -> for html and css so when you're using

10756.399 -> these you don't have to send the recipe

10758.88 -> for the font over the network

10761.439 -> now for our digital business card we're

10763.359 -> only going to use web save fonts but

10765.68 -> later down the line you'll also learn

10767.12 -> how to pull in external fonts so that

10769.12 -> you can go outside of these 10 fonts as

10771.68 -> they don't really give you a lot of

10773.04 -> flexibility so with that in place let's

10776 -> look at how you actually use a font in

10778.16 -> css

10779.359 -> so in order to set the font you first

10781.439 -> target normally the body and then type

10783.439 -> out font family and then the name of the

10785.76 -> font and here you can see we've typed v

10788.16 -> e and that triggers vs code which is the

10790.8 -> editor powering scrimba to come up with

10793.2 -> suggestions for you you can see it

10794.8 -> doesn't only suggest verdana which is

10796.479 -> the font we want it also adds a bunch of

10798.88 -> other fonts after it

10800.88 -> all separated by comma so if we hit

10803.52 -> enter now boom then we've added what's

10806.08 -> called a font stack and what this means

10808.479 -> is that if the browser finds the verdana

10811.12 -> font installed it finds the recipe for

10813.359 -> that font well then it will use it

10815.279 -> however if it can't find it if verdana

10817.6 -> isn't installed in the client's computer

10819.52 -> then it'll try to find geneva which is a

10821.76 -> pretty similar font if it can't find

10823.68 -> geneva it'll jump on and try tahoma and

10826.24 -> if it can't even find tahoma it says

10828.64 -> well give me any sans serif font and

10832 -> sans serif is a category of fonts so

10834.399 -> here it's just saying give me any font

10836.16 -> from this category and there are mainly

10838.08 -> two categories sans serif and serif here

10841.2 -> you can see an example of both of them

10842.96 -> serif fonts contain these decorative

10845.6 -> strokes at the end of the letters you

10847.52 -> can see it here

10848.96 -> here

10849.92 -> here where's sans serif is without those

10854.08 -> decorative endings

10855.6 -> so sans then means without or not or

10858.64 -> something like that you get the point

10860.88 -> okay that was a lot of theory now it is

10864.16 -> your turn you are going to set the font

10866.319 -> here to verdana and also make sure to

10868.72 -> remember to get the entire font stack so

10870.8 -> that we have backups in case the client

10872.64 -> doesn't include the verdana font

10874.8 -> so go ahead and do that right now

10881.84 -> okay hopefully that went well what you'd

10884.08 -> want to do is font family colon

10887.6 -> start typing and then the editor

10889.6 -> suggests the entire font stack though

10891.92 -> you won't see that now because the

10893.439 -> scrimba dom recorder doesn't record it

10895.84 -> however i can see it so i'm just gonna

10897.52 -> hit enter and boom the editor suggested

10900.319 -> this entire font stack with me

10902.479 -> we have changed the font let's verify

10904.24 -> that by removing it boom yeah that's

10906.399 -> different from this

10908.479 -> so really good job we've actually now

10910.64 -> completed the design for our business

10912.479 -> card however there's a little issue with

10915.12 -> our code because this is how noobs write

10918.16 -> their margins and i want to teach you

10920.16 -> how the pros do it so let's move on to

10922.96 -> the next scrim where you'll learn

10924.399 -> exactly that

10928.479 -> okay now it's time to learn about the

10930.72 -> shorthands for margin and padding and

10933.439 -> you've actually been exposed to one of

10935.04 -> them already which is that if you have

10937.2 -> the same value on the margin top right

10939.84 -> bottom and left you can reduce those

10942 -> four lines into one margin 10px then the

10945.439 -> browser will take this 10px and apply

10947.76 -> them to all sides so these four lines

10950.399 -> are identical to this one down here now

10952.8 -> the question becomes what happens when

10954.56 -> you have four different values for

10956.319 -> example 10 px 20 px 30 and 40. well if

10959.439 -> so you have to do like this

10961.6 -> margin and then 10 px 20 30 40. so the

10964.8 -> first one is margin top the second one

10966.96 -> is right the third one is bottom and the

10968.64 -> fourth one is left so now you're

10970.399 -> probably thinking well how can i

10972 -> possibly remember this order and the

10974.56 -> trick is to think of the clock

10976.56 -> it starts at the top then goes to the

10978.56 -> right then goes to the bottom and then

10980.399 -> goes to the left so with that in mind i

10983.12 -> want you to improve this code here

10985.52 -> which creates the japanese flag in css

10988.96 -> because as you can see this red circle

10991.12 -> here which is

10992.319 -> a div

10993.6 -> has a few styles applied up here but

10995.84 -> down here we've used the non shorthand

10998.56 -> way to set the margins

11000.64 -> setting some margin on the top so that

11002.24 -> the circle is pushed down

11004.08 -> nothing on the right and the bottom but

11005.52 -> 100 pixels on the left so that it's

11007.439 -> pushed to more or less the center of the

11009.76 -> screen given that the screen is as wide

11012 -> as it is right now so i want you to

11015.2 -> translate this into using the margin

11017.52 -> shorthand instead go ahead and do that

11020.08 -> right now

11025.68 -> okay hopefully that went well i'm going

11028.16 -> to actually comment these lines out now

11030.64 -> you can see the red circle is up in the

11032.8 -> left corner and then i'm going to do

11034.64 -> margin starting at the top should be 40

11037.279 -> pixels then the right side 0 pixels and

11040.72 -> the bottom should also have 0 pixels and

11043.2 -> then the left side which should have 100

11045.84 -> pixels and there we go we are back at

11048.399 -> the exact same layout so great job if

11050.88 -> you manage to solve this

11052.64 -> now there's another scenario i want to

11054.479 -> teach you about as well which is if we

11056.8 -> have top and bottom as one value and

11060.24 -> right and left as another value if so

11063.279 -> you can actually reduce it to margin and

11066.08 -> then only two values here you do 10px

11069.76 -> and auto because 10px is top and bottom

11072.479 -> and auto is left and right so the way to

11074.88 -> think about this is that the first value

11077.2 -> controls the

11078.88 -> vertical line the y-axis and the second

11081.92 -> value controls the horizontal line also

11084.319 -> known as the x-axis so with that in mind

11087.04 -> let me change this a little bit i'm

11088.8 -> going to go back to the funky way of

11090.88 -> writing this and i'm actually going to

11092.16 -> improve it a little bit because if we

11093.68 -> want to center the circle we shouldn't

11095.84 -> hard code a margin left because that'll

11098.16 -> only work on this screen size when we do

11100.319 -> like this it's not centered anymore so

11102.24 -> let's instead use the better technique

11103.92 -> of using auto on the left hand side and

11107.2 -> the right hand side and also just to

11109.439 -> make sure that no elements are allowed

11111.439 -> to appear directly underneath our circle

11114.96 -> i want to add 40 pixels to the margin

11117.04 -> bottom so now i'll make it a little bit

11119.439 -> easier for you and separate these two

11122.8 -> with this in mind

11124.399 -> can you reduce these four lines into two

11127.439 -> go ahead and give that a shot right now

11134.479 -> okay let's do this

11136.319 -> i'll comment out these and if you

11138.16 -> wondered what shortcut i used for that

11140.479 -> i'm using command plus k plus c but that

11143.359 -> is on a mac keyboard i'll comment this

11145.92 -> out

11146.64 -> then i'll do margin first we'll set the

11148.96 -> vertical axis it should have 40 pixels

11151.2 -> at the top and the bottom so that is

11152.64 -> 40px and then we'll set the horizontal

11155.12 -> axis which is auto like that and boom

11158 -> there we go we have it centered at least

11160.64 -> horizontally regardless of how wide the

11162.96 -> screen is and we have reduced four lines

11165.68 -> into one so great job let's move on

11171.52 -> okay now you're gonna take what you've

11173.2 -> learned about the margin shorthand and

11175.68 -> use that in order to reduce these two

11178.479 -> lines into one so you're going to

11180.56 -> replace the two margin properties with a

11183.04 -> single margin shorthand and of course

11185.2 -> after you've done that the card should

11187.2 -> still be centered as it is now

11189.92 -> so go ahead and give this one your best

11192.16 -> shot

11197.52 -> okay let's do this so i'm going to start

11200.24 -> by removing both of these

11202.479 -> now you can see the card is aligned on

11204.16 -> the left side

11206 -> so in order to fix this we'll do margin

11208.72 -> and then the first property we'll set

11210.96 -> will be the vertical line meaning margin

11213.359 -> top and margin bottom because we're only

11215.6 -> going to set two values and when we do

11217.52 -> that each of the value dictates two

11219.92 -> sides either top bottom or left right so

11222.479 -> we'll set zero as the first value that

11225.2 -> means margin top zero and margin bottom

11227.76 -> zero

11228.64 -> then for the second value which dictates

11231.04 -> the horizontal margin meaning left hand

11233.279 -> side and right hand side we'll set of

11235.2 -> course auto and there

11237.84 -> you see now the card is still centered

11240.479 -> and we have reduced two lines into one

11242.64 -> so great job solving this challenge

11248.16 -> last time we deployed a project we first

11250.56 -> added our code to netlify which then

11252.8 -> again took care of deploying our project

11255.12 -> to the web now while this works

11257.2 -> perfectly fine the way the pros do it is

11259.76 -> to go via an intermediate service and

11262.24 -> step called github and then let github

11264.88 -> take care of sending off the code to

11266.88 -> netlify so that it's deployed to the web

11269.439 -> and the reason you want this kind of

11270.88 -> architecture is because github allows

11272.88 -> you to collaborate on your code with

11275.359 -> other developers so now we are going to

11277.92 -> deploy your business card using this

11280.399 -> technique the first thing you need to do

11282.16 -> is head over to github if you're

11283.76 -> watching this course on scrimba you can

11285.68 -> just click on this slide right here but

11287.76 -> if you're following us on youtube just

11289.76 -> head over to github.com and you'll get

11291.52 -> to the exact same page once you're there

11294.319 -> i want you to click at the sign up

11296 -> button that'll open up a form where you

11297.92 -> have to add your email create a password

11300.399 -> and also choose a username once you've

11302.64 -> done all that click the continue button

11304.88 -> which then sends you to this onboarding

11306.72 -> screen where you can add a little bit of

11308.08 -> information about yourself or just click

11310 -> on the skip personalization option if

11312.56 -> you are impatient once you've done this

11314.319 -> you'll see a dashboard yours is probably

11316.96 -> not as filled with information as mine

11319.279 -> though that doesn't matter what we're

11320.64 -> going to do now is click on the plus

11322.319 -> icon in the top right corner there it

11324.56 -> opens up a menu where you are to choose

11326.399 -> new repository the repository is the

11329.279 -> backbone of any software project this is

11331.84 -> where you'll find all the project files

11334 -> and github along with the git protocol

11336.88 -> takes care of tracking all the changes

11339.12 -> that has been done to the repository

11341.359 -> from its birth though we're getting

11343.279 -> ahead of ourselves right now we are just

11344.8 -> going to give it a name which you type

11346.479 -> in here in the repository name field

11348.64 -> like that i'm going to call it business

11350.16 -> card and then i'm not going to touch any

11352 -> of the options here i'm just going to

11353.52 -> scroll down and click create repository

11356.08 -> and there we go now we have to upload

11358.64 -> our files we can do that in many

11360.72 -> different ways right now we're just

11362.56 -> going to do the very simplest one so

11364.88 -> what i want you to do is click on the

11366.399 -> uploading and existing file link right

11368.64 -> here as that'll take you to a drag and

11370.72 -> drop field quite similar to what we saw

11372.8 -> at netlify earlier here i want you to

11375.2 -> open up the business card folder which

11377.68 -> you created on your local computer in

11379.68 -> the previous scrim mark all of the files

11382.64 -> and then just drag and drop them into

11384.72 -> the rectangle at github once you've done

11386.88 -> that you'll see all of your files listed

11389.12 -> just scroll a little bit down and then

11390.8 -> we have to do something called commit

11392.8 -> changes which might seem a little bit

11394.64 -> weird and complicated but don't worry

11396.56 -> about that right now i'm just going to

11398.24 -> go with the recommended text add files

11401.04 -> via upload and then hit commit changes

11404.399 -> and boom there we go we have a

11406.64 -> repository on github which includes all

11409.12 -> the code we need for our business card

11411.6 -> now if you were to collaborate with

11413.439 -> other developers on this project they

11415.359 -> would push their code up to this

11417.359 -> specific repository and you would also

11419.279 -> probably create issues for tasks you

11421.359 -> want to do and work with something

11422.88 -> called pull requests which is when you

11424.479 -> want to merge someone's changes into the

11427.12 -> code base and there's also a ton of

11428.88 -> other things you can do here but we're

11430.399 -> not going to worry about any of that

11432 -> right now because the only thing we want

11433.6 -> to use this repository for right now is

11436 -> as an intermediate step before our

11438.16 -> deployment so let's head over to netlify

11441.12 -> and make sure you're logged in so you

11442.88 -> see the previous project we deployed and

11445.359 -> right besides it you can see this button

11447.12 -> called add new site click on it and

11449.439 -> choose import an existing project here

11452.08 -> you're able to choose github click on

11454.16 -> that and it'll open this pop-up menu

11456.24 -> where github asks where you want to

11457.92 -> install netfly because that's what

11459.68 -> you're doing now we're installing

11461.279 -> netlify on our github profile click on

11463.76 -> your github username in my case peer

11465.68 -> borgin and here i'm just going to leave

11467.6 -> all the settings as they are scroll down

11469.84 -> and hit install and there we go now you

11472.319 -> can see that netlify has pulled in your

11474.88 -> github profile and has your repositories

11477.6 -> listed i have a bunch of repositories so

11479.76 -> i'll have to search for the business

11481.12 -> card i'll write business and there we

11482.88 -> can see it when i click on this

11484.319 -> repository it is imported into netlify

11487.12 -> and here i can adjust some settings but

11488.88 -> i'm not going to do any of that as usual

11490.96 -> just scroll down to the bottom and hit

11492.88 -> deploy site and there we go the

11495.359 -> deployment is now in progress so we'll

11497.2 -> have to wait a little bit and then once

11499.279 -> this image turns into a screenshot of

11501.52 -> your site it is deployed so clicking on

11504.08 -> this link will open up our business card

11506.96 -> really good job though i hope your

11509.68 -> business card looks a lot cooler than

11511.76 -> this as you were to personalize it in

11513.68 -> the previous scrim

11515.2 -> actually to prove to me that you and

11517.439 -> personalize this i want you to head over

11519.76 -> to twitter and share your deployed

11521.84 -> business card do as michael rocket does

11523.76 -> here and mention me if you want to

11525.6 -> alongside a link to your project and

11527.6 -> perhaps even a screenshot of it that

11529.76 -> would be super cool so go ahead and do

11532 -> that right now and then i'll see you in

11533.92 -> the next scrim

11538.16 -> woohoo you've just completed the

11540.16 -> business card section of this course

11542.08 -> that is very well done now let's have a

11545.12 -> little look at what you've learned

11546.8 -> starting out you learned about image alt

11548.8 -> text which is a really important html

11551.12 -> attribute that makes your sites more

11552.88 -> accessible next up you learned about

11554.88 -> flex child containers which means that

11557.279 -> we took this flexbox layout here the

11559.279 -> card and made sure that it only had two

11561.76 -> direct children so that is one container

11564.319 -> and two flex items so that these two

11567.2 -> stacked up besides each other on columns

11569.84 -> however we wanted the content inside of

11571.92 -> the second column to be on rows and for

11574.319 -> that reason we had to turn this flex

11576.64 -> child into a container in itself so that

11579.359 -> these three could stack on top of each

11580.96 -> other you also learned about inheritance

11583.359 -> for example here with the card class

11585.68 -> where we set the text line to center and

11587.84 -> that propagated all the way down from

11590.72 -> the card via the div and down to its

11593.359 -> grandchildren the text elements that

11595.2 -> contain the data for the business card

11597.68 -> and also you learned about shorthands

11599.76 -> more specifically the margin and padding

11601.68 -> shorthands where we instead of

11603.2 -> specifying each margin like the top left

11605.84 -> right and bottom we just use the

11607.439 -> shorthand zero auto to set zero on the

11610.239 -> top and bottom and then auto on the left

11612.399 -> and right

11613.52 -> and then you learned about web save

11615.04 -> fonts which are these fonts that you can

11616.96 -> use pretty much without worrying about

11618.96 -> whether or not they are installed on the

11620.56 -> user's computer because in the overall

11622.399 -> majority of cases they actually are so

11624.399 -> they are safe to use and we took a look

11626.72 -> at color palettes which is critical to

11628.56 -> know about as colors often make or break

11630.8 -> a design and then finally you learned

11632.479 -> about github and how to create a

11634.08 -> repository for github and use that as an

11636.479 -> intermediate step when getting your code

11638.399 -> from your local computer and up to the

11640.399 -> world wide web via a netlife deployment

11643.76 -> so this was a lot of things to learn i

11646.16 -> can totally understand if you are a

11647.6 -> little bit overwhelmed now take a little

11649.6 -> break and let these concepts mature in

11651.52 -> your mind and then i will see you back

11653.279 -> here when you are ready to move on with

11655.359 -> the course

11659.52 -> welcome to the section where you are

11660.88 -> going to build a space exploration site

11663.84 -> here is the example you're gonna build

11665.52 -> as you can see it has this super neat

11667.68 -> background image that animates and it

11669.92 -> really breathes life into the site we're

11672.239 -> also using google fonts to pull in this

11674.64 -> custom space-ish font right here and

11677.439 -> we're doing a lot of interesting things

11679.04 -> with some subtle text shadows this

11681.439 -> underline and more

11683.04 -> so there will be plenty of new things to

11684.88 -> learn in addition to reinforcing html

11687.279 -> and css concepts you've previously

11689.68 -> learned

11690.72 -> so let's launch into this section

11696.319 -> okay let's get started building our

11698.08 -> space expiration site as you can see

11700.72 -> i've set up a basic html structure for

11703.04 -> you here it is very simple as the body

11705.279 -> simply contains an h1 title and a button

11707.92 -> as for the css there is no as we are

11710.16 -> going to add that now so the first thing

11712.239 -> we're going to do is fix the background

11714.399 -> here because we don't want the white

11716.16 -> background we want to have an image of

11717.92 -> the universe in the background later

11719.92 -> down the line we're going to change that

11721.279 -> to an animated image so that it looks

11723.12 -> like a video playing in the background

11724.72 -> which is even cooler but as for now

11727.04 -> we're just going to do a standard

11728.88 -> background image as we're going to work

11730.64 -> on this for a while and i don't want to

11732 -> have an animated image looping in the

11733.92 -> background as we work as i think that's

11735.76 -> a little bit annoying so let's start out

11737.92 -> with just a static background image and

11740.64 -> just so you know background images is

11742.319 -> something different than how you've used

11744.399 -> images up until now where you've done

11746.319 -> img src some kind of jpeg like that

11750.64 -> instead background images are not in the

11752.8 -> html they are added in the css file and

11756.56 -> i'll talk about that let's just find a

11758.319 -> cool background image and then deal with

11760.319 -> how to implement it into our app and the

11762.56 -> service i prefer to use for finding cool

11764.8 -> images for your web design is unsplash

11767.6 -> because the quality of images here are

11769.92 -> really good so they will take your web

11772.239 -> design to new heights and you can use

11775.12 -> them freely however you want so if i

11777.76 -> search here for universe

11779.92 -> we'll get a ton of nice images let's

11781.76 -> scroll a bit down as you can see there's

11783.6 -> plenty of good candidates here but i

11785.359 -> think this one is particularly nice so

11787.6 -> i'm going to click in on it it is

11789.04 -> created by guillermo ferla and you can

11791.279 -> see it's really popular have over 12

11793.2 -> million views already now if we want to

11795.439 -> download this you can click on the icon

11797.359 -> up here and download it range of

11799.279 -> different sizes

11800.56 -> and i've actually done that and placed

11802.56 -> it here in the images folder so here you

11804.479 -> can see universe.jpg

11806.56 -> so let's see how we can add this to our

11809.04 -> app what i'm going to do is target the

11811.279 -> body because we want the image to span

11813.279 -> across the entirety of our page so we

11815.76 -> need to add the background image to the

11817.439 -> body we'll use the background image

11820.479 -> property here we'll utilize something

11822.56 -> called a css function don't worry about

11825.12 -> why it's called the css function

11827.04 -> just remember that the way to do it is

11829.12 -> by writing url

11830.8 -> open parentheses and then inside of the

11832.72 -> parenthesis you refer to the image

11835.359 -> source just as you do in the image with

11838.16 -> the img tag it is using quotes

11841.04 -> so inside of the quotes we'll write the

11842.88 -> path to this exact image and the way we

11845.52 -> do that is first by navigating to the

11847.68 -> images folder so images then slash going

11851.12 -> into the folder choosing the universe

11854.479 -> up jpeg and boom there we go suddenly

11857.84 -> our background changed however there's a

11859.92 -> couple of problems here our h1 is now

11862.56 -> almost invisible since by default the

11864.64 -> text is black and the background is very

11866.88 -> black as well so i'm going to change the

11868.72 -> color to white like that

11872 -> much better

11873.2 -> also this image is thousands of pixels

11876.399 -> wide whereas our browser is not that

11879.04 -> wide so notice that if we make it super

11881.439 -> wide we still only see edge of the

11883.359 -> galaxy more or less the center of the

11885.279 -> image so what we need to do is shrink

11888.64 -> our browser down to like a couple of

11890.239 -> hundred pixels wide which is what we

11892.08 -> want

11892.96 -> and then make our background image

11895.279 -> shrink so that it's squeezed into the

11897.68 -> width of this browser

11899.84 -> the way we do that is background size

11903.84 -> and value cover boom there we go now the

11908.239 -> width of the background image is exactly

11910.8 -> as the width of its container

11913.92 -> which again is exactly as wide as the

11916.08 -> browser itself meaning that the browser

11918.56 -> and the background image has the exact

11920.319 -> same width and it looks pretty good i'm

11922.96 -> not going to give you a challenge on how

11924.64 -> to do this right now as you'll get

11926.56 -> plenty of practice using background

11928.72 -> images later in this course so with that

11931.439 -> let's just move on to the next scrim

11936.88 -> okay in this two part challenge you're

11938.72 -> going to improve the design of our app

11941.439 -> first i want you to center the text and

11943.439 -> button and then style the button

11945.76 -> according to the provided design and

11948 -> that is found here in the slide as you

11950.399 -> can see the button is slightly different

11952.479 -> from how it is right now not too

11955.12 -> different but certainly it has some css

11957.84 -> properties applied and i'm not going to

11959.92 -> tell you which because this is a good

11961.359 -> way for you to train your design eye

11963.92 -> when you design the button i want you to

11965.6 -> use a class in order to select it so not

11968.16 -> just using an element selector like we

11970 -> do here

11971.04 -> so go ahead and give this a shot and

11972.64 -> then i will show you the solution as

11974.239 -> well when you return back to me

11982.56 -> okay let's do this

11984.56 -> first we got to center the text on the

11986.16 -> button and here you can use a range of

11988.319 -> different options either using margins

11990.96 -> or flexbox or text align

11993.6 -> you've learned plenty of ways to center

11995.439 -> elements now

11996.88 -> i'm going to choose the easiest one

11998.64 -> which is to apply a text align center in

12001.92 -> the body element because as you know

12004.08 -> this centers not only the h1 but also

12006.64 -> buttons

12008.16 -> okay with that out of the way let's move

12010.239 -> on to the button

12011.76 -> first i want to give it a class and i

12013.68 -> think btn is a good class name so let's

12016.479 -> add it to the html as well like that and

12019.439 -> run the code so we have it applied in

12021.2 -> the dom

12022.399 -> now let's have a look at this design

12024.88 -> the first thing that is apparent to me

12026.72 -> is that this button has more space

12029.12 -> around the text as you can see here it's

12031.359 -> a bit more crammed so that is the

12033.68 -> padding property

12035.76 -> let's write 10 pixels just on all four

12038.8 -> sides of the padding

12040.479 -> having a look at this button right now

12042.96 -> you can see that this one is a bit more

12046 -> rectangular whereas this one is a bit

12048.479 -> more squared now because in this design

12051.2 -> here

12052.08 -> there's more space on the left and right

12054.239 -> hand side then the top and bottom

12056.72 -> and if you remember the shorthand we can

12058.319 -> do this by for example starting with 5

12061.359 -> pixels on the top and bottom

12063.84 -> and 10 pixels on the left and right

12066.239 -> and that looks much better

12068.96 -> maybe it's a little bit higher so let's

12071.12 -> do 6 and

12073.439 -> 12. that looks pretty good to me

12076.96 -> now the next thing i want to change is

12078.96 -> the background color

12080.64 -> it's not totally apparent but actually

12082.479 -> this one has a white background color

12085.279 -> whereas this one has the default button

12087.359 -> background color which is a bit grayer

12089.359 -> it's not that easy to see because of the

12091.279 -> background here it looks pretty white

12093.439 -> compared to the black background but it

12095.6 -> is actually not entirely white something

12097.439 -> you'd know if you worked with buttons in

12099.359 -> html for a while as they always have a

12102 -> default grayish background color

12105.279 -> background

12106.64 -> white like that okay

12109.12 -> now it suddenly became apparent that it

12111.439 -> also has a border in this default

12113.359 -> styling whereas that's not the case in

12115.68 -> our provided design

12117.279 -> so let's do border

12119.52 -> we can do none like that

12121.6 -> and with that it looks like we have

12123.76 -> completed our design as these two look

12126.16 -> identical as far as i can see so really

12129.04 -> good job let's move on

12134.8 -> okay now you're gonna get a new

12136.56 -> superpower in your tool belt called

12139.12 -> google fonts and that is a service that

12141.6 -> gives you access to over a thousand

12143.6 -> different high quality fonts that you

12145.84 -> can use in your projects

12147.92 -> and the reason you need to learn about

12149.279 -> this now is because the font we have

12151.52 -> here isn't good enough in my opinion it

12154.16 -> is a little bit boring for a space

12156.08 -> project what we want instead is

12158.479 -> something like this which looks a lot

12160.16 -> more sci-fi-ish however this font isn't

12163.439 -> one of the so-called web save fonts you

12165.439 -> learned about earlier which is already

12167.439 -> installed in most operating systems this

12169.76 -> is a very custom font so we have to use

12172.239 -> google fonts in order to bring it into

12174.72 -> our project

12175.84 -> and here you can see the google fonts

12177.439 -> interface it's located at

12178.72 -> font.google.com

12180.88 -> and if we scroll a bit down you can see

12182.56 -> it contains a range of very different

12184.479 -> fonts

12185.52 -> now it has a search feature up in the

12187.76 -> top left corner but it's actually not

12190.08 -> that good to be honest it's better to

12192.239 -> just use regular google search when

12194.16 -> searching for google fonts so let's do

12196.479 -> that instead the way i found the font

12198.72 -> we're going to use now is just by

12200.319 -> googling sci-fi

12201.92 -> and then google font and then google

12203.84 -> suggested this orbitron font so if we

12206.399 -> click into it you can see here it is if

12208.56 -> we scroll a bit down you can see we have

12210.56 -> to choose specifically which styles we

12213.359 -> want so i'm going to choose this 400

12216.16 -> regular style by clicking on select this

12218.64 -> style like that and you can see the

12221.279 -> panel on the right hand side and it is

12223.52 -> clear that we have chosen the orbitron

12225.279 -> font and the regular 400 font weight

12228.64 -> also let's click on this extra bold in

12231.12 -> case we want to build some text on our

12232.72 -> site and there we have that one as well

12235.6 -> now if we want to use this on the web we

12237.76 -> can embed it by simply copying a piece

12240 -> of code into the head of our html and

12242.64 -> that is the code you want to copy

12245.6 -> and then paste it in

12247.04 -> exactly here next up we also have to

12249.76 -> specify it in our css and that's done by

12252.56 -> pasting this line

12254.64 -> into our css for example in the body tag

12258.56 -> i'm not going to do this for you though

12260.399 -> scrimba is all about you doing things on

12262.56 -> your own getting your hands on the

12264.16 -> keyboard so now i want you to head over

12266.399 -> to google fonts fetch the orbitron font

12269.52 -> in these two styles

12271.359 -> and then do whatever you need to do in

12272.8 -> order to make the orbitron font render

12274.72 -> properly on our site i'm going to leave

12276.96 -> you here with this screenshot because

12279.439 -> make sure to compare

12281.279 -> this design with what you get in the

12284 -> mini browser because there might be

12286.16 -> something you need to do down in the btn

12288 -> selector and hopefully you're able to

12290.319 -> spot that if not no worries because i'll

12292.399 -> be here showing you the solution when

12294.239 -> you return back to me

12295.76 -> good luck

12303.76 -> okay let's do this

12305.68 -> so first we're to take this snippet of

12308.239 -> code right here and then paste it into

12310.56 -> our html like that we'll then need to

12313.2 -> run the code so that it is imported into

12315.92 -> our project

12317.04 -> and then next up it is the styles which

12319.439 -> we're going to set here let's copy that

12321.92 -> line of code and then simply paste it in

12325.12 -> right here and boom drawing the

12327.04 -> exploration now looks like our project

12330.08 -> right here

12331.52 -> however this one also has the orbitron

12334.64 -> font applied to the button

12336.479 -> but we don't have that we still use that

12338.16 -> boring old font that we had previously

12340.72 -> why is that well that's actually because

12342.8 -> buttons

12343.92 -> don't inherit font families

12346.56 -> so here the h1 has inherited the font

12349.439 -> property from body but the button has

12351.6 -> not so what we need to do here is

12354 -> specifically tell the button to have

12357.2 -> this font family and we can do that in

12359.6 -> two ways one way is through using a css

12362.72 -> value you haven't learned yet and that

12364.56 -> is

12366 -> the inherit keyword

12368.239 -> as you can see now it does inherit from

12370.72 -> the body but only because we've

12372.08 -> specifically told the button to do

12373.76 -> exactly that what i'm assuming you did

12375.6 -> instead which works perfectly fine as

12377.439 -> well is simply to paste in the font

12379.68 -> family orbitron on the btn class as you

12382.479 -> can see that also works well so

12384.96 -> hopefully you were able to spot this if

12387.12 -> not nowhere is it was just a little

12389.04 -> gotcha i left here let's move on to the

12391.439 -> next scrim

12395.76 -> before we move on from the subject of

12397.6 -> fonts there's one more technique i want

12399.68 -> to teach you because in some cases

12401.84 -> google fonts might actually not be

12403.84 -> enough and that's typically the case if

12405.68 -> you want very specific fonts for example

12408.399 -> let's say that you are building a

12409.84 -> godfather website in honor of the

12411.84 -> classic film well in that case you'd

12414.239 -> probably want to get a hold of the real

12416.239 -> godfather font though google fonts

12419.12 -> doesn't host that one because it is

12420.88 -> simply too specific for them to care

12423.04 -> about

12423.92 -> so you'd most likely have to find this

12425.92 -> font somewhere on the world wide web and

12428.239 -> there are great services for this for

12429.92 -> example

12431.479 -> 1001font.com there if you search for

12434.08 -> godfather they actually have it so you

12436.399 -> can click into it scroll a little bit

12438 -> down and click download so what you then

12440.399 -> did is kind of downloaded the recipe for

12442.88 -> the font and if you open up the folder

12444.64 -> you got you'll see a ttf file that's a

12447.68 -> file format for fonts what you then can

12450.08 -> do is simply drag and drop that file

12453.2 -> into your file system like i have done

12455.439 -> right here you can see i have the

12457.319 -> corleone.ttf file now what i can do is

12460 -> use the add font face rule in css so

12463.2 -> simply writing an at and then font dash

12465.76 -> face and then open up the curly brackets

12468 -> and write two properties the source

12470.16 -> which should use the url technique

12472.479 -> pointing to the ttf file which i'm doing

12475.2 -> right here and also i need to tell css

12477.6 -> what name i want to give this font in my

12479.84 -> style sheets and i'm just going to

12481.279 -> choose corleona for now but i could have

12483.12 -> chosen whatever name i wanted now i'm

12485.76 -> able to target the h1 and use this font

12488.72 -> family so i'll do font family

12492.64 -> or leona and there you can see i have

12494.8 -> the godfather font so i'm off to a great

12496.96 -> start on my tribute page so now what i

12499.6 -> think you should do is actually try and

12501.04 -> do this yourself find a random font

12502.96 -> online download it so you get a hold of

12505.279 -> the ttf file drag and drop that ttf file

12508.56 -> into the file system here on scrimba and

12510.56 -> use the add font face property to make

12512.64 -> that font available in your stylesheets

12515.2 -> once you've done that i will see you in

12517.04 -> the next scrim

12521.6 -> now you are going to learn about the

12523.439 -> span tag because in the next scrim you

12525.68 -> are going to create an underline under

12527.6 -> the exploration word and in order to

12529.68 -> achieve that you need the span tag so

12532.319 -> let's take a little step back from our

12534 -> space exploration site and learn all

12536.399 -> about this awesome tag

12538.479 -> the example we're going to use in order

12540 -> to learn the span tag is of banner ads

12543.52 -> you've probably seen these before and

12544.96 -> you've browsed the web for example on

12546.72 -> new sites

12547.92 -> and many of these are actually so-called

12549.68 -> html5 ads where they're built using html

12553.439 -> and css and it's actually a little bit

12555.92 -> sad how many clever developers in this

12558.239 -> world who are spending all of their time

12560.319 -> in their best years and getting more

12562.16 -> people to click on these ads through

12564 -> making them more invasive more

12566.239 -> eye-catching and more targeted but

12569.2 -> that's the name of the game so we just

12570.96 -> have to accept it and you are now going

12572.8 -> to do exactly that you are going to make

12575.279 -> this ad more eye-catching so that

12577.279 -> hopefully more people click on it and

12579.439 -> visit our scammy casino

12581.76 -> so how do we do this well looking at the

12584 -> html you can see the div wrapper has a

12586.56 -> class of add which sets the background

12589.12 -> color border and the text alignment

12591.2 -> inside of this green rectangle and there

12593.68 -> are two elements inside of the ad that

12595.359 -> is the h1 and the h3 and it says click

12598.96 -> here so what we want to do is make this

12601.52 -> hair word pop out more so how do we do

12604.479 -> that we can't target the h3 itself

12607.12 -> because that'll style the entire

12609.2 -> sentence we only want to style this word

12611.76 -> and this is where spans come in here we

12614.399 -> can write span like that

12616.479 -> open the tag before the word and close

12618.319 -> it directly afterward if we now run this

12620.88 -> code seemingly nothing has happened

12622.8 -> because spans are invisible unless you

12625.279 -> give them styling

12626.64 -> so they're kind of like the div as divs

12629.12 -> neither provide any styling unless you

12631.279 -> give it to it specifically although the

12633.439 -> difference is that spans are in line

12635.6 -> whereas divs are block-based

12638 -> so to demonstrate that if we change this

12640.239 -> to div what would happen to run the code

12643.2 -> is that it would break the hair word

12645.439 -> onto a new line because divs are display

12648.319 -> block they take up all the available

12650 -> space in the width

12651.84 -> where spans do not do that only take up

12654.64 -> the space they need in order to make

12656.319 -> room for this content

12658.399 -> what we now can do is give this span a

12661.359 -> class

12662.319 -> i'm going to call it cta that's short

12664.479 -> for call to action because that's

12666.399 -> normally what these kinds of elements

12668.319 -> are called and in the css we'll do cta

12671.84 -> let's just see that it works

12674.08 -> by doing color red yes there we can see

12677.68 -> we have now only targeted the hear word

12680 -> this doesn't look particularly good

12681.6 -> though so let's instead do something

12683.76 -> that makes it look a bit more like a

12685.6 -> button

12686.399 -> for that we need a border in my opinion

12688.64 -> for example two pixels and we want it to

12690.64 -> be solid and here let's steal the color

12693.92 -> from the border around the ad so that we

12696.399 -> reuse it a little bit i think that can

12698.08 -> look nice yeah okay here you can see

12700.56 -> that it's added a border around the word

12703.359 -> it is very crammed on the left and right

12705.439 -> hand side so let's try to add some

12707.04 -> padding let's just do five pixels or

12709.6 -> something

12710.72 -> actually i think we can do five pixels

12712.479 -> on the top and 10 pixels on the left and

12715.2 -> right yeah that looks much better and

12717.2 -> then to make it pop out even more so

12719.84 -> that it doesn't blend into the overall

12721.68 -> background we have on the ad itself

12724.479 -> so i'm going to do background well now i

12726.8 -> happen to have a nice brown color here

12729.439 -> which i think looks decent with the

12731.439 -> other colors here

12732.96 -> so now it is a lot more easier to see

12735.84 -> that you are going to click here on this

12737.68 -> thing that looks like a button as it

12739.12 -> stands out more and hopefully we have

12741.04 -> increased the click-through rate with

12743.359 -> 0.02

12745.2 -> and thus made our boss really happy

12748 -> so great job

12749.84 -> now that you've learned this let's

12751.12 -> return back to the space exploration

12753.12 -> site and put your new skills to the test

12759.68 -> okay now you're going to create this

12761.76 -> neat little underline under the

12763.76 -> exploration word

12765.6 -> and i want you to do that using a span

12768.56 -> and a class as for the specific design

12771.6 -> of the underline and what kind of css

12773.92 -> property you are to use that is

12775.439 -> something you'll have to figure out on

12776.88 -> your own

12777.92 -> so go ahead and give this a shot good

12779.68 -> luck and i'll see you on the other side

12785.279 -> okay hopefully that went well

12787.76 -> let's do it i'm going to start with

12789.76 -> adding this spam to the html

12792.56 -> it should wrap the exploration word so

12795.439 -> spam like that

12797.2 -> and then i'm going to give it a class

12799.2 -> i'm going to call this class underline

12801.2 -> because it'll only have one job and that

12803.52 -> is to give the expiration word the

12805.12 -> underline so this class is something

12806.64 -> we've talked about earlier it's a

12808 -> utility class it only has one job and

12810.399 -> that is setting a single css property so

12813.04 -> if we run the code now nothing has

12815.12 -> seemingly happened but we do have this

12817.6 -> in our dom meaning we can select it in

12820.16 -> the css we'll do dot underline

12823.68 -> like that let's just try and set the

12826 -> color to red to see that it works and

12827.84 -> yes it does indeed work

12830.239 -> but that's not the effect we want we

12832.56 -> want to set the underline and what is

12835.52 -> this underline well it's actually just a

12838.08 -> border bottom we do border

12840.479 -> bottom like that

12842.16 -> two pixels

12843.76 -> solid

12845.92 -> white you can see yes we indeed get a

12848.72 -> border under it

12850.72 -> however this border looks a little bit

12852.64 -> thicker so i don't think two pixels is

12854.64 -> the correct thickness i think we want to

12856.239 -> have something like four

12858.479 -> yes

12859.439 -> that looks pretty good to me

12861.84 -> so we have solved this challenge and we

12864.16 -> are ready to move on

12868.72 -> okay now we are going to add this spacex

12871.52 -> logo at the top here and while you're

12874.16 -> adding it you're going to learn a whole

12875.76 -> new concept in html and css

12878.64 -> namely a close custom of the class

12881.279 -> attribute which is called the

12883.76 -> id attribute and the way to use it is

12886.56 -> simply by writing id instead of class

12889.359 -> but now you're probably wondering why

12891.359 -> would we use this id if we now try to

12894.239 -> rerun this code you can see that our

12896.56 -> underline is gone

12898.479 -> and that is because when you are using

12900.479 -> an id like this

12902.479 -> you have to refer to it in the css not

12905.359 -> by using a dot but instead by using a

12907.76 -> hashtag there you can see now our border

12910.56 -> bottom is again applied to our example

12913.2 -> so now you're probably wondering well

12914.8 -> why would we want to use this it just

12916.64 -> further complicates things by having

12918.88 -> both ids and classes to worry about and

12921.76 -> the thing is they serve two different

12923.68 -> scenarios you should use an id if you

12926.64 -> know that your element is unique and

12928.64 -> you'll only use it once so id of

12931.52 -> underline should only be applied once in

12934.16 -> this entire document whereas class is

12937.2 -> something you can reuse again and again

12939.279 -> it's meant for reusage so if you for

12941.439 -> example wanted a button here

12943.92 -> that also said for example f a cues

12947.439 -> then a class is what you use in order to

12949.68 -> make sure that this button has the same

12951.359 -> styling as this button but if you did

12953.52 -> that with ids

12955.52 -> and turned the btn here into an id this

12958.56 -> would be invalid html

12961.359 -> browsers are very forgiving so it

12962.96 -> probably would work technically the

12965.359 -> styling would be applied but you just

12967.2 -> shouldn't do it

12968.96 -> now as for this idea of underline here i

12971.359 -> actually don't think it makes sense to

12972.8 -> use an id

12974.319 -> because this underline here could

12976.239 -> perfectly fine be a part of our design

12978.319 -> system and also be applied at multiple

12980.56 -> other sections and paragraphs throughout

12982.72 -> our entire page as we build out this

12984.88 -> space exploration site so i want to have

12987.359 -> the freedom to be able to reuse this

12989.76 -> later as well even though i'm only using

12991.92 -> it once now so i'm going to turn this

12993.68 -> into a class again

12995.6 -> rerun the example now it's not applied

12998.64 -> and then go from the id selector to the

13001.12 -> class selector in css by replacing the

13003.12 -> hashtag with a dot and there it is

13004.88 -> applied

13006.399 -> so that was a long intro the reason for

13008.8 -> that was that i want you to render this

13010.96 -> spacex logo you can see i've added the

13013.56 -> spacex.png image file up here

13016.96 -> and then i want to give it id

13019.04 -> because this spacex logo at the top here

13021.359 -> is most likely unique we probably don't

13023.279 -> want to have multiple centered spacex

13025.76 -> logos at this size so this is kind of

13028.72 -> our main logo and you can give it that

13030.96 -> id main logo

13033.76 -> then in the css you need to select the

13035.92 -> logo using whatever id you have given it

13038.72 -> and then as you'll see you'll have to

13040 -> reduce its size that's why you need this

13042.479 -> css rule right here because it is far

13044.64 -> too big this image finally i'm going to

13046.72 -> remove this faq button so that we're

13049.359 -> back to our original design now it's

13051.52 -> your turn take over and try to solve

13053.359 -> this challenge

13060.239 -> okay hopefully that went well let's do

13062.96 -> it we're going to render it using an imd

13065.84 -> tag

13067.359 -> and the source will be

13069.439 -> first images and then slash

13072.88 -> spacex dot png

13075.84 -> like that if we run this you can see oh

13077.6 -> wow

13079.84 -> that is not exactly what we were looking

13081.84 -> for it's far too big this image so we

13084.88 -> have to reduce its size and to target it

13087.6 -> we're going to use an id and i'm going

13089.76 -> to call this main logo like that

13092.88 -> now if we head to the style.css

13095.84 -> we'll do hashtag main dash logo and here

13099.279 -> we have to reduce its width so let's try

13102.399 -> with for example

13105.6 -> perhaps this is 200 pixels i don't know

13107.84 -> let's try

13109.2 -> 200 px like that oh

13111.52 -> that was a bit too large in my opinion

13115.2 -> so let's reduce it further

13117.92 -> to 100 pixels and yes that is

13121.6 -> much more like our design in my opinion

13124.88 -> looking pretty good so with that we have

13127.279 -> solved the challenge great job

13133.12 -> now we're going to breathe some more

13134.72 -> life into our example here because

13137.84 -> it works fine with this static jpeg as

13140.8 -> the background image but wouldn't it be

13142.56 -> a lot cooler if it was animated so you

13144.56 -> could see the stars flying around and in

13147.6 -> our images folder we now just happen to

13149.6 -> have a file called galaxy dot web p

13154.16 -> what's that let's just try to replace

13156.72 -> this universe jpeg here with the galaxy

13159.76 -> webp file

13162.239 -> so i'll do galaxy

13164.319 -> dot

13165.12 -> web p and boom

13167.12 -> the galaxy webp is an animated image in

13170.239 -> which you see a bunch of stars around

13172.88 -> the galaxy and to me this looks a lot

13175.359 -> cooler than what we just had

13178.16 -> now you might wonder what this web p

13180.399 -> here is and that is just an image format

13182.72 -> pretty similar to so-called gifs gif and

13186.399 -> gif is what you recognize from all over

13188.239 -> the web in animated images like this one

13190.72 -> right here which you've probably seen

13192.399 -> before so webp is used exactly as gifs

13195.359 -> are on the web however it has a better

13197.76 -> compression so it's more compact and

13199.92 -> doesn't use as much data as gifs use

13202.56 -> when they're sent from a server to a

13204.319 -> client

13205.52 -> so we want to use webp where we can

13208.64 -> and now you might wonder well where did

13210.319 -> you find this galaxy.webp image that is

13213.92 -> on a site called giphy giphy that is a

13217.84 -> search engine for gifs so i just

13219.84 -> navigated to it searched for galaxy

13222.64 -> scrolled a little bit down and found

13224.239 -> this neat looking galaxy gif here

13226.319 -> created by the european space agency now

13229.04 -> this is a slideshow so you can't see

13231.6 -> that this gif is now being animated but

13234.319 -> it actually is because i just saved this

13236.96 -> image to my local computer and then

13239.52 -> uploaded it to the images folder right

13241.52 -> here now if you want you can also click

13243.439 -> on the share button here and click copy

13245.52 -> gift link and then you can simply paste

13248.319 -> that link into this url and then that

13251.279 -> will give as you see the exact same

13253.12 -> result but i prefer to rather use the

13255.92 -> version which we've imported into our

13257.76 -> project right here in case the griffey

13260.16 -> file might change at some point or

13261.76 -> something however for experimentation

13263.92 -> purposes i think you should head over to

13266 -> griffe search for a few images and just

13269.04 -> paste them in right here and see how

13271.12 -> that affects our example just so you've

13272.88 -> got familiar with using giphy and

13274.72 -> pasting external urls into the

13276.96 -> background image property in css

13279.52 -> so go ahead and do that and then i will

13281.68 -> see you in the next scrim

13287.12 -> one thing i like to do when working with

13289.279 -> images as backgrounds is to fetch colors

13292.08 -> from the image and use it in the design

13294.56 -> because that can often look pretty cool

13296.96 -> so let me show you exactly how to do

13298.88 -> that

13299.68 -> we can use coolers these servers you're

13301.6 -> already familiar with because if you

13303.359 -> click on the more option in the nav bar

13305.439 -> you can choose pick palette from photo

13308.08 -> that'll take you to this image picker

13310 -> where you can choose an image by

13311.439 -> clicking on the browse an image and

13313.12 -> either upload the image or paste a url

13315.52 -> to it

13316.96 -> once you've done that you're taken to

13318.399 -> this nice tool

13320.319 -> where you can either drag and drop this

13322.479 -> picker around on the image until you

13324.72 -> find the color you like or you can use

13326.88 -> this range input here as that'll

13329.04 -> automatically try to find interesting

13330.88 -> colors in the image for you and then it

13333.04 -> generates a palette as you can see right

13334.96 -> here

13335.92 -> now let's say we like this palette then

13337.68 -> we'll click export and save palette and

13340.239 -> we have it in our dashboard

13342.56 -> now it only has three colors but that

13344.56 -> doesn't matter i'm only going to use one

13346.239 -> of these that is the blue one because i

13348.64 -> think it would be cool to use this blue

13350.479 -> color

13351.439 -> as the text color on our site so i want

13354.08 -> the h1 and the button text to have that

13356.96 -> bluish color and the way i'm going to do

13358.88 -> that is change the color of the body

13360.72 -> here because that is where the h1 gets

13362.72 -> its color from it is the only element

13365.12 -> inheriting from the body at this point

13367.52 -> so i'm going to do like that this is the

13369.6 -> hexadecimal value i got from coolers and

13372.479 -> as you can see i think it looks pretty

13374.08 -> cool

13374.96 -> and also let's keep the underline white

13377.6 -> because i think it makes sense to have

13378.96 -> that in a different color now moving on

13380.96 -> to the button we'll do

13382.72 -> color

13384.64 -> and paste it in again and there we go

13386.8 -> now here i think actually this applied

13389.2 -> text could be a bit clearer because the

13391.52 -> contrast with the background is just

13393.199 -> okay at this point

13394.88 -> because with this blue color i think the

13397.52 -> thin letters became a bit too thin

13400.64 -> now a final thing i want to do with this

13402.8 -> apply text here is make it a little bit

13405.359 -> bolder make it stand out a bit more and

13407.76 -> luckily we imported

13410.239 -> not only the regular font weight with

13412.72 -> the orbitron font family but also the

13414.8 -> 800 font weight to the extra bolt

13418.72 -> so what we can do now is actually

13421.199 -> do

13422.08 -> font weight

13425.04 -> and then press bold and there you can

13426.479 -> see

13427.199 -> it actually bolded the text

13429.279 -> or we could use the value directly

13432.239 -> which is 800 that'll give us the exact

13434.399 -> same result as the font weight property

13436.72 -> can both take numerical values and named

13439.199 -> values so the numerical values range

13441.52 -> from 100 200 300 400 and so forth up

13444.56 -> until 900 and the named values are for

13447.12 -> example normal bold and so on so

13450.399 -> we imported 800 so let's just write 800

13452.88 -> here with that i think our example looks

13455.359 -> pretty good so let's move on

13460.72 -> going to space is definitely a risky

13463.12 -> affair so i want to add this terms and

13465.92 -> conditions apply text underneath the

13468.56 -> main section of our site however i don't

13471.04 -> want to add this this is scrimba so

13472.96 -> you're going to do it of course but i'm

13474.399 -> going to give you a set of detailed

13476.239 -> instructions so that you know how to go

13478.399 -> about doing this

13479.84 -> so you're going to start with wrapping

13481.68 -> the hero section in a div and the hero

13484.8 -> section is the one you can see on top

13486.56 -> here it's very often called a hero

13488.56 -> section in web design and it's probably

13491.04 -> called that because kind of serves as

13492.72 -> the user's first glimpse of the company

13495.04 -> and the offering and has this kind of

13497.04 -> prominent place towards the top and it

13499.12 -> usually extends full width so it is kind

13501.04 -> of the hero of the website so in our

13503.359 -> case it is these three elements right

13505.84 -> here the logo title and the call to

13508.72 -> action button and those should all be

13510.64 -> wrapped inside of a div and then i want

13512.239 -> you to move the background image that is

13514.319 -> the animated galaxy image

13516.479 -> from the body and over into this div now

13520.239 -> as you do that you'll notice that you'll

13522.08 -> have to add some padding to this hero

13524.64 -> div as it'll look really crammed if you

13526.72 -> don't add that then i want you to add

13528.8 -> the terms and conditions apply in an h3

13531.6 -> below the hero section and then finally

13533.84 -> a problem you'll probably come across is

13536.56 -> that the body tag has some default

13539.52 -> margins which right now doesn't bother

13541.68 -> us but which will become apparent once

13544 -> you change this layout so go ahead and

13546.08 -> give this one your best shot and when

13547.84 -> you return back to me i'll show you how

13549.84 -> to do it as well

13556.239 -> okay let's go i'm gonna start with the

13558.96 -> hero section div i'm gonna add it right

13561.52 -> here i'll give it an idea of hero

13563.52 -> because it is unique so it's okay to use

13565.68 -> id

13568.319 -> then i'm going to indent this in

13570.96 -> and run the code and seemingly nothing

13573.04 -> has happened because as you remember

13575.04 -> from previously divs don't have any

13576.96 -> default styling to them so what we need

13580 -> to do is

13581.76 -> target the

13583.199 -> hero

13584.479 -> and then move the background properties

13586.399 -> from the body

13587.84 -> to the hero and there we go

13590.479 -> as you can see it doesn't look

13591.84 -> particularly good now as i said we will

13594 -> be forced to deal with the padding in

13595.68 -> the hero because you can see here this

13598.08 -> logo is really crammed all the way up to

13600.08 -> the top and there's no space underneath

13601.92 -> the button so let's add padding

13604.64 -> and on the top maybe we want 10 pixels

13608.16 -> like that yes on the right hand side we

13611.279 -> don't need anything for now but on the

13613.439 -> bottom we want a lot of padding maybe

13615.439 -> we'll do 40 pixels like that and then on

13618.319 -> the left hand side you don't need

13619.92 -> anything either

13621.199 -> so here we have the padding

13623.68 -> now let's add the terms and conditions

13625.92 -> apply h3 below the hero

13628.479 -> that's just

13629.68 -> like this adding an h3 terms and

13632.88 -> conditions apply like that

13636.16 -> from the code and there we go it has

13639.52 -> already the color we want since we have

13641.92 -> set the blue color as the text color on

13644.239 -> the body so it inherits the color

13646.08 -> property from the body however as you

13648.239 -> can see are still not quite done because

13650.08 -> something has happened with the margins

13651.76 -> on the site or at least the margins of

13654 -> the body has become more apparent

13655.76 -> because now the entire body isn't filled

13658.479 -> with the background image anymore so

13660.64 -> we're suddenly noticing that the body

13662.64 -> has some default margins on all sides we

13665.439 -> don't want that

13667.04 -> so we're gonna neutralize that by doing

13669.12 -> margin zero and boom there we go

13672.479 -> we have completed the challenge now

13674.88 -> there is one more thing which is a

13676.64 -> little bit problematic which is that if

13678.479 -> you watch this on a mobile for example

13680.319 -> so that the exploration word is located

13682.64 -> directly over the galaxy the readability

13685.439 -> syncs quite a bit because the text color

13687.6 -> blends in with the background and we

13689.6 -> will fix that is by using a shadow

13691.84 -> technique on this text so now you're

13694.08 -> going to learn exactly that

13699.04 -> text shadow is a really nice tool to

13701.279 -> have in your web design toolkit as it

13703.84 -> can make your designs much better

13706.479 -> so here i've created a very simple

13708.64 -> imitation of the netflix logo with the

13711.12 -> red background and white text

13714.08 -> as you can see i've pulled in a font

13716.16 -> which kind of looks like the netflix

13717.68 -> font it's not really the same but it's

13719.439 -> close enough

13720.72 -> and

13721.439 -> it is an h1 and i've set the font size

13723.52 -> to 80 pixels now what if i want to have

13726.56 -> a black shadow like this

13728.479 -> as that makes it look even more like the

13730.399 -> classical netflix logo i can achieve

13732.64 -> that by on the h1 which is the element

13736.399 -> that includes the netflix text as you

13738.479 -> can see here i can add a property called

13741.84 -> text dash

13743.199 -> shadow which must contain three values

13746.64 -> so just bear with me here as i'll write

13748.399 -> all three of them out and then i'll

13749.76 -> explain it

13750.8 -> i'll do zero pixels zero pixels black

13754.399 -> and seemingly nothing happened

13757.199 -> that's because i first wanted to show

13758.56 -> you the third value here black that's

13760.88 -> pretty simple that's just the color of

13763.199 -> the shadow and as you can see here it is

13765.04 -> black

13766 -> the two other values dictate the offset

13769.04 -> of the shadow on the horizontal line and

13771.92 -> the vertical line so if i add for

13774.239 -> example 5px here you can see that now

13776.96 -> the shadow appeared it's as if it's

13779.12 -> sticking out to the right of the letters

13782 -> 5 pixels if i do the opposite minus 5

13785.04 -> pixels it'll stick out 5 pixels on the

13787.439 -> left hand side

13789.199 -> as you can see

13790.319 -> there's no shadow below and above

13792.56 -> because that's dictated by the second

13794.399 -> value

13795.279 -> so if i turn this back to five

13797.6 -> and on the

13798.88 -> vertical one do for example

13800.96 -> 30 then you can see that the shadow got

13803.199 -> pushed far too much downwards

13805.439 -> if i do minus 30 it's pushed upwards

13808.64 -> if i do 5 pixels it's pushed only 5

13811.68 -> pixels downwards which looks pretty good

13814.399 -> actually it is indeed the design we were

13816.64 -> looking for so summarize here the first

13819.6 -> value is how many pixels you want to

13821.6 -> push the shadow to the right

13824.319 -> the second value is how many pixels you

13826.64 -> want to push the shadow downwards and

13828.88 -> the third is the color so what i want

13831.6 -> you to do now

13832.88 -> is try to make the shadow look like this

13836.479 -> as you can see now it's on the left hand

13838.319 -> side and below like as if the sun is

13841.199 -> shining from the top right corner

13843.76 -> so take a guess at how you need to

13846.16 -> change this line 11 here in order to get

13849.12 -> that effect go ahead and do that right

13851.359 -> now

13856.96 -> okay hopefully that went well

13858.96 -> what you need to do

13860.319 -> is basically

13861.76 -> put a minus in front of the first value

13864.16 -> like that

13865.12 -> that shifted the shadow from being on

13867.279 -> the right hand side of the letters to

13869.279 -> the left hand side

13870.8 -> okay changing it back again

13873.04 -> now i want to teach you

13874.64 -> body fourth value you can add to the

13877.279 -> text shadow property and that is the

13879.6 -> third pixel value so here you can also

13882.64 -> write for example

13883.92 -> 5

13884.72 -> px and what happened now

13887.04 -> if we compare what we have here right

13888.64 -> now with how it was before we added that

13890.96 -> value you can see that previously the

13892.96 -> edges of the shadow were sharp there's

13895.6 -> no blur

13896.88 -> whereas here they're kind of fading over

13899.439 -> into the red color behind it

13901.279 -> and this is called blur if we reduce

13903.6 -> this one to zero again the edge is sharp

13906.08 -> again now if we do something crazy like

13908.8 -> 50 you can see that it is so blurry that

13911.84 -> it just looks a little bit like

13913.279 -> background that's a little bit dirty so

13915.12 -> let's get it back to zero again here

13918.16 -> what i want you to do now is

13920.479 -> try to achieve this shadow go ahead and

13923.04 -> give that a shot right now

13928.8 -> okay hopefully that went well let's have

13930.96 -> a look you can see the shadow is above

13933.279 -> and to the right of the letters let's

13935.359 -> fix that first

13937.12 -> to have it on the right of the letters

13938.72 -> we need plus value on the first one we

13940.8 -> want to push it to the right and we want

13942.72 -> to have it above so we don't want to

13944.08 -> push it downwards as we're doing with

13946 -> this value so we want to minus it

13947.84 -> pushing it upwards

13949.76 -> like that

13951.199 -> and now the only difference is that this

13953.199 -> is a lot more blurry whereas this is

13955.68 -> completely sharp so let's try five

13958.399 -> pixels here as well and boom there we go

13961.52 -> that looks pretty correct to me

13964.96 -> so great job doing this challenge before

13967.92 -> we move on i have just a final trick i

13969.76 -> want to show you which is a little bit

13971.199 -> of a hack but super useful because let's

13973.84 -> say that for example the background here

13975.92 -> was

13977.199 -> white smoke instead of the red color and

13979.279 -> white smoke is a very white color with

13980.88 -> just a little bit of gray in it as you

13983.04 -> can see it looks really bad now we can

13985.199 -> hardly see the letters we can clearly

13987.199 -> see the shadows if we now

13989.76 -> set zero pixels on the two first values

13993.279 -> but keep the blur well then suddenly

13996.319 -> there's no shadow but there's just a

13998.08 -> glowing effect around the letters making

14001.12 -> them visible even though they are in

14003.279 -> almost the same color as the background

14005.76 -> and if we make this smaller for example

14007.92 -> one you can see the line around the

14009.68 -> letters look a little bit sharper since

14011.76 -> it's very little blur now if we do like

14014.72 -> 20 each letter gets a lot of blur around

14017.76 -> it and thus making them visible

14020.399 -> so that is a little trick to use

14023.04 -> normally with small values on the blur

14025.68 -> in order to make your text stand out a

14028.08 -> little bit more in the situation where

14029.92 -> your text color and your background

14031.92 -> color is a little bit too similar and

14034.239 -> this is very relevant if you have a

14035.92 -> background image in which the contrast

14038.08 -> between that image and the text color is

14040.72 -> a little bit too weak so then you'd use

14042.96 -> this hack to make your text stand out

14045.6 -> despite the similarities between your

14047.84 -> text color and the background image so

14050.8 -> that was quite a lot about text shadows

14053.04 -> but now you know it so we are ready to

14054.8 -> move on to the next scrim

14059.6 -> okay now we are going to fix this

14061.6 -> problem of the text blending too much

14064.88 -> into the background when it is broken

14066.72 -> into two lines and thus are located

14069.04 -> exactly over the galaxy in the

14071.12 -> background image here because the

14072.72 -> readability is a bit too low now in my

14074.64 -> opinion and i want you to fix that by

14077.359 -> adding a blurred border around the h1

14080.319 -> tag using the technique you just learned

14082.8 -> you should set the blur to 4 pixels and

14085.359 -> the color to black so go ahead and do

14087.68 -> this right now then i will show you the

14089.439 -> solution as well when you return back to

14091.199 -> me

14097.52 -> ok let's do this so first we need to

14100.8 -> select the age run and we've been really

14103.04 -> good at using ids and classes here so

14106.399 -> instead of just selecting the element

14108 -> i'm actually going to give this one an

14109.68 -> id of title because we probably only

14112.479 -> have one title on the page

14114.72 -> so running this

14116.239 -> and navigating back into the css file i

14118.88 -> can select the title and then i need to

14120.88 -> use the text shadow property we want

14124 -> both the horizontal offset and vertical

14126.319 -> offset to be zero pixels

14128.8 -> we're not actually doing creating a

14130.56 -> shadow here the effect we want is more

14132.319 -> of an outline so then without any offset

14134.8 -> but for pixels blur it'll blur a black

14138.399 -> shadowish effect around the entirety of

14140.72 -> all the characters so if you look at it

14142.88 -> now and look closely there is a

14145.68 -> slight blurred black border around the

14148.8 -> letters

14150.56 -> it's not that easy to see but if you now

14152.72 -> look at this while i comment out that

14154.96 -> css rule you'll see the difference so

14157.04 -> keep looking at the exploration word and

14159.279 -> i will comment it out

14160.96 -> now

14162.239 -> now i'll comment it back again

14164.479 -> there

14166.399 -> comment it out

14168.16 -> comment it back in again so so hopefully

14170.16 -> you saw that it changed here in a little

14171.52 -> bit

14172.399 -> so now the readability is a little bit

14174.8 -> better

14175.76 -> great job

14179.6 -> now i'm not sure if you're aware of this

14182.08 -> but you're the best because you've

14184.64 -> completed this section and that is very

14187.12 -> well done plenty of people who have

14189.04 -> started this section has never completed

14191.359 -> it

14192.08 -> you're not like them so i am really

14194.399 -> proud of you and let's take a quick look

14196.239 -> at what you've learned starting out you

14198.72 -> learned about background images more

14200.64 -> specifically you learned about the

14202 -> background image property and the url

14204.56 -> function and also the background size

14206.56 -> property in css and setting that to

14208.72 -> cover we also then used a webp format in

14212.08 -> order to get this animated image in our

14214.479 -> hero section which is super cool and

14216.64 -> really breathes life into our website

14219.439 -> and then you learned about google fonts

14221.199 -> we imported them

14222.56 -> up here in the head section and then you

14224.399 -> set the font family like this

14226.64 -> fonts do so much for the design of

14228.56 -> websites so this is an important thing

14230.479 -> to know as a web developer and you also

14232.96 -> learned a new html tag which is the spam

14235.439 -> tag which you can see right here it is

14237.52 -> what allowed us to create this underline

14239.439 -> under the expiration word

14241.52 -> which it did in combination with a

14243.439 -> utility class

14244.96 -> the underlying class which only has one

14247.199 -> job and that is to set the underline

14249.52 -> whatever element it's applied to and

14251.199 -> then also we learned about ids which is

14253.68 -> another attribute in html that you

14255.92 -> target in the css using a hashtag and at

14258.479 -> the very end we did a really cool trick

14260.72 -> with the text shadow property in order

14262.8 -> to make the readability of our title

14264.64 -> here a little bit better

14266.56 -> so you've learned some key concepts in

14268.56 -> this section now is the time for you to

14271.199 -> get up stretch maybe get a cup of coffee

14273.92 -> or whatever you prefer to recharge

14276.16 -> because be sure to do exactly that and

14278.16 -> then i will see you in the next section

14283.84 -> welcome to this section where you are

14285.359 -> going to build a birthday gift site and

14288 -> it is just so cool because this site is

14290.88 -> something you can use for whenever a

14292.88 -> friend or family member of yours has a

14295.12 -> birthday so what you do is basically add

14297.199 -> their information to the header here and

14299.52 -> then we have these gifts so for example

14301.92 -> this one saying here's how happy i am

14303.6 -> for you today and when the birthday boy

14305.52 -> or girl hovers over the image they will

14307.68 -> see a nice gif that makes them feel

14310.16 -> truly appreciated

14312.08 -> going down we have other gifts how

14314 -> people react when you enter the room

14316.56 -> this is meant to make them feel really

14318.319 -> good looking

14319.439 -> and here if i had to describe you with

14321.439 -> one word genius so you make them feel

14324.08 -> really smart

14325.52 -> next up the only person as badass as you

14328.16 -> is of course james bond

14330.239 -> and then rounding it up with a little

14331.92 -> toast

14333.279 -> so hopefully you have someone special to

14335.76 -> send this site to like nikki for example

14338 -> who despite being a computer-generated

14340.96 -> image created by an ai also is one of my

14344.56 -> best friends so i am looking forward to

14347.12 -> make nick happy on his birthday let's

14349.6 -> just get started with this section

14355.199 -> okay it's time for your first challenge

14358 -> what you're gonna do is create this

14359.84 -> basic design here for the header of our

14362.319 -> app and it's pretty far from what we got

14364.479 -> right now as you can see in the

14365.84 -> styles.css we have no styling at the

14368.239 -> moment so our site looks pretty dull

14371.359 -> you can see everything is left aligned

14373.279 -> and the image of nick is far too large

14376.08 -> plus we're lacking the appropriate fun

14378.64 -> taking a look at the html here it's just

14380.8 -> a very simple structure with an h1 an

14382.96 -> image tag an h2 and an h4 inside of the

14386.239 -> body so nothing special there

14388.72 -> the font that you will use is called

14390.64 -> happy monkey and it is a google font so

14393.359 -> you're going to have to head over to

14394.479 -> google font to fetch it and then embed

14396.319 -> it into our project as you can see in

14398.8 -> the provided design the image of nick

14401.439 -> should be rounded and not squared as it

14403.84 -> is right now so you'll have to figure

14406 -> out how to make an image round and yet

14408.239 -> again you'll find the answer if you

14410.08 -> google it finally i want you to consider

14412.8 -> how you should select the image so

14415.199 -> should you use a class selector an id

14417.52 -> selector or an element selector you can

14419.68 -> use any of them but i want you to think

14421.199 -> about it and try to figure out what you

14423.04 -> think makes most sense go ahead and do

14425.68 -> this right now and then i of course will

14427.52 -> show you the solution when you return

14429.199 -> back to me

14436.479 -> okay hopefully that went well

14438.8 -> let's do it together i want to start

14440.96 -> with centering everything and for that

14443.04 -> i'm going to do

14444.64 -> body

14445.92 -> and then set the

14447.439 -> text align to center like that

14450.8 -> as you can see that indeed centered our

14452.88 -> elements next up i want to fix the image

14456 -> it is here and i think it makes sense to

14458 -> use an id selector here because this is

14460.64 -> kind of the main image of our birthday

14462.72 -> boy and i don't think we'll duplicate it

14464.88 -> across the page so it is unique meaning

14467.279 -> we can use an id so i'll do id equals

14470.64 -> and then bff for best friend forever

14473.04 -> because nick is my bff please don't make

14475.76 -> fun of me because my bff is a

14477.56 -> computer-generated image but that is

14479.52 -> just how it is and then i'll do dash img

14482.239 -> just to make it a little bit easier to

14483.52 -> understand what it is based upon the id

14485.6 -> name

14486.8 -> then i'll run the code so that that is

14488.56 -> applied to the dom

14490 -> and heading over to the styles i'll do a

14492.319 -> hashtag bff.img

14495.199 -> like that and first i want to fix the

14497.68 -> width of it it's far too wide this looks

14500.239 -> more like 100 200 pixels so let's try

14504.08 -> width of 150 pixels like that yes that

14507.68 -> is pretty much what we're looking for

14510.319 -> and hopefully you figure out how to make

14512.319 -> an image round and the way to do it is

14514.08 -> to use the border radius property which

14516.64 -> you've seen a couple of times by now and

14519.04 -> the maximum border radius an element can

14521.52 -> have is 50

14523.68 -> and boom

14524.8 -> there it is completely round

14527.439 -> all right the final part is to add the

14529.6 -> google font the happy monkey font that

14531.76 -> is a very birthday-ish font actually i

14534.08 -> found it just by googling google font's

14536.399 -> birthday then happy monkey was the top

14538.239 -> result clicking into that we'll select

14540.399 -> it by clicking select this style and

14542.88 -> then we'll copy the links here so that

14545.12 -> we can embed it into our project i'll

14547.279 -> paste that into the head of our project

14549.68 -> then copy the font family rule so that i

14552.64 -> can paste that directly in as well now

14555.04 -> i'll have to rerun so that the font is

14557.04 -> embedded and yes there we go that is as

14559.92 -> far as i can see exactly the design we

14562.479 -> were looking for

14563.84 -> so great job let's move on

14569.68 -> okay your next challenge is to colorize

14572.239 -> the app because i wanted to look like

14574.479 -> this with a nice blue background pink

14577.359 -> border and white text and as you can see

14580.399 -> i've provided the hexadecimal values for

14582.56 -> the pink blue and white colors here so

14585.52 -> your job is simply to figure out where

14587.6 -> you need to add these and what kind of

14589.199 -> css properties you're gonna use

14591.359 -> go ahead and do this right now

14599.199 -> okay hopefully that went well let's do

14601.68 -> it together

14602.72 -> i'm to start here in the body taking the

14604.88 -> blue hexadecimal value and setting it

14608 -> as the background of the body boom there

14611.199 -> we go

14612.399 -> next up we want to set the color

14614.239 -> property here

14615.52 -> to

14616.319 -> white just just six f's after each other

14620.319 -> like that

14621.6 -> now that is inherited down from the body

14624.96 -> into all of these okay final step is the

14627.92 -> image as you can see it should have a

14630.16 -> border around nick and it should be pink

14632.8 -> so here we'll use the border property

14635.12 -> and let's try six pixels because it

14637.199 -> looks pretty thick it should be solid

14640.16 -> and then

14641.6 -> we'll copy the hex value from pink and

14644.239 -> paste it in right there and actually

14646.96 -> that looks about right to me

14649.359 -> so great job let's move on

14654.96 -> there is one problem with our site at

14657.199 -> the moment which is that if we run these

14659.84 -> two colors through a contrast checker

14662.08 -> for example userway.org

14664.479 -> you'll see that our accessibility

14666 -> actually fails because the contrast

14667.92 -> ratio is too small so what can we do to

14670.88 -> improve this given that we want to keep

14672.96 -> the colors we have what we can do is use

14675.6 -> the trick you learned in the space

14677.359 -> exploration section because pay

14679.76 -> attention to what happens to this text

14682.319 -> if we add a thin black border around the

14685.84 -> text using the text shadow property so

14688.64 -> this is without the text shadow property

14690.72 -> and this is with it as you can see the

14693.6 -> text now stands out more as the black

14696.16 -> contrasts well with both the white and

14698.479 -> the blue background and is also pretty

14700.479 -> subtle so the text still looks white

14703.12 -> but it's just a little bit more visible

14704.8 -> and in my opinion i think the

14706 -> readability here is pretty good so what

14708.08 -> i want you to do now is write the css

14710.64 -> for this exact technique

14712.399 -> so add a thin blurred border around the

14715.199 -> h1 h2 and h4 elements using the text

14718.88 -> shadow technique you learned in the

14720.8 -> space exploration section you're gonna

14722.72 -> set the blur to one pixel and the color

14725.04 -> to black okay hopefully you remember how

14727.359 -> to do that give it your best shot and

14729.199 -> then i will of course show you the

14730.56 -> solution as well when you return back to

14732.319 -> me

14740 -> okay let's do this so let's start with

14742.8 -> the h1 here and here i'm just going to

14744.479 -> use an element selector as we'll have a

14746.239 -> lot of h2s and h4s throughout the site

14748.88 -> and i think we want all of them to have

14750.479 -> this style so there's no point

14751.84 -> separating it into a class

14754.08 -> so text

14756 -> shadow

14758.479 -> setting the first two values to zero

14760.399 -> pixels since we don't want any offset

14762.399 -> vertically or horizontally but the third

14764.319 -> value the blur should be set to one

14766 -> pixel and then the color is black and

14768.64 -> boom there we go we have that thin

14771.199 -> outline which improves the readability

14774 -> and now you probably did something like

14776.08 -> this added a whole new rule for the h2

14779.04 -> and yet another one for the age

14781.199 -> four

14782 -> and if you did that is completely fine

14784 -> that is how i expected you to solve this

14786.16 -> challenge

14787.12 -> but i do want to show you a little trick

14789.199 -> which allows us to reduce all of these

14791.279 -> into one line and that is simply by

14793.84 -> using a group css selector where you

14796.16 -> simply add multiple selectors on one

14798.479 -> line so what you do is instead of just

14800.399 -> writing a tron you write h1 comma

14803.359 -> h2 now we can delete the h2

14806.8 -> because this rule is applied to both the

14809.279 -> h1 and the h2 and likewise we can just

14812.319 -> add the h4 here as well like that now we

14815.359 -> can remove all of this as you can see

14817.6 -> the thin border is applied to all of the

14820.239 -> elements now it is really important that

14822.319 -> you actually use a comma here and not

14824.56 -> just add it like this this means

14826.319 -> something entirely different and we're

14827.84 -> not going to learn about that right now

14829.76 -> as it's outside of the scope of this

14831.439 -> section so make sure you have the commas

14833.92 -> and then you can use this technique and

14835.84 -> i happen to know that we also want this

14838.239 -> text shadow to be applied to our h3

14840.56 -> elements down the line and also our

14842.64 -> paragraphs down the line so i'm just

14844.479 -> gonna add them here so that we don't

14846.08 -> have to think about this as we add new

14848.319 -> elements to our site later down the line

14850.72 -> so

14851.52 -> great job let's move on

14856.72 -> now we want to take this pink background

14858.8 -> that we have around the image and apply

14860.72 -> it behind the h2 and the h4 element so

14864.8 -> that it looks like this so let's try the

14867.359 -> most intuitive approach and see how that

14869.439 -> works that would be to target the h2 and

14872.56 -> the h4 i'm going to use this comma

14874.239 -> selector here to target both

14875.76 -> simultaneously as we've done up here and

14878.319 -> then we'll set the background

14881.04 -> to this pink color right here however as

14885.04 -> you can see that did not give us what we

14886.96 -> wanted because heading elements like h2

14889.84 -> and h4 are by default display block so

14892.88 -> they take up all the available

14894.319 -> horizontal space so let's then try to

14896.479 -> turn them into display inline and see

14898.239 -> what happens then

14900.64 -> ah that did not work well either because

14903.359 -> when they're in line they're actually

14905.199 -> narrow enough to be on the same line and

14907.04 -> actually jump up to the line above with

14908.96 -> the image which also is display inline

14911.439 -> so let's remove the display inline as

14913.359 -> well and the way to actually solve this

14915.279 -> is to use a technique you haven't

14916.8 -> learned yet now i'm just going to show

14918.16 -> it to you fast and then we're going to

14919.439 -> take a closer look at how it works in

14921.439 -> the next script because what we can do

14923.439 -> is head into the body which is the

14925.52 -> container element for these two and for

14928.72 -> all of our elements actually and do

14931.279 -> display

14932.399 -> flex that stacks things up on a

14934.64 -> horizontal line turning every element

14936.72 -> into its own column but we can change

14938.64 -> that by doing flex direction which now

14941.68 -> is set to row by default and that might

14944.64 -> sound a little bit confusing since i've

14946.239 -> always said that flexbox turns every

14948.56 -> element into its own column and yes it

14950.96 -> does that however what it also does is

14953.359 -> make sure that all of the elements are

14955.279 -> in the same row so that is why it's

14957.439 -> called flex direction row because rows

14960 -> go from left to right you can see

14961.92 -> there's only one row from left to right

14964.16 -> here which becomes even clearer if you

14966 -> do like this and all the elements are

14967.92 -> inside of the same row now in order to

14970.08 -> flip this we can simply change row from

14973.12 -> column like that now all of the elements

14975.76 -> are stacked on top of each other again

14977.359 -> in one column because a column goes from

14980.08 -> top to bottom so this is just one column

14982.319 -> now with that in place we can use

14984.16 -> another css property in that flexbox

14986.479 -> give us which is called align

14988.88 -> items and set that to center and boom

14992.56 -> there we go

14994 -> now this was probably pretty confusing

14996.64 -> and you were not meant to understand

14998.239 -> this right now which is why we're going

14999.84 -> to take a little digression here and

15001.6 -> look closer at how flexbox works and

15004.08 -> then return back to this example where

15006 -> you will code it up yourself and

15007.6 -> properly understand it

15012.399 -> if you are to become a flexbox master

15014.72 -> you will need to know align items

15017.12 -> luckily though it's not that hard to

15018.8 -> learn because it is a close cousin of a

15020.96 -> property you already know which is

15023.12 -> justify content so let's pretend that

15025.68 -> the two of us for example work in a lab

15028.08 -> together well if so we'd have our lab

15030.479 -> equipment which you can see here inside

15032.239 -> of our lab which is this green rectangle

15034.8 -> right here and what we're going to do

15036.56 -> now is use flexbox

15038.399 -> along with justify content and line

15040.319 -> items in order to organize our lab

15042.64 -> equipment in different ways in our lab

15044.72 -> so let's have a look at the code

15047.199 -> the html is very simple it's just a

15049.359 -> container which has three divs and each

15052 -> div hold exactly one piece of lab

15054 -> equipment visualized via an emoji

15056.88 -> if we head over to the css you can see

15058.479 -> that the container has a border and a

15061.359 -> fixed height so that's why we get this

15063.279 -> green rectangle the items have a width

15065.92 -> and a height there's some margin in

15067.84 -> between them and some padding on the

15069.439 -> inside i've set the font size and also

15071.439 -> added a border and finally

15073.439 -> something you haven't learned yet but

15074.96 -> i've added a gradient background so that

15077.439 -> the color slightly fades from a darker

15080.08 -> shade of green to a lighter shade of

15081.68 -> green in the background now you are

15083.279 -> going to learn about the linear gradient

15085.279 -> later on so don't worry a second about

15087.12 -> this right now just accept that it is

15089.279 -> how it is and let's get going with the

15091.68 -> organizing so as you can see by default

15094.96 -> the lab equipment

15096.64 -> the div status are stacked on top of

15099.279 -> each other because as you remember divs

15101.199 -> are display block

15102.88 -> however if we turn it into a flexbox

15104.72 -> layout

15106.56 -> each of the item gets its own column and

15108.8 -> as a consequence they stack up on the

15110.479 -> horizontal line so far so good and if we

15113.199 -> set the justify content properly it'll

15115.6 -> arrange these in different ways along

15117.68 -> this horizontal axis so if we do center

15120.399 -> for example they are centered if we do n

15122.72 -> they are pushed all the way to the end

15124.16 -> and yeah you know the deal so what align

15126.56 -> items does is instead of controlling the

15129.199 -> horizontal line which i from now will

15131.279 -> call the main axis it controls the cross

15135.12 -> axis which is the vertical one going

15137.52 -> from top to bottom

15139.359 -> so

15140.319 -> let's turn this back to start and do

15142.8 -> align items

15146.08 -> center

15147.52 -> boom there you can see now it pushed all

15149.84 -> of the three items down to the center so

15152.8 -> that they are centered vertically

15154.479 -> meaning they are centered along the

15156.239 -> cross axis and then i can combine this

15159.04 -> with the main axis which is justify

15161.84 -> content that controls the horizontal one

15164 -> going from left to right for example do

15166.319 -> end here and boom then we are still

15168.96 -> vertically aligned so we're in the

15170.72 -> middle but we are pushed all the way to

15172.8 -> the right hand side along the main

15174.8 -> horizontal axis so the values you are

15177.68 -> going to use for line items to begin

15179.52 -> with are start center and end whereas

15182.239 -> with justify content as you know you can

15184.239 -> use start center and end but also these

15186.399 -> space around space evenly and space

15188.64 -> between properties okay let's move on to

15190.96 -> the challenge what i want you to do is

15193.04 -> follow my orders on where we should

15195.199 -> leave our lab equipment because i want

15197.439 -> you to do it in very specific ways

15199.279 -> starting with this position here where

15201.279 -> they're all squeezed down in the bottom

15203.439 -> left corner so go ahead and modify

15204.96 -> justify content and align items to

15206.8 -> achieve that layout right now

15212.239 -> so to achieve this layout you can see it

15214.479 -> is at the bottom of the cross axis the

15216.96 -> vertical one so we'll do end online

15220.159 -> items but it is at the start of the main

15222.88 -> axis because it is pushed all the way to

15224.88 -> the left meaning that we should do start

15227.279 -> up here and there we go we have solved

15229.84 -> it

15230.72 -> okay

15231.6 -> new challenge i want you to achieve this

15234 -> layout go ahead and do this right now

15241.279 -> so here we can see we are actually

15243.279 -> centered both along the main axis

15245.279 -> horizontally and the cross axis

15247.359 -> vertically

15248.56 -> so i'll try center

15251.12 -> yes and center again and there we go

15255.04 -> okay final one i want you to organize

15257.52 -> the equipment like this

15259.279 -> go ahead and do it right now

15264.239 -> okay hopefully that went well the first

15266.56 -> thing i'll notice here is that all of

15268 -> the items are squeezed to the top so

15269.6 -> align items should be start

15272.239 -> and there's some space around the

15274.319 -> elements

15275.359 -> so we need to try one of these for

15276.96 -> example space around space evenly or

15278.72 -> space between so let's try for example

15282 -> space between

15284.319 -> hmm

15285.199 -> that didn't exactly achieve what we

15286.88 -> wanted because there should be some

15288.159 -> white space on the left side and the

15289.6 -> right hand side here whereas these two

15291.6 -> are squeezed all the way to the end so

15294.08 -> maybe we can do space around instead yes

15298 -> that looks exactly like what we want

15301.279 -> so really good job solving these three

15303.84 -> challenges before we move on there's

15306 -> just a small thing i want to tell you

15307.68 -> that is something you might see from

15309.279 -> time to time which is that if i now

15311.76 -> remove the height

15313.76 -> of our items

15315.279 -> see then they just became a little bit

15316.72 -> higher because the content inside of it

15318.479 -> wants a little more height but that was

15320.159 -> besides the point what i wanted to do is

15322.239 -> also remove the align items let's see

15324.64 -> what happens oh wow it turns out that

15327.52 -> flexbox in the cross axis actually

15330.8 -> stretches the content like this and the

15333.12 -> reason it didn't happen previously was

15334.8 -> because our height property overrode

15337.279 -> that stretching so what this means is

15339.279 -> that line items

15341.6 -> by default has the value stretch

15344.96 -> when we do for example start it's no

15346.72 -> longer stretched and it's pushed to the

15349.12 -> start

15350 -> so this might feel very confusing and

15352.239 -> the only reason i want to tell you about

15353.84 -> it now is that when you are in a flexbox

15356.159 -> layout and you notice that something is

15358.239 -> stretching in a way you don't want it to

15360.239 -> stretch the prime suspect you should

15362.08 -> look at is align items and experiment

15364.56 -> with that so be aware of that but don't

15367.04 -> worry too much if you found this a

15368.239 -> little bit confusing it's totally okay

15369.92 -> let's just keep up the pace and move on

15371.439 -> to the next scrim

15375.84 -> now you're going to learn about flex

15377.439 -> direction

15378.64 -> because there is one problem with our

15381.04 -> lab system now that is that regardless

15383.68 -> of how we change around on the align

15385.76 -> items and justify content let's center

15388.72 -> an end for example our lab equipment

15391.359 -> will always stack up besides each other

15394.239 -> they'll be on the same row and there's

15396.56 -> no way to get them to stack on top of

15398.96 -> each other but maybe that's how i prefer

15400.88 -> to leave my lab equipment for the night

15402.64 -> but regardless of how we change to

15404.399 -> justify content and align items that is

15406.479 -> now impossible now we could of course

15409.12 -> remove the display flex and then these

15411.84 -> divs will stack on top of each other by

15413.68 -> default

15415.12 -> so by doing this now they stack on top

15417.6 -> of each other

15418.96 -> however

15420.159 -> justify content and line items

15422.64 -> no longer work so if i try changing

15424.88 -> these

15426.319 -> nothing happens because these properties

15428.399 -> work inside of a flex box not inside of

15430.72 -> a random div that by default is display

15432.96 -> block

15434.88 -> so we need the display flex

15437.68 -> like that in order to make these work

15439.84 -> however what we can do is change the

15442.08 -> flex direction

15443.68 -> so first let me just both of these do

15445.439 -> back to start and then i'll do flex dash

15448.56 -> direction

15450.8 -> and it by default is a row because as i

15453.359 -> said they stack up alongside of each

15455.279 -> other on a row but if we change this to

15457.439 -> column boom there you can see now they

15460.159 -> suddenly stack on top of each other as

15462.8 -> if they are in the same column as

15464.96 -> columns go from top to bottom so now we

15467.68 -> are back to the original layout we had

15469.68 -> before we made this into a flex

15471.12 -> container but justify content and the

15474 -> line items now work

15476.479 -> however they work in a little bit of a

15478.319 -> different way than you might expect

15479.92 -> because

15481.04 -> as you remember i previously talked

15482.479 -> about the

15483.84 -> main axis going from left to right and

15486.72 -> being the one controlled by justify

15488.319 -> content whereas the cross axis going

15491.04 -> from top to bottom and also being

15492.8 -> controlled by align items

15495.279 -> well when we change the flex direction

15498.399 -> and our items stack up differently on

15501.199 -> top of each other we also change the

15503.84 -> main axis so this is no longer the cross

15506.479 -> axis it is the main axis and it's

15508.64 -> controlled by justify content whereas

15511.12 -> the horizontal one is no longer the main

15513.76 -> it is the cross and it's controlled by

15516.479 -> align items so we basically flipped

15519.359 -> align items and justify content

15522.159 -> so if i now do justify content end

15526.08 -> it'll jump downwards whereas previously

15528.479 -> they would have jumped to the right

15530.72 -> and if i now do align items and it'll

15533.84 -> jump to the right whereas previously

15535.76 -> align items control the vertical

15537.76 -> position so this is probably a little

15539.76 -> bit confusing now you should not feel

15541.76 -> bad if this feels overwhelming this will

15544 -> take time to mature in your mind and

15546 -> it's totally okay that in the beginning

15547.6 -> now you're just experimenting with these

15549.6 -> values in order to get the layout you

15551.439 -> want and not really remembering exactly

15553.68 -> why it works as it works so let's now

15556.56 -> give you some practice i want to clean

15558.64 -> up my lab equipment and i want it to be

15560.8 -> like this

15561.92 -> so go ahead and change around on these

15564.319 -> two values in order to achieve that

15566.159 -> layout

15571.52 -> okay

15572.479 -> what we need to do is on justify content

15575.199 -> i want to center it so that it's

15577.12 -> vertically centered but then we want to

15579.439 -> align it to the start on the left hand

15581.84 -> side

15582.72 -> yes that is correct

15584.56 -> okay new one

15586.239 -> achieve this layout

15592.88 -> okay

15593.84 -> here we can see some space in between

15596 -> the items so i think we need to use

15598.72 -> space between on justify content

15601.6 -> yes looking good

15603.279 -> but we are aligning to the left we want

15605.199 -> to align it to the right instead so

15607.6 -> align items should probably be end

15610.399 -> instead of start and boom that is

15612.72 -> correct final layout

15614.56 -> this one right here give it a shot right

15616.479 -> now

15621.76 -> okay we can see that they are all

15623.92 -> squeezed towards the top so i think

15626.239 -> we'll do justify content

15628.159 -> start

15629.199 -> like that

15630.239 -> yes this is good but we want to center

15632.64 -> it as well

15633.76 -> so we'll do a line items center and

15636.479 -> there we go

15637.76 -> so

15638.64 -> great job doing this let's just move on

15644.96 -> okay now we're going to put your freshly

15646.8 -> acquired flexbox skills to the test

15649.92 -> because you are going to turn this

15651.68 -> layout here into

15653.439 -> this layout

15654.72 -> so first i want you to wrap the html

15657.439 -> element in a div with an id called

15660.239 -> header so that is

15662.64 -> all of these items right here

15665.04 -> and then you are to select this header

15667.12 -> and then use flexbox to achieve the

15669.279 -> layout from the design slide and as you

15671.6 -> might have guessed you will need to use

15673.199 -> flex direction and align items to solve

15675.68 -> this so go ahead and give this your best

15678.08 -> shot

15684.56 -> okay so we'll start in the html

15688.319 -> create active opening tag and close it

15691.12 -> off down here

15692.88 -> indent this

15694.479 -> run it no change scene in the mini

15696.88 -> browser

15698 -> that is to be expected

15699.76 -> because we'll have to target it and

15701.68 -> style it

15702.88 -> so i'm gonna do header and then first

15705.359 -> display flex

15707.12 -> that forces all of the elements into one

15709.92 -> row because it is flex direction row by

15712.72 -> default

15713.84 -> however we don't want that we want

15715.84 -> everything in one column so we'll do

15718.08 -> flex direction

15720.239 -> column like that now they stack on top

15722.72 -> of each other which is just what we want

15725.279 -> but there's a problem the two elements

15727.6 -> here are stretching and the image of

15729.439 -> nick is left aligned it's not centered

15731.439 -> so i think we need to change the align

15733.359 -> items

15734.319 -> align

15735.439 -> items

15736.88 -> into center

15738.479 -> like that and there we have the layout

15741.6 -> we wanted

15742.88 -> so great job let's move on

15748.64 -> okay now you're going to fix up the

15750.319 -> design for this 24 years old element and

15753.199 -> the date element right here because i

15755.439 -> want it to look like this here you can

15757.84 -> see that there's some space between the

15759.76 -> content of the element and the edge of

15762.08 -> the element and there's not as much

15764.64 -> space between the elements and also the

15767.279 -> edges of the rectangles are a bit softer

15770.56 -> but before you start doing this there's

15772.399 -> a couple of things i want to do

15774.64 -> because here the h2 and the h4 have no

15777.52 -> ids or classes they are just selected

15780.239 -> using the element selector and also

15782.319 -> using a selector list separated by

15785.04 -> commas and i don't think we should do

15786.72 -> either of those first of all we probably

15789.439 -> don't want all of our h2 and h4s on the

15792.479 -> page to be styled according to how it

15794.88 -> looks here up in the header so we

15796.96 -> actually want to give these two ids i'm

15800 -> going to call this one b day age

15803.439 -> and this one

15805.04 -> b day date running this code so that we

15808 -> got it applied and then in the css

15810.399 -> instead of using element selectors we'll

15812.64 -> use id selectors be they age

15816.56 -> and delay date and then finally let's

15819.52 -> avoid applying styles to both of these

15822.239 -> simultaneously let's work with one or

15824.64 -> the other because this is really an

15826.399 -> optimization and writing code which is

15828.319 -> so called dry short for don't repeat

15830.72 -> yourself and while that is a good thing

15832.399 -> i want you to focus on the core css now

15835.12 -> because this will introduce a little bit

15836.88 -> more complexity so let us instead just

15839.199 -> keep it simple so i'll break this into a

15841.76 -> new line so we got the birthday date

15843.68 -> rule here and then copy the exact same

15846.08 -> thing to the be they age

15848.72 -> like that okay

15850.479 -> now it's time for your challenge

15852.8 -> you are going to make the b day elements

15855.279 -> look like the provided design slide like

15857.84 -> this so go ahead and do this right now

15866 -> okay hopefully that went well let's

15868.479 -> start with the age element as you can

15870.72 -> see there is some space around it that

15872.96 -> is padding most likely so let's add

15876.239 -> padding for example 10 pixels and see

15878.399 -> how that works if we compare that with

15880.399 -> what we have in the design it looks

15882.239 -> pretty good but i think we shouldn't

15884.159 -> have 10 pixels on each side i think the

15886.72 -> padding on the left and right side is

15889.12 -> meant to be slightly larger than the top

15891.6 -> and bottom as we've often seen with

15893.359 -> buttons and layouts in general so for

15895.359 -> the top and bottom we'll do 5 pixels and

15897.84 -> left and right 10 pixels that is what we

15900.08 -> are looking for as far as i can see okay

15902.64 -> next up there is some border radius here

15904.72 -> as well not that easy to see but it

15906.56 -> definitely is there so we'll do border

15908.479 -> radius five pixels for example that

15910.88 -> looks pretty good to me and now let's

15912.8 -> just try to copy this down to our

15915.12 -> birthday date and see how that works

15917.279 -> here you can see except for the fact

15919.199 -> that there's much less space between the

15920.64 -> elements here they look pretty similar

15923.04 -> as far as i can see so we need to move

15925.04 -> on to the margin let's try first and

15927.199 -> remove all the margin from the birthday

15929.199 -> date margin 0 like that now it's quite a

15932 -> lot closer and whatever margin comes

15934.159 -> from the h2 element that probably has a

15936.72 -> bit too much margin bottom so let's

15939.12 -> rather control that by doing margin

15941.04 -> bottom for example 10 pixels and yes

15944.399 -> that looks pretty good to me let's also

15946.64 -> look at the margin top here it is too

15948.319 -> much space between the age element and

15950.64 -> the image so if we do margin top by 10

15953.76 -> pixels there that looks pretty good but

15956.56 -> it's perhaps still a little bit too much

15958.96 -> let's do five instead yeah actually i

15961.68 -> think we got it so the final step then

15964.159 -> is to convert this into a shorthand

15966.64 -> because we know how to use shorthand

15968.239 -> don't we we want 5 on the top and 10 at

15970.64 -> the bottom then we'll do margin 5px for

15973.68 -> the top 0 for the right hand side 10px

15976.8 -> for the bottom and 0 for the left hand

15979.279 -> side

15980.319 -> and there we go now if your solution is

15982.88 -> slightly different from mine perhaps you

15985.04 -> used

15986 -> slightly different margins border radius

15988.319 -> padding that doesn't really matter give

15990.88 -> yourself a pat on the back regardless of

15992.479 -> how you solve this and let's move on

15998 -> okay now you are going to create the

16000.08 -> first gift section of our site

16002.56 -> so as you can see it contains a title a

16005.439 -> little hint about hovering over the gift

16007.68 -> and then there's the image itself now

16009.68 -> the hover effect is not a part of this

16011.84 -> challenge you're only going to work with

16013.84 -> this hard-coded gifs cover at this point

16016 -> and that gift cover has been added up

16017.84 -> here in a images folder which i've just

16020.319 -> created as we now have two images so i

16022.479 -> wanted to gather them together in this

16024.08 -> images folder that means that i've also

16026.399 -> changed the image of nick or the source

16029.04 -> that is referring to the image of nick

16030.96 -> in the html it now contains the correct

16033.439 -> path into the images folder so the

16036.239 -> challenge is described in detail here i

16038.399 -> want you to start by creating a gift

16040.319 -> section div that will wrap all of the

16042.479 -> elements for the first gift and then i

16044.72 -> want you to add the h2 h3 and img

16047.84 -> element so that is the title which is an

16050.239 -> h2 the hint which is an h3 and finally

16054 -> the image itself and i want you to give

16056.479 -> them all their own classes so that you

16059.12 -> can use the classes to select the

16061.04 -> elements when you are to style them

16062.72 -> according to the design and as a final

16064.479 -> hint the image should be 400 pixels wide

16067.76 -> so go ahead and do this right now

16075.199 -> okay hopefully that went well so i'll

16078 -> start by heading over to the html and

16079.76 -> create the markup

16081.76 -> so we wanted a div to begin with

16084.159 -> i'm going to create that and then give

16085.76 -> it a class of

16087.12 -> gift section like that and inside of it

16090.399 -> we wanted first an h2 for the title

16093.199 -> which should contain the following text

16095.04 -> let's run this and yeah ah nice

16098.239 -> we can see that the text already has the

16100.08 -> correct font and also the slight shadow

16102.72 -> around it okay very nice let's then give

16105.359 -> it a class as that or something we

16107.04 -> should do with all elements

16109.52 -> i'll call this gift

16111.84 -> title like that and there was the h3

16114.159 -> with the following text and i'll give

16116 -> that a class of gift hint as you can see

16119.279 -> i'm using gift and then a description i

16121.92 -> think that makes it easy to understand

16123.52 -> that these are all somewhat related to

16125.279 -> each other

16126.479 -> finally the image element

16128.479 -> should have a source of images slash

16131.359 -> gift

16132.319 -> cover dot jpeg and also a class of

16136.399 -> gift img all right let's run this code

16139.68 -> and as you can see everything is being

16141.04 -> rendered though the image is far too

16143.279 -> large so we need to get going with the

16146 -> styling all right

16147.92 -> i'll start with the image so dot

16150.8 -> ift imd and give it a width of 400

16154.399 -> pixels yes that is much better and that

16157.279 -> is centered because of our text align

16159.6 -> center up here very nice okay let's just

16162.72 -> carry on with this one you can see it

16164.319 -> has a white border so let's do

16167.279 -> border

16168.319 -> looks to be something like six pixels or

16170.319 -> something and solid white

16172.72 -> yep pretty good and finally a border

16175.199 -> radius because the corners here are a

16177.279 -> little bit rounded off so let's try

16179.52 -> order radius at 10 pixels for example

16182.88 -> and yeah that looks pretty much like the

16186.399 -> design for the image nice okay next up

16189.92 -> is the spacing as you can see we have

16192.399 -> far too little space from the gift

16194.239 -> section itself to the header section

16196.239 -> above

16197.359 -> and i could add that to the top element

16199.84 -> here to the title for example but it

16201.68 -> makes a lot more sense to add it to the

16203.6 -> container element itself because it

16205.52 -> should control how far it is between

16207.84 -> this container and the container above

16209.92 -> so let's do gift section

16212.8 -> margin top and for example 50 pixels

16215.84 -> that is much better and looks pretty

16218 -> much like what we have here now you can

16219.76 -> see that the space between the title and

16221.84 -> the hint is very limited it's not that

16224.239 -> much space whereas here the default

16226.56 -> margins for the h2 and h3 elements

16229.12 -> create quite a lot of space in between

16230.8 -> them so now we probably have to work

16232.8 -> with both the default margin that the h2

16236.239 -> has at its bottom and the default margin

16239.199 -> which the h3 has at its top it doesn't

16242.479 -> really matter what we start with let's

16244.239 -> for example just start with the gift

16246.72 -> hint and see what happens if we set the

16248.72 -> margin top actually let's bring it up on

16251.12 -> the side here now we've not done

16252.8 -> anything with the margin top at all

16254.239 -> let's set it to zero

16255.76 -> you can see

16257.12 -> nothing happened okay that must be

16259.52 -> because the margin top here and the

16262.08 -> margin bottom under the h2 collapsed

16264.56 -> into each other and the margin bottom

16266.239 -> for the h2 was probably larger than the

16268.64 -> margin top for the h3 so removing it

16271.12 -> served no purpose

16272.72 -> that means that we also need to try and

16274.56 -> remove the gift titles margin at its

16278.08 -> bottom

16279.199 -> set it to zero for a couple and there we

16281.68 -> go now they're really crammed into each

16284.479 -> other actually too much they should have

16286.399 -> a little bit of spacing in between them

16288.08 -> so let's try to instead of reducing that

16289.92 -> to zero we set it to for example 10

16292.399 -> pixels that looks much more like the

16294.96 -> design we have here very good so you

16297.279 -> probably had different names on your

16299.439 -> classes and different margins and

16302.159 -> perhaps different borders and radiuses

16304.64 -> that doesn't matter the important thing

16306.239 -> is that you gave it a shot and got some

16307.92 -> kind of result hopefully resembling this

16310.96 -> so no matter what you did

16312.479 -> great job let's carry on with this

16314.56 -> course

16318.159 -> okay now we're going to prepare our

16320.159 -> project so that we later can add the

16322.96 -> hover feature so we're not going to add

16325.04 -> the hover feature right now we're just

16326.88 -> going to set the stage for it

16329.04 -> and in order to do that i'm going to

16330.8 -> first mess up this project a little bit

16333.12 -> and then it'll be your job to fix it

16335.68 -> because

16336.72 -> we are not going to use the image tag

16339.04 -> here in order to display this gift

16342.399 -> instead we are going to use a div tag

16345.6 -> so i'm changing this into a div which

16348.08 -> means i also need to close it like that

16350.56 -> because divs are not self-closing as img

16353.04 -> tags are and then next up divs don't

16355.6 -> have a source attribute so we can't use

16358.08 -> this in order to display the image if i

16360.08 -> now run this you can see boom suddenly

16362.479 -> our image is gone this src attribute has

16365.439 -> no place here because instead we are

16367.52 -> going to render this image through the

16369.6 -> css background image property so i'm

16372.72 -> going to remove this one if we run the

16374.72 -> code again you can see nothing else has

16376.479 -> happened and moving over to the css

16379.04 -> now it is your job to turn this weird

16381.359 -> line here into something that looks like

16384.16 -> this which is exactly what we had before

16385.84 -> i messed up the code here so you are to

16388.24 -> fix the

16389.439 -> gift img div because i kept the class

16392.799 -> right here

16394.719 -> so that it looks like the provided

16396.24 -> design

16397.199 -> and a little bit of a hint it needs a

16399.199 -> height and if you wonder how much i want

16401.119 -> it to be a square so equal width and

16403.52 -> height it also needs a background image

16406.08 -> which is how you'll render this gift

16407.6 -> cover it also should be centered again

16410.4 -> because as you can see here this looks

16412.48 -> very much left aligned so basically

16415.199 -> what's happened here is that the div has

16417.68 -> zero height because the div has

16420.16 -> no content inside of it so the only

16422.16 -> thing that's visible is the border which

16424.719 -> spans 400 pixels starting from the left

16427.199 -> hand side and over towards the right

16428.879 -> hand side so go ahead and give this a

16430.799 -> shot and then i will show you the

16432.08 -> solution when you return back to me

16439.119 -> okay let's do this

16441.039 -> first it needs a height and it should be

16442.879 -> a square meaning equal width and height

16445.84 -> so let's just do

16447.76 -> it and set it to 400px like that

16451.359 -> as you can see we now have a empty div

16453.92 -> on our page next up we're going to set

16455.76 -> the background image so how do we do

16457.6 -> that well you've seen that one before

16459.68 -> background image url and then point it

16463.039 -> to the images folder and the

16465.84 -> gift

16466.959 -> cover dot apec and there you go

16470.32 -> but what is happening here it seems like

16472 -> we only kind of see the top left corner

16474.561 -> of the image that is because the image

16477.119 -> itself is huge much larger than this 400

16480.08 -> by 400 pixel container so we need to use

16483.039 -> our good old friend

16485.359 -> background size and set that to cover

16487.76 -> and that squeezes our large image into

16490.16 -> the current width we have available here

16492.4 -> now finally why isn't this element

16494.561 -> centered anymore well the centering of

16496.879 -> the image used to happen because the

16498.799 -> text line is set to center but text

16500.719 -> align will only center inline elements

16503.6 -> inside of its container and as you

16505.279 -> hopefully remember divs they are not in

16508.16 -> line they are display block and you

16510.32 -> might have tried to do

16511.92 -> this play

16513.119 -> in line like that

16514.879 -> then you can see that doesn't really

16516.719 -> work

16517.6 -> then our width property and height

16519.68 -> property gets this weird underline

16521.76 -> underneath them because they are simply

16523.52 -> ignored by css because you can't force

16526.561 -> the width and height of an inline

16528 -> element as they should only be as large

16530 -> as the content inside of them are and

16532.4 -> this div doesn't have any content so we

16534.959 -> can't really use display inline what we

16538 -> rather can use is the margin technique

16540.32 -> you learned earlier the one where you

16542.16 -> set the left and right margin to auto

16544.879 -> because that works on elements that are

16546.561 -> display block and which have a set width

16549.84 -> so let's do margin 0 on the top and

16552.4 -> bottom and auto on the left and right

16554.879 -> and there we go

16556.799 -> we have it centered we are back to our

16559.76 -> original design and we've set the stage

16562.799 -> for our hover effect which nick is going

16565.039 -> to be so glad to experience so it's

16567.84 -> really cool that you've made it this far

16570 -> and let's just keep up the pace and move

16572.08 -> on to the next scrim

16576.719 -> in order for you to build the next

16578.561 -> feature for our birthday gift site you

16580.799 -> will have to learn about the hover

16582.639 -> pseudo class so let's take a step back

16585.6 -> from our birthday project and learn all

16587.6 -> about this hover pseudo class for it

16589.92 -> i've created this little fictional

16591.6 -> website for a restaurant it's just a

16594.16 -> very simple site that has three divs

16596.48 -> that are meant to be navigation items

16598.4 -> where you can look at the menu book a

16599.68 -> table or order catering if we head over

16602 -> to the css you can see that the only

16604.16 -> styling here is a set of rules that are

16606.48 -> applied to the divs that is the three

16609.68 -> menu items what i've done is simply

16611.6 -> aligned the text to the center i've set

16613.76 -> the text color to white given it's a

16615.76 -> margin some padding on the inside of the

16618.16 -> menu items i've added this red

16620 -> background color cranked up the font

16622.16 -> size and also made the font bold now

16624.32 -> what would be really nice is if these

16626.561 -> elements changed slightly when the user

16629.52 -> hovered over them so that we gave the

16631.279 -> user some visual feedback hinting to the

16633.92 -> fact that these should be clicked and

16635.6 -> also just making the site feel more

16637.279 -> alive and that is where the hover class

16639.6 -> comes in because what we can do now is

16642.16 -> if we target the same divs and then add

16644.639 -> a colon

16645.92 -> hover and opening up the curly brackets

16649.279 -> then we can write specific rules that

16651.199 -> only are applied when the element is

16653.439 -> being hovered over so for example we can

16655.92 -> change the background color to this

16658.879 -> color right here and this hexadecimal

16661.039 -> value probably doesn't tell you anything

16662.561 -> but i can disclose that it is a slightly

16664.32 -> darker shade of this red hair so now if

16667.359 -> i hover over the items boom you can see

16670.08 -> that the background is suddenly a little

16671.76 -> bit darker than the other items so this

16674.24 -> gives a nice feedback to the user so

16676.959 -> what's going on here is that

16678.799 -> this line takes precedence over this

16681.76 -> line

16682.719 -> when any div is hovered over and we can

16686.16 -> also for example increase the font size

16689.68 -> 40 pixels let's see how that works

16692.639 -> all right now it really stands out when

16695.68 -> you hover over one of the elements

16698.4 -> and let me show you a cool trick to

16700.24 -> prepare you for your next challenge

16702 -> because what you can do is actually do

16704.48 -> background image and then as you know

16707.199 -> use the url css function and point it to

16710.561 -> a image source i happen to have a image

16713.359 -> lying around in the file system right

16714.879 -> here let's try them so eyes dot

16718.561 -> jpeg we now hover over the item we can

16721.68 -> see our good friend nick staring back at

16724.32 -> us

16725.279 -> that is

16726.4 -> probably the creepiest restaurant menu

16729.119 -> i've ever seen but the point is only

16731.359 -> that you can change the background image

16733.76 -> on hover so hopefully this has prepared

16736.4 -> you for your next challenge because when

16738.16 -> we return back to the birthday gift site

16740.16 -> you are going to work with this hover

16742.16 -> class in order to help nick unpack his

16744.879 -> gifts so let's return back to our main

16746.959 -> project

16750.561 -> okay now we are getting into the fun

16752.4 -> stuff here because now we're going to

16753.84 -> create this epic feature where nick when

16756.4 -> he hovers over the gift paper gets

16758.719 -> revealed an underlying gif that makes

16760.879 -> him feel happy and appreciated on his

16763.52 -> birthday

16764.561 -> so the challenge is described here you

16766.561 -> are to swap the gift paper image out

16769.52 -> with the happy gif when you hover over

16772.561 -> the gift paper so the happy gif is added

16776.08 -> here in the images folder i'm not going

16778 -> to show it to you i want you to solve

16779.44 -> this challenge in order to see this gif

16781.68 -> now the gift paper image you are to swap

16783.92 -> out is

16785.12 -> this div right here

16787.44 -> as you remember we gave it a background

16789.2 -> image which is the

16790.76 -> giftcover.jpg file which also is in our

16793.04 -> images folder so go ahead and solve this

16795.28 -> challenge right now and then i will show

16796.878 -> you the solution when you return back to

16798.56 -> me

16803.52 -> okay hopefully that went well what we'll

16806.08 -> do is first target this gift img here as

16809.28 -> we want to create a hover effect on it

16811.84 -> so i'll do gift imd colon hover

16816.16 -> now whatever css properties and values

16818.638 -> we are setting inside of these curly

16820.4 -> brackets will be applied when the user

16822.958 -> hovers over

16824.4 -> this gift image and what kind of

16826.4 -> properties do we want to change well

16828.08 -> it's actually only one just the

16830.08 -> background image here so i'm going to

16831.76 -> copy that one paste it in and we don't

16834.32 -> want it to be the giftcover.jpg we want

16836.48 -> it to be the happy dot if like that

16840.24 -> let's see how this works i'll move the

16841.92 -> cursor down towards the image and when

16843.92 -> it crosses over we see phoebe and rachel

16846.878 -> from friends being super happy for nick

16849.36 -> on his birthday and i don't know about

16851.68 -> you but if someone told me that they

16853.36 -> would be this happy for me on my

16855.28 -> birthday it would make me feel so

16857.12 -> grateful and appreciated so we are

16859.2 -> really doing a good deed creating this

16861.92 -> website and you know what you've done a

16863.6 -> great deed for yourself in terms of

16865.36 -> getting this far in the course you have

16866.878 -> crushed through so many difficult css

16868.958 -> concepts so phoebe and rachel are also

16871.12 -> cheering for you take a moment to

16872.638 -> appreciate that and then i will see you

16874.32 -> again in the next scrim

16879.04 -> okay now that we've made sure that nick

16880.718 -> feels appreciated on his birthday

16882.638 -> through this phoebe and rachel gif let's

16884.798 -> make sure he also feels really good

16887.2 -> looking because now we're going to

16888.798 -> create this gift right here which says

16890.958 -> how people react when you enter the room

16893.44 -> and the gif will show when he hovers

16895.6 -> over this element is this hot gif up

16898.4 -> here i'm not going to show it to you now

16900.32 -> you're going to have to solve the

16901.2 -> challenge to see it and speaking of that

16903.36 -> let's have a look at the challenge text

16905.68 -> so you are to create the next gift which

16908.48 -> uses the hot gif and its html structure

16911.84 -> should be like the previous one but

16913.84 -> without the gift hint element because as

16916.638 -> you can see here we have this hint

16918.958 -> written in parentheses however that's

16921.52 -> not needed for this one i think nick

16923.36 -> will probably get the point by the time

16925.28 -> he scroll down to this one so let's just

16927.6 -> skip it but other than that you can

16929.44 -> simply copy paste this section and then

16931.92 -> of course change the text as well

16933.68 -> however you will need to do some more

16935.76 -> things as well

16937.04 -> because

16938.16 -> now that you have multiple gifs on the

16940.24 -> page you cannot use the gift image class

16943.44 -> to set the background image on hover

16946.08 -> that is this one right here because if

16948.48 -> you have multiple gift image elements on

16951.36 -> the page well then every single one of

16953.68 -> them will just show this happy gif and

16955.76 -> that's obviously not what we want so

16958.32 -> instead each of the gifts will need a

16961.28 -> unique id that controls which background

16964.56 -> image that should be shown when the user

16967.6 -> hovers over the element okay that was

16969.6 -> probably a lot to parse for you but if

16971.92 -> you didn't quite catch it just go ahead

16974.48 -> and try to solve the challenge because i

16976 -> think you will see this problem sooner

16978.08 -> or later anyway you definitely will

16980.16 -> actually so make it your best shot and

16982.24 -> then of course i will show you the

16983.52 -> solution when you return back to me

16990.48 -> okay let's do this

16992.638 -> so starting in the html by simply

16995.68 -> copying this one right here and pasting

16998.48 -> it down here removing the gift hint

17000.878 -> because we don't need that and then

17002.798 -> updating the title let's run the code

17005.28 -> now and here we can see the first

17007.84 -> element with phoebe and rachel let's

17010 -> scroll a bit down and there we have our

17012.16 -> second element though it still shows

17014.718 -> phoebe and rachel

17016.32 -> so that is a problem and that is because

17018.16 -> as i said this gift image class

17021.12 -> just sets the background image on hover

17024.08 -> to the happy gif on both of these

17026.24 -> elements right now so we can't use a

17028.56 -> class for this we need a unique id but

17031.36 -> we're not going to remove the class of

17033.36 -> gift img because it

17036.24 -> actually gives

17037.6 -> a lot of styling actually all the

17039.28 -> styling to the element

17041.36 -> so it's only the hover pseudo class that

17043.6 -> needs to be applied to something else so

17046 -> let's instead now on the first one here

17048.638 -> add an id that we'll call gif dash img

17053.2 -> happy

17054.4 -> we'll run the code so that it's applied

17056.958 -> and then instead of referring to the

17058.48 -> generic class here refer to this gift

17062 -> img

17063.28 -> happy

17064.4 -> id

17065.44 -> now if we run the code

17067.12 -> you can see that it works on the first

17069.52 -> gift though the second gift now lacks a

17072.24 -> hover effect and that is because the

17074.32 -> only hover effect we've applied now is

17076.638 -> on this specific id here on the first

17079.52 -> gift previously we used the generic gift

17082.56 -> img class so it was applied to all gift

17084.958 -> images but now the hover only works on

17087.52 -> the first one so what we need to do is

17089.2 -> use this exact technique

17091.2 -> but on this section as well so i'll

17093.84 -> create an id

17095.2 -> on this section

17096.638 -> and call it gift dash img

17099.92 -> dash pot

17101.84 -> i'll run the code so that it's applied

17104.958 -> and then since i'm lazy i'll copy this

17108.56 -> if img happy should be changed to gift

17111.12 -> img hot because that is our new id that

17114 -> targets that element

17115.68 -> and we don't want to show the happy gift

17117.36 -> we want to show the hot gif

17119.44 -> so let's see if this works here we are

17122.08 -> at this section when we hover over the

17124.16 -> image we see someone looking pretty

17127.36 -> interested in nick so i think he will

17130 -> feel really good looking and hot on his

17132.958 -> birthday when he sees this gif so great

17135.52 -> job solving this challenge let's move on

17141.2 -> as you can see over in the file system

17143.28 -> i've added a genius gif and a badass gif

17147.2 -> so your job is now to create the genius

17150.32 -> and badass gift sections they should

17152.798 -> look exactly as the hot section so i'm

17156.16 -> not going to give you any more

17157.28 -> instructions other than giving you the

17159.36 -> titles so that you can just copy them

17161.12 -> from here instead of writing them out on

17163.44 -> your own

17164.798 -> so go ahead and create these two

17166.48 -> sections right now and then i will show

17168.48 -> you the solution when you return back to

17170.56 -> me good luck

17177.2 -> okay let's do this

17179.68 -> so i'm going to start in the html file

17181.68 -> because we're simply going to copy paste

17184.638 -> this one

17186.638 -> two times

17190.08 -> then i'm going to add the titles i'll

17192.798 -> copy this one and paste it in

17195.68 -> here and copy this one

17198.958 -> and paste it in

17201.12 -> here okay

17202.878 -> let's run this

17205.28 -> now you can see we have the hot gif and

17207.76 -> then the genius section which still has

17210 -> the hot gif underneath it that's to be

17212.56 -> expected and there we have the badass

17214.32 -> section which also still has the same

17216.16 -> gif

17217.04 -> so now we have the sections rendered on

17219.52 -> the page at least but we need to fix up

17221.6 -> the css so

17223.76 -> lazy as i am i'll copy this one there it

17226.56 -> says gift image hot

17228.878 -> the first one will be the genius one so

17231.36 -> i'll do genius instead

17233.52 -> and that should refer to the genius gif

17236.638 -> now that we have this in place we can

17238.32 -> just give this class to the respective

17241.2 -> image like that

17243.28 -> running the code

17244.798 -> and we have the happy gif we have the

17247.12 -> hot gif and then

17248.958 -> the genius gif

17251.44 -> that is pretty cool i surely think nick

17253.84 -> will appreciate this compliment okay the

17256.48 -> final one here the keyword is badass so

17260.08 -> i'll change the id

17261.76 -> to badass now that we are in the html

17265.76 -> and moving on to the css

17268.16 -> copy this

17269.52 -> and change from genius to badass because

17273.2 -> that's the id we just created and the

17276 -> gif we want to fetch out from our images

17277.76 -> folder is the badass.gif

17280.4 -> let's open up our example again scroll

17282.718 -> down to who is the only person as badass

17285.52 -> as you it is of course chuck norris

17288.958 -> all right

17290.24 -> we are done with this challenge

17292.638 -> great job let's move on

17298.16 -> now it's finally time to add the very

17301.04 -> last gift and that is the chairs gift so

17304.878 -> you're gonna add this section but

17306.32 -> there's a little difference between this

17307.68 -> section and the previous ones because as

17310.08 -> you can see here it is not squared but

17312.638 -> rather more rectangular so what i want

17315.2 -> you to do is give the gift section a

17317.68 -> height of 200 pixels which is different

17320.48 -> from the original height that we

17322.24 -> controlled up here on the gift img class

17324.958 -> where we set it to 400 pixels so the way

17328.24 -> you are to change this or override it is

17331.04 -> by selecting the gift img shares id

17334.718 -> which you are going to create just like

17336.48 -> you've created ids for all the other

17338.4 -> gift images as well and then you're

17340.16 -> going to set the height on that element

17343.12 -> which essentially means to override the

17345.68 -> previous height and finally here is the

17347.92 -> text as well along with the chairs gif

17350.48 -> up in the file system here and i really

17352.4 -> think you'll enjoy this one so go ahead

17354.48 -> and give it your best shot and then i

17356.32 -> will show you the solution when you

17357.84 -> return back to me

17363.52 -> okay let's do this i'll start in the

17365.36 -> html by again copy pasting

17368.56 -> the previous section and here i need to

17371.04 -> change the text first

17373.28 -> so i'm going to do

17375.44 -> like that

17377.92 -> and then we're not gonna have badass

17379.68 -> rather it's shares

17381.84 -> so running this we can see we have a

17384.32 -> squared image in place that's not

17386.56 -> exactly what we want so we need to do

17388.4 -> the next step which is to use this id

17390.958 -> which we just created and override the

17393.6 -> height

17394.798 -> i'll do height 200 pixels like that and

17398.16 -> there we can see it is now just as we

17400.56 -> want it the final step then is to use

17403.28 -> this hovered pseudo class in order to

17405.76 -> change the background image to chairs

17408.48 -> i'll copy this one

17411.2 -> and do

17412.4 -> chairs instead and now if we hover over

17414.958 -> it we see leonardo dicaprio in a smoking

17418.16 -> giving us a toast

17419.68 -> really nice

17422.24 -> and one thing i want to mention here is

17424.798 -> that you might be a little bit confused

17426.878 -> as to why this height property takes

17430.08 -> precedence over this height property

17433.12 -> and it is actually not because this is

17435.76 -> written further down in the css file

17438.56 -> actually if we remove it to even

17441.2 -> further up in the css file even though

17444 -> css reads from the top and then

17446.32 -> downwards this still takes precedence

17448.718 -> over this

17449.84 -> and that is because of something called

17451.52 -> specificity which means that the more

17454 -> specific a css selector is the higher it

17457.36 -> will be prioritized and this id selector

17460.798 -> is a more specific selector than the

17462.878 -> class because as you know only one

17465.2 -> element can have an id whereas multiple

17467.84 -> elements can share the same class

17470.48 -> so ids are more specific than classes

17473.6 -> now i don't want to get more into

17475.2 -> specificity we're going to learn more

17476.718 -> about that later in the front-end

17478.24 -> developer career path for now i just

17480.24 -> wanted to mention it in case you were a

17481.76 -> little bit confused so we have now done

17484.878 -> all of the gifts

17486.638 -> and we have a super cool birthday page

17488.4 -> we can send to nick there's just a few

17490.798 -> things left and then we are completely

17493.2 -> done with this epic birthday site so

17495.68 -> i'll see you in the next scrim

17500.878 -> now you are going to create the footer

17503.04 -> for our site and it should have a

17504.798 -> paragraph that says want to create your

17507.12 -> own birthday gift site take this html

17509.92 -> and css course with a link to well this

17512.878 -> exact html and css course

17515.6 -> and i want you to configure the anchor

17517.76 -> tag so that it opens up the link in a

17520 -> new tab if you've forgotten how to do

17522.08 -> that well then you simply have to google

17524 -> it

17524.798 -> i've provided the link right here and

17527.28 -> also the text so that you don't have to

17529.12 -> write that out on your own however

17531.52 -> outside of that i'm not going to give

17532.798 -> you any more hints but i want you to

17534.638 -> notice that there is some spacing around

17537.12 -> this paragraph both above it and beneath

17540 -> it you can see it doesn't touch the

17541.76 -> bottom of the site and also it is

17544 -> centered it's about as wide as the

17545.84 -> images themselves and it's also in

17548.24 -> italic

17549.6 -> so you're gonna have to figure out how

17551.44 -> this translates into css i think you can

17554.16 -> do it go ahead and give it your best

17555.76 -> shot and then i will see you again when

17557.2 -> you return back to me

17564.32 -> okay let's do this

17566.16 -> so i'll head over to the html and add a

17568.638 -> paragraph which i'll give an id of

17571.84 -> footer and let's paste in the text

17577.2 -> like that and also the

17580.32 -> link

17582 -> else we need to create

17583.84 -> an anchor tag

17585.04 -> and it should be around

17586.718 -> this html and css course so we'll start

17590 -> the anchor tag here

17591.68 -> do an ahrefs

17595.28 -> and then in order to open the anchor tag

17597.52 -> in a new tab we'll do target equals

17600.56 -> underscore

17601.76 -> blank

17602.638 -> and then we'll close it off at the end

17604.48 -> here

17606.24 -> let's run this

17608.08 -> okay so we have now something that looks

17611.04 -> not too far from our design it's decent

17613.6 -> but still a lot of things lacking

17615.92 -> first of all this text is far too wide

17619.36 -> it should be more or less the same with

17621.52 -> as the images

17623.36 -> so let's do

17627.52 -> footer

17628.958 -> set the width to

17631.04 -> 400 pixels

17632.878 -> okay what happened now well we do have

17635.76 -> text line center but now that this is

17638 -> 400 pixels wide and it's still a display

17640.718 -> block element as paragraph is that the

17643.2 -> text line center won't center the

17645.68 -> content here inside of its container so

17648.878 -> we need to center it using the margin

17650.878 -> technique meaning that we'll do margin 0

17654.08 -> at top and bottom and then auto add left

17656.32 -> and right

17657.36 -> yes there it is centered but actually we

17660 -> do want some margin at the top and

17661.6 -> bottom because as you can see right here

17663.2 -> it has some spacing above and a little

17664.878 -> bit more spacing beneath it so let's try

17667.44 -> 40 pixels on top

17669.36 -> yeah that's pretty good

17671.36 -> and now 40 pixels at the bottom that's a

17673.12 -> bit too much in my opinion here it looks

17675.2 -> more like 20 or something so let's

17677.44 -> rather than do 20 pixels like that now

17680.16 -> we have 40 at top auto at left right and

17683.28 -> 20 at bottom and that looks pretty good

17686 -> to me

17687.2 -> however one obvious thing we need to fix

17689.28 -> is that this anchor tag should also be

17691.92 -> white so i'm going to target the element

17694.958 -> itself

17696.08 -> new color white like that

17699.84 -> now i think the final step we have is to

17702 -> make it italic and that's done up here

17704.32 -> where we can do font style

17707.2 -> italic

17708.798 -> and there we go that looks identical in

17712.16 -> my eyes

17713.44 -> so really good job i'll see you in the

17716.16 -> next scrim

17720.4 -> okay now we're going to talk about

17721.92 -> gradients and that's something you've

17723.6 -> probably seen many times in nature

17726.16 -> though not really thought much about

17728 -> because for example because the sky is

17730.32 -> full of gradients here you can see a sky

17732.878 -> that kind of fades from a light blue

17735.52 -> color into a whitish color and this fade

17738.638 -> is basically a gradient

17740.4 -> here's another example where it starts

17742 -> almost black at the top and then slowly

17744.638 -> fades over into purple and then again

17747.68 -> into a orange-ish or light brown or i

17750.798 -> don't know what you want to call this

17752 -> color but you get the point it's fading

17754.56 -> from one color to another and this is

17756.958 -> very often used in web design you can

17759.44 -> and you can do it with css pretty easily

17762.16 -> let's for example remove this background

17764.718 -> image of the gift card from our gifts

17766.958 -> now you can see it's just transparent

17770.878 -> and then instead we'll write background

17774 -> and linear dash gradient

17778.56 -> and then two parentheses so this looks a

17780.958 -> little bit like the url keyword we write

17783.2 -> when we want to refer to images meaning

17785.36 -> that this is also a so-called css

17787.76 -> function now inside of the parentheses

17790.4 -> we simply write the two colors we want

17792.24 -> to fade from and to so let's do from red

17795.44 -> to blue and boom there you go now you

17797.76 -> can see that all of our gifts fade from

17800.4 -> red down to blue and by default it

17803.12 -> starts with the first color at the top

17805.44 -> and then the second color at the bottom

17807.44 -> so let's try to mimic this image here in

17809.52 -> css

17810.4 -> i happen to know that there's a css

17812.24 -> color called

17813.52 -> light sky blue

17815.68 -> so if we start with that one

17817.68 -> and go down to

17819.28 -> white

17820.16 -> and have a look at this gradient here

17822.48 -> actually

17823.36 -> to me it's kind of similar to this one

17825.52 -> we have here not quite but you get the

17827.92 -> point okay

17829.52 -> now i'm gonna remove this

17831.36 -> give us our gift cover back and then

17833.28 -> give you a challenge because now i want

17835.2 -> you to change our site's background into

17838 -> a gradient that goes from blue at the

17840.08 -> top to pink at the bottom and

17843.36 -> let me show it to you let me and let me

17845.52 -> here show you how it will look i'm going

17847.84 -> to do some magic now i'm going to knit

17849.36 -> my fingers and then the gradient and

17851.44 -> then the gradient will be applied

17853.12 -> automatically

17855.36 -> pretty nice now you can see the bottom

17857.36 -> here is pink and if we scroll up it

17860 -> slowly fades over into blue

17862.56 -> and at the top it's totally blue so this

17865.04 -> makes the site slightly more fancy which

17867.6 -> i think is cool and matches the birthday

17869.6 -> team so now i'm going to knit again and

17871.84 -> the gradient will be gone

17873.92 -> like that now our site is blue

17877.36 -> all the way from the bottom to the top

17879.28 -> and it's your job now to get the

17880.958 -> gradient back so go ahead and do that

17883.04 -> right now

17888.16 -> okay let's do it so the property we need

17890.798 -> to fix is the background on the body

17893.52 -> because we need here a linear

17896.56 -> gradient

17898.24 -> going from the blue color it used to

17901.52 -> have to

17902.958 -> the pink color which we've been using as

17905.28 -> a border of our image of nick so then

17907.84 -> i'll simply paste that one in right here

17909.92 -> now it should be fading from blue to

17912.32 -> pink

17913.68 -> let's see we can see the blue and yes it

17916.638 -> looks like it is slowly fading towards

17918.718 -> pink

17919.6 -> really good job now you've learned a

17921.36 -> super cool css technique i'll see you in

17924.16 -> the next scrim

17928.32 -> okay now that you've completed the

17930 -> birthday gift site i want you to make it

17932.56 -> your own so first try to think of

17935.12 -> someone whose birthday is upcoming it

17937.6 -> could be a friend a family member a pet

17940.32 -> or basically whomever if you need some

17942.958 -> ideas you can head over to on

17945 -> thisday.com and click on birthdays

17947.76 -> that'll show you a bunch of celebrities

17949.84 -> was born on this exact date as you can

17952.48 -> see here the birth dates are

17954.08 -> chronological so you probably have to

17955.92 -> scroll a bit down until you find someone

17958 -> you've heard about rolling it down will

17959.76 -> show us that louis vuitton was born on

17961.92 -> this day in 1821 or scrolling even

17964.48 -> further we can see that also meghan

17966.24 -> markle was born on this day so if you

17968.32 -> find a celebrity you like here this is a

17970.4 -> perfect opportunity to make this site

17972.32 -> about them and what i mean about that is

17974.718 -> that i think you should change the gifts

17976.878 -> to something suitable for that person

17978.798 -> and also of course change the copy as

17981.28 -> well accordingly and if you want to go

17983.28 -> even more above and beyond create entire

17985.68 -> new sections or even style it

17987.68 -> differently depending on how you want it

17989.6 -> to look that is great practice for your

17991.6 -> design and product skills in general

17994.16 -> finally once you've done that i want you

17995.84 -> to download the code files so that you

17997.84 -> have them locally on your computer if

18000 -> you've forgotten how to do that it's

18001.52 -> pretty simple just click on the gear

18003.6 -> icon in the bottom right corner here and

18005.84 -> click download as zip as you can see it

18008.16 -> now downloads this zip which in my case

18010.08 -> is called project parentheses 45 so once

18013.28 -> you've found someone to create this

18014.958 -> birthday site about made the appropriate

18017.28 -> changes and downloaded the code you are

18019.6 -> ready to move on to the next couple of

18021.52 -> scrims where we are going to deploy it

18023.52 -> to the web

18027.52 -> on its way from your local computer up

18030.24 -> to the internet your code is going to

18032.32 -> take a slightly different path this time

18034.958 -> around because while it worked perfectly

18037.52 -> fine to just drag and drop your files

18040 -> onto github.com that's actually a pretty

18042.48 -> clunky way of doing it so instead we're

18044.798 -> going to use a dedicated tool for

18046.718 -> interacting with github and that tool is

18049.44 -> called github desktop because that's the

18052 -> way the pros do it when they interact

18054.32 -> with github they always have a tool in

18056.718 -> between them and the service which helps

18059.04 -> them push code up to github and also

18061.76 -> pull code down from github and just to

18064.32 -> make things a little bit more complex

18066.16 -> for you here what's actually going on

18068.4 -> under the hood is that both github

18070.638 -> desktop and github.com rely on a piece

18073.84 -> of software that's called git

18076.16 -> what is git well some devs who think

18078.56 -> they are really smart will probably tell

18080.718 -> you that git is open source distributed

18083.36 -> code management and version control

18085.36 -> system but you should regardless of how

18088.16 -> smart you are just think of git as a way

18090.4 -> to keep track of file changes so that's

18093.2 -> it git helps you keep track of how your

18095.68 -> project files change over time and

18098.08 -> actually you don't need to know anything

18099.68 -> more than that in order to get started

18101.52 -> using git via github desktop because

18104.32 -> this desktop app abstracts away a lot of

18106.798 -> the complexity with git and as long as

18108.798 -> you know how to use this app you don't

18110.638 -> really need to know much about what's

18112.16 -> going on under the hood so let's just

18114.56 -> get started and download github desktop

18116.638 -> right away if you are following this

18118.48 -> course via scrimba you can just click on

18120.56 -> this slide right here but if you're

18122.16 -> watching it via youtube just head over

18124 -> to desktop.github.com

18126.798 -> once you're there click on the download

18128.798 -> button so that your browser starts

18130.48 -> downloading the zip file for this app

18132.798 -> and once that's done open up the app

18134.958 -> install it on your computer and once

18136.958 -> you've authenticated with github in the

18139.2 -> app you should see a screen that looks

18141.12 -> more or less like this

18142.958 -> the first step you're going to take here

18144.56 -> is to click on this button that says

18146.16 -> create a new repository on your hard

18148.638 -> drive because that's what we want to do

18150.24 -> we want to create a repository aka a

18153.12 -> folder on your computer that holds all

18155.6 -> of our project files what you'll then

18157.28 -> see is this little modal where you have

18159.2 -> to give your repository a name so i'm

18161.44 -> going to call it birthday gift site and

18163.28 -> then you are to head down to the local

18165.2 -> path field and click on choose because

18167.6 -> what you now need to tell git and github

18169.84 -> desktop is where on your computer you

18172.638 -> want your project to live i'm going to

18174.638 -> navigate to my dev folder and just click

18176.958 -> open and then create repository that'll

18179.68 -> change github desktop into this

18181.36 -> dashboard that you will interact with

18183.28 -> the earth a gift site repository using

18185.84 -> the various buttons now you can see that

18188.08 -> it says no change files because our

18190.16 -> repository is empty in order to verify

18192.718 -> that let's click on the show in finder

18194.718 -> button when we do that you can see that

18196.718 -> github desktop has created an empty

18198.958 -> folder on our local computer and i have

18201.2 -> it here right above the project zip i

18203.68 -> downloaded in the previous scrim so i'm

18205.76 -> going to click on the zip file then

18207.84 -> double click on it so that i'm unzipping

18209.68 -> the files select all of the files and

18212.16 -> then drag and drop them over into our

18214.48 -> repository like that when you then

18216.638 -> return back to github desktop you will

18218.718 -> see chuck norris staring you straight in

18221.2 -> the face because as you can see on the

18222.958 -> left hand side here all of the images

18224.878 -> and project files have been registered

18227.52 -> so click down on the index.html file

18229.92 -> there you can see they're all in green

18231.84 -> which means that these are new lines of

18233.84 -> code ready to be added to the git

18235.76 -> repository in order to add all of this

18237.92 -> content to a repository you have to head

18239.92 -> down and write a commit message in the

18241.92 -> bottom left field right here i'm going

18244 -> to just say commit initial files and

18246 -> then to perform the commit we'll hit

18247.6 -> this commit to main button don't worry

18250.24 -> about what main means at this point and

18252.56 -> also if you're a little bit confused

18254.08 -> about what a commit actually is don't

18256.4 -> worry too much about that what we're

18257.92 -> just doing here is telling git that we

18260.32 -> want to add a bunch of files to the

18262.4 -> repository and we're also adding a

18264.24 -> little description so that in the future

18266.48 -> it'll be easier for other developers to

18268.638 -> understand what you were thinking when

18270.08 -> you added these files so let's hit

18272.24 -> commit to main that removed all of the

18274.56 -> files which was intentional but actually

18276.56 -> here my computer did something annoying

18278.878 -> max have a tendency to add a so-called

18280.878 -> ds store file which is something mac

18283.04 -> uses to handle metadata for a folder we

18285.52 -> don't need that in our project so i'm

18287.36 -> actually just going to right click on it

18288.878 -> and delete this file entirely by

18290.958 -> clicking on discard changes now once

18293.12 -> i've done that the dashboard is back to

18294.878 -> how it was before we committed the files

18297.6 -> so it has this publish repository option

18299.92 -> both here and up at the top this means

18302.24 -> sending off our code to github that's

18304.4 -> obviously what we want to do so i'm

18305.76 -> going to click on publish repository and

18307.6 -> also give it a name i'm going to give it

18309.2 -> the same name on github as we have

18311.04 -> locally calling it birthday gift site

18314.08 -> and also i'm going to uncheck this keep

18315.84 -> code private because we want our project

18317.52 -> to be open source and then i'll hit

18319.44 -> publish repository now the final step is

18322.24 -> to click on this button right here view

18324.24 -> on github and boom here we go we have

18326.638 -> created a repository locally on our

18329.12 -> computer and published it on github via

18331.92 -> github desktop just as the pros do it so

18336.08 -> really good job we are ready for the

18338.638 -> next step which is to deploy this site

18340.718 -> to the web which we'll do in the next

18342.878 -> scrim

18346.638 -> now that you've pushed your birthday

18348.4 -> gift site to github it's time for us to

18350.798 -> hook it up with netflix so that you can

18352.718 -> deploy it as well so head over to your

18355.12 -> netlify dashboard and there click on the

18357.44 -> add new site button and choose import an

18360 -> existing project there just click on

18362.56 -> github which then brings up this search

18364.638 -> menu where you can search for the

18366.24 -> birthday gift site click on it and then

18368.4 -> leave all the site settings as they are

18370.718 -> just scroll to the bottom and click

18372.4 -> deploy site then you'll see this

18374.718 -> familiar dashboard again and as always

18376.718 -> the only thing you need to do here is

18378.32 -> wait until this image here turns into a

18381.12 -> screenshot of your site which is now

18383.04 -> does meaning that your site is available

18385.04 -> on this url

18386.958 -> now hopefully your birthday site is not

18389.12 -> about nick at this point it's about

18390.958 -> someone else and i definitely think you

18392.798 -> should send it off to that person or if

18395.04 -> it's about a celebrity or whomever at

18397.04 -> least share it with the world and once

18399.52 -> you've done that give yourself a pat on

18401.28 -> the back and i will see you in the next

18403.2 -> scrim

18406.718 -> at this point you know how to use github

18408.718 -> desktop locally on your computer how to

18411.44 -> push code up to github and then have

18413.92 -> netlify deploy it to the world wide web

18416.4 -> that is really good however you're still

18419.04 -> lacking one important tool because what

18421.6 -> happens if you want to change your code

18423.6 -> and then push it up to github and deploy

18425.36 -> it again well in that case you'll have

18427.28 -> to use a code editor locally on your

18429.76 -> computer so that's exactly what you're

18431.92 -> going to learn in this scrim we are

18434 -> going to use a code editor that you

18435.68 -> actually have been using quite a lot at

18437.76 -> this point though you might not be aware

18439.44 -> of it it is called visual studio code

18442 -> and it's actually what powers scrimba

18444.16 -> under the hood though as you can see

18445.84 -> from the screenshot here it looks a

18447.44 -> little bit different from the scrimba in

18449.04 -> browser editor as we've done some

18450.48 -> modifications to it and stripped it down

18452.638 -> a little bit okay so in order to get

18454.56 -> visual studio code running locally on

18456.718 -> your computer you have to head over to

18458.56 -> code.visualstudio.com

18460.878 -> or if you're watching this scrim on

18462.878 -> scrimba just click on this slide and

18465.04 -> you'll get to the landing page once

18466.878 -> you're there click on the download

18468.32 -> button that'll start a download process

18470.638 -> of the app and you'll also get to this

18472.48 -> getting started page however i'm going

18474.4 -> to talk you through it so you don't need

18475.76 -> to read through this guide once it's

18477.6 -> downloaded just unpack the zip and

18479.6 -> install it on your computer and then

18481.28 -> you'll get to a screen which looks like

18482.878 -> this here you can see a bunch of

18484.48 -> onboarding steps but we're not going to

18486.08 -> worry about them right now just click on

18488 -> the back arrow in the top left corner

18490.4 -> and there i want you to click at the

18492.24 -> open option because that'll open up the

18494.48 -> finder menu which you are to locate to

18496.638 -> the folder for the birthday gift site

18499.44 -> click on open and there you can see the

18502.08 -> birthday gift site listed under the

18504.24 -> explorer tab on the left hand side i'm

18506.638 -> going to remove this get started file

18508.24 -> here so i'm going to click on this x

18509.52 -> icon like that and then i'm going to

18510.878 -> click on the birthday gift site to open

18512.718 -> up the folder moving on to the

18514.52 -> index.html file when we open it you can

18516.958 -> see that it looks quite a lot like how

18518.718 -> it looks on scrimba the editor right

18520.798 -> here though we at scrimba have created

18523.04 -> our own color theme so we're not using

18525.12 -> the default one you can see right here

18526.878 -> but other than that it's quite similar

18529.44 -> now let's make a change to this code

18531.6 -> push it up to github and get it deployed

18534 -> the change i want to do is just very

18535.28 -> simple i'm going to change this name

18536.878 -> from nick's birthday into pierce

18539.36 -> birthday if i then save this with

18541.12 -> command plus s or control plus s you can

18543.68 -> see that the file turns yellow means

18545.84 -> that it has changed and also to verify

18548 -> this let's open up finder alongside a

18550.24 -> browser window and just drag and drop

18552.4 -> this index html into the browser because

18554.798 -> then we can see that it says today is

18556.878 -> pears birthday so by pointing our

18559.04 -> browser to the local index.html file we

18562.08 -> have verified that yes the changes have

18564.24 -> been saved though this is just available

18566.4 -> for me locally it has not been deployed

18568.4 -> yet so we got to do that as well and the

18570.16 -> way we get these changes up to github

18572.08 -> and then up to netlify is as you

18574.16 -> probably guessed via the intermediate

18576.08 -> step of github desktop so if we navigate

18579.12 -> to the desktop app there you can see

18580.878 -> that it has noticed that we have changed

18583.36 -> line 10. you can see the red line 10

18586.08 -> right here which is the previous version

18588.4 -> before we saved our code and the green

18590.638 -> line which is the new version after we

18592.798 -> saved our code so now we have to tell

18594.958 -> git that we actually want these changes

18597.76 -> to be incorporated into our repository

18600.56 -> we have saved them locally but we

18602.56 -> haven't saved them or aka committed them

18605.68 -> to the github repository so by having

18608.16 -> this file checked and writing a commit

18610.48 -> message down here in the bottom left

18612.08 -> corner we can commit this change and

18613.84 -> thus save it in git i'm going to give it

18616.08 -> the commit message change the name to

18618 -> pair and then hit the commit button now

18620.48 -> all of our local changes have been

18622.4 -> committed as you can see it says zero

18624.24 -> changed files but what we did get is

18626.56 -> this number one up here and an option

18629.28 -> called push origin and that means

18631.28 -> pushing our changes up to github so if i

18633.68 -> click at that you can see it starts

18635.36 -> doing some stuff under the hood and then

18637.28 -> if i click on view on github it'll open

18640.08 -> up the github browser and there on the

18642.08 -> row here which lists the index.html file

18644.798 -> you can see that our commit message

18646.56 -> changed the name to peer was added to

18648.638 -> this project one minute ago that is very

18651.52 -> promising if we now head over to our

18653.44 -> netlify dashboard you can see that

18655.12 -> nitpify has already picked this up here

18657.6 -> under builds you can see that one of our

18659.6 -> projects is now being built and in this

18661.84 -> tab as well you can see we have one

18663.52 -> concurrent build going on and then after

18665.92 -> a little while you can see boom it's

18667.68 -> completed i'll click into the project

18669.76 -> and open up the url and there you go it

18672.08 -> says today is pears birthday so now you

18674.878 -> have a really powerful local dev

18677.12 -> environment and also an automated

18679.36 -> deployment process that ensures that

18681.2 -> when you push changes up to github

18683.12 -> they'll also be reflected out in the

18685.12 -> world wide web so again give yourself a

18687.84 -> pat on the back this might have been a

18689.52 -> little bit overwhelming i totally get

18691.36 -> that but over time as you do this more

18693.2 -> and more it'll become second nature

18698.24 -> it is not just nick who deserves a

18699.84 -> congratulation you two my friend deserve

18702.4 -> exactly that congrats on completing this

18705.44 -> section now let's have a look at what

18707.28 -> you've learned starting out you learned

18709.2 -> about the align items property which

18711.36 -> allows you to align items in a flexbox

18713.84 -> container along the so-called

18715.76 -> cross-access and speaking of access you

18718.24 -> also learned how to flip the flex

18719.76 -> direction between column and row so row

18723.28 -> is what's used by default but we set it

18725.44 -> to column here because row would make it

18727.92 -> look completely wacky so instead we want

18732.08 -> a column that stacks things on top of

18734.32 -> each other next up you learned about the

18736.24 -> super cool hover pseudo property which

18738.638 -> enabled us to create the feature where

18740.718 -> when nick hovers over the image the

18742.878 -> underlying gif is exposed and then of

18745.12 -> course you learned about gradients also

18747.44 -> a really neat little trick that allows

18749.68 -> us to

18750.56 -> slowly fade from blue to pink on the

18754.16 -> background here here we can see how we

18756.638 -> did that with the linear gradient on the

18759.04 -> background of the body

18761.2 -> and then we also took a quick look at

18762.798 -> how to group selectors together by using

18765.2 -> the comma in between a bunch of

18767.12 -> selectors we could apply the style once

18769.68 -> instead of having to repeat this rule

18771.68 -> again and again throughout our style

18773.28 -> sheet

18774.32 -> and you also learned about github

18775.84 -> desktop how to set up a repository

18778.56 -> locally on your computer and use this

18780.798 -> tool to push it up to github and finally

18783.2 -> how to use vs code so that you now have

18785.76 -> a proper local development environment

18788.718 -> where you can build stuff change it push

18791.36 -> it up to github and finally then get it

18793.36 -> deployed

18794.48 -> so with all of this your brain is full

18797.12 -> of new knowledge meaning that you should

18800 -> feel free to take a break right now to

18802.24 -> let the concepts mature in your mind and

18804.4 -> then i will see you in the next section

18806.4 -> when you are ready

18810.958 -> welcome to the final section of this

18813.2 -> course and here it is time for you to go

18816.48 -> solo and what do i mean about that well

18819.04 -> you know how i've kind of been peeking

18821.04 -> over your shoulder helping you step by

18823.04 -> step throughout all of the projects

18824.56 -> we've built

18825.68 -> well

18826.56 -> that time is over

18828.56 -> now i'm going to remove the training

18830.4 -> wheels and you will have to build a full

18832.798 -> project on your own because that's

18835.44 -> actually the only way you can know

18837.6 -> whether or not you've truly learned html

18840.16 -> and css

18841.44 -> so you're going to build a so-called

18843.52 -> solo project and the project is a home

18846.798 -> page for your hometown you can see it

18849.28 -> here on the right hand side this version

18851.2 -> right here happens to be about my

18853.04 -> hometown or the place i grew up in oslo

18855.76 -> norway it's a part of the city called

18857.36 -> tushov however the point with this is

18859.44 -> not for you to build exactly this but

18861.44 -> rather build a website about a place

18863.6 -> area city or country that you care about

18865.92 -> and you have a connection to because

18867.44 -> when you do that and then share it in

18869.28 -> the discord community it'll give an

18870.958 -> opportunity for other students on

18872.878 -> scrimba to get to know you better and

18874.798 -> hopefully you'll enjoy building it as

18876.48 -> well because that is about the place you

18877.92 -> care about

18878.958 -> now i'm going to go deeper into the

18880.4 -> content of the solo project in the next

18882.48 -> scrim but for now there's one thing you

18884.958 -> need to do and that is to head over to

18887.12 -> figma.com because figma is the design

18890.08 -> tool in which you'll get the design for

18892.32 -> your project it is the most popular

18894.32 -> design tool these days it can kind of be

18896.718 -> seen as the github equivalent for

18899.12 -> designers so i want you to click on this

18901.68 -> image right here and then you'll be

18902.958 -> taken to figma.com there click on sign

18905.92 -> up and create an account and i also want

18908.638 -> you to click on this image right here

18910.32 -> because that'll take you to a quick 10

18912.08 -> minute figma tutorial which bob's a role

18914.878 -> our teacher here at scrimba created

18917.04 -> specifically for students who need to

18919.04 -> learn a little bit of figma in order to

18920.798 -> do solo project here on scrimba so you

18923.04 -> can either watch this right now or you

18925.12 -> can wait until you've started the solo

18927.04 -> project when you feel the need for some

18928.958 -> guidance through the figma interface the

18931.36 -> reason this is at youtube and not here

18933.04 -> on scrimba is because learning a

18934.878 -> browser-based tool like this is actually

18936.798 -> better to do via a regular video than

18939.12 -> via slides here on scrimba so with that

18942.16 -> let's move on and take a closer look at

18944.24 -> the actual solo project

18949.12 -> now it is time for you to solve your

18950.878 -> very first solo project the hometown

18953.2 -> homepage and here it is as you can see

18956 -> it is a website that consists of three

18958 -> sections the hero here has a background

18960.958 -> image and a heading and subheading

18963.6 -> there's the activities section which has

18965.6 -> a title and three columns each one

18968.48 -> containing an image a heading and a

18970.16 -> paragraph and then there's finally this

18972.48 -> card at the bottom which is meant to

18974.32 -> introduce you to a tourist guide for

18976.4 -> this area

18977.76 -> and you might look at this and think how

18979.6 -> on earth am i supposed to create all of

18981.52 -> this

18982.32 -> well take a look at each of the elements

18984.4 -> and think back at what we've done in

18986.08 -> this course for example this hero

18988.638 -> section here with a background image and

18991.12 -> another section beneath it well that's

18993.44 -> pretty similar to what we did in the

18995.2 -> space exploration site and these two

18997.92 -> headings right here with the background

18999.76 -> colors well that's what we did in the

19002.16 -> birthday gift card with the year element

19004.56 -> and the date element and as for the card

19006.958 -> down here i think that resembles our

19009.2 -> business card quite a lot

19011.12 -> finally the three columns we have in the

19013.36 -> activities section well that looks like

19015.68 -> a job for flexbox if you ask me and

19018.16 -> we've used flexbox multiple times even

19020.4 -> the way we use it here where actually

19022.32 -> all of the three flex children the items

19025.44 -> are containers in themselves which

19027.52 -> contain an image a heading and a

19029.52 -> paragraph so i think you got this let's

19032.32 -> then look at the specific requirements

19034.958 -> first of all you're going to build it

19036.16 -> from scratch or i'm saying that with

19038.4 -> quotes because i've actually added a

19041.2 -> little bit of a skeleton here for you

19043.6 -> so you can see what we got basically a

19045.68 -> version with hardly any styling but with

19048.24 -> some of the elements in place you can

19050.24 -> see there's the hero section here

19052.24 -> there's the activity section it doesn't

19054.08 -> have all the data but at least the three

19055.84 -> images and then there's the guide

19058 -> section at the bottom here obviously

19060.08 -> though it looks terrible because the

19061.76 -> only styling i've applied is some margin

19063.92 -> 0 on the body and i've aligned the text

19066.32 -> to the center and also limited the width

19068.638 -> of the images to 100 pixels

19070.958 -> so you can use this as a starting point

19072.878 -> if you want or you can wipe it out and

19074.958 -> do it completely from scratch that's up

19077.12 -> to you next i want you to make sure that

19079.52 -> you do use classes

19081.68 -> flexbox the background image property

19084.638 -> and also the color palette that i'm

19086.4 -> providing as you can see in the css here

19089.44 -> are the hex values for the color palette

19091.76 -> i'm using and also i have a link to

19094.4 -> coolers here you can click this image

19096.56 -> and you'll be taken to the color palette

19098.48 -> and then once you're done if you are up

19100.24 -> for it there are some stretch goals

19102.24 -> first make it about your own hometown

19104.718 -> country or whatever place you like i

19106.798 -> hope everyone wants to do this because

19108.718 -> when you share it in the scrimba

19110 -> community we will get to know you a

19111.6 -> little bit better secondly if you use a

19113.6 -> different color palette your site will

19115.36 -> be even more unique and if you add a

19117.44 -> google font you can really level up the

19119.28 -> design because i've not done that and as

19121.68 -> a result the font here is a little bit

19123.76 -> boring also if you want to go crazy find

19125.92 -> a way to use the hover sudo class on any

19128.32 -> of these elements that would be super

19129.84 -> cool and finally you could add entire

19132.56 -> new sections that would be so cool

19134.718 -> however do remember that these stretch

19136.718 -> goals are optional you don't have to do

19139.04 -> them but i would encourage you to give

19140.56 -> it a shot if you have the energy so

19142.958 -> moving on to get to the actual figma

19144.878 -> file click on this image right here and

19147.52 -> if you get confused do remember the

19149.36 -> figma tutorial i talked about in the

19151.12 -> previous scrim you can click on this

19152.878 -> link right here to get to it now if

19154.718 -> you're watching this on youtube these

19156.56 -> links have also been added to the

19158.24 -> description below the video and they are

19160.638 -> in the corresponding github repo for

19162.878 -> this course finally you can do this solo

19165.2 -> project either locally on your computer

19167.36 -> or here at scrimba if you do it here at

19169.68 -> scrimba i would recommend you to click

19171.36 -> on the three dots in the bottom right

19173.2 -> corner and choose fork to new scrim as

19176.24 -> that will give you your very own scrim

19178.16 -> to work on instead of just working on a

19180.48 -> note on the timeline of this specific

19183.12 -> lesson so i will leave you with these

19185.44 -> requirements so that you can look back

19187.04 -> at them when you need to with that i

19188.958 -> wish you the best of luck you got this

19191.68 -> happy coding

19196.718 -> hold on a second did you just complete a

19199.12 -> five hour long online course

19201.84 -> wow that is phenomenally well done you

19205.12 -> should be proud of yourself because out

19207.76 -> of all the people who start this course

19209.84 -> this is the amount of people who

19211.28 -> actually complete it and you belong in

19213.28 -> that group you are not a quitter however

19216.32 -> at this point you might wonder what now

19219.04 -> what should i learn next and i think you

19221.28 -> are ready now to get started learning

19223.36 -> javascript the programming language that

19226 -> powers the web and there are many ways

19228.32 -> to do that online one of them is the

19230.56 -> frontend developer career path that we

19232.4 -> have here at scrimba which aim to take

19234.48 -> students from zero to hireable as

19236.718 -> front-end developers and you've actually

19238.878 -> taken the second module of this career

19240.798 -> path because module two consists of the

19243.04 -> course you've just gone through so you

19244.638 -> can jump directly to module three where

19246.798 -> i will teach you the basics of

19248.718 -> javascript however there are plenty of

19250.958 -> other resources out there where you can

19252.718 -> learn javascript so this is just if you

19254.798 -> like my style and scrimba in general

19257.2 -> regardless of what you do i think you

19258.878 -> should celebrate yourself so go ahead

19260.718 -> and deploy the final project you created

19263.2 -> that is the hometown homepage and share

19265.84 -> it with the world and if you've already

19267.84 -> started creating an online portfolio

19269.92 -> this project is a great first thing to

19271.84 -> add to that if you have feedback for me

19273.92 -> regarding this course i would love to

19275.84 -> hear it you can click on this link to

19277.68 -> get to my twitter profile and this link

19279.52 -> to get to my linkedin profile and if

19281.2 -> you're watching this on youtube i've of

19282.718 -> course added the links in the

19284 -> description below the video as well so

19286.08 -> with that there's just one final thing i

19287.84 -> want to remind you and that is that you

19289.76 -> are awesome the fact that you have

19291.68 -> completed this course gives me a lot of

19293.6 -> confidence in you on your journey

19295.68 -> towards becoming a professional web

19298.08 -> developer good luck with your learning

19300 -> journey going forward and thank you for

19302 -> taking my course

Source: https://www.youtube.com/watch?v=a_iQb1lnAEQ