HTML5 & CSS3 Basics: Build a Beautiful Photo Gallery | ChunLin Wu | Skillshare

HTML5 & CSS3 Basics: Build a Beautiful Photo Gallery

ChunLin Wu, Web Front-End Developer | HTML5 | CSS |

HTML5 & CSS3 Basics: Build a Beautiful Photo Gallery

ChunLin Wu, Web Front-End Developer | HTML5 | CSS |

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (1h 23m)
    • 1. Course Introduction

    • 2. Environment Setup

    • 3. HTML5 Indroduction

    • 4. HTML Elements- html / head / title / body

    • 5. HTML Elements - Heading / Bold

    • 6. HTML Elements - Lists

    • 7. HTML Elements - Button / Anchor

    • 8. HTML Elements - Image

    • 9. HTML Elements - div

    • 10. CSS3 Introduction

    • 11. CSS - Syntax

    • 12. CSS - Selectors

    • 13. CSS Property - width / height

    • 14. CSS Property - Display

    • 15. CSS Property - Position

    • 16. CSS - Box Model

    • 17. CSS Property - Object-fit

    • 18. CSS - Center HTML Elements

    • 19. Photo Gallery Project - HTML Structure

    • 20. Photo Gallery Project - Hero Image

    • 21. Photo Gallery Project - Quote

    • 22. Photo Gallery Project - Photo Gallery

    • 23. Wrap Up

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course, you will learn the basic HTML5 elements and CSS3 properties. 

Basic HTML elements? We got it. Style HTML elements? You will learn it. Center HTML elements? Sure!

Start from the basic HTML5 elements by making a simple version of Wikipedia, and then learning basic CSS3 properties after building the Wikipedia. At the end of this course, you will create a beautiful photo gallery website using those HTML5 & CSS3 skills in this course.

You'll learn:

  • Build the structure of the HTML document
  • Redirect to another website
  • Add images to the webpage
  • Shape the HTML elements
  • Position the HTML elements
  • Shape the images
  • Center the HTML elements


  • Any computer can run browsers
  • No coding or design experience necessary
  • Any Text editor or IDE, we’ll use VSCode throughout this course

Meet Your Teacher

Teacher Profile Image

ChunLin Wu

Web Front-End Developer | HTML5 | CSS |


