Transcripts
1. Introduction: To build websites, HTML and CSS are the essential skills you will need to learn. You will also need lots of practice too to get the hang of these skills and this is the aim of this course. During this course, we'll be building a portfolio project to give you the chance to put your new HTML and CSS skills into good practice. You will also get the chance to showcase your skills by building a site and also have a great looking portfolio to add to any future projects too. So who am I? Well, my name is Chris and I've been a web developer for 20 years and also teaching these skills to others for many years too. By the end of this class, you will have a great understanding of how websites are built and also the role which both HTML and CSS has to play. Not only will you learn the essential skills for a beginner, we will also go even further by covering more intermediate topics such as responsive design, layout using grid and Flexbox, animations and transforms, adding a parallax-style effect using CSS, and so much more. You don't need to have prior knowledge in HTML or CSS to get started and in fact, if you are completely new, a willingness to learn will get you a long way. We cover things from the ground up explaining everything you need to know. However, if you do have some experience building websites with HTML and CSS, you will hopefully learn some new tricks along the way, too. By the end of this course, you will have the skills you need to build great looking responsive websites and also a live portfolio online for the rest of the world to see. Thank you for taking an interest in this class and let's get started.
2. Share Your Work On Skillshare!: When taking any course, it's really important to
not get in the habit of following along just for the sake of taking
off another lecture. Take the time to
process each lesson, review the code which you write, and think about how you may approach these
solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something
personal and unique. You don't need to get too lost and diverted away
from the class, and you can even take a step back after you've
finished the class and come back and make some
project changes afterwards. This will really give you
a good chance to practice what you've learned
away from the class. Also, remember to share
your project too here on Skillshare and only
will I check it out, but it will also inspire
fellow students too. For more information
on the class project, head into the project and resources tab where you can
not only upload your project, but you can also see
other class projects too. With this in mind, I look
forward to seeing what you create and upload
here on Skillshare.
3. What is HTML & CSS: Before we jump into our project, if you are new to HTML and CSS, we're going to take a look at what these are in more detail. We're not going to go too deep since we'll be writing a lot of HTML and CSS during this course, but a little background will help you understand what we will be doing. Beginning with HTML, which stands for hypertext markup language, and is the standard way to write web pages. We write HTML using elements and these are usually just a pair of tags which will describe the content inside such as just here, this is the p element which is for adding a paragraph of text to our web page. First there's an opening tag and then we have a closing tag which is indicated by the forward slash, and then we add our text inside. Most HTML elements have an opening and closing tag, however, there are a few exceptions such as when using images which only have the single tag. This is because image tanks have no content inside, so just text. Instead we point to an image file and we'll cover this during the course. How do we go from this to a full web page? Well, let's take a look at a typical example. It's because we're creating a HTML document that we're also going to be using the HTML elements to surround our whole Web page, this also has the HTML opening tag and also the closing tag too which is going to surround all of the content we see on the Web page. To begin, we have the HTML tags and then nested inside here we have all the content for our page and any contents which we'll see in the next video that we want to display in the browser goes inside of the body element. Nested inside we have the body which is going to be a wrapper for all of the images and all of the text, links and things like that on the page. Inside this body, we then have all of the elements which you see here, we may have a header so this is on the next level in, and then inside of this header we can add further nesting too. Often we may want to add a logo or a site image at the top of the header, also some links for navigation, or we could have our navigation just below as we see here. Inside of the main section we have some further nesting too on the same level as the header. We also have the main section, and inside here we can add further elements inside here too. We may want to add a image, we may want to add some text, or we could also divide this up further into multiple sections. For example, let's say we had a new section inside here. This section could also contain some further nested elements, and these again go in between the opening and closing element. We could add some text inside here to this section, would then also contain the p elements and this is how a Web page is generally structured. This is how we get our content onto the page, but how do we add styling and layout? We do this using CSS, CSS is a way to change the look, feel, and layout of our Web pages, it does this by adding colors, sizing, spacing, and positioning to name a few, and we can even use it for animations and transitions. To do this, we need to target the HTML elements we want to style and they're multiple ways which we can do this. Looking at this p element from earlier on the left, probably the most basic way to do this is by the element name. Both on the right is how we write our CSS, we target the element by it's name such as p, and write our style rules inside of these curly braces such as the font color, and size. This would apply the style into all the p elements on a page, however, if we just wanted to target born single element, we could add a unique ID to the opening tag, like this. This id name of text-red is totally up to us, and any extra information we add into this tag like this, is known as an attribute. We'll link this ID to our CSS by its name with the hash prefix as we see on the right. Since an ID is intended to be a unique name targeting only one single element, we also have the class attribute too. This class can be added to multiple elements resulting in our styles being more reusable. Like the ID, we'll link it to the CSS by its name, but this time we add a dot as a prefix. These are examples of what we call CSS selectors, and we'll cover some more advanced selectors throughout this course. This is just some basics to get us going with HTML and CSS, but I always believe the best way to learn is by actually building things, and this is what we're going to begin to do in the next video where we setup our portfolio projects.
4. Setting up our portfolio project: Let's now take this knowledge and we can apply it to our portfolio project. To begin with a web project, all we need to do is to create a regular folder which is going to store all of the files and folders which we'll need. I'm going to add my project to the desktop or it can go anywhere which you prefer. I'm going to right-click and create a new folder which I'm going to call "portfolio." This name is totally up to you and feel free to change this. Next, we need a text editor to write our code. I will be using Visual Studio code for this course which you can download from here if you need to. VS code is available to download for free on Mac, Windows and Linux, or you can use any other which you prefer such as Atom, Brackets or Sublime Text. I already have Visual Studio code installed so I've got this open up on the desktop. To open up our project, you only to do is drag over the project folder and then we need a new HTML file to begin working with. We can go to the new file in the options or use Command or Control N and this will create a new file which I'm going to save as the index.html. This will automatically save inside of our projects and all HTML files need to have this extension. This index file is generally the main file, all the entry point into our project often used as the homepage in a simple HTML site. Let's get to work by creating our initial HTML structure, starting at the top with the doctype. A doctype is the type of document we're creating and this will tell the browser that this is an HTML file. Next, we need to surround all of our content in this page, in the HTML elements, and this has an opening and closing tag. We can also set the page's language as an attribute by typing in "lang" and I'm going to set mine to be en for English. If you are using a different language, you can quickly find a [inaudible] language codes by searching for HTML language codes in your search engine. Inside of the HTML tags, this contains both the head and the body nested inside. Let's start with the head section and this is going to contain information about our site and also links to other files. None of the content we add in the head section is displayed in the browser. I'm going to begin inside here by adding two meta tags. Meta tags are simply data about our site and not displayed in the browser. The first one, we're going to add the character set attributes and set this to a value of "UTF-8." This will set the characters which we are going to be using in our project. HTML5 standard is UTF-8 which covers almost all characters and symbols in the world. The second one, we're going to set the name to be equal to "viewport." This is the viewport meta tag which is used to set the page up for different screen sizes. We do this by setting the contents and so it's equal to the width, to be equal to the device width and this will set our webpage to be the same as the device width which has been viewed on with let's say mobile, a desktop, or a tablet. After this, add a comma, and I'm going to set the initial scale to be equal to one. This is really important for responsive design. This will set the initial zoom level, all our scale when the page is first loaded. This is really important so all site looks good on all screen sizes. If we don't add this, a mobile device may try to take our desktop size page and it simply zoom out to try to fit all of the content onto our small screen resulting in things such as our text looking really small. We don't want to have any zooming or scaling since we want to take care of the look and feel of our project using CSS. A lot of this may look confusing to begin, but this is going to be something you will reuse on all projects so you will get lots of practice. The final part is to add the page title and this is the title of the page which will be displayed in the browser tab. I'm going to set this as Chris Dixon's Portfolio. We can change this to suit your project. Finally, you [inaudible] to the head section, you can also add a body. This is the second element which is nested inside of our HTML. This is how we set up a basic HTML structure. This body section contains all of the content which we want to display in the browser such as any images, any links, and also any text. So you will spend most of the time for the rest of this project.
5. Sketch your ideas and gather your project images: Before going any further with this project, there is two approaches which you can take. You can follow along with me, and build the exact same project. If you just want to learn HTML and CSS, and this is completely fine. Or if you are feeling a little bit more creative or want to build a real portfolio which you're going to use, now is the time to gather everything which you'll need for your projects. This is going to be the portfolio which I'm going to be creating. It has a large header section with an introduction about ourselves. If we reload the page, we also have some fading animations. We have some vertical texts. Then as we scrolling we see some flip animations including a parallax image in the background. Further down, we have a recent work section, which includes two rows with some contents containing information about a previous project which you want to showcase. These also have some sliding animations too. We'll also learn about how to lay these out using Flexbox and some other techniques. Down at the bottom we have a contact to section, and the site is also fully responsive. If we shrink the browser down, it's also looks good on different screen sizes. Also the content adjusts and changed the layout to suit the new screen size. If we go up to the top section, we have some links. Let's go to our projects page. We have the same header for the top. Then we have some recent projects using the CSS grid layouts. Again, if we shrink this down, this will also respond, and changed to suit the screen size. If you want to just follow along with me, this is totally fine. If you just want to change your name and the images, using this simply as a learning experience. If you are planning on customizing, it would be a good idea to create a sketch or a mock up of how you would like it to look. You will also need to gather together any images you will want to use too. I have provided the background image to use with this course, which is the parallax background image from the homepage but you will need to provide some images to use in the portfolio. If you don't have many projects to use, you can find some sample images which you want to include or also reduce the amount of projects you want to showcase. Take a few moments to gather all of the images and ideas which you will need for your project. It may also be a good idea to resize all of the portfolio images which you are going to use. This will make the grid layout much easier later on in the course. Once you've finished, let's move on to the next video, where we're going to begin by creating the header section.
6. The header section & semantic elements: Before HTML Version 5, a typical thing that web developers used to do to layout our content on a page, would be to create lots of different div sections to surround our areas or our content. For example, we will create a div for our header, our main section, our footer, and also maybe a sidebar too. To distinguish between each one of these divs or sections, we would generally add a ID, as we see here, such as the header or the footer, so we knew that each one of these sections was different. Now, though, since HTML Version 5, we have many more semantic or descriptive elements we can use. Many of these are pretty self-explanatory. We have one such as the header, the footer, a navigation. We also have a main section for the main piece for our content on the page. Related to this main section, we have the aside, which is typically used for things such as a sidebar. We can then add standalone sections of content, or we can also have things such as the article, which is a self-contained piece of information, such as a news article. We'll make use of many of these semantic elements throughout this course, starting in the next video, where we'll take a look at the header and the nav. This is the final version of the project which we're going to build. I'm going to get to work in the body section by creating this header. This will give us a chance to also take a look at some semantic elements which we just looked at. We can make use of the header as a wrapper for the section, along we're also looking at the nav element too. Let's do this over in the body section of our project. Remember, all of the content which we display in the browser will go in between these tags. We can start with the header, which is going to wrap all of the gray section which we've just seen. Starting off with the nav links up at the top. Our navigation links is going to be a hedge in my list, or more specifically, a unordered list, which we can create using the ul element. An unordered list will simply output some list items, by default with the bullet points on the left. We also have a ordered list which we can use with the ol element. This will create a numbered list. Inside here, we add each one of our links with the li tag, which is short for list item. We need to add a home, and also the project's link. If we save this, we can now open this up in the browser. You can even go into your portfolio of projects and double-click on the index.html, which will open this up in the browser. Instead, we can go in Visual Studio Code over to the tab. We can right-click, copy the path, and then paste this into the browser. We now have our two links up at the top. If we click on these, they don't link to any other pages. To do this, we need to transform these into a link using the a element. Let's temporarily remove the text that's inside the a elements, and then paste this between the links. Now, we need to tell the browser where we want to link to. We do this by adding the href attribute. This is a whole link, and we're currently on the homepage. We want to link to the index.html. Let's do the same for all projects. Paste this text back in, and then the href is going to go to our project's page. We haven't created our project file yet, but we can add this in for later on. Save this file, and then, over to the browser and reload. We now see that these are transformed into links. If we click on the projects, we're taken over to the project.html, which, of course, we haven't created just yet. Click on the "Home", and we'll remain on the index page. Next, we need to add the text into our header. First of all, we have the heading of "Hi, I'm Chris", some simple text below, and then our vertical text at the bottom. We can add this within the header section, but just after the nav element. The text of "Hi, I'm Chris", I'm going to add in a level one heading. HTML provides us with headings we can use from Level 1 through to Level 6. Level 1 is going to be the biggest and also the most important. The size and importance drops down as the number gets higher. Add the text for your project, and then below this we have the regular text. We add regular text in the p element, which stands for paragraph. I'm going to surround my text in the tilde icons which you can find on the keyboard, and the text of, "I am a web developer and course creator." The final part that we need to add is the text of "I make things", and this is going to be our vertical text. The vertical text though is not created using HTML. The HTML is simply there to add the content to our page. We're going to add this using a Level 3 heading. This will appear in the browser at the moment just as a regular horizontal text, and we'll change this later on with the CSS. Just after our paragraph on here, on the next line, the Level 3 heading with the text of "I make things". Save this file and over to our "Project" tab, reload. The content is now on the screen. Since we've currently only added the HTML content, our project doesn't look as good as the final version just yet. We're going to change this in the next video by adding a style sheet.
7. CSS first look and linking our stylesheet: Earlier when we setup our project, we said that the head section contains information about our sites and also links to our files. But we're not going to link to a style sheet which is going to help improve our styling and our layouts for our projects. First, we need a style sheet to work with so we cannot dissolve it in our projects. We can open up the sidebar and create a new file in the root of our projects. I'm going to call this the styles with the dotted CSS extension, which we need for all regular CSS files. Since this is not a large project, I'm going to keep all of the styles for this course in a single file. For larger projects, you can use as many CSS files as you would like, and even organize them into folders too. Next we need this inside of our HTML file in the head section. Go to the Index. Then I'm going to link this just above the title. Remember earlier we said the head section is used to add information about our sites and also links to our files. We can create this link, by default, we have this relationship with style sheets, which is exactly what we want. Then the same "href" attribute that we have for our links just below. Inside here we need to ask the file path to the file which you want to link to. Since this file is alongside our index page, all we need to do is to add the name of our file. If we organized our CSS into folders, we would also need to add the "Folder Name" too. Just a CSS folder, and then forward "slash" into the name of our file. To test that this file is working properly, I often do something obvious which will display in the browser. If you go to the, "Body", and sets the background color to the color of red. Let's save this and reload the browser, and this is clearly now linked so we can remove this file. Now I'm going to add to the top of this file some global styles which will apply for all the sites. I would also reset in some default styles which the browser adds automatically. Also to begin, I'm going to be styling the sites mobile first, then later on, we can adjust our styling for large screens. Let's begin by shrinking it down to a small screen device. I'm going to place this alongside Visual Studio Code. Since we only use one CSS file, keep this more organized. I'm going to add a comment. A comment is some texts which we want to add which is not displayed in the browser. We can typically use this to our notes for our self and our developers, where the comment in CSS with the forward "slash" and then a," star", and then we close it off when the star and forward slash in between here we can add any text which you want to add. I'm going to add this section as global styles. The first thing I'm going to do is to target the body by setting the font family. If we take a look at the auto complete, we can see some of the available fonts we can add, and I'm going to go for "Georgia", which go down "Times New Roman" and "Times New serif". These are web safe fonts which we can use in your projects, meaning they are safe to use across all browsers. We can also include different fonts from other providers, such as Google fonts, the phenomenon to stick with one of these website fonts. Often when we declare the font family, as we see here, there is multiple fonts. We have four just here, and this is in case the first one is not available. Georgia is not available. It will look for the Times New Roman font and fall back to the times. Then the final one would default to a generic serif. On the next line, we're going to set the base on size to be ten pixels. We'll see why very soon. The next thing we're going to do is set the margin to be zero, and this will reset any browser default. We can set the width to be 100 vw, which is 100 percent of the viewport width. This is because we are styling mobile first and we want the content is span the full width of the mobile device, and also again, since we are targeting the mobile devices, we're also going to center the content. We can't override this later on when developing for larger browsers, and we'll do this using midi-queries. "Save" this and go to the "Browser". "Reload". See the text is aligned into the center and the font size is now 10 pixels. Next week we're going to remove these bullets from our own order list. Let's target the unordered list elements. We can remove these by setting the "List-style", to be equal to, "Non". "Refresh", the browser. We can also see from our unordered list that this is not completely centered. This is because of some of the browser defaults which are applied to our unordered list. We're going to remove any margin, which is the spacing around the outside of the elements and also any padding, we can reset this too, and padding is any spacing which is added inside of the elements. Margin is outside, and the padding is inside.I want to take a closer look at these very soon. Our links also have the underline. This is because these are surrounded with the a elements. We can remove the underline by setting the text decoration to be "none". Our links also have a different color. We can override this by setting the color value to be inherit. This means the links will inherit the color from the parent list item rather than it need default in color, "save" and "refresh". Most of this section is just browser overrides and some basic defaults. We're now going to move on to some specific headers value. We can also create a comment or two. Just like before, we can create our comments, and this is going to be for the header section. Our header is surrounded in the header elements, and just like we see in the final version here, we're going to set this to be a light gray color. We do this by setting the background property. I'm going to set this to be any color which we choose, which I'm going to go for the color of light slate gray. If you want to find out more about different colors we can use, you can do a Google search for HTML color picker. You can use the default one which appears in the search or select any of the links below. If you are using a hex value, just like this, we also need to copy the hash and then we can replace this as our background color. I'm going to keep mine as the gray color. Then reload the browser. I will see this now taking effect. At the moment, all of our content is squeezed up against the top and the bottom of the header. Remember we've always said that we can add some space in, inside of our elements by adding padding. That's obviously now and I'm going to set this to be the value of 1rem. 1rem is one times the size of our base font, which we set up in the body size earlier. So 1rem would be equal to 10 pixels, 2rem would be 20 pixels, and so on. Reason we set this to be a rounded 10 pixels is so we can easily work out the value in rem. So now if we say this, we should have 10 pixels of padding around the outside. Next, we're going to set the height of the element, just like we've seen in the final version with the full height of the browser. We can do this by setting the value of 100vh, which is 100 percent of the view-port height. Next, we're going to move on to styling the navigation links. These are being created using an unordered list. Let's set the font size to be equal to 1.2rem, which is the equivalent of 12 pixels add in the unordered list, like this, we'll apply the font size to all of the unordered lists on our page. If you want it to be more specific though, and only apply this to the unordered list. Inside of our now section, we could be more specific and add the nav in front, just like this, meaning we are now free to add different styling into different unordered lists. Next up we're going to set the display type to be flex. We will look deeper into the CSS flexbox soon. But for now, this allows us to lay out content in one direction. Either horizontally, defaults or vertically. Save this and reload. We now see the links are laid out in a horizontal direction. To push these links back into the middle of the page, we can also use a flexbox property, which is justify content and the value of center. These links also need some space in between. We can do these by targeting the list item. Again, we're going to be more specific and targets only the list items in this navigation section. We can do this by adding some margin. When setting the certainly margin if we just type in a value such as 1rem, this will apply to all sides of our list item. So 1rem of margin will apply to the top, right, bottom, and left. We can also use a shorthand which is to apply the margin to the top and bottom and also the left and right only. So to begin, we can set this to be zero on the top and bottom. Then the second value is the left and right, reload, and now I have some space in between. Moving down to our level one heading. Let's also add some font-size into this. Again, we're going to be more specific and only target the level one heading. Inside of the header section. I'm going to set the font size to be 5rem. Reload, and now it's much bigger. Moving down, we also have the p element below. So this is header p. The font size, I'm going to set this equal to 1.6rem, which is the equivalent of 16 pixels. Some padding which is going to apply on the inside of the elements. So 1rem on the top and bottom add some space in between the rest of the text, and we don't need any padding on the left and right since our text is centered. Let's take a look at this. Okay, good. If we take a look at the final version, we also have this line separating things out. We can add this in using a hr elements, which is a horizontal rule in the HTML, or we can add a border on the bottom of this text. Let's do this using CSS. The border bottom, which is going to be in line with of one pixel, a solid line, and the color of light gray semicolon at the end and refresh the browser. The last parts of the header styling is to target the, I make things taxed at the very bottom. So far we've been targeting the elements by the name such as header and p, which us we looked at earlier. We can also use a class name to. I'm going to add a class name to rotate this element. Since we're going to reuse this across our page over in the index.html. Let's look for our level three heading. We can add a class of rotate. This is because the text will rotate on the largest screens. So let's go back over to our style in which I targets a class with the dot, the name of rotates. Rather than simply using the margin property we looked at before, we can also be more specific and target a single side, such as margin top. I'm going to add a value of 2rem, a font size of 3rem, and the opacity, which is the see free value of 0.4. This will mean our text is 40 percent transparent, meaning some of the gray background color will come through. So this is how this text will look on the smallest screens. Then later on, on the big screen we'll add the rotation. This is our first look at styling a web page with CSS and also taken a mobile-first approach. As you can see, we've covered quite a few CSS rules here and there's also a lot more which we can apply. We'll discover many of these as we progress through the rest of the course.
8. Quick Aside: Inspecting CSS with the devtools: Before we go any further into this project, I want to share with you a quick tip which can really help you during development and this is to use the developer tools, which are built into all of the major browsers. The Developer Tools, amongst other things, can't allow us to inspect the HTML and the CSS of not only our own projects, but any other website too. We can access the Developer Tools inside of the browser. Generally we'd right-click in or control-click and then go to inspect or inspect element for some browsers. Inside here, we have lots of information about the Chrome websites. Want to expand this. We have the inspector, first of all, of the near top corner. If we click on this, we can then hover over parts of our websites. Just like which part we want to look at. Let's go far with level one title, click on this. We can see the HTML structure on the side you steer. You may also see this information down on the bottom of the browser, but I'll just move mine to the right-hand side using the options here. Here we can see that the level one heading is highlighted. You can see exactly which possible HTML is controlling this section. Then on the right we have this styling. We see that the header H1 has a font size of five rems. We can also click on here to remove the equal style in. We can play around things by adding new style into. Let's change the equaller. This instantly takes effect in the browser. Below, we also see some default style in which has been applied by the browser. We also see down at the bottom not some styles of also been inherited from the body section which is the container, such as the font family and the text alignment. There is many more advanced tabs which you can see at the top but we won't be covering this during this class. The Developer Tools not only allow us to inspect the HTML and CSS of our own site, but also of other sites too. For example, if you go to the Mozilla website, we can do the same here. Click on the inspector, and then choose any elements. There is much more HTML as we can see here but this is surrounded in the p element for the text. We can also see all of the styling which has been applied, such as the font sizing, which we can click on, a margin, the font family, any line height, and so much more. None of these changes are applied permanently. All we need to do is refresh and everything is restored back to default. This is just a quick tip to show you about the Developer Tools if you've not used them before. They can be really useful during development. The developer tools do also have lots more advanced features. But we won't be covering this during this class. Next up we're going to get back to coding our portfolio by adding a background image and also a parallax effect.
9. Background images & the parallax effect: That's in a parallax style effect to our web page can really make it standout. You may have seen this effect when scrolling on web pages or applications. It basically involves the background, which in our case is an image scrolling at a different rate to the rest of the content which sits on top of it. There are many options out there to achieve a similar effect and many making use of JavaScript. But for this project I'm going to be creating a simple CSS only version. To understand the Parallax effect in more detail, let's take a look at a quick example. On the left here we have a typical web page layout with a header. We have some images and also some content which may go off the bottom of the screen. If this happens, the user will need to scroll up for all the content come into view. Generally all of the content scrolls up at the same rate. However, those who apply a parallax effect, the whole idea is the background image will scroll at a slower rate than the rest of the contents or not at all. To achieve this with CSS, if we take a look at the image on the right-hand side, we're going to be setting a full background image to cover the whole size of the browser. This image is also going to be in a fixed position so we won't move as the rest of the content scrolls up into view. We can also leave some gaps in our content. For example, if we remove the two images, this will leave a space to reveal the background image. As we scroll up with all of the content. Let's take a preview of the finished version to see how this effect will look.If we scroll down, you can see that the background image is in a fixed position and it doesn't actually move. The rest of the content will scroll up and down over the background image. It's this section we're now going to create, provided with this course is the same background image which I have used or you can use your own if you prefer. I have mine saved here on the desktop. I'm going to add this into our portfolio. I'm going to store this inside of a images folder. Let's create a new folder. This is also going to store the portfolio images, which we'll add in later. Drag over the background image. Now if we open up the sidebar, we'll now see the images folder and the background image. We're going to begin by creating a section wrapper, which is going to be for all of the links which you see here. Back over to our index page, we can create this now. Just below the header section, but still within the main body, we're going to create a new section. This is going to have the class of parallax. This will allow us to target this section in the CSS. Just as we did with the header, we're going to create an unordered list for each one of our list items. The first one is going to be for freelance web development. As ever, you can create any links which will suit your portfolio. The next one I'm going to add as premium training courses. The third one is going to be for free training courses, YouTube videos. Then finally the last one, as they bear film will say drink coffee. Save this, and over to the browser. Scroll down below our header and we see our list items down at the bottom. This is only html content we need. Most of the work for this section is over in our style sheets. Let's create a new comment. This is going to be for the parallax section. Taken advantage of the parallax class which we added in before. Inside here we can set our background image, we'll do this in CSS with the background image property. Then inside here we have the option to set the url. The url is the file path to our image. Inside of the quotations, we have an images folder and then forward slash the background dot JPEG. We also want this to be the full height. Let's set the height to be 100 percent of the viewport height. Save this and over to the browser. The background has now appeared. But we want to position this exactly where we want it to be. Let's start by centering the background image with the property of background position. We're going to add this into the center. We also have other options too, such as the left, top and bottom. Let's reload and see what effect this has. Now we see the image has been centered in the browser. The next thing we're going to do is to set the background size to a value of cover. For this property we have multiple options such as we can set the size of the image to be 50 percent, three REMs, 100 pixels or any value which we like. Here though we're going to set the value to be covered, which will scale the image as large as possible without stretching the image. Now if we save this and reload the browser, we see that the image also moves with the rest of the content and we don't currently have a parallax style effect. To get the desired effect, the key part is to set the background image to be fixed. We do this with the property called background attachment and the value of the fixed. Over to the browser scroll up and down and we see that the background image stays in the same position and the rest of the content moves over the top. This now works because the background image is fixed in place to the browser or to the viewport and the rest of the content is free to scroll as normal. To finish things off, we also need to make the list items a little bit larger and also add some space in. Let's begin by targeting the parallax section and the nested, unordered list. The font size is going to be 1.8 rems, which will be the equivalent of 18 pixels and part in, of one rem. Save this. Good, our text is now a little larger and we also need to add some space in between each one of our list items. We can do this by adding some margin to the top and bottom only. Let's target the parallax list item. The margin property. Again, we're going to use the shorthand so we can add 2 rems onto the top and bottom, and then a zero on the left and right. Since these list items are already censored, reload and our spacing has now been applied. This is how we can add a simple parallax effect to our project using only CSS. As you can see, it can really make a big difference and make a section of our website really stand out. Far in this course, we've also used both margin and padding to apply space in it to our elements. If you are still not a 100 percent sure what each one of these does, we're going to take a closer look at each of these in the next video.
10. Quick Aside: Margin, padding and the box model: We've used both margin and padding in our project so far to apply space in it to our elements. If you are still not comfortable with what each one of these does exactly, we're now going to take a closer look in this video, along with also discovering the CSS box model. If we just started to div or sections to a web page and some text inside using the P element, we would end up with something which looked like this. This is obviously not great look at. One of the first things we may do is to add some spacing. We may want some spacing inside of the sections like this, so it's not as close to the edges and looks a little more readable. Remember, we said earlier, the padding add spacing inside of an element. This is what we see here highlighted by the green section. This is the effect of the padding rule in CSS. It will default to adding the padding around all four sides. We also have access to padding at the top, right, bottom and left, too. If we only wanted the spacing on certain sides, well, what if we also wanted a space between the sections? As we have just looked at, padding only applies to inside of the element. Instead, we apply margin. Margin add space in it to the outside of an element as we see with the orange section. Just like padding, the margin rule will apply to all four sides unless we tell it otherwise. This example, the first section would need to have a margin bottom applied or we could also add margin top to the second element, which will do the same thing. Adding spacing like this does have an effect on the overall size of the element though. This is called the CSS box model. If we set the size of an element in the CSS, such as 300 pixels, for example. This is generally the size we wanted to display in the browser. Let's say we added 10 pixels of padding around the elements. As we know, nothing is added to the inside of the element. This will add to the overall size, resulting in the width increase in it to be 320 pixels. As in a border in CSS will also have the same effect. If we add a one-pixel border all around just like this, this will add an extra one pixel onto each side increasing the overall width to be 322 pixels, meaning we need to be careful when sizing elements to allow for this. However, since margin is added to the outside of an element, this is not accounted for in the overall size. If we want to account for the padding and border increasing the element size, we have two approaches. We could either reduce the initial width of our content. Here, we could remove the extra 22 pixels and set the width to be initially 270 pixels to account for this or instead, we could get the browser to calculate it for us. This means whatever we set our padding and border sizes to, the browser will always display our elements at 300 pixels. We can do this by setting the CSS box-sizing rule to be equal to border box. This is something we can add it to our CSS if we are having problems setting the size of an element.
11. Block, inline and nesting content: We're now going to take a look at how we can nest concept more deeply inside of our project and also include images too. We're going to be doing this by creating a recent work section, which is going to showcase two of our projects. This is also going to allow us to play around with some more complex layouts, and include in uneven size elements. For example, our first project will be on the first row. We'll have a large image, and then some text about the project on the opposite side. We'll then reverse this for the second project on the row just below, where the image will be on the opposite side to the first project. These are also going to be inside of their own div, which is going to be a section on these walls to be nested just like we've seen earlier. These CSS flexbox is going to allow us to create this layout, and also create a different layout for the smaller screen too. Let's get to work with adding the HTML for the section. Over to the finished version this is how this is going to look in real life. We're going to have our two rows, and we're going to alternately the project on each row. Using the flexbox, this will also be fully responsive to, so the layouts will change on smaller and larger screen devices. In this video, we're going to go ahead and add the HTML markup for the section which will provide the content to work with in the next video. Where we'll add the flexbox to lay this out this out exactly how we want to. The first step is to create a wrapper for this section along with a recent work title at the top. Let's do this within the body section, which is below the parallax that we just recently created. Our section wrapper, opening and closing tag, and then inside we can create a level 3 heading. It's x is going to be Recent work, and we can also add a class attribute inside of the opening tag so we can target this with the CSS. Just after our level 3 heading I'm going to add a new element, which is a horizontal rule. This is going to add a line across our page, which you see just here. We used a similar effect in the CSS earlier on in this course, where we used a border to create a line. But this time we're going to be using the horizontal rule to create our line in our HTML, you just scroll down, refresh the page. We can just now see our title and our line at the very bottom. We can then begin to nest our divs inside of the section to create our two rows of content. To do this just below our horizontal rule, we're going to create two new divs with the class of recent work. I'm then going to copy and paste this straight to our second row, but how does creating a new div create a new row? The reason this works is because generally most elements are categorized as either block level or inline, and if div falls into the block level element category. I will consider this if we go over to the Mozilla website, here I mean the block-level elements section. Which you can do a search for if you want to find this page. There is a lot of information and examples on this page, but the key thing to note is here in this box. It says, "A block-level element will always start on a new line, and also take up the full width available." Meaning that for each div that we add this will always add on a new line. We can see some examples of block-level elements if we scroll down. Here's our div tag, and there is a lot more such as: the header, the footer, and also the nav. We also go to the Mozilla website and take a look at the inline elements section. We can see here that the inline elements will not start on a new line, and it will only take up as much width as necessary. Things such as images are inline elements, this is why we can place the side-by-side across the page. Once again, if you scroll down we have our list of inline elements and we can see our image just here. We can also use CSS to change the default type too by using the display rule, and we're going to look at this in the next video where we're going to add the flexbox. Now that we have our two rows which you can break up into two sections, we're going to do this by nesting two more divs inside of each one. This is so we can add the image on one side, and on the other side we can add the information about our project. Our first div we can also add a class, so we can use this in the CSS. This is going to be recent work info. We can duplicate this, and this is for the recent work image. If this looks confusing don't worry this is just the first row, and inside we have a wrapper for the image and then for the information. We're going to do exactly the same for our second row just below, I'm going to copy this and add this inside here so we have two matching sections. These are just containers at the moment there, so is no content yet to show inside the browser. You should have already gathered together the images which you would like to use. If you've not yet done so now will be a good time to gather together some images of your recent work. If you don't have any recent work images, you can download any sample Placeholder image which you would like to use. I already have my images ready, so I'm going to add these to the projects. We already have a Images folder setup inside here. I'm going to grab all of the rest of the images except the background which you already have, and then drag these over to my Images folder. Close this down, now we can go ahead and add all of the content which we need for our two sections. We have our image, and then we're going to add some text on the opposite side. Let's start in our first row and within the recent work info section inside here a level 4 heading which is going to be for the project title. Mine is going to be Pizza Planet. Just below the p elements which is going to be the text and I'm just going to add some sample text of Vue. js application for a and then dot dot dot. Of course you can add some more detailed descriptions inside here, a horizontal rule to separate the title and description from the rest of the features. These features I'm going to add inside of an another list. First of all, the title, the another list, and then our list item inside and this is going to be for each one of the features of our projects. Vue. js which is going to be the view library, the Latest firestore database, Authentication, Routing, Vuex state management, and then Real time updates. Afterwards, we're going to separate this with another horizontal rule. Then we're going to add a link using the a element, which is going to be a link to a live project if you have one. View text of Visit site, then you can add the link or the URL for the life project if you have one. This is all of our information if we save and refresh, go down we have all of our texts in place. The next thing to do is to add the image which is inside of this wrapper. We do this with the image element which is IMG. We add the source which is the file path to our image, we have an Images folder. This is images and then forward slash, and the image which I want to use is going to be pizza-planet. png. The alt texts of pizza planet image, this is the alternative for things such as screen readers if the image is not available. Over to the browser and let's see this image on the screen. Good. The next thing to do is to repeat this process for the second project. We want to do a pretty much exactly the same as above we're going to create the same structure, but for the second project. Let's begin with our level 4 heading on the project title, which is React Trello. Again, inside of the recent-work-info section we then have a description inside of the p elements. We're going to say React js application in line with the hr elements, the features text, and then our another list for all of our features wrapped in a list item elements. We're going to say, the React js view library. This also has the Latest firestore database, Authentication, Routing. This also makes use of the Context API, and also Real time updates. Just as above underneath our another list we're going to again add a horizontal rule and then a link to our live site if we have one, and we text of Visit site. If you don't have a live version to display you can also leave this off, or you can come back to this later and add in the link. Which just leaves us with the image to add in the very bottom div, and again we're going to add to the image elements. The source is the Images folder, and then the image I've chose is going to be react-trello. The alt text of react-trello image, save and then reload the browser. We now see our second projects. We now have the content in place for our recent work section, and in the next video we're going to apply some CSS styling to not only improve the look and feel but to also make it look better on different screen sizes too. To help with this we're going to take advantage of the CSS flexbox, which will help with laying out of a content across one direction.
12. First look at the CSS Flexbox: Both the CSS grid and the Flexbox, are relatively new ways of laying out our content using CSS. In this video, we're going to be covering both techniques. Beginning now with the Flexbox, which is used to layout our content in one direction, either controlling it horizontally or vertically. To get started with the CSS Flexbox, the first thing we need to do, is to create a wrapper for all of our content. Over in the CSS, we then set this wrapper to have the display type of flex. This will then allow us to set the flex direction for our content to be either row, which is across the page from left to right, or in a column which is from top to bottom. So our content is stacked vertically. This is great for responsive design and we can also set the reverse options too. We can set the row reverse, which we'll set our content from the right to the left and also column reverse, which is going to be the opposite, so our content is bottom to top. We can use this combined with media queries to create different layouts for different screen sizes and also the Flexbox has much more to offer and we'll discover some of these flex properties throughout this course. Let's go over to our index.html page. In the content which we created in the last video, we created two sections with the class of recent work. This is the wrapper div for each one of our projects and the wrapper for each row. When I want to use this recent word-class over in the CSS, starting with the column layout for our small screen view. This means that each one of our projects will be stacked on top of each other, stretching to be the width of the full mobile device. Let's go over to our style sheets and create our new section using the comments. This is the recent works section. Remember, we target a class with the dot and the name of recent work. To use the Flexbox, the first step is to set the display type to be equal to flex. Remember in the last video, we said that many elements can be categorized into inline and block level. Well, we can change the display type of an element using its display property. Here, we're changing the display type of our wrapper to make use of the Flexbox. This will allow us to make use of many more flex properties, such as the flex direction. We're going to begin on the mobile size devices by setting the flex direction to be column. If we shrink this down, this means that the content will be stacked on top of each other rather than the default row which is across the page. We also have the reverse options too, so we can set this to be column reverse, save this and reload, and now the images will appear on top of the text rather than how it was with just column, where we have the text and then the images. We can also set the flex direction to be row. This will mean the content goes across the page, just like we see here. This means that the content will go horizontally across the page, leaving our text and the image alongside each other. Now though on these small screens, we're going to leave this as column and then also set the font size. Don't forget the semicolon at the end. The font size is going to be equal to 1.3 rems and that's a margin of one rem on the top and bottom to give us some spacing and we don't need any spacing on the left and right. Let's reload this and if we now scroll down to between our two projects, we now see our margin in-between and also the font size taking effect. Next, I'm going to add some more general sizing and spacing to our section, so we have the class for each title, which is recent work title. We can set the font size to be a little larger and want to use 1.6 rems. Next up, we can get to work on our text for our project. This text, is all surrounded in a div with the class of recent work info. Let's go ahead and target is now. For the wrapper all I'm going to do, is to add some spacing on the inside of the elements of one rem and then we're going to move on to the Level 4 heading. If we go over to the markup in the HTML file, and we'll go to the recent work info, we're now going to get to work on the Level 4 heading which is the project title. We do have a couple of different ways in which we can approach this. We could directly target the Level 4 heading. We could add a class to this heading and then grab the element this way or we can be more specific like we looked at earlier in our CSS, where we can select the recent work info, then h4. So let's do this. We can target the recent work info and then any Level 4 heading which is nested in this section. All we need to do here, is to set the font size to be 1.4 rems or any font size which you prefer. Next up, we have our features which we can see here and we're going to add some space in between each one of these. We also have a symbol here which we need to remove. Let's go down. Also remove this. Now so we can be more specific with just targeting these list items in this section, rather than affecting any of our navigation links, we can add a new class over in the index. For our unordered list, we can add the class of features and we'll do the same for our first project too. So inside the unordered list, the class of features, and then we can be more specific inside of our style sheets by targeting the features, the greater than symbol, and then our list items. This works in a slightly different way to the way we've used this in the past. The way we select it just like this, means that all Level 4 headings inside of this section will be affected. Doing it the second way with the greater than symbol, will mean that this will only affect the list items which are a direct child of our features. This means that these list items need to be directly nested inside. We have our unordered list and these are on the next level in so these will all be affected. If we have a second level of nesting inside here, let's say a second unordered list, and then a list item, this one will not be affected. Let's leave this in and see this in action by setting the margin to create some space in between our list items. One rem on the top and bottom and then zero on the left and right. We know the browser. We have our spacing just here and also off those projects. Let's set the color of the links. Reload and now we can see that the test element which we added in, because this is not a direct child of our features, this is not affected by our CSS. Let just remove this test, save this, and reload. We can also remove the color and things are now looking a bit better with our spacing. The next thing we need to take care of, is the images which are too big for the device. Once again, over in our style sheets, we can target the elements by its name, which is IMG. Since this is also a general style which you want to apply to all of the projects, I'm going to add this at the top of the style sheets in the global styles. This is just a personal preference and this can go anywhere in the style sheets. All we're going to do, is to set the maximum width to be 100 percent. This means that the image will always be a maximum of 100 percent of the container. Let's reload and see this in action. Again, also in this general style section, I'm going to add a little style in for our horizontal rule. Let's add the hr elements. The width to be 100 percent so it spans the full width of the content. I'm also going to set the capacity to be 0.5, which is 50 percent transparent. The color can also be light gray and let's see how this looks. Leaving us now with a lighter line between our content. This is our first look at using the CSS Flexbox and although we've only used it so far to create a mobile first column layout, as we progress through the rest of the course, we will discover a lot more of what the CSS Flexbox has to offer.
13. Contact us section and final mobile first CSS: In this video, we're going to add the final section of our homepage, which is going to be a contact section. Along with also finishing off the mobile first styling. If we go to the final version which I have opened here, and then scroll down to the bottom of our index page. This is going to be the contact section which I'm going to create now. The HTML is pretty simple. All you have is some blocks of text and they can be styled with our CSS. Let's begin by adding the hedge bar markup, which is basically our new section, and then some blocks of text. Let's go over to the index.html down at the very bottom, but still within the body section. We are going to once again create our new section. This is going to have a unique ID of contact. We'll make use of this in the CSS very soon. Then inside we're going to have a nested div with the class of contact info. This section is going to be the wrapper. If we take a look at the final version, this is going to be the wrapper for all of the horizontal text which we have just here. Then we'll create a level 3 heading with the class of rotate, which we used earlier on in the project. Inside of our contact info we can add the first element, which is going to be a p element with the class of contact heading. We'll use the CSS very soon to make this a lot larger, the text of don't be a stranger. Let's save this and check this looks okay in the browser. Reload. We can just about see how text down at the very bottom. One thing we are going to do though, is put the word stranger on a separate line, just like we see in the final version. We can do this by adding a brake tag. A break tag is simply br. This will push our text onto the next line. After this, a second p element with the text of need a developer. Then let's talk. Then offered a piece of text inside here, which is going to be our e-mail address. This now takes care of all of all horizontal text in our wrapper. Just below this wrapper, we're going to have the rotated text, which is a level 3 heading. We're going to make use of the class of rotate, which we used earlier on in the course for our heading, which was the text of I make things. Inside here, all we have is the text of contact, save this. Over to the browser, we see our horizontal text is pretty small. But we have some styles taking effect for our level 3 heading, since we made use of the rotate class. Let's now fix this over in our style sheet, starting off with our section id of contact. Remember when it using a id, we tag this in the CSS by using a harsh. To begin, now, let's create a section of contact to us. We target a id by using the harsh. This is also going to make use of the display type of flex. We can make use of the flex box properties, such as the flex direction. Since we started mobile first, this is also going to be in the flex direction of column. We'll override this later on when we have more screen space available. Let's add some padding inside of our section of 1rem. Also just like we did with the header early on, we can also set the height of our section to be 100 percent of the viewable height. We can set a background color, and this can be any color of your choice. I'm going to use the hex value of B1E2D7. Visual Studio Code also has built in a color picker. If we hover over this, we can then select any different colors from the screen here. Or make use of the color pickers, which we looked at earlier in the course. So this will set the background color. We can also set the color of our text to be white. Let's see how this is looking. Reload the browser. We have all full height contact section, our background, and our white text. Let's now get to work with the text on the very top, starting off with the contact heading of don't be a stranger. These are the class of contact heading. Let's grab this and make use of this in the CSS. This is a class, so we use the dot. We're going to set the margin to be zero and then make the font size a lot larger. I'm going to go for five rems. Reload. Next we're going to target our p elements within the p section. The section has the class of contact info. We can then select the p elements. That's the font-size, b 1.4 rems. Then to add some space in between these, we can add some margin to the bottom of each element. Since we have a plenty of vertical space to play with, I'm going to set this to be three rems. Save this and reload the browser. Now this leaves us with a small problem. This is because we've targeted all of the p elements in this contact info. This heading is also a p element too. We have a few different ways of how we can approach this. We could change this first p elements to be a different element such as a heading. Or alternatively, we could add a new class such as contact text. Let's also add this to our e-mail. [inaudible] to save. Change this to be a contact text. Save and reload. Now our project is as it's intended. The final thing to do is this contact section at the very bottom. We're only going to display this elements when we have more screen space available. For now in the mobile first view, we're going to select this. This is the new contact section, the class of rotate. Then all we need to do is to set the display type to be none. This will remove this from our page. We can reinstate this later on for the larger screen view by resetting the display type to be something such as block. We'll discover how to do this later on in the course. This is the styling that now complete for the small screen view. First of course, do feel free to make any changes suites your look and theme. In the next video, we're going to take a look at CSS media queries, which will allow us to do apply different CSS rules for different sized screens.
14. CSS Media queries: We've talked previously about how we can use the CSS flexbox to create different types of layouts. On a small screen view over on the right, we may typically want the content to be the full available width and stacked on top of each of a vertically by certainly flex direction to be column. When we have more screen space available like over on the left, we also often want to take advantage of this extra space and add our content be side-by-side. We know that the flexbox can do this by setting the direction to be row, but how do we apply this on different screen sizes using CSS? Well, the way to do this is to add a CSS media query, which is basically a way of creating a section of our CSS, which only applies to certain screen sizes, orientation or resolution, to name a few. Back over to the Mozilla Developer Network, well, in the Using Media Query section, and here we can find small examples of how we can use media queries to apply different style in depending on the device. First of all, if we scroll down, we have a media type section, and this is the first step to constructing a media query. Here we can set these CSS rules to apply depending on the device. We can apply this to things such as a speech synthesizer, a screen, the Print Preview mode, or we can select all to apply to all different devices. Further down in the next section, we have media features, and these features are generally more specific to the device, such as the width, the height, and also if the device is landscape or portrait. One of the most common uses for media queries, and what we're going to be using them for in this course is to change our style in based on the width of the screen, and we can see this down on the bottom of this section. We can set CSS rules based off the width of the viewport. Let's go over to our CSS file and we can add these to our projects. The first step is to decide what screen which we want to change the CSS, and starting over in the browser with the small screen view. We generally want to change things around when our content looks to stretch. For example, if we make this wider, we always get to a point where the content looks really stretched, and then we want to rearrange our layout. Once we get to a size where we want to change our content, we also need to detect how wide this is, so we can add this to a media query. Most browsers have certain plug-ins or extensions which are available, show the width of the screen, or another option is to go to right-click and inspect to open up the developer tools, and inside here as we stretch the browser, we can see in the top right-hand corner, the width of the browser is displayed. Once we get a little wider, and I'm going to go for somewhere around 860, but I'm going to change the layout to house them content side-by-side. Often in our style.css, we can begin by @media query with the at media rule. As we've seen before in the Mozilla websites, we can target the screen, and we can also combine this with some of the media features which we looked at, such as the minimum width of the browser, which I'm going to set to be 860 pixels. Now what we need to do inside of these curly braces is to add any CSS rules, just like we've used previously. Basically any of the style in which we have above will always apply to our project, but the ones in these curly braces will only apply when the screen reaches 860 pixels and above. [inaudible] the body section and we can create a real insider here. Let's set the background to be the color of red, set this and reload. You see the red background color, and then let's go below 860 pixels, and this rule will no longer apply. If you want to target all different sized devices and not just those screen, we can also simplify our media query just like this. Let's test this out. Reload the browser, and this still applies. Of course, we don't want this red background color just like this instead of now media query. We're going to begin at the top of our projects with our navigation links. If we take a look at the final version, this is going to be over on the right-hand side. Let's do this now. Instead of targeting the body section, we're going to target the navigation, and then the unordered list, and we can move these over to the right by justifying the contents to be the value of flex-end. If we take a look at the nav ul section by searching for this, this n minus currently on line 43. Well, here we can see we set the global styling. We've already set the display type to be flex, so this will always be the case throughout our project. Here we set the justify contents to be in a center for the small screens, but now inside of our larger media query at the bottom, we override this with flex-end. Now if we save this, reload the browser, this will be over on the right-hand side for the larger view. Then as we shrink the browser down, this will go back to the center. The next thing we need to do is to rotate the text of I make things, so we can also add this to the media query too. This has the class of rotates. First of all, I'm going to add some margin. We've looked at how to add margin to all four sides. We've also looked at how we can apply margin and padding to the top and bottom, and also the left and right. If we want to control the four individual values, we can also set these separately too. Inside here, we can set four different values, and this will be the value of the top, right, bottom, and left in a particular order. First of all, two rems on the top, zero on the right, bottom, and left. Next thing we're going to set the writing mode, which is going to be important for laying out our text horizontally or vertically. This is going to be a valuable vertical- lr. This will set our text to be vertical from left to right. The text is now vertical as expected, but if we take look at the final version, we see that the characters is also upright too. We can do this in our project by also setting the text orientation and the value of upright. We can make use of this property when our writing mode is set to vertical, and then finally, we can also set the font size to be a lot larger, so the value of five rem, save this unaltered to the browser. When LCL Vertical Text has spilled over into the parallax section, to fix this, we're going to add something else inside of our media query. We're going to target the header section and we're going to set the height to be 100 percent, save and reload. This now fixes our problem. I'm not going to do anything with our parallax section now if we scroll down, this looks pretty good on the larger screen too. Wee can move down to the recent work section. Since we now have more screen space available, we're going to place the text alongside the image on each row. We can do this by targeting the container, which is recent work. Then set the flex direction to the row, reload, placing the content inside of our rows side-by-side. The next thing we need to do is to set the sizing for our text area and also our image. We can do this by setting the flex property to be a value. For example, if the info section and the image had a flex value of one, these would take up an equal amount of space. But we want the image to be a little larger so we can set the flex value on the info section to the value of one. Then set the image to have a flex value of two, which will effectively take up twice the space. Let's do this now starting with the recent work info. Remember this is for the text we set the flex value to be one and also add some padding to the inside of one RAM. The image has the class of recent work image. Again, still making sure that this is still within our media query section, we would set the flex value to be two, taking over twice the available space as our info section. I'm also going to add a border around this image. I'm going to begin by setting the color to be light slight gray. The thickness of the border to be one RAM and also a solid line. Reload the browser, leaving the image to be taking up twice the available space as our info. Just before we wrap up this section, I'm also going to target the image so the recent work image and then the image element nested inside. Just to make sure that the width of the image and also the height stretches the full 100 percent of the container. Just in case our images are not sized correctly, as we discovered earlier, let's go to our final project and take a look at how our image and our content is alternated. One of the ways we can do this is to switch the order of our HTML so if we go to our index page, we could switch around the order of our image and our text. This is one approach which we can take and this will work fine for the larger screen view. However, if we go to the smaller screen view by stretching the browser, this will also affect the order for the small screen. Here we have the info, the image, the info, and then the image, this wouldn't be the case if we switched the source order of the HTML. Instead we can use a flex box property called order, which will allow us to change the order in which elements appear on the page with a lower or a negative number appearing first over in the HTML file. I'm going to add a class to the first recent work info section. Let's go to our first project and select the recent work info. We're going to add a second class of new right. Now I can use this class over in our style sheet to rearrange the source order. Let's target this. To move right, we can set the order to be a value of one. The default value is 0, so just before we save this file, let's take a look at what we currently have. At the moment we have, if we go to our projects, we have the info on the left and the image on the right. Save this file, reload, and now our info section has been moved to the right of our project. The reason this works is because our default value, our default order, is the value of 0. The image section will still have the value of 0, making this appear first. Then we'll set the info section to have a value of one. This is a higher number, this will appear last in the order. This is also still within the media query, so this order will only take effect on the larger screens. Let's now finish off the styling for this media query by moving down to the contact section. Currently, everything is aligned into the center and we also still need to re-introduce our rotated texts. Over in the index page, let's go down to the contact section. First of all, we have the class of contact heading. I'm going to make this even bigger for this section. We can then select the whole container, change the flex direction to the row, and then also add some space into. Let's start with the heading to the class of contact heading. I'm going to reset the margin to be a value of 0, set the font size to be even bigger of a RAM, reload. Next we are going to reintroduce the rotated text. Let's do this by overriding the display type from earlier. Let's select the contact section, the class of rotates. All we need to do here is to set the display type to be block. This will override these styles which we set earlier. If we scroll up, we set this action to have the display type of none on the small screen view, now we said this could be block. This will now display on the larger screens. We also want this section to be over on the right-hand side and the way we can do this is by setting the flex box. We can set the full contact section to have the flex direction of row, meaning that our vertical text will be alongside the section here. Select the contact, which is the full wrapper for our section. Set the display type to be the flex. Meaning we can set the flex direction to be row, reload the browser, place this alongside each other on the page. We can add some space in between by selecting and justifying contents. The property of space between which will distribute the available space between our two sections. I'm also going to set the text alignment be the left, rather near center, which it currently is. This will push all of the text over to the left of the browser on the larger screen. We'll still keep the centered text on the small screen view.
15. Custom CSS animations: We now going to take a look at how we can add CSS animations to our project. An animation is a way of changing CSS styles over a period of time. For example, over let's say two seconds, we maybe want to fade an element in or we could change from one background color to another of a set duration. We can also use this to apply any different CSS styling which we'll want to. I'm going to take a look at how we can include these now. Animations can really bring your project alive. I'm now going to use them in the header section. First by fading in the text of, hi, I am Chris. Then after a short delay, we're also going to fade in the text just below two, giving the user a smooth welcome message. This particular video we'll cover adding in our own custom animations using CSS. Then the next one we will look at how to use a animation library to add lots of nice effects when scrolling. To setup our own custom animations, we need to setup what CSS we want to change using the key frames rule. The key frames rule is setup in the CSS file, a bit like the media queries we looked up before. We can see an example on the right, it uses the @ symbol just before followed by the name of our choice. Then inside of our curly braces, we add in any CSS style name we want to apply at certain stages of the animation. At the most basic we have to and from, which is the start and end state of the animation. Here, we change the background color. Then on the left we select an element to apply this to, link in our custom key frames name of change-bg to a property called animation name. If we want more control over the animation stages, we can also apply different CSS at different percentages of the animation. We can apply any CSS which we want, not just the background color, which can apply at any stage. Over in our HTML, we're going to add a custom class to allow us to do this. Over to our index page up to the header section. We're going to effect these two lines of text inside of our header. Let's add our class to these two elements here. The class name is going to be fade in custom. I'm actually going to apply it to our texts just below too. Over in our style sheets, we can ask our key frames and this is going to be right at the very bottom after our media query. We use the @ symbol, lets have our key frames by giving this a name of fade in. Then keep this simple by adding our from and our to rules inside of here. First of all, we're going to set the opacity to begin at zero. This is fully transparent, meaning we can't see it on the page. We can then set the to rule where we're going to set the opacity to be one. Meaning this is now fully opaque and not transparent at all. Now we have our key frames setup. We can add this to our fade in custom class just above these key frames. Fade in custom which we just says inside of our HTML. We then set up our animation, passing in the name of fade in. Then we can set the animation duration. We want this to apply over one second. Over the course of one second we'll go from the opacity value of zero to the value of one. We can see this by saving and going over to the browser, reload the page. This is fine and working as expected but we can improve things even further by adding an easing effect. We can use easing to slowdown the start or the end, making it appear smoother and more gradual and make an easy animation in or out. We can add this over in the CSS just after our animation name. We can select ease in, reload the browser and now we have a more gradual, smooth transition as our animation is starting. Remember though it's not just the opacity we can add, we can add in any other CSS rules which you want to apply. Next, I'm going to add a delay to the animations so the second line of the text fades in after this first one. Let's start by adding some custom classes to these two elements. For the level one heading, we can add to the class name of delay one. Then the text below the class name of delay two over in the styles.css. We can now target these two clusters and set the animation delay. Let's start with the delay one. We can set the animation delay to be any value which we want. I want to begin by setting this to be 0.5 seconds. The delay two is just going to be a little longer by setting the animation delay to be 1.5 seconds. Let's save this and over to the browser, refresh. We now see that the animations are working and there is a delay but this is not working as expected. The second line is always there when the page loads but we only want this line to appear when the first animation has completed. This is happening because of the way we setup our key frames. If we go back to our style sheets, once our page first loads, since the animations are delayed, the opacity will not be immediately set to zero. To fix this, we also need to set this in our animation class of fade in custom. We set this to an initial value of zero. This will take effect when the page first loads. Let's try this now, reload the browser. Things don't quite look as we expected it either. We see that the animation does have a delay but they also disappear after the animation ends. This is because by default after our animation ends, none of these styles from the key frames remain. Which means that we are left with the opacity of zero at the end of our animation rather than the volume of one which we expect here. The changes we can make use of the animation film mode and set this to be a value of forwards. Inside of our custom animation class, we can set animation film mode and the value of forwards. Reload the browser and this now works as expected. Setting the animation film mode to forward will mean that these styles from the end of our key frames will remain. In our case, the opacity which is set to one. There is also a backwards too, which will apply the CSS from the first key frame. Also both two which will apply the styling from the beginning and also the end. Finally, we can also remove the from section of the opacity to be zero. This is because we already have this setup at the start of our animation. Let's just check this works okay, reload the browser and everything still works as expected. Animations can play a big part in how our website looks, feels and also how it stands out too. Animations is also a really big topic so if you're interested, I would encourage you to take a deeper dive into the subject. Next, we're going to stick with the same subjects and include a animation library, which will give us a nice looking at scroll effects.
16. Animation libraries: Hello. I would encourage you to keep learning about creating your own custom animations. Another great option to use is a pre-built library. In particular, the one I'm going to show you is called Animate on scroll. This library is going to allow us to add animations to our elements as the user scrolls down our page. We can set different animations for different parts for our content. For example, we can set a flip effect on our top piece of content, which is like turning over cars. We also have many other effects too, such as the content zooming in, we can have the content fading in or sliding in from off the page from either the right or the left hand side. We also have further control options, such as setting the delay, the time duration and we can also combine these effects too. Let's take a look at how we could apply this to our project. To include this library, I'm going to search for animate on scroll. Now we need to go over to the GitHub link. This is the one we need, just here at the top, so click on this. Then as we scroll down the page, we can see lots of different examples, which is included with the library. We have some slide in effect, we have fade in and if we [inaudible] go we can see more flip animations, where you can flip up down, left and right. We then have some zoom effects, where we zoom in from different angles and we can also set the duration and the timing too, make some really nice-looking effects on our page. To get started with this library, all we need to do is to include the CDN link down at the bottom. If you use things such as a node project, this can also be included, with package managers such as yarn, bower or NPM. Since we are using a regular HTML project, we have the CSS and JavaScript links at the bottom, which we'll link to the required files. Let's start with the style sheets. I'm going to copy this link and then we can include this in the head section of our index page. At list just above the link for our custom style sheets. Making sure our custom styles is the last one in the order. Next up we can grab the link to the JavaScript and this can also go in our index page. Copy this link. I'm looking at this at the bottom of the body section just after our contacts. The final thing we need to do is to call the initialized script. So let's copy this. The page's just below. This will initialize the library to use in our project. This is all we need to do now for the setup, we can start to use the effects, simply by adding some attributes to our elements. All of these attribute names are the ones we see on the website which we just looked at. If we scroll up, we see the attributes such as fade up and this is exactly what we do in our project. Let's begin at the very top of our home page. We already have some custom animations in the header section, which were added in the last video. So I'm going to skip down to the parallax section, where we can add some effects to these items here. By this am going to make use of the flip animation to these list items, so that we have a flip in effect when we scroll down the page. Let's go over to our index and locate the parallax section. Inside here, for each one of our list items, we can begin to add these attributes. The first one is data-aos. This is going to link to the name of the animation we want to use. I'm going to use flip up. As we've just seen on the homepage, we can also set the delay and also the duration, which is the timescale for the animation. So let's start with the delay which is data-aos-delay. We set this in milliseconds for how long it takes for the animation to begin. Once the page has loaded, for the very first one, I'm not going to include the delay, what will increase is for all of the rest of the links. Next up the data duration, which is data aos duration and again, this is in milliseconds, with a value of 1000 beam one second. I'm going to set this equal to 800 milliseconds. This is how long the animation will take to complete, copy this and paste this in the rest of the list items. We're also going to use the flip of animation for all the rest of the items, but increasing the delay for each one. So 100, 200, 300 and then 400. The duration can take the same and you can also play around this value and see which one works best for your site. Save this and let's refresh the browser. Scroll down. We now have a nice flip in effect as we scroll down the page. Now let's go down to our recent work section, where we're going to add some sliding animations. We're going to begin with the two project titles of pizza planets and also react trello. These titles are going to begin off the page and then scroll into view as we move over this section. These added inside of our level four headings. So let's locate the first one, which is pizza planet, the name of data aos, and this is going to be the animation called slide left. We can also add a duration, just like we used above and set this field 1,000, which is a second. I'm going to grab this and move this down to the second title, which is react trello paste this in and since it is on the opposite side, we're going to slide right, keeping the same duration as before, save this and let's test this in the browser. Reload, scroll down, as our title slide it in and the same for the second one. Remember, this is your project and you can use any animations and timings which suits you best. But next I'm going to fade in the information just below. The section is just here. I'm going to fade these in. To do this, I'm going to wrap all of the text into a div, which is going to act as a wrapper and then am going to add the animation to this wrapper. So we can grab everything from our visit site link all the way to just below our title, so cut this out, leaving a place, our level for heading. We can then add a div, which is going to be a wrapper, paste in all of this content and then we can add our animation to this wrapper, the name of data aos. This is going to be fade in and the duration of one second. Let's also grab these two attributes and we can work with the project image, so just below. We also have this recent work image. Just after our class, paste this in, I'm also going to keep the same fade in animation or increase the duration to be 1500. Reload the browser. We've accidentally added this to the second one rather than the first one, but this is completely fine since we're going to duplicate this for both projects. Let's do the same now for the first project. We can cut out a place, all of the texts from visited sites, all the way up to just below our title, add a div as a wrapper, paste the content back inside, then we can add our animation, which was fade in, the duration of 1000. Copy these attributes and then we can also add these to the image just below. The div which surrounds this, paste this in and keep this consistent with the other image, will increase this to 1500, it's a match. Let's now test this. Scroll up to the top and refresh, down to the project section. You see the slide in for the title and also the image on the text is now fading in. Finally down at the bottom, we also have the contact section, where we can add some animations here too. I'm going to slide up the main heading of, don't be a stranger and then slide in the two lines of text below over from the right of the screen. Over in the HTML, we can go down to the contact section and start with the heading. The name this time is going to be slide up, the duration, I'm going to set mine to be 1500. Let's see how this looks. Reload the browser, then this now slides up. We just need to work with our two lines of text below and bring these in from over on the right-hand side. We're also going to add a delay to this two animations, given the head in at the chance to get to the top, if all these move across. Let's start with the text just below. Paste this in and the animation name is going to be slide left. This one also needs a delay. This is data aos delay and 1000 milliseconds, the duration we also going to increase this to be 150 too, and then grab this and we can add this for the last line too. Paste this in as an attribute. We can increase the delay to be 200 milliseconds, keeping the same duration and animation name. Go to the browser and reload, leaving us with some nice animation effects. There is one thing though to take care of before I wrap this video up. One of the things you will notice since adding in this animation, is we can now scroll to the right of the page when it first loads. This is because our animations, which slide in, will start off the edge of the page and then slide into our view. Since the content started off the page, the browser now things that the page is much wider than it's intended to be. All we need to do to fix this is to tell the browser to hide any content which overflows the page. We can do this by adding a overflow on the x-axis and we are going to do this in the body section of our style sheets. Let's scroll up to our global styles. We can declare how we want to handle any overflow on the x-axis, which is from the left to the right of the page. Change this to a value of hidden. Let's save this. Now if we go back to the browser and scroll back onto the main content section, hit reload and now this overflow property is stopping us from scrolling off the page. We'll also add more of these animations as we progress through the course. But feel free to swap out any of these animations with different ones to suit your style. This is now our homepage complete, and in the upcoming videos, we'll begin to focus on our portfolio page to show off all of our skills.
17. Quick Aside: Browser compatibility: CSS is always evolving along with adding some new features. These new features are often great and we may want to use them as soon as possible. However, we do need to be careful because it often takes time for these features to be fully supported in all browsers, and even when browsers support does catch up and the new browser version is released, we still need to be aware that not everybody will be using the latest version immediately. The help amongst others that is a really useful site as caniuse.com, this will allow us to check a CSS feature and also see how widely supported it is across the major browsers including any previous versions too. For example, if you wanted to use the Flexbox in our projects, we could type this in and then what we want is the Flexbox module, which we can see here. Across the top we have a list of all of the major browsers and also the support for each one of the versions. For example, Chrome version 80 is green and we can see by the pop-up that this is fully supported and we can also see the global usage for this browser. For example, this current [inaudible] is 10 percent at the moment and this is really important to determine what browser support you want to provide for your project. If we take a look at the different shades, Internet Explorer version 11 only has partial support but currently this has only got about one percent global use, so we will need to decide if this will be a problem for your audience. Generally, something with all these green sections like this is pretty safe to use in a project since it is widely supported. Let's take a look at something else such as the opacity which we've recently used in our projects and the opacity rule which you see here is pretty much fully green, so this is safe to use in all browsers. Animations are also well-supported too. [inaudible] something in it to be careful of. Let's type in the animations and see what comes up. If we type in the animation, we see something called the AnimationAPI, and see that this feature is experimental. This is because this is not exactly the animation which we used in our project. The reason for this is because animation is a CSS shorthand for multiple things. If we go over to our project and take a look at the animation which we used earlier on in our fade-in, the animation property is a shorthand for things such as the animation name, which we have here, and also the animation-timing-function. We could add these in separately. So we could add the animation name and set the speed fade-in, and then the animation timing function, and then we could set this to be ease-in just like we've used above, and then remove all shorthand. This would have exactly the same effect but this is just a way of grouping together various related properties into one line. In fact, our animation is also a shorthand for the animation duration too, so we can even remove this, we can remove this line of code, and then we can place this inside of our shorthand and this will work exactly the same. Let's just take this by going over to the project and into the header section, reload and everything still works as expected. This is something to bear in mind when searching for CSS properties, that sometimes a property may be a shorthand for multiple CSS rules. If you want to know if something is a shorthand or not, you can head over to the Mozilla website and then do a search for that particular property. For example, let's search for the border. We can go into the CSS section and we see straight away that the border is a shorthand property which sets the border width, the border style, and also the color in one line. Generally, when dealing with newer CSS properties, it is a matter of balancing more features you want, the RTA project, along with catering for your target users. There are also tools which can help with browser support too, and this is using vendor prefixes and polyfills. We won't be covering these during this course but do feel free to look into these subjects more deeply if you are interested in learning more.
18. Setting up our projects page: We're now going to create our project page, which will be a showcase for our previous work. This will also give us a chance to learn a new CSS technique which is called the grid. Unlike the flexbox which controls our layouts in one direction, the CSS grid will allow us to control our content in both the horizontal and vertical directions. Over to the final version, I'm moving on from our homepage. If you click on the nav link for the projects, this includes the same header section which we've used for the homepage, and then we can scroll down and the recent projects will animate in as you scroll down. We can also hover over each one of these, and the title will display for each project. You can see on this full desktop view now we use the CSS grid layout. We will learn all about this in the upcoming videos, and this is also fully responsive too. If we shrink the browser down we'll see various layout changes such as the tablet size device which will then switch our projects to be two columns. If we shrink this down even further this then becomes the full width of the browser. To begin with this we're going to go to over our project and create a new file in our portfolio directory. Create a new file, and this is going to be called the Projects. Again this is going to have the HTML extension. Makes sure that this is in the root of the portfolio alongside the index and the stylesheets. I'm going to make use of the same header section so we can make our lives easier by going over to the index.html, and we can copy over all of the content and then Modify this. This already has the link to our projects.HTML which we added early on when creating the header section. Let's Command or Control A to select all, Copy the content over, and then Paste this in the projects.HTML. Starting from the bottom we also need to keep the animate on scroll library, but we're going to remove all of the rest of the content up to the header section. This includes our recent work section, the parallax section. Let's remove this leaving us just with the header section, and then our script at the bottom. This also has our same link to the stylesheet that we created, meaning our styles will also still apply. The next thing we need to do is to change the title. This is going to be Chris Dixon's projects, and this now gives us a good starting point which still includes the same header and all the links we need to our own CSS along with the animation library. Let's Save this file and the checklist is working okay in our projects, let's Reload the browser from the homepage, we can click on the Projects, and it's now links to our projects.HTML, and we can see the header section is in place. For this page I'll now set up. Next we're going to add our projects using a mobile first approach. Remember from earlier on in the course you will also need to download some images, or take some real images from some previous projects which you created. If you don't have any that's completely fine you can use any placeholder image which you would like, but make sure these are ready to use in the next video.
19. Including our projects page HTML: Inside of the images folder in our project, we have all of these images which we're now going to use in our projects.html. We also covered over the basic structure and the header in the last video along with the animation script down at the bottom. I'm going to now get started with our project section by creating a new section rapper, which is also going to have a level thee heading with the text of the recent projects. This is also going to receive various classes as we go and we'll make use of these in the CSS very soon. The level three heading is going to have the class of projects title. Then after this, I'm going to add a div, which is going to be a rapper for all of our projects, so we'll add a class of projects to this. Then each individual div inside here is going to be for one single project. Each one of these projects is going to have a ID. I'm going to call the first one, work one, and this ID is going to be used later on in the CSS. Each one of these is also going to have a consistent class name of grid-item. Then nested inside if we take a look at the final version, we're going to have a image and also the project title, which is going to display later on when we hover over each image. We need to add these two elements in starting with our image. All of our images in this images folder. The first one I'm going to use, is going to be the music player, also the old text. Then after this, we can add a link with the a elements and this is going to be the text for our projects. This is the music player. It can add a link to a separate page to provide more details about this individual project, if you would like. I'm going to leave mine empty since we'll not be covering this during this course, but feel free to do this as a challenge. A class name of hidden-text. Since the text is going to be initially hidden until the user hovers over, so we can go ahead and type out each one of these individually if you would like. But since I've got quite a lot to get through, I'm going to copy and paste this and then change over the details. Remember, you also don't need to include as many projects as me, and you can also add more if you prefer to. Work two, the same class, the image location, this time is going to be for react trello, the old text two, and also the title. The third one we're going to paste in. Again, making sure this is inside of the project rapper, paste this in, find the ID. The image for my third one is going to be for the photo editor and also the linked text two. The fourth one is going to be for the productivity app and also the old text two. This is how our projects are going to be structured. I have nine in total, so I'm going to skip ahead and add these in now. Pause the video and come back once you have finished adding all of your projects. All of my nine projects are now in place, and hopefully, you have yours finished two. Now, let's go over to the browser and check this out in the projects.html. Just below the header, we have our recent projects title. Then for each one of our projects we have our image and also the title alongside. Our content is now in place for our portfolio page. Next, we're going to apply some CSS styling. To begin, we're going to be starting with the mobile first approach and taking advantage of the CSS Flexbox. Then later on in the course, we'll apply a media query when we have more screen space available. Then we can take advantage of the CSS grid to layout our content in two directions.
20. Mobile first project layout using Flexbox: As promised, we're now going to move on with the styling, beginning with the small screen view, and then we can play around when we want to get more screen space. In the last video we added the HTML for all projects. If we go to the HTML page, we see that all of our individual projects are wrapped in this div with the class of grid-item, and then all of these grid items are nested inside of this projects div. These are going to be the two main classes which we'll need in our style sheets. So let's go over there now. So I'm going to create a new section just above our media query, and then create a comment for this projects page. That's enough with the title, which was project's title, and all I'm going to do here is set the font size to be 1.6 rems, which is the equivalent of 16 pixels. Our main wrapper was the class of projects, and it's here where we can set the display type to make use of the flexbox. The mobile first view which we're currently working on will allow us to set the flex direction to be the column, meaning our items will be stacked vertically and then will change this later on when we have more screen space available. Each of our projects and this class of grid item, and we're going to use this to initially set some space in between each one by adding some margin on the bottom of each one and the volume of one rem. If we now take a look at the final version, we see that this has the gray border surrounding each one. To do this, we're going to add a background color to each one of our sections. To make this background visible from the image, we're going to add some padding around the edge of each one. This will create some spacing, so our background will come through on all four sides. So we can set the background to be the value of light-slate-gray, reloads, and we can only see this behind the project title. So to see this around all four sides, we're going to add the padding value of one rem. This gives us the effect of a border. Currently we see our border is wider on the bottom, and this is simply because we currently have the project title. We will remove this places over the image very soon. After our grid item, we're now going to move onto the image and set this to be the full width of the container. We can do this by targeting our grid-item image, and then it sets the width and the height to be 100 percent. This will make sure that our image will fully fit the grid item. Now let's save this and reload the projects. This looks fine on the small screen view. However, if we stretch the browser, these images start to become really stretched. To improve this, we're going to change this layout twice using two media queries. Currently we only have one media query set up. I'm going to make use of these two, switch the flex direction to be row. So we have two projects side by side. Then in the upcoming video, we'll go even wider to a full desktop view, and then we'll make use of the CSS grid. So scroll down, we already have our media query in place, and I'm going to go to the end of this. Filled in the closing brace just here. Let's start with our projects. Remember this is the main wrapper for all of our projects, and we can set the flex direction to be row. Next we can target the grid item, which is our single project and we can set the flex basis be a value of 45 percent. The flex basis is going to be the default size of our elements, which is our projects, and this also leaves 5 percent for any spacing in between. If we save this and reload, we see the projects don't quite look as expected, which suddenly flex basis to be 45 percent. We did expect to have two images side-by-side with the 5 percent in between for spacing. This is because by default our items are set to no wrap, so all items will try to fit on the same line. We can override this by setting the flex wrap because each individual items will break into their own line after we take into account the width. So in our projects, if flex wrap, we can override the default value of no wrap to simply be wrap. Save this and reload. Now we'll see two projects side-by-side, segmented 45 percent each. All of the additional space, however, is on the right-hand side. But it would look a lot better if we distributed the space more evenly. To allow us to do this, we have a flexbox property called justify contents, and this is going to allow us to determine where we want this spacing to appear. We're going to set this to be spaced evenly so all the additional space around the elements will be divided up equally. Now the white space divided up equally between our projects. Right. So we now have the styling in place for the small screen layout using the flexbox, and our site now looks good on a small mobile size device or a small tablet. However, though we want to also cater for larger screens and desktop devices, and we'll do this in the next video and also get our first look at using the CSS grid.
21. First look at the CSS grid: We already know how to use the CSS Flexbox, the layout of a content across one axis. For example, on this top section here, we have the content laid out across the page in a row. Just below this, we have a column based layout where our content is stacked from top to bottom.This is a great use for the Flexbox, but this also has one limitation, our content inside of each section can only be laid out in one direction. However, though, if we take a look at a grid based layout on the right hand side, we can use the CSS grid to control the layout across two directions.The first thing we need to do is to set the width and height of our columns and rows. We can then set how much of a gap we want in between each one of our elements. We can then also set whether our elements are all to be equal or whether we want them to be merged like we see just here. Another great part of the grid is also the ability to place our content into any section which we want. We can either do this or we can allow our content to flow naturally and take up the next available space on the grid. One of the misconceptions about the grid and Flexbox to begin with is we need to choose IV law. Above it all this is not the intention. The grid is not intended to replace the Flexbox and they can compliment each other in the same projects. Let's now add in our final media query, transform our projects into a grid. I want to add mine around the 1,000 pixel mark, but you can of course play around with this to suit your projects of any styles of CSS. After the last media query, I'm going to add in a new media query with the @media real. We can of course target different screen types, such as the screen or the print view. Well just like before, I'm just going to use the minimum width, just like this, and set this to be 1000 pixels. Let's start with our project wrapper and the way we can introduce the CSS grid. Just like we did with the Flexbox, is to set the display type. We set the display to be the grid, and I'm also going to set the height of the section to be 100 percent of the viewpoint height. The next thing we need to do is to declare how many columns and rows we want to use in our grid. We set the columns by using the grid template columns property, and then we set how wide we want each column to be. For example, if we wanted three columns, to be 200 pixels will do it like this. So 200 pixels, 200 pixels, and then, 200 pixels. Now if we save and reload, we now see our three columns at 200 pixels each. We can also make these different so the middle one could be 500, and this will only affect, our middle column. If we wanted to add an extra one, all we need to do is to add an extra value, just like this, and this is now reflected in the browser. We can also make use of different values such as percentage, ems, rams, or we can also make use of a grid fractional unit, which will take up one part of the available space. If we wanted three equal columns, we could use the FR units, so one fr, one fr and one fr and these would now take up three equal spaces. After this, we can also set our grid template rows, and you can probably guess what this will do. This will set the spacing for each one of our rows in our projects. For example, let's go for 100 pixels, 300 pixels, and then 200 for the third one. Reload. We don't actually need to set the grid template rows for our project if we don't have this set at all. Remove this. Since we have all three columns set, the content will take up the three columns on one row, and then the remaining content will move onto the next row. After this, we can also add some space in between each one of these projects, and we can do this by adding a grid gap. The grid gap is simply the space between each one of our rows and columns. I want to set mine to be 20 pixels. One of the good things about the grid gap is it doesn't add any spacing on the outside either. It will only apply between each one of our sections. One thing you will notice though, is there is more space below each project than is in between even though we've set an equal 20 pixel gap between each one. This is because from earlier when we created the mobile first view, we set some margin on the bottom of each one of these items. We only want this to take effect for the mobile view. Therefore, in this media query you can also reset the margin, you're back to zero. This was set on the grid item class, and all we need to do is to set the margin bottom to be zero. Reload the browser, and this will still take effect in the small screen. Expand the browser to the largest size and the grid gap is now equal. The grid also provides us with a repeat function, which is a shortcut. If we have multiple rows or columns with equal spacing, we can only have these three equal columns, so instead of writing this out three times, we can use the repeat function. Then inside the brackets we declare how many times we want this to be repeated. For example let's go four times, and then sets how wide we want the column, save and refresh. These are now repeated four times. But we will want to leave this as three, just like we used before. This is how the grid system works on a basic level. But what if we don't want our grid it to be so even? There may be cases where we want our images or our sections to overlap multiple parts of our grid. Well, for this, we are provided with the grid areas property, and this is what we are going to discover in the next video.
22. Grid areas for more advanced layouts: Currently,our CSS grid looks a little bit like this. We've created equal sized columns and rows, and this is designed to accept the same size pieces of contents. Although we sometimes have the need to create different size areas to allow us to use different size pieces of content. For example, you may want a wider piece of content, span across two grid areas, or do the same vertically for a taller piece of content. Fortunately, we can do this with the CSS grid, using the grid areas and this is what we are going to take a look at using now. In our project start HTML, we gave each one of our projects a unique ID. This is work1, work2, and then increasing for each one of our items. This ID can be used in the CSS to place each one of these sections into any part of our grid. At the moment our grid items are just naturally flowing across the page. Then moving on to the next row. We can use these IDs now and then place them in different sections. We can also allow them to take a multiple sections, and this is what we are going to be covering in this video. In this CSS file, I'm going to now go back up to our project page section where we added the comment. Let's scroll up. This is the section here. We add this anywhere, but I'm going to add this after the title, and we can select our section by ID using the hash and the name of work1. This may look a little bit confusing at first, but do bear with me as this will become more clear very soon. What we're going to do here is set the grid area, then we're going to give this grid area a unique name. Let's go for work1. Now we have this section in our CSS assigned to a new grid area called work1. Then we're going to repeat this for each one of our sections. work2, this can be any names which you choose, but I'm going to keep this simple and consistent. Number four, number five, and remember mine goes up to nine items. Six, seven, number eight, and finally number nine. Now, we have assigned a grid area named to each one of our elements. We can lay them out in any way which we want. Let's go back down to our media query where we set up our grid earlier on, down at the bottom of this file. We can then use the grid template areas property. I want to add this on its own line, so it's more clear. Inside here we're going to declare how we want our new grid to look. Rather than certain things our weight, our grid template columns, and rows which we looked at before, where the content will flow more naturally, here we are declaring exactly which piece of content we want to add into each one of our grid areas. We lay this out in a visual way between the quotations. For example, if we wanted free columns, we could set the first place on the top left, which is this one, to be the section called work1. Next up, I'm going to declare that work4 is going to be the second item on the first row, then the third one is going to be the work7. This is the items which you want to appear on the first row. On the next row between the quotations, we can then do exactly the same. I'm going to say it's work2 work5, and then also work7. Notice here that this four are unique pieces. Then on the right-hand side we have two with the same name. This means that the work7 will take up two parts, meaning that it will be a lot taller than the other items. For example, on our grid here, this will be one section just here, and work7 will take up both places. Down to our next row, I'm going to set work3, work6, and then work8. Then for the following row, I'm going to add one section of work. This is going to span the full width of our grid taking up three parts on the same row. Since we have three sections declared, all we need to do is to add the same name of work9 into each one of our sections. Here without even seeing the grid in the browser, we get a visual representation of how our grid is going to be laid out. We can see that all of these sections are individual, except this last section here, and also this vertical section in the top right. Let's now save this. Reload the browser. In the top right we have this section which spans the two vertical columns. We then have our individual pieces all surrounding, then at the bottom, the section taken up the full row, which is the work9. We can use this grid area technique to create some nice looking layouts and also some more complex designs depending on the content which we have inside of our grid. In the next video, we're going to improve our portfolio section by adding some nice CSS hover effects.
23. CSS text overlay, hover effects and animations: Welcome back. Our project is now taking shape and almost complete. I'm now going to finish things off by adding some more CSS styling and also effects. If we take layer, we're going to add a hover effect onto each one of our projects inside the grid, which is also going to reveal the project's title. We're also going to make use of our animation library to on this page. First let's begin by removing the project title and then we're going to re-introduce this later on when the user hovers over our projects. Let's begin over in our style sheets. If we take a look for all projects section or all projects page, we're going to add this at the bottom of the section. Make sure this is outside of any media queries, since we always want this to apply for all screen sizes. We're going to use the class of hidden text. If you remember in the HTML, we added this class to each one of our grid items, so we can make use of this now. The height of a text, what we're going to do to begin, is to set the display type to be none. This will then remove this from the page. If we hit refresh, we now see our title has been removed. Now we need a way to reintroduce this when the user hovers over our image. We're going to do this with a combination of classes. Remember that each one of our project is surrounded in this grid item class so we can access this to begin. Then separated by a column, we can use what's called a pseudo-class. A pseudo-class is used when we want to apply CSS for a particular state, such as when a element is active, when a link is being visited, or in our case, when we want to hover over the elements. When we hover over these elements, we want to affect this hidden texts just above. Let's understand that just afterwards, now all the styles will apply to this hidden text class. Once we hover over our grid item, we have this display type of non adjust here. We want to reset distributed display type of block, which will then place this back into our HTML. Also the text-align to be in the center of our section. We can also play around with the font size, let's go for 4rem and also the font color of white. Over to the browser hit refresh and now when we hover over any of our images, we see this large text appear in at the bottom. Now our texts disappear when the hover. But this is still taken up the space at the bottom of the div. However, we don't want this at the bottom. We want this to be placed at the center of our section. The reason we see this at the bottom of our div is because by default the element will take up space in the order they are in the HTML. It makes sense that we have our image then followed by our text. One way we can change this is to set the CSS position of the text to be absolute. Absolute, we'll remove the elements from the flow or the page, meaning it effectively won't take up any space. We're then free to position this anywhere we want to. Let's go back to our style sheet and just after our color, we can set the position of this elements to be absolute. Let's see what effect this has in the browser. Now when we hover over our images, this now leads the text on the page, but it no longer takes up any of the space. We can see this because we don't have any of the gray background behind the text, meaning it's no longer positioned inside of our div. It's obviously not in a good position. We can now move it using these CSS properties of top, right, bottom, and left. We can then use this to place it exactly where we want. We want the text to be laid over the center of the image. It makes sense till you set this 50 percent from the top and 50 percent from the left. Let's say this and go for the left of 50 percent and also the same for the top. We can also as a temporary measure, remove this hover, just so we can see what's going on while testing. Over to the browser and let's see where we are now. We don't see any of the titles over our projects. However, if we scroll to the top of the page, we see that all of the titles are now placed in the header section. Why is this? Well, this is because when we take the textile, the flow of the document using absolute and then set the top and left values as we have just turn. These top and left values are set from the browser's viewport. We've effectively set the text to be 50 percent from the top corner of the browser. There is a way we can override this though, and this is to set any of the elements that have a position of relative. Each projects which we have down below is wrapped in a div. This div has the class of grid item. If we go to our project, this is the wrapper div just here. Now, if we set this to be a position of relative, this container will now be our reference point for our text rather than the browsers viewport. Back over to our style sheet, we can apply this now. It's about grid item, we already have this class just here. Let's set the position to be relative. Over to the browser and refresh. An OCD text is applied over each one of our images, the text has actually been pushed over, for example, 50 percent from the left-hand side. But it doesn't account for the width and height of the text. Instead, we want the text to be we moved over 50 percent to the center of our text. We can do this by moving the textbox by 50 percent of its width and height. Since we're making use of a percentage unit rather than a pixel, this will also still center the text regardless of its size. Back over to our hidden text. The grid item hidden text and then just after our positioning, we can then offset our text by half of the width and height by using a CSS transform. A transform, which we want to add is going to be translate. Then inside here we can offset this by adding a X and Y value. We want to add an offset of negative 50 percent, which is half the weight or the text. This is on the X-axis, which is left to right. We can also do the same for the Y-axis, which is opened down. Let's reload the browser, and now all taxes being moved over to the left and top, 50 percent of the total width and height. To make our text now stand out, we can add some hover effects. First of all, we need to re-introduce our hover pseudo-class, which we remove from before. The text will now only again appear when hover over our image. The next thing to do is to also target our image them make it darker so the tags will stand out. Just as above, we could target the grid item when the user hovers over. But this time only apply our CSS to the image. We're going to first of all, add a filter effect in the brightness of our image and set this to a value of 0.4. This will have the effect of darkening our image to only be 40 percent. Save this and reload. Now when we hover over, we've now reduced the brightness of each one of our images. We can also add a small pop effect two, which is going to make the image just a little bit bigger when the user hovers over. We're again going to make use of this transform property. But this time we're going to transform the scale. The scale is used to make the elements bigger or smaller and one is the regular size of the elements. I'm going to make this slightly bigger by certain as to be a value of 1.01. The final thing I'm going to add is the opacity. Make this slightly transparent with 0.95. Give this a save and over to the browser. When we now hover over our images, we see a small increase in the size and also the opacity is reduced to. The last piece of CSS I'm going to add is to restrict the overall size of the page. This will stop the images being overstretched on really big screens. If we stretch the browser to as wide as it possibly can be, we often have a maximum width, which we want the website to stretch too. Then we can set the background color to apply on the left and right-hand side, once the browser reaches the size, we can do this by setting the maximum width up at the very top of our style sheet in the body section. I'm going to set mine to be a value of 1,500 pixels and then over to the project. We now see that the browser has gone over the 1,500 pixels, leaving all of the content moved over to the left-hand side and all our white space over on the right. Generally though, what we want is the white space to be divided up equally between the left and right-hand side. We can do this by setting the margins to be automatic. We will divide the spacing up equally on both sides. Let's do this back all the in the body section. We already have the margin property set just up here. We can add this as a top and bottom value. No margin will apply on the top and bottom. But we can set the left and right values to be auto. Save this and now we should have equal spacing. The final thing which I'm going to do to stop the white space from the body flowing into the background color, is to set some background colors for the body, which is the section which we see in between here and the HTML, which is the background color on the left and right. First of all, the body section can have the white background color. Then if we go up, we can add to the HTML2. Now HTML section will cover the white space on the left and right-hand side. Now what I'm going to do here is to set the background color to be a slightly different shade. I want to use eee. This will stop our page that can really stretched on large monitors. The final touch for this page is to add some animations to all projects. Use the animation library. Let's go to the projects or HTML and we can add the attributes to all of our grid items. We do this by adding the animation name with data aos, an animation of zoom-in-up. To save time, I'm going to copy this and add this to all of the rest of the projects. It can of course add a different animation if you prefer. To make sure this is on each one of the projects, so this will zoom in when we scroll down. Below the browser, scroll down to our projects and these now will zoom in as we reach them. Congratulations for reaching the end of the course project. First of course, feel free to extend it and make it your own. Once you are happy with your project, you will be eager to get it online and this is what we're going to take a look at next.
24. Hosting: Once you've finished perfecting your portfolio, I'm sure you'll be eager to get it online for the rest of the world to see. Unfortunately, there is a really fast and easy surveys to do this called Netlify. You can go over to netlify.com where you will need to sign up and create an account. I'm already signed up with these, but if you don't have an account, go ahead and create one now. You can sign up with various providers, such as your email and password or a service such as GitHub. You may also need to verify the e-mail. I've already done this, and I had barcodes in Netlify and cancel any quickstarts which may appear. Once you've done this, you'll be taken to a page which looks like this, and all we need to do is to drag over project folder. If you do have your project stored on GitHub, you can also use this too. What you want to do is drag over the portfolio projects into this upload section here. After a short period of time, we then get a test link which we can use, which we can see just here. This will generate a URL which you can click on or copy and then paste in the browser to view. This will then give us a chance to test our sites and see how it looks on a live web server. Unfortunately, ours seems to look exactly the same. We can also test the projects page. Check there is no errors on here too, scroll down and everything is looking okay on this page too. We can also make a custom domain which is any path before the netlify.com. Back over to the dashboard, click on the "Domain Settings", then onto the "Options", you can also edit the site name. This one is being randomly generated and you can change this to be something more memorable if you prefer. Hit "Save", and then this will take effect. This will still have the netlify.com on the ends. However, though, if you do have a domain name which you want to use, if almost you already own or one you can purchase through Netlify. There is also a quick guide for doing this too, and you can click on this link to find out more. For now, this is how quick and easy is to get started with Netlify, and push your site to a live web server leaving you with a fully live URL which you can now share with the rest of the world.
25. Final thoughts: Hope you've enjoyed taking this class as much as I've enjoyed building it. Thank you so much and hope you've gained some new valuable skills, which you can put to good use in the future. I also can't wait to see what you guys will create. Feel free to share your project too.
26. Follow me on Skillshare!: Huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare and also follow me for any updates and also to be informed of any new classes as they become available. Thank you once again, good luck, and hopefully I'll see you in a future class.
Chris Dixon, Web Developer & Online Teacher