ChunLin Wu is a full-time web front-end developer. He's professional at web front-end development. He also likes to share what he found in web development. He has planned some meetups and given lots of presentations about web front-end development. Also, He is a Medium writer of FreeCodeCamp.  He also an open-source enthusiast. He believes open-source projects can make life better.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course Introduction: Have you ever tried to build your own website? I don't know how to start. Have you ever Scott the terms of resources on the Internet, but still don't know what HDL elements are? CSS properties should be used in your project and chilling. I'm not here to help you. I'm a Web front end developer. As a Web developer, I'm always student with HTML and CSS properties. They might shooting. Now what problems you will become fronted it with were start to learn HTML and CSS in this course our that you fall of basic concepts off ej Dionne. And see if this at the end of this course, you will be able to build your own Beautiful for a Gary website. Are you excited? I'm pretty excited. I'm looking forward to seeing you in the class. 2. Environment Setup: welcome to HTML five and CSS three based X course Olympic Inning. Off less course, I'm going to get you to set up a development environment we have to Donald. That called, added the first. I really recommend you to use video studio coat because it's free and their loss of useful extensions can be used. So lates done bloody from fiasco website Simply, you can just type like you, i o actually TPS Colors last slash called the reader studio that come and Lang. You can download the escort by cooking the download bottle after downloading V s coat. I also provide some materials that will be used in the next lectures. You can donald them from Maggie Report. Just w l actually B s Carlos Less slash Help come slash in line slash adjusted five CSS a three basics start of Weill's and learn. You can see Let be horrible, and there is a grim Barton called Clone or Download and Cookie, and you can see it on those on those IP creepy. And you can download the in her report at the light off on your BS code. And there's a button called Open border licking open the border, you'd just download it and open it. And if you can see in these three borders in your V s coat and you're good to go for a next state and come which lessons you just finished your first lecture. See you in the next election. 3. HTML5 Indroduction: in this lecture, I want to introduce you to edge tale and what is acting out. EJ Dionne stands for hyper text markup language, and it's a markup language years for structuring and bursting your content on the website and still elements are represented by text and brothers will use. This takes the rendered accountant off the Web patch for you. So how about EJ Dionne? Life, as shown five, is the fifth version of external standard, and there are lots of New Edge. Don't elements in angina. Five Inlet, Allegis, your basic HTML and Action five elements to build a simple version of Wikipedia. So let's move on to the next lecture. 4. HTML Elements- html / head / title / body: in this structure our introduced four HTML elements in which our edge to hate title and body. So let's see what Wikipedia that shown in examples. Porter. Everyone to build a five page. You have to add to this Take exclamation mark. Type H T m l through a tub off the edge to file exclamation marks. Dr. Tail Defiance lace edged fired to be a vegetable. Five. Document after lunch, we have to aid Atchity ml element as the root off our edge down with Paige. Oh, Adam months should be rapid in the educational element. Then I want to eight head and hate element compounds the meta information off this page, for example. I want to give my website and then called Wikipedia so I can add the title element and better. Ellemann is inside ahead take and I just ate the content key Pdf brother were no title off your website and that's right. Click one Wikipedia exhale and their motive for options you can choose. The 1st 1 is open with life server Left silvery is a useful feature in V s coat that can help you launch a local web server. The host your webpage and showed a webpage on a browser in real time. It is really convenient to have this kind of feature while building your webpage on. Let's click it. As you can see, it's a title called Wikipedia and next we had the body element below the head element. But the airman is the visible part of the Web page. And if you want to display something on the Web page and you should eight at show elements inside of body animals, for example, let's say we add a simple lemon maybe, like say, uh, at you one actual, um, is heading and my key PD a inside of body animal. As you can see, my Wikipedia is on a Web page now isn't cool. And don't worry our introduce you to those comma extreme elements inside a body in lake lectures. 5. HTML Elements - Heading / Bold: in this picture, I'm going to tell you for extreme elements related to a text formatting layer heading boat italic and paragraphs inputs opened to Wikipedia. Text dodged on file and you can see these competence and you can't decide headings with that you want to catch six. That you one means the most important hating. So basically it is the biggest hating your webpage. And so I try to cope e the content from Wikipedia. I take just take you go good. Just take a girl as a example, So I copied and then pass it. I had a H one element inside the body. Take and add a content called Google Toe actual element and use headings headings only. Please don't try to use headings for making text bigger or smaller, because search engines were indexer in structure and content off your webpages with heads and then see how they happens just rightly and open with Life's over. Wow See See is heading called Google and next one. Now here comes boat and Antarctic, and the B element is used for defining boat text and less aid. Let's see wicked video. Let's say we add this Google out see as the comes in for the B element. As you can see, Google at RNC is a bold text. Aciego. Yes, it is a bold text, right, and then see italic text, and it is really similar to both text. And it did use fortifying italic text. Let's copy, they say it's Corvallis Court passed a inside that I am int. As you can see it called, It's the atomic style tax, and I can add an al urban coat b R to insert a line break between Be element and I Element and Beyond is an anti tank, so it doesn't need a closing tag. And the last one is the paragraph p. Airman. You can display paragraph with the P R man as Edler, content from Wikipedia. Okay, it's just copied this one. Well, that's for made it and then set fire to say how it happened. And now you can display the program with a P animal rally. You can see the paragraph on a Web page now, right? Nice leers and small thing you should notice. It's like roses were automatically at some white spaces before and after the paragraph. As you can see on a webpage right here here and just less simple, let's move on to the next lecture 6. HTML Elements - Lists : in this lecture, I'm going to tell you about Laced Armand's and let's see three weeks beer at least edge till file. There are two types off, lest elements and which are on moder list and Lee soldered list. The order list is defined with you Altech and the list is defined where O L take about Les diners and each laced item defined with L. I take Ever a text will be rabid with you o or O L take if list items are pressed inside you l take it means list items should be on the list style if the list items are priced inside. Oh, take And it means that these titans should be older laced style. So now you can add any text inside each l I take. And because they are multiple list items are Wikipedia webpage. So I just make some co p of some of them. And the 1st 1 is story Christine s story and the 2nd 1 is products and services, public services, products and services. On the 3rd 1 is come parade of fears and culture. Okay, that's Severin file and open with laughs ever to see what will happen right. See? You can see the first ones are Oh, on ordered based. And the second one's are order placed, right? Yeah. Pretty simple. Right number, huh? Okay, let's move on to the next lecture. 7. HTML Elements - Button / Anchor: in this lecture, our introduce you to butter element and anchor element. Mr. Elements are pretty common years element. First of all, let's say the four Wikipedia button anchored that actually on file. I want to show you how to build a bottom. Buttons are defined with the button. Take simply, you can just ate a button take and the text on the bottom can be repped by what intake drug ? Simple. I just ate. Click me and steps of foil unless open the external fire with life silver, you can see that look quick. Me Button just shows up on the brother, so let's move on to the anchor element. Anchor is defined with a take, and the text can also be repped by a take. There is a special attribute for a element and which is at Sheriff Attribute s rest stands for hypertext reference and the specifies the destination. A dress. So let's say where you want to make a link to Google simply, we just type have the euro cool and then we can add gu go as the content floor, a element and seven fire to see the result. Do you see that there's a link. You can direct me to the Google and besides, Button captain combined with Anchor, and we can rip the bottom element as the content off a M. And so I just aid Google UFO and yet a lot and take grew go as the content for button. So that's see the result. And you can see a Yuko Barton on a Web page on less Click It a que, also with direct our webpage to the Google. What a good right. So let's move on to the next lecture. 8. HTML Elements - Image: in this lecture, I'm going to teach you how to eight images to your Web. Pedj images are defined with image take, and he has to special attributes inside the image. Take Machar source. Ash Butte and but attributes a source. Attributes means the source off image and simply you can aid the UFO off image and the image will show up on the screen. So let's ADA imagery latitude Google from the images directory in Assiut directly here, and I add a paid images and do Go Don Jeff peg to source attributes and several file and open national file with Life Silver. Yeah, you can see that Google image now. So what is out attributes out Attribute provides an ordinate text for image and whether users have province off loading images. The image will replace with the text from out Ash Butte, for example. I add Google to, uh, out attributes. Then we removed correct her from the path off source. So let's say we them of G and set fire. As you can see the text off, Google will show up and pretty simple right, and this is the end off list lecture. So let's move on to the next one 9. HTML Elements - div: in this lecture, I want to introduce you to a thief element. If Element is the most common used external element when you build a website and it's a continent full of external elements, and you often used together with CSS to lay out your Web page the best clean your just nature rep flows at Stay lemons. You want to lay out or give land styles? Pakistan Bro. I just rep heading and Paragraphs Element is in deep. Give it a style Ash Butte and let's say we want to change the text. Carter off the edge tournaments to green. So I just give it an in lifestyle and several file open need with life. Several. Do you see a lot? The text Carter is now green, and I know for no. You may feel later bid convinced, but don't sweat it. I experience more about it in CSS sections and before lot you should give yourself a big browed. Basically, you have completed a simple version off Wikipedia 10. CSS3 Introduction: Congratulations. You have completed edge tomo parts. Now you are heading to the C S s word. So what is CSS Si has had a stands for Has skating stale shoots? Basically, it's used for starting your HTML elements where you want to style your webpage or give your Web page layout. That's what CSS can do for you. What about CSS three? CSS three is the latest evolution off CSS. It brings lots of new features to make you feel east to ferment your webpage. In Lana lectures, you will learn basic CSS and the CS three properties to stay attached elements and the end . You can build you up for the gallery website by using what you learned in this course. I already let's start it in the next lecture. 11. CSS - Syntax: after a brief introduction to see Assess, You may wonder, How can I style HTML elements right in this lecture out demonstrating the most common way to do it, which is external style shoot external style shit means you can feel your CSS file out of the fire. The CIA says fire shooting comes in at show takes and that C. C s extent examples and expanded and open one star Still that I shall file and one style still the CSS file and open the external file with life silver. You can see there's a pair of breath on the Web page. If you want to give Russia a month styles using the external CSS file, you just need to include a reference to the external CSS while inside a link element, the link almond is declare inside. I hate Airman. There is ash spewed for length element code. That's right. We just need to give in the path off less CSS file on. Browsers will know what CSS files should be used for. Starting this HTML document. Let's say we ate one, so that's Jim that CSS and save the file then. So how do you weigh right CSS has opened one style that still that says, has filed. Let's say I want to change the paragraphs Cardinal to Blue. So I just need to give t Tech a style in silent CSS file. At first, we need to give the selector, which is P. Then you can clearly see Esa's properties inside curry dresses because we want to make the elements Carter to be blue. So give us the Essence Property card Carter and put Kahlan after card cutter last week, if color a very called Blue and answer the Declaration with cynical. Besides, you can even give P almond money for CIA, says Properties. For example, I want to say that bacon cover to the paragraph simply. I just need to aid another declaration after the first declaration. Thank you for the C S is perfect cold background cutter and the body. Let's say great. So there's several fire and see the result. You can see that the photographs color. It's now blue, and there's a bacon Connor and which is great. Congratulations. Now you know how CSS Syntex works. Let's move on to the next election 12. CSS - Selectors: you have learned how to select the H T. Emma Emma Hysteria in the last lecture in this lecture, our damage shed you another three common used CSS selectors at which are universal class and I D. That's the two CSS Lecter star Ashton, you know, and the two CSS selector Stassi has a while. So what's The difference is between these selectors. Universal selector means it's elect off the HDL elements and the syntax is star. You don't need to specify anything hedged elements just give it a star in the CIA's while typically were satisfy Universal selector on the top off CSS files. Let's say I want to turn any text to rate, and that's open the external file with Life Server. As you can see, off techs are now rake, and the next one is place. Class means selecting all elements, lad. Half like giving class attributes and that's in tax is don't class, for example. I just say that class code quote and I said from signs, too 56 so, and you will match oh, elements that has classed Ashford cut Bigfoot at see the result. You can see that ABC are now big bones cool, right? And this last one is I d i. D. Means selecting an element that has given Heidi attribute. And the syntax is hashtag. For example, I just said that I d Code green test cover to Green said. While see the result and you can see that the text is now green. Great, but its simple right, So let's move on to the next lecture. 13. CSS Property - width / height: in this sector. I'll teach you how to shed edge demo elements I want to introduce you to with and height with and hide. Parties are years to set the with and hide off edge. Tomo Emmett, for example. Let's see three CSS with Hide the HDL and three seats with high CSS. And I just created a thief. Paddle it and that's giving a press name code rectangle. And that's set with and hide CSS properties to the if element in the CSS file. And I said with Teoh 100 pick So and hide to pick so and to make love beef Adam and more clear, I want to say that bagel card I want to give it a scribe Blue system file and let's open a HTML file with Life Server. See, now the thief animal is shipped to 100 pixel with and 200 so hot Besides, with and hide can also be said 2% like let's say, a safe with to 50% so that if elements with we'll be have with off the Web page and let's eight hoping enjoying it so far and let's move on to the next lecture 14. CSS Property - Display: in this lecture, I'm going to show you how to control the layout using its bright property. But this very party specifies how actually elements should be displayed and I'm going to prison you. Three basic types off This play varies, which are Brock in Life and Inland Buck and that scene four CS is displayed at T. Emma and four CS is Israel. See as fire and I'll start with luck when you send the actual element to be block level Airman were started near night and take up four with off the page. Let's see how it happens when I said that the element to block level elements it's a on giving way to 200. So on height, also 200 itself. I want to give me the Big Carter Seven and open it with Life Server. Let's open the depth tours as you can see the first adamant text up for with Off the webpage and the circum. Elman also takes up the floor with off the Web page. Even I just state with two only 200 pixels next, next days in nine and environment won't start a new line and only text up as much with as necessary. Let's say this. Play property to in line and see how the element will happen. I want to give you a good father. Arrange if the player and see the result. You don't need to specify with and hide, too, in light elements, because he text up with best down the content. If you consider Big Emmons still being a center line, right? And that's how in my works the last one is in line block. Invest early in a block combines in line with block so it won't create a new life, and you can also specify the with and hide on element. So let's see how it happens with in life. Brooke, I say this play to in my eye block. Just be 50%. 200. So so. Bacon Carter. I want to get made Tre pol on. Let's see. How did it happen? Us. You can see there are two for pope rocks. Lay are not at the same line. And what's wrong with it? Actually, there is a before white space. Why space in Algeria between in NY and in the blocks, you can see that these to arrange gloves got a small Y space between lamb. And how about purple in life blocks? Because they take up half off line and layer. It's a default. Why space between lace to purple blobs? So the second block is pushed to the next line so that she would fix it, and I'm sure you two ways to fix it. The first method is eliminate the white space between the elements, so I just pulled a second in the block elements next to the first in the block, Animal said. Vile and you can see like the white space just gone. But it's kind of may see if you got lots of in light block elements. So I prefer the second member, which is creating a parent element and said the form size CSS party to zero. Give me parent on a given class man rep. Er, I want to get me that hurt. Give it some songs. Zero file. As you can see, it can also eliminate the white space between lowers in life or in nine blocks. Elements like the inside of a parent element and the one spirits were also gone. Congratulations, you just learned how to use this play property in this section, and it's pretty common and useful. Let's move on to the next lecture 15. CSS Property - Position: in their structure. I'm going to demonstrate how to use position, property, the position HDL elements layer five men values off CSS position property, which I've stated read it to you. Absolute fixed and sticky. And let's start with stating aesthetic is that they put value off position. Property on elements are positioned in no more older on the Web page, let's see five CSS position the actual and five CSS position dusty assess while layer two thief almonds and I want to make them to be boxes. So I said that class called Box On said with and hard to 100. And I said CSS prompted to aesthetic one steady to class and let's say prostitution, stating this one is also position steady. I wanted to give each man this sky blue. Step two average separate files of the bio open eight with super. As you can see, the second box is positioned below the first box. Next is relative, so that's common. Static burst and coming out routed by your set position to relative immense that Eman is positioned to itself the win it another CSS property to set the elements. Gordon it and they are tough right bottom left on. Let's see the CIA's file, I said position to relative and say Loved to say, on 106 0 on tough to 100. So it means I moved the box 100 pixel from top and left relative to its old possession. Let's see the result. No, sir, I have gone to a bacon. Harder describe, and now you can say Lila relative box just moved to a position which 100 pick So front top and 100 picks. So front left. Great. Let's move on to the next one, which is absolute when you said position to absolute means the coordinates off the M and are relative to its parent. If the parent adamant, is non static position, otherwise element is positioned to relative to catching ammo element. Let's see that example Here is a parent box and a child box, and I said position property to relative and give it with and high 32 parent box, which is contender and I said position to absolute Teoh. I said this position absolute to the child bumps that I said left to and top to 100 picks up and I won't give it a bit from cotton, right? Set the file, set the file, and they say that result. As you can see, you see, like the child box is positioned relative to the parent blocks. Right? And that's how absolute works with relatives. Okay, let's move onto the next one. That's one is fixed. Actually, I'm eminently only positioned relative to vaginal element, and it will not be affected by scoring. While Emelin, it's set to fixed position. Fixed is commonly used for haters or navigation bars. So let's see are simple. They are two Dave elements of one is a long container. The other one is a normal box with fixed position and let's say thanks position. And they said, top to strip to pick so and then see the result. Okay, I got a big Carter again. Okay, just down the web page. Yeah, As you can see, the box is sticked on the webpage. Even I scored down the web page. Okay, Your concert last one sticky, unless one is sticking as sticky is a mixed off relative and fixed the best way to explain sticky s by example. And I use the sand. Long continued as the raper off the box and I add hating and let's say and sticky example. I had the sticky box and, let's say, CSS practice too. Sticky box positions and state top 20 and they groan. Carter. Alright, right File set vileness. The result. Yeah, on that score down the page, do you see a lot that's worn down the weapons again? You can Still at stake in Box is position relatively at first. And when the state keep box is at the top off a Web page, the box is positioned like a fixed, adamant now cool, right and congratulations. You have learned how to position, assure Hammond's using CSS position property. Now it's a little bit confusing when you use it at first, and the best way to understand it is by practice. You have a better understanding. I will see you in the next lecture. 16. CSS - Box Model: in this picture. I want to talk about box model. Box Model basically is used to layout and decide EJ Dionne Element. It wraps around ever ached inland and contents margin motor, paging and content. Let's steal a box model image from MDM Documentation. You can see lad from outside two inside our margin Bordeaux, Haiti and the content you said With and Height Properties to edge T Emma Element. It effects that content off the edge. Dion Element Hating is used to generate space around elements counting, but inside of Borders for reporting allow you to specify styles off the elements. Order. A large in party is years to to create space around HTML elements but outside our borders. So let's see. The example has open six CSS box models. Dodged and see CSS box model dioceses while and I created two dif Adam. It's with sound text content, which is Majar content one and content to. I want to give it some port of properties on that same we said boarder style too slowly and border where 23 that said pixel right on border carder Supreme concept bio home from the edge down fire with lap server you could say that the elements has the border now and even batter you can write, order property and showed hand. Syntex. It's simply you can just write quarter and for the With Ford style and bolder Carter separate file and see the results, you can see the result. It's just the same. And after creating the border, I want to legless space along the content to be a little bit wider. So I say Pain to fly now it's better, right? And you can even said, Just a side off. Repeating from simple. I replace feeding with hating top and set with bio. Maybe ask you a more. So maybe, like, 15. Yeah, now it's a 15 picks, so space on top off the content, but not for other of sites. Next, I want to create some space between these two elements. So I said Margene 2 26 0 I just need to send the bottom side. So I say, managing body to fix up. Yeah, it looks nice enough, and there is a chickie way to write trading and margin. Properties fitting and margin properties are short hand properties, so similarly, you don't need to life painting top or margin top bunch of Marten and more. We just need to write, paid in property once and said Top right bottom and left at the same line when browsers were no like the first very stop on the second various right and so on. Lambast Celsius. It's called Spin. It is tough, right? Left on. This one is bottom, right? So is zero zero canopic so and zero on that seven didn't seem like race out. Just looks of the sand and the CSS called. Looks really clean the now and great. Now you know what? This box model? It's useful to lay out EJ Dionne Element and I'm looking forward to seeing you in the next lecture. 17. CSS Property - Object-fit: in this lecture, I will show you how to recites and fit images inside a container using CSS object feet Property three C seven CSS object feed ached and seven CIA says object free passes and spoil object feed. CS has property specifies how the contents, like image or video, should be fitted to the container, which has specified with with and hunt. There are five values of abject feet prompting, but you feel content, cover scale down. And no, I assure you back simple. And I just created five image element with different classes, and I use goes images as the source of image. So let's see the C s a file, I said, with two, 300 pixels and hide to 400. Pick so to every class. And I should aid after feet property to every class. Okay, so let's see what will happen has opened the National Fire Wave Life server. You can see a lot of the first image is the original photo, and the second image is precise. To buy object feed. Feel abject Fear is the value for after feet. When I said after fit party to feel it means the content is a size to feel the content box . But the aspect ratio is kind of weird, right here come Ukraine's that come to image or video. It's scaled to maintain is as fake racial while feeding within the content box, you can see love the aspect ratio. Still the sin as original photo. The photo has to be smaller to fit in the continent box, and it's also not so ideal. Right, and next one is covered. Let's play Carver combines feel with content when you said object feed to cover image or video, we're still Minton is aspect ratio, and it will also feel the content box. But image will be clipped to fit the content box. Next one is scaled down well said object feed to see go down. Content is precise to ask if none or content were specified, but it will show up the smaller object size, which is contained in this case. The last one is now. Basically, the image will now be resized using object feet now and that's it. And crumpet Congratulations. Now you know how to resize your photo with object fit CSS property. Let's move on to the next lecture 18. CSS - Center HTML Elements: in this lecture, I'm going to teach you how to center HTML elements. Let's see. Eight c is this center at u M O months dodged and see as his center. A must see is as and Layer is a Dave element inside of Body Element, and I just aided two classes to it and which is both. And center class box is used to make a box, and the class center is used to center Dave adamant. And that's see Lucia's. While I have said with Height and Barham color CSS product properties to class box and has opened the edge to fire with lifesaver to see what it happens, you can sit like there is a arrange box, right? So how to center laced box? Do you remember CSS Property called Position? And that's state position property to absolute. So now the box is positioned relative to edge T M O intimate and I said top prop 13 to 50% and laughed Property. Oh, so 15. 15% means I just moved 50% from top and left relative to HTML element. I am, I think now arrange box is centered on a Web page, but guess what? It's not on the center off the Web page. And why is that? Let's see Liz well explained animation, and you will know what happened. The bus is positioned by the top left point so you can see the top left corner. Do has moved 50% from top and left, but we have to. Jackal barks back a little bit, right? So I just need to move left 156 and move up 156. So the bucks will be center on the Web page, and I need a CS his property to do that and which is transformed. It's a CSS three property you can use, and there are lots of various off transformed property. But I just need one vote, which is translate just late device to the mentioned translation so you can translate HDR Emmons in harassment away or vertical. Wait. Let's see Lucius as fire the bucks with and height up both 300 pixel. So they transformed property in the CSS file. I said, just for umpteen on the chance Lad, my arms 15. So dio I won t itself. Let's see a result. See, now the origin box is on the center, off the Web page and congratulations. You can now center HTML elements in the next lecture. They were starting build that beautiful for the Gary website, and I'm looking forward to seeing you in the next lecture. 19. Photo Gallery Project - HTML Structure: in this lecture, we're going to build a photo gallery website before we build a website. Let's see what they looks like. Beautiful, right? There is a hero image at the top off the website and a Tyto. Unlike your average below Harry much. There is a court about nature land. Here comes a beautiful for the gallery. Great. I'm sure you've got a builder even better for the gallery of aside after completing the scores, so that's start to make the website. At first we have to build the structure off HTML document and we have a hero image at the top off the website. So I add an image at a month and at the path of image to the source aspirate. Let's say I add image forest. Oh, so I made a hero title on the hero image. So I add a painting code nature rapid by a thief adamant to make it easy to lay out and give it styles. Next, I want to make a court below the you wrote in Match. A court has to be an italic style text, so I add, and I take with the content of nature always. Where's the Carters. Oh, less period and also rapid by a thief. Right then, we have three rows of photos, right? So let's 83 thief elements to Rep. Lowest photos at the first row. I want a photo bigger, so I just paid to image elements inside the first element at the second room. I want four small photos, So let's put four image elements inside the thief element as the last row. I want to add three be friend with photos, so I add three image elements in silence. Last animal and I'll add the parents later and that's it. We're just completed that structure off. HTM Oh, document. So let's move on to and see as fire in the next lecture. 20. Photo Gallery Project - Hero Image: Congratulations. You just build a structure off html document in lace lecture. We're going to lay out the website and started as well. That's save. While the website looks like now you can see that there is a default margin with front of body. Armand, this is a really big photo. The hero Tyto on the court. Okay, lets Rice on CSS code in Gary CSS file. So I wanted defy Universal, select her. And I said margin for 15. So zero to override the default margin property. Seen the Web page you're going to see like the margin with just gone after, lad. Let's build the carer image and you can see that photo is really big. So I want to resize it using object feet. I add a hero and class to the image element then and seeing his properties to it. And I want to I want to hear image text up four with and half height off the web page here , I want to introduce you a useful failure to weight and height, which v W and V tach www relative to 1% off the well off the court and be edge relative to 1% off the heart off were court and what s report report means the browser window size. So I just said, with 2 100 VW and Hide to 50 v, Etch has said File set file. See, now the hero image is food with and have heart off the Web page. Next, I just need to eight object freed to it. Copper sex. Yeah, it looks really good, right? Next, we want to put the hero title on the center off the hero image. Remember how to center edged here elements. You need to have a parent adamant. So I add a thief element as a record off Akira image and give it a class man code safe hero , Raptors. After life, I said the position property toe relative to now I want to position the title simply. I add a hero title toe. The adamant class and said position to absolute Layla title can be positioned best on its parent element, which is a role record. And that's center a title. I said I loved to 15 persons on the top 2 52% as well and chance that a title using chance for property, my nose 15% largest 50%. Let's say file and say while the website looks like you can see that the title is now on the center, off the hero image and let's style a hero title, I said. Connor, too. The green card. A cold seven. Yeah, I want to make the form size bigger, Let's say 36 weeks and they made a big father RG our GP a Islam Qala coat and the last Param Eter means the past teen off the color. And I just said it to your point life and said, Yeah, in the space and now and I will up space around the content wider. So I said, painting to 26 So and C while the title was like hours. And now we just completed the hero image and the hero title. The next lecture. We'll build a court area and stay tuned 21. Photo Gallery Project - Quote: in base lecture. Let's continue to build the court area. I had a class court to a day. Allen and I want a court either. So I said form size to start to pick so and give it a light gray color to make it look smooth. Say hashtag C c c. That we need to center court a list time I use the C. S s property called text Lie descends from the court because the court is text after Lord, we don't want the courts so close to the heroic image. Mr. In Court, What it looks like now you can see is so close to here image and we don't want, of course, to be close to the image. So just aid aiding don't pick. So zero so so zero pick. So you can just write that big. So zero, this is Alatas should have seen text on the first value means braiding top and paid in bottom. And second, very old means had in left and right set file And let's see what I look. Looks like lattes it not that hard. Right. That's move on to build a father Gary in the next lecture 22. Photo Gallery Project - Photo Gallery: in this lecture. They are going to build the photo gallery, and you can see the completed project there to bigger photos at the first row on then four small photos at the second row and three different with photos at the last row. And let's start with the first growth. So I just give land the sink. Last cold se large image I just covered and fantastic to a second. What, as specified Teoh in major path to the source Ashby campaign and image right and sip, spoil and that say what the website looks. Life now you can see is campaign for two and a big 12 of photo gripped. So let's rice on CSS code and at one large images tech of half with off the Web page. So I stayed with 50 per stands and save height to, let's say, 300 pixels and said Object feet two career. Let's see the webpage you can. Still, at least two large images are not Allison line, because imagine elements are in line label elements. That's why I wrapped. Imagine animals with the thief adamant. Remember how toe eliminate the wide space between in light elements? Let's give let the element of past se emerge. Reppert Suit Imagine bad for Yearsas 20 form size zero while and see left page. Yeah, now to bigger photos are at less than line. Great. And let's move on to the second row and I want four smaller photos at the second room. So I gave each image element a small, small image class and and said much path through a source. Attribute. Match life homes, fans set fire. Let's see, when the website looks like there, you can see for photos and we want them to pay. Smother. So I say snow and with said with to buy for sends. That's saying 115 eggs, toast scores. Object beat, covered, Set fire. Let's see what happens. Yeah, we're still name a parent rapper and said that four size to do so, which is endless ink class in match. Reppert sets a file. Great. So let's move on to the last row at this room. I want three different classes because I want the images have different with. So I said class median one, and that's to then we said different with valid to each class. That's a just one 20% and hide should be in the sin. Maybe, let's say 200 pixels and object covered. I just copy too. The media. You much too. Say the 2nd 1 I wanted a way to be 50 percents. Media image 30 and 20 plus 15 plus 30 s 100 Great on Don't forget Reppert Safer file set file and not say while the website looks like See? Okay, I forgot to add the source. I'm sorry, but I sure standing in the forest after a while. Great. And that's awesome, right? And we just made a beautiful for the gallery website and please give yourself a bake of cops. It's not easy to learn lots of HTML Oh airman's or see as its properties and that a private island in the project 23. Wrap Up: Congratulations. You have completed this course. I hope to learn lots of things from this course and injured is so far. If you have any questions for this course, please feel free to ask me. I would love to answer your questions. Also radiant doping Forward to seeing your photo. Gary. Websites Heavy. Cody, I hope I can see you in the next fast.