Modern Web Design & Development: Creating a PWA with Angular | Jacinto Wong | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Modern Web Design & Development: Creating a PWA with Angular

teacher avatar Jacinto Wong, Senior Web Developer / Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

40 Lessons (4h 42m)
    • 1. Introduction

      1:43
    • 2. 2 Codepen & Video Background

      10:41
    • 3. 3.1 Installations & Main Setup

      8:44
    • 4. 3.2 Angular & Firebase Setup

      10:50
    • 5. 4.1 What is a Progressive Web App?

      4:48
    • 6. 4.2 Design Principles

      9:13
    • 7. 4.3 Portfolio Planning

      8:17
    • 8. 4.4 Creating Portfolio Sections

      7:04
    • 9. 5.0 Home Section Overview

      1:19
    • 10. 5.1 Video Background

      7:09
    • 11. 5.2 Custom Google Fonts

      6:11
    • 12. 5.3 Importing Font Awesome Icons

      11:44
    • 13. 6.0 Desktop Navigation Overview

      1:04
    • 14. 6.1 Building & Styling Navigation

      11:35
    • 15. 6.2 Navigation Functionality

      11:13
    • 16. 7.0 About Section Overview

      1:00
    • 17. 7.1 About Layout HTML

      8:21
    • 18. 7.2 About Layout CSS

      12:12
    • 19. 8.0 Projects Section Overview

      1:19
    • 20. 8.1 Photopea Mockup

      8:32
    • 21. 8.2 Projects Layout HTML

      6:04
    • 22. 8.3 Projects Layout CSS

      8:35
    • 23. 9.0 Contact Section Overview

      1:30
    • 24. 9.1 Video & Image Background

      8:08
    • 25. 9.2 Business Card Mockup

      6:24
    • 26. 10 Footer Layout HTML & CSS

      4:19
    • 27. 11 Angular Component Integration

      12:00
    • 28. 12.1 Responsive Design Overview

      2:00
    • 29. 12.2 Large Smartphone (Vertical)

      11:45
    • 30. 12.3 Modifying Desktop Menu

      9:31
    • 31. 12.4 Hamburger Menu Styling

      15:34
    • 32. 12.5 Hamburger Menu Functionality

      6:39
    • 33. 12.6 Large Smartphone (Horizontal)

      10:02
    • 34. 12.7 Responsive Design Conclusion

      3:28
    • 35. 13.0 Optimizing & Hosting Overview

      0:52
    • 36. 13.1 Making a Favicon

      10:00
    • 37. 13.2 Lighthouse Audit & Meta Tags

      9:55
    • 38. 13.3 Building, Optimizing, Hosting

      8:00
    • 39. 13.4 PWA on Smartphones

      2:19
    • 40. 14 Conclusion & Thank You

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

Community Generated

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

144

Students

--

Projects

About This Class

This course is intended to enable anyone, even if you are starting out with no knowledge or experience, to finish the course with the ability to create progressive web apps, understand the basics of Angular, and learn best design practices along the way! You will complete your own unique version of the project that we will build and host for free with the Angular 8 CLI and Google Firebase.

I would recommend pausing the videos in order to code along, I would also encourage you to try to understand the process while watching and taking notes in your own words to reinforce and accelerate your learning. Lastly, I think an ideal setup would be having a multiple monitor system as you can have the course on one screen and your code and browser on the other. These are all strategies that I employed when I was teaching myself to code using online courses just like this one, and I can tell you that they proved extremely helpful.

By the end of this course, students will:

  • Be able to build responsive Progressive Web Apps using Angular and Firebase

  • Practice principles of design that will apply to print and web projects

  • Create their own unique portfolio website

  • Have a solid understanding of Visual Studio Code

  • Learn how to create project mock-ups with Photopea

  • Have the ability to use Chrome Developer Tools to test and audit websites


Why Should You Learn This?

If you are starting the process of learning to become a web developer, or even if you are already working as a web developer, you will find value in this course. There is an emphasis on design principles throughout, and a unique workflow to efficiently create Progressive Web Apps that are much more functional than regular websites.

Meet Your Teacher

Teacher Profile Image

Jacinto Wong

Senior Web Developer / Educator

Teacher

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Introduction: Welcome to 2019 Guide to creating a Progressive Web portfolio. Hello, I'm just Toe one. I first started in graphic design 15 years ago, creating newspapers and magazines. I worked as a teacher for several years before My current position is a senior developer. I have a wide variety of experience, and I look forward to sharing it with you. By the end of the course, you will be able to build responsive, progressive webs. Specifically, the final project will be a portfolio website, which we can host online for free. This is what project looks like on desk. This is what it looks like on mobile. I'll encourage you throughout the course to add your own style to the project with different colors, fonts, images and videos. This course will cover a wide variety of topics, including mock up and icon creation. Angular fire babies get huh and more. This course is designed for anyone interested in learning how to build a website that functions off line even with zero experience. Anyone who wants to learn responsive design principles, anyone who wants to make a portfolio website and anyone who wants to begin a career in Web design Web development. If this sounds like what you're looking for, I hope you'll join this course today and learn how to combine, design and develop. 2. 2 Codepen & Video Background: alrighty. Before we get into our main project, I'm going to start by showing you an amazing resource for getting inspired as a design conscious developer. So we're gonna go to code pen dot io and on here there are many examples of websites, components and unique two D and three D animation to interact with, including being able to see the full and functioning code and experiment with it. This first video, I'm gonna show you a simple way to make a responsive video background that you can use as a landing page. This will be very basic and used just HTML and CSS. We're gonna be utilizing a new feature in HTML five, specifically a video element. We can set this element to loop an auto play, and this will also need to be muted because of new browser rules. But that's fine, because we're using it as a background. All right, so onto the coding, we're gonna go over here, we're gonna click start coating, and I get a zoom in just to make it easier to see with control plus swimming in and chrome and see that gives us ah, a little bit of a different layout here, and ah, to start with, we're going to create a video element. We're just gonna type video and press tab, that kind of auto complete for us. We're going to remove this source for now, and we're gonna add it back after as a separate element, we're gonna make sure that this element loops is muted and auto plays. Then we're going to give it an I D. Of video dash background. All right, and then inside, we're going to create a separate source element, and we're gonna add back our SRC source. And now we need to go out and get a video eso to make this quick and easy. We're going, Teoh, get a video that's already online. Eso we're going to go to pick sabei dot com and we're gonna click videos, and we're gonna want to get a video where the camera doesn't move. Eso that'll make it for a more convincing, infinite video type in waves because, uh, when I want to see all right, so I like this one. Doesn't really seem to be moving on. It's a nice view of some waves crashing. We're gonna click on that and then we're gonna click free download, and you can decide the quality that you want. I gotta go with 7 20 Um, we don't want our video backgrounds to be huge. Even this is probably a little bigger than we want, but in this case, that's all right. So we're going to right click and on the download button here and copy the link address, and then we're done with that, and we're going to pace that into the source, and you can see now we have Ah, we have something going on in here. You know what? I'm just gonna actually full screen this to make it even easier to see in a control. Plus one more time. All right, so in our CSS, we're going to begin by targeting our video dash background, I d. And we're going to start by giving it a position fixed. That means it's going to stay where it is in the page and things will be able to scroll over top of it. We're gonna give it a right zero, meaning it's going to start at the absolute right side of the page. We're gonna give it a bottom of zero. Meaning it's going to start at the bottom of the page. Next, we're gonna give it a with of 100 VW, which stands for Vieux Port, with which is the width of whatever screen size you have. Right now, you can see that mine is kind of constrained into a square. And because of this, this will not look ideal as I'm showing it to you. But on a regular desktop, it will look this way. And we're also going to give it a height of auto. If I wanted to make this look good right now, I could actually flip thes so one of these convey 100. But one of them needs to be auto in order for the video to fill up a space of any size So you can see I'm actually going to switch these for right now, I'm going to do auto and 100 report height, and you can see that it fills up the square perfectly. Even though it's not a square video, it's a rectangle. It's 16 by nine. Um, but for you guys, if you're going to be doing this on a regular size screen, uh, you have to remember I'm very zoomed in here to show you guys. It should be with 100 VW and height of auto. Okay, so moving on, we're gonna target our video element, and we're going to give this a position absolute again, meaning that it won't move. We're gonna give it a top 50% and we're gonna give it a left 50%. And then the third part that will make this work is transformed. Translate bracket minus 50% comma minus 50%. So that's the vertical and horizontal axes. So these three things together combined to center our video in the page sequence e it's centered vertically, and obviously it's taking up the whole with horizontally. And now moving on, we're going to make a overlay for a background. So this is going to be a layer that's kind of see through. It's usually black, but white or any other color can work. And this is gonna allow you to conceal any imperfections in your video, especially if you're using a video that is very low file size, meaning that it's not going to be a sharp as like a four K video would be. So to start out, we're going to create a div back in our HTML and we're going to give it the class equals video overlay. And back in her CSS we're going Teoh, target our video overlay class. We're going to give this a position fixed. We don't want this to move. We're going to give it a left zero. Meaning it's going to stuck. Start at the we're going to give it a left zero, meaning it's starting at the very left of the page and we're gonna give it a top zero, meaning it starts at the top of the page. But it's kind of irrelevant because the height is taking up the whole height and the with is also taking up the whole with The most important part of this, of course, is adding an actual color. So we're going to give this a background color. RGB lips are G B A and we're going to give it zero comma, zero comma 0.5. So that means that we're giving a black overlay of everything and 0.5 meaning it's half see through. So you can see that this darkened everything up quite a bit. But this is also gonna provide another benefit, and that will make it easier for our title to be seen. So we're gonna go ahead and go back to our HTML, and we're gonna add a title. We're just going to Macon each one press tab and was gonna rate your title here. So we're gonna want to actually change this up a little bit, and we'll target that down here. Normally, you would have a class for this, but because I'm just showing you quickly, I'm just gonna leave it as an H one. We're gonna give this a position of absolute so we can position it exactly as we want on the page. We're going to give it a top of 50%. So we wanted to be 50% down the page. Let's, you know, let's make it 40%. Yeah, that ends up mostly in the middle. And we're gonna change the font color to be white. So it's going to really pop on our black overlays, so you can see it's a lot easier to read. We're gonna give a front family of hell. Uh huh. And lastly will just give a fun size of three rim. Okay, so if you're not familiar with Brems units. I'll provide a link in the course to read more about it. But basically on an average screen size one room equal, 16 pixels, therefore to rams would be 32 pixels and so on and so forth. Alright, he's so now that we've finished our code pen project, I'm actually going to zoom out to show you what I was talking about earlier. So you can see I was at 175%. I'm actually going to zoom out all the way to 75% because my windows is zoomed in even more so that you guys can see the code that I'm writing. But you can see now on this different size here that our video is filling up our whole screen and for you, it should look more like this when you're working on code pen than what mine looked like. And so you can see that it does in fact, work if you have the right screen dimensions. Awesome. All right, so in your version, I want you to feel free to experiment with different fonts, videos and overlay colors. And don't forget to submit your coat pen link for assignment one. I'll personally give feedback toe all submissions, and I've created a collection on code pin where you can see everyone else's work. All right, so now on to the main course, I'll see in the next one. Bye for now. 3. 3.1 Installations & Main Setup: all righty now onto the set up for our project. If you've never done any Web development before, there are a few things that will need to be installed on your computer before we can start the project. If you have, make sure you've installed get for Windows and connected to get help account installed, visual studio code or a similar code editor. Make sure you have Google Chrome, and lastly, make sure you've installed no Js slash npm as well. Need this and download NPM packages for angular and fire base. I will now go through the downloads and installations as there are a few tips that will make this process easier for those who are unfamiliar with it. So, first, we're going to go to the Git for Windows website. Get for windows dot Borg, and we're just going to click the download button. Very simple. So get for Windows is essentially a way to upload a record of your code from your computer into the network repository of get hub or other similar sites. And this is very important, as it allows us to share our code with others during this set up will actually also be able to make sure that Windows Explorer integration is included. This allow us to open up a terminal anywhere by just right clicking and opening. Get Bash. And we'll actually also be able to install visual studio code through a link in this set up . So we're gonna click? Yes. Next. Next. And you can see we're making sure that we have our Windows Explorer integration. We'll use that later on. And now we're at the text editor screen so we can select visual studio code here. And we can actually just click on this link and then download for windows. Okay, Now, we're gonna launch the set up file here, and during this set up, we're going to want to make sure that we add open with code to the Windows Explorer menu as well as this allows us to in any folder launch into visual studio code to create a new project case. We're gonna actually check all these, and we're going to register it as the default editor, okay? And we're gonna install. Okay, Great. We're not gonna launch it quite yet, and we're gonna all tab back into our get set up, and we're gonna finish it. We're going to go back. And the next thing you can see now we can click next cause we haven't installed. And we're just going to click next on all the rest of these as they don't really impact our project. Okay, We don't need to view the release notes, and we'll just finish the set up. All right, So the last thing we're gonna install is no Js and NPM. We're gonna go to know J s dot org's, and we're gonna click the LTs version. It's recommended for most users, as you can see here. Okay, we're gonna click next. So NPM is a great tool because it allows you to install other components and frameworks from other people and PM censored note package manager. So it just basically allows for a lot of shortcuts and reusing things over and over again. All right, so now our installations air finished. The last thing we're gonna do is we're gonna go to get hub dot com so I'll let you sign up on your own. So you're just gonna sign up, create a free account, and afterwards make sure that you verify your account through your email and Once you have it all activated, you can then create a new repository. So we're gonna do that now And you can name it anything you want. I'm just gonna call it angular P W A. And you can add a description if you want. I'm gonna leave it blank. Gonna leave the rest of this the way it is and was gonna click create repository. So we're actually going to be using this to upload our code. So I'm actually gonna copy this, and we're going to go back now to our desktop. And so we're going to create a new folder on our desktop, and we're just gonna call this, uh, coding projects. And then inside of that, we're gonna make another folder for our specific project, and we're gonna give it the same name. Angular P w a. And then we're going to right click and open with code. And so that's a quick way to get into a project that you want isolated in one folder, which is nice. We're gonna minimize our explorer here. We're going to go to view, and we're going to use visual studio codes, integrated terminal s so you can see that I have, uh, get bash already set up here. But if you have power show, which is what it should be by default, you can click set, select default shell. And just make sure that you have git bash selected there. All right, so, uh, now we're going to first thing we're going to do is we're going to add our get hub. So we're going to do typing, get config Dash dash, Global space user, uh, email. And then in double quotes, we're gonna type in the email address we used to sign up for. Get hub quote, press enter. All right, cool. Now we're going to set up our project locally before we push it into the repository. So in the terminal, Linotype Echo double quotes, and we're just gonna have it say, read me quotes and dash dash and the file name will be the same. Read me dot Empty. OK, enter and we're gonna type Get in it. So this is gonna initialize an empty repository in this folder. We're gonna type get bad, and then, period, period means it will add any file that's been changed, and then we're going to do get remote at origin. So we're gonna pace what we copied earlier. I'm gonna press enter, and then we're going to have a comment for the commit. So this is how you kind of separate what you've been working on in each. Each time that you push changes to your repository, normally you'll start out with initial commit Aziz, the first commit and then we're going to do get push, Virgin Master, this is actually gonna send from our local project into our repo on get hub. And so you might have a log in Forget Hub that pops up here. Just make sure that you enter in your email and password, but for me, I did that previously, and you can see that everything is 100%. So we're going to all tab back into our get hub Repo here, and we're just gonna refresh and we can see that. Now we have a read me. So we've just pushed our code from our computer into our repository. So we're actually going to delete this cause we're going to start fresh, commit these changes and ah, in the next video, we're going to start on our angular and fire base set up. So, seeing that one bye for now, 4. 3.2 Angular & Firebase Setup: Welcome back in this video, we're going to set up the angular CLI on our computer. So CLI stands for a command line interface, which is very helpful tool that will allow us to run commands in our terminal for angular in order to do a variety of different things. And I'm gonna show you some love right now so you can see we're back in visual studio code . We have a new terminal open here, and we're going to type in NPM install dash G, which means globally at angular slash Seelye. So by using the dash g globally flag, that means we only need to install this once on our computer, so we'll never need to run this again. All right, cool. That's done. The next thing we're gonna do is we're going to create a new angular products. So we're going to do this project. Sorry n g new. And then we're gonna type our project name. In this case, I'm going to call it a portfolio project and we're gonna type enter. Would we like to add angular routing? Yes. And we're gonna select CSS for our style sheet, and we're gonna let it do its thing. Alright, Awesome. So now our project is totally built. We're going to use C D to go into the directory we just created. So we're gonna do CD and then the same name that you just entered ends CG Portfolio Project . So you can see we've gone inside of our angular Peter be a folder and now are inside our portfolio Project folder. And we're gonna now add our progressive web app functionality, which is again, very simple. We're gonna type n g ad and then at angular slash p w a. Alright, awesome, that's done. Now we're ready to launch our project and see what it looks like by default. So we're gonna actually open up a new terminal here, so it'll keep our old one. But now we have Ah, fresh start here. This will be helpful later on as well, and we're gonna type n g x agency The theme here, everything is in g n g serve, and this is what's actually going to build our project on a local development server which will automatically update any time we save the project. So we're also gonna add the dash Oh, flag because that will automatically open the browser when it's done building. Oh, sorry. We need to actually go into our project again in this new new bash tab. So we will try that again. Engy, serve and open and OK, so you can see it's compiling its building, the project. And then when it's done, it will automatically open up in chrome. So you can see here. We're at local host 4200 and we have our project here. It's very, very, very basic. This is just the default project. And, uh, yeah, so we go back into we're gonna all tab back to visual studio code so you can see that our server is running here. And keep in mind that you'll need to run this N g served ash. Oh, every time you close and reopen visual studio code and sometimes you also want to actually stop this live development server in order to build, for example. So to do that, we're just going to type control, see? And you can see it's canceled because it's giving us another terminal line here. Okay, So, uh, to test this, we're gonna need to do one final thing, and that's going to be set up our Google fire base. Uh, sorry. As we shut down our server, we're going to actually install these other tools. So we're gonna do NPM installed Dash g again, and we're gonna install our firebase dash tools. Okay, Now, the tools air done will actually need to go onto the fire base website itself. Eso even close that for now because that's no longer running. So we're just going to go firebase and we want fire. Restart google dot com And so basically, you can log in with your Google account, So if you have a Gmail account, that's a Google account. So we're going to be able to you see that I'm already logged in, and once you do that, you can go into your console and we're gonna add a project. So we're gonna enter a project. It needs to be a unique name. Eso I will usually use my name and then the project whenever it is. So in this case, it's call it just Scinto Dash Portfolio dash project. Okay. And so you can see here. There's no conflicts with that. So we're going to continue. Um, we can We don't really need a Google and politics right now. You can set that up later. And so we're going to create this project. So as this is happening, we can actually go back into visual studio code because we have some more stuff to do. So we're going to type in firebase log in in order to log into fire base on our computer. Um so allow the reporting of data, and then this is going to prompt us to signing here. We're gonna allow no to do this, and so you can see we're giving the permissions here and we're gonna click. Allow. Okay, so great. We've logged in with the firebase cli. Okay, so this projects ready will continue there, and then we're actually gonna go back into our terminal and you can see we have our success message, and below that, we're gonna type firebase in it. And so you can see we have a cool set up here. Are you ready to proceed? Yes. Ready? And so we're actually going to use the down arrow. And they were gonna press space bar to select hosting because that's what we want. That we're gonna press enter and so you can see that we have our project here that we just created on our list. If you don't have it, there's other ways to set it up. But we have the project we want here and now it's asking, what do we want to use as our public directory? So we're going to specify we want to use a distribution folder because that's what angular will build our project into when it optimizes it. And we're gonna give it the same name has ever overall project that is important. It has to be the same folder name. Okay, so configure as a single page app. Yes, we will be doing that. And that's it. So are initially initialization is complete. Um, And now, basically, the very last thing is we can do firebase deploy to actually deploy our project. Casey can see our deploys complete, and we have a hosting girl, so we're gonna control click Whoops. We're gonna control click, so you can see that are hosting set of is complete. But I don't think we've actually built on angular project, so we need to go back and do that. So in order to do that, we're just going to do n g build. No, we need to see the into our folder. We won't need to always do this because we will, actually, right click and open code from this folder. So every time we switch to a different terminal, it'll be there. But we'll do that in the next one. So we're just going to do n g build and we're going, Teoh, make it for prod. And we're going to also add a build optimizer. So this is what's actually building our project into that distribution folder that you saw ? Okay, now that this is complete, we can run our fire base deploy again. Okay, so we're gonna control click. You see, when we refresh the page. So we have our sample project here. If we right click and inspect, we can go over to our lighthouse audit tab, and we're gonna run a brief lighthouse audit. This is a tool that's very helpful. That evaluates website. So you can see here that we have some very high scores. You can see that we are in fact, a p w a and so Yeah, that's it. So we've we've essentially finished setting up RP W A project. We've launched on fire base. We installed the angular Seelye in order to set up our project and build our project. And now all we need to do is actually build our specific project inside of this project. So that's what we're going to start planning in the next video. I'll see in that one bye for now. 5. 4.1 What is a Progressive Web App?: alrighty. So before we get to the planning, let's take a quick look at what a progressive Web app is and what the benefits are. If you were to Google PW ways, he would find many different explanations. But in general it is a website that can mimic a native APP experience, which includes the ability to launch without Web browser you I and have a home screen or desktop icon to launch it and also the ability to function offline in 2015. The term was first coined by Google developer Alex Russell, who contributed to an aspirational list of characteristics. It should be responsive. Fit any form, factor any device, be able to function offline using service workers to access the browser's cache, have an APP shell and have AP like navigation, be able to stay up to date, using the service worker to update one necessary, be securely served via TLS. Be install a ble being able to add this application without having to go to an APP store and also be able to use push notifications through the operating system. It doesn't need to be all of these things, but the more that you have the closer you are to a pure progressive Web app, though there are specific, measurable criteria used to test. If a website is a P W A, we can use lighthouse audits and chrome developer tools in order to see what criteria are website meats and how we can meet them if we haven't yet, so you can see we contest for mobile or desktop and thes five categories, and we can also simulate a throttled CPU like there would be on a mobile device. This is what the report looks like when the audit has finished running. You can see we have five categories. Performance accessibility, best practices, s CEO and progressive Web app. So you can see for progressive Web app that it needs to be fast and reliable. Install a ble and P W A optimized. So it'll go through these specific criteria, and it will offer suggestions on how to fix them if you haven't met them by clicking the down arrow in each item. So in 2019 a p. W. A can be created in a few minutes with the angular CLI and fire base. So this is what we did in the previous section and it just goes to show how easy it is. We did that within the span of a couple of minutes. You can go out and check some examples of PW ways in action at p w a dot rocks and see how they function in real life. Now I'm going to show you an example of a P W A in action. We're going to check out something we're going to be using later on in the course, and that is photo P. It is essentially an online version of photo shop, so that would be a cool thing to be able to have on your desktop without actually having to install anything. So there was recently a new update in Google Crume that makes it easier to install PW ways , and that is this plus icon here. The cool thing is that this appears in both Windows and Mac and allows you to do the same thing. So if we click on it were prompted with do we want to and solve this app, and we're gonna click install, and so now you can see that we essentially have a photo shop app. We don't have the browser you I any longer and you can see down below that we actually have a desktop icon here, so that's very cool. It looks basically like a native app. And there was the only installation process we had was just clicking the install button. So our portfolio website that we're gonna be making is going to be able to function just like this with a native app experience, and we're gonna make an app icon, and it's gonna be able to function off line as well. So I hope you're excited to build your own unique P W a. Let's ah, continue on with a few more videos and then we'll get started on the project. All right. Seeing the next one bye for now. 6. 4.2 Design Principles: one more thing. Before we get to our portfolio planning, we're gonna look at something to consider in all of your design work crap, which stands for contrast repetition, alignment and proximity. Keeping these in mind will lead to more polished and professional results and allow you to build better websites than the average developer. First contrast, this can refer to color, shape and size. It is about making things relate to each other by being the same, complementary or opposite. So, for example, in text you would have a bigger header size and your body size would be smaller. A general rule of thumb also is that you want to have contrast between the foreground and background content. You can test this by converting to gray scale so you can see that the example on the left has good contrast while the example on the right as bad contrast in the one on the right. You can't really make out the text because it's too close in color to the background. Where is in the left? It is a very different color, and that makes it a lot easier to see. Color is a very important element of contrast and knowing about color theory will help. You can check out a great resource on this at canvas dot com. I will give the link in the description, and you could learn the basics about color theory. I'll also link a list of 21 color palette tools for Web designers and Web developers. The one that I prefer using is Politan, so you can select a color and you can see with one color selected this purple. It gives us a bunch of darker and lighter shades. We can also select adjacent colors so that we can see colors that are close to that shade but slightly different. We can look at a triad of color, so this is looking at colors that are opposite but go together and three of them in this case. And we can look at te tried colors, which would include four colors that are two opposing the other two. But they all still work together, so I think this personally is a very, very useful tool for Web design. Next repetition is important in establishing brand identity and order in your layout. This includes using a limited set of colors and fonts so Ideally, you want a limit yourself to three colors using a primary accent, color, a secondary color and maybe 1/3 color. You also wanna limit to three font types. So having a fund for the body text having a fund for the header and then maybe having a fund for the branding. So here is a pretty terrible example of repetition, so you can see that we have pretty much seven different font types. We have different font sizes. We have different sizes of images, different types of images, so we can see we have cartoons, clip art and then real pictures all smashed together. So that leads to very, very little repetition of things. And it's hard to really focus on where you should be on the page where I should be on the page. Now this is a much better example. This is the I gene website, and you can see that the navigation is separated. All the thoughts that are very similar. They might be a little bit different, like the headers look like they're bold. Obviously, they're a different size, and so you can see that this is a lot more cohesive. All the images are also repeating the same size, and we're also repeating the same pattern, the vertical rows and the horizontal Rosa's well, all right. Moving on to alignment alignment deals with two major things. The first is text alignment, and the second is object alignment. So I think a lot of people are going to be familiar with text alignment because in a word processor you could change it to be left, right, center or justified, and you can see in the bottom right. We have examples of how those texts looked when they are aligned, so you can see that we have an example here. This is what I would say is a bad example. You can see that they've chosen to center and justify a lot of the body text. If we were to fix this, you can see that basically, you would never want to center any kind of body texts, and you can see that they've also chosen to left line all the titles as well, so that it forms a very nice, neat row for all of the major tax. And then all of the sidebar text is a line on the left as well. Second see centered, everything becomes left aligned, and it looks a lot better. Moving on object alignment is about aligning all the elements on the page so that they feel connected to each other. So edge alignment can mean like with left aligned text or right aligned text there either all pulled to a straight line on the left or a straight line on the right. The other type of alignment is center alignment, and you can actually center something on a vertical. Why access or on a horizontal X axis were both. So in our previous example, you might not have noticed that the logo was modified, so you can see that we put the title all on one line in the subtitle on the other, and then we group them together, and then we centered them vertically. So on the why access compared to the circle So it's in the middle of the circle on the Why access. So that looks a lot neater than what it was before. All right, and lastly, proximity. Proximity is a straightforward concept, and it boils down to placing elements that are related to each other, close enough that they feel connected so here is an example of a business card that shows the same information, but one has good proximity, and the other is to spread out. So ultimately we have in the bad example, on the left, we have TheStreet address and the city separate, and we have the phone number and the email separate. In the good example, we want to put together obviously the street address and the city because they go together to form the address. And then we want the phone number and the email together below that, because they form the contact information. So these air both groups that need to be keep kept together in order for it to make the most sense. So in summary, thes principles should greatly help your Web design ability and thes should be things that you keep in mind. So make sure that you line up elements with each other. Make sure that things are all connected in one way or another. Whether that's edge alignment or center alignment, try to limit yourself to two or three fonts and colors on Lee. To keep things consistent, make sure that you have good contrast, so make sure that there's good contrast between the sizing of your header text and your body text, for example, or if you have a subtitle text size. Make sure that your colors are good with your foreground and background so you can test that. Get gray scale if you would like, make sure that all the text is easy to read and group laid. It related things closely together, so make sure that you have, especially if you have a project card. See have an image for that project. You have a Titley of a subtitling of lengthy biotechs. Make sure that it all appears very close together, so that's not confused with the one next to it or blow it. I would invite you to test yourself on your ability to see and differentiate good design from bad design by playing the can't unsee game. You can visit it at can't unsee dot space. So this is a great tool to learn the subtle differences between design that you might not otherwise consider. So you'll be given a Siris of two images, and you're going to need to choose which one is, the more correct you are being timed. So keep that in mind and feel free to share a screenshot of your scores with everyone in the course when you're done. So that's it for our crash course In design, principles are finally ready to talk about portfolio websites. We'll see some great examples by others and also introduce you to a finished version of the project. We're gonna work on together. All right, I'll see in the next one. Bye for now. 7. 4.3 Portfolio Planning: making a solid portfolio website is an important part of getting your career started in Web development. It is designed to show off the projects you've worked on. But the portfolios, design and functionality is also an indication of your skill and creativity in design and development. There are a lot of exceptional examples out there. I looked in about 50 different portfolios to gain inspiration before I made my own. I found these by searching Google for best developer portfolio websites. Looking at these can give you ideas on themes like minimalist, for example, components like different types of navigations and just how it all comes together. Overall, I'll go over a few now, so the 1st 1 here is by Tobias Allen, so you can see that this is a pretty straightforward website. You can see that there's some animations as we scroll down. It looks like things have kind of been broken up into grids with different colors. You can see we have some splashes of different images here. I really like the project headers for each sections. So every time we switched to a new section, we're gonna have those second see again with work. We have that, and you can see that it's really cool how shapes have been incorporated. But you can still have this really image here and just a very solid overall design. Very simple idea. Essentially, you're just creating all of these separate rectangles and you're smashing them together into each section. And then each section has its own title. All right, Very cool. Let's look at another one. So this is a French website, and I believe this is a design studio, so you can see as we scroll down, we have some videos. Each of the projects kind of lights up as you hover over it. That's a cool way to kind of display your projects, like in a string like this and then having some kind of motion graphic underneath. Looks very cool. And take a quick look at the navigation. So I really like this navigation. It's for unique. It kind of comes and sells, and then you can kind of scroll and hover over stuff. There's an animation on every hover. That's very cool. And then we can close it. That looks like right. Awesome. Yeah, So I think that's we had some cool things within that you can see also that they've customized a scroll bar to just be this black rectangle instead of having the traditional scroll bar that you would have. Okay, let's move on and have a look at another one. This one is toy fight. This one's really cool because it kind of reflects where your mouse is moving. That's that's a very cool feature. You can see that they've done some three D modeling for this website specifically, so you can see when we scroll to that. Everything kind of animates in kind of fades in, which is which is pretty cool. So that's something to consider having some faded elements and has the scroll to the bottom . You can see we have this three D model, so they're using a lot of three D modeling. But you can still have animations as you scroll like they have here. And you could still maybe even tried to incorporate three D modeling. If you're feeling ambitious. All right, let's have a look at another one. So this one is actually featuring a video background. This is kind of similar to what we're going to do, and you can see as we scroll down. We have the projects. And so as you keep scrolling, each little scroll you can see brings up more and more information until you have all of it . And then you have video playing in the background. And if we keep scrolling, we'll go to like, a little bit of a description and that it has a preview there and then some more. This is a slideshow, I guess, of some images related to it. And then if we keep going, it will go to the next project. So the same kind of format as you slowly scroll up and down you get more and more information. And so I think that's a very cool idea to to kind of scroll through each of the projects. All right, very cool. And the last one we're gonna look at is very ambitious. It's an interactive resume, so it's kind of like a game. So when you click on it, you can use the scroll down or the keyboards down arrow. So I'm just going to use the scroll wheel and you can see that we can actually go back and forth, just kind of cool. So level one about you can see that it shows off his skills here, and I guess you can see that he lives and works in New York. He's a sports fan. And then, as we keep scrolling, weaken, see his graphic and Web software skills and then his programming skills and then his experience. They have each of these elements popping up for each of the jobs that he's done, and we can skip onto awards. So we go with this balloon and then it goes up and we have banners for all these awards. So it's a very, very, very, very ambitious project. I wouldn't recommend trying to do this for your first portfolio and then ends here with the contact page recall. Ah, I wouldn't recommend this for your first attempt, but it just shows you how creative you can be with a portfolio website. Okay, so we can close all these and I'm gonna show you what the final project looks like on example of the final project. Anyway, so I would say that we need to have these four main elements and the 1st 1 is our home page . You can see that we've constructed this with a video background. We have a title here. We have our links to our social icons here, and we have our navigation. So we're gonna go down into the about section in this section. We have a picture, we have some explanation. And then we have a button to view our resume Moving down to our project section, you can see that we have screenshots in mock ups for each of our projects. We have also links these will be links to our live project. And then this will be links to our get help page. We don't have much explanation. I like to just leave the all the explanation on the get home page itself. And if we go down to our contact page here, you need to have some type of way for people to contact you. So in this case, we made a mock up with business cards. But you could also use a video background here with a male to link in an each one. That's something we'll explore later on in the course. And then we have a nice footer at the bottom here, and that's basically it for the example. So the course is final project is constructed and taught in a way that will allow you to customize fundamental components, changing the theme and content in your own version so you can actually choose any colors that you want. You're gonna choose different icons. If you have different social media links, you'll be able to. As I said, use a video background for this. If you want, you can change this video background to be anything you want. You can change all the text to be your own custom text that you like. There's many, many, many different ways that using this layout, you can create your own unique version of the project. So I hope you're excited to finally get started, because that's what we're going to be doing in the next video. All right, I'll see in that one bye for now. 8. 4.4 Creating Portfolio Sections: all righty. Now that we're done with our planning stages and we understand what a progressive Web app is and all the benefits that come with it, we're going to start fresh with our project now having closed visual studio code. So we're gonna go into our coding projects folder into our angular Peter be a folder, and we're going to right click on our portfolio project folder, and we're going to go down and select open with code. So now, by default are terminal windows will open up in the correct location. So that's great. And also, if this is the only project you're working on, Visual City a code will remember it by default. So you could just open a visual studio code instead of going into the folder. Okay, so we can get rid of this. And now we're actually gonna look into our viol explore here so you can see this is our main angular project. There's a lot of different stuff here right now. What we're concerned about is thes source holder, because that's where all of our code, all of our main coat is. And we're going to start by modifying the index dot html. So this is where our angular app will get served, Teoh. And this allows us to override certain style properties that we wouldn't be able to otherwise specifically targeting the HT male body or everything element which is represented by a star. So we're going to ensure that there is no margin on the page because we're gonna add it wherever we think it's necessary. And also, we're gonna add a scroll behavior property, which will allow us to scroll between sections with just this one line of code. All right, so we're gonna type style, and then we can actually press tab, and it will auto complete that for us. And so we're gonna target everything, as I said with star. So it's shift eight and then we're gonna comma, and then we're gonna add the pseudo tag for after Comma. And then we're gonna end of pseudo tank for before, So that's using, uh, Coghlan's there for that, and then we're going to give it a box dash, sizing of order dash bucks. Great. And then we're going to make one more style tag and we're gonna go style again, Tab. And this time we're gonna target the html comma body elements, and we're gonna give those que margin of zero and a scroll dash behavior of spoof. Okay. And closing bracket. All right, so that's done s so you can see this white dot That means that we have changes that we haven't yet saved. So if we press control s, then I'll save that file for us. Okay? So now we're gonna go into the APP component. And so that's in our APP folder. This is actually the main angular part of the app. And so you can see that we have all of our welcome message in the three links we had in our previous project. This is all from the angular sample project, as you can see, even have their angular logo here. And so we're actually gonna get rid of all of that. I don't need any of that anymore. And while we're at it instead of, ah, manually saving this every time. Visual studio code has a cool feature, and it's called Auto Save. So this will allow us to not have to press control s ever again. It will just keep saving as we keep making changes. Okay, so we're going to be a begin by creating a div. And we're going to give it the rapper class of div dot rapper, and they're gonna press enter. That's a cool thing about visual studio code is that you can, uh, used these shortcuts instead of actually having to manually type out like we had to in code pen. Okay, now, the reason we're doing this rapper classes because it gives us a parent class above all our sections in case we need to have some property that effects every section. And so the next thing we're gonna do is we're gonna comment out titles for each of the next sections, So we're gonna use control. J R. Sorry, control Question Mark to comment Total line. And this allows us to write code. That's not gonna be run. And so we're just gonna type home section and we're gonna make it a little bit longer. Just make it easier to differentiate from our code, and then we're gonna copy, and we're gonna add all of the other sections that we're gonna make. Okay, so now that we're done with our commented on the titles, we can copy those, and we're actually gonna paste them into our CSS double click wrap component. CSS gonna pace them in there. And we're actually going to highlight every Well, actually, we're gonna highlight one line at a time and control J Sorry, Control question, Mark, I don't know. I keep saying control J okay, And we're gonna comment out each of these, and we're actually gonna get rid of this The's end caps as well. And we're actually gonna use a cool feature called Control D. So we're going to select what we want to get rid off press control, D. C. It selects the multiple events, and we're gonna delete. And we're gonna do the same thing with these Get rid of all these de delete. All right? Perfect. So now we can go back to our app component, and we're going to add in our section elements and then type Hache today and then the idea of the section in order to add an i d. Again, this is another shortcut. All right? And that's it. We're done setting up our project, and now we're gonna go section by section and fill out each one of these before moving on to our responsive design. All right, well, I'll see in the next one. We're going to start on the home section. All right? Bye for now. 9. 5.0 Home Section Overview: Alrighty. So before we get underway with section five, I just want to make a little announcement that at the end of every section, I'm going to be adding a zip file, and this is going to contain everything we've done in that section. So if you need to jump in and out or if your code isn't working, you have something to reference. Or if you want to go to the very end, you can get the completed project and then just modify it as you like. If you want. It's up to you. All right. So let's have a look at what we're gonna be doing now, and that is we're going to look at our home section overview. So the first thing we're gonna do is we're gonna be copying the video background project that we did on code pen, and we're gonna integrate that into our angular project. Next, we're gonna be downloading a custom fund from Google and adding it locally to the project. And lastly, we're gonna be importing fun, awesome icons into angular, and we're gonna customize how they're being displayed. All right, so these are the three main things we're gonna tackle in this section. Let's get started 10. 5.1 Video Background: so creating a video background is a pretty straightforward process. As we can copy and paste from our video background project on code pen. There will be one key difference with our implementation here. This time, we're gonna have the video file locally instead of as an external link. This will allow it to be cashed and load off line on our mobile devices. It will be important to try to limit the size of the file to improve performance. So make sure that that's something you consider when selecting a video. Okay, So first, we're gonna go back to pics obey dot com, and I'm gonna go to videos, and I'm gonna type in waves. I'm gonna try to get the same video as before. Okay, There it is there. And so we're gonna go to the download, and you can see the different file sizes here. So 10 80 is 22 7 twenties, 11 megabytes. So I didn't see there's a big difference. I'm gonna go with 7 20 If you wanna have even better performance, you can go with a slightly smaller resolution file there. So we're gonna download that and next we're going to Chauhan folder so we can see the fun out. We're going to control X. We're gonna cut that and we're gonna go back to our desktop and in our coding projects folder here. We're going to create a new folder Assets, and we're going to use this folder to store all of our video pictures in front before we put it into our website. In case we need to optimize our crop or something. We have all the files here and all of the original files as well. So we're just gonna rename this video dash background. In this case, we're not really editing anything about this file so we can control. See, we're gonna copy that and we're going to go back out. We're gonna actually go into our angular projects, so we're gonna go source than assets can see. We have an icon's folder here. We're actually going to create a new folder image. I am G for short, and we're going to go inside and we're gonna press control V and we copied our video background file into our assets holder. Next, we can actually go back and all tab into visual studio so we can actually clean up this little bit. Give ourselves a little more space. We're gonna closed the index dot html file and we can also minimise Explorer just to give us a little bit more space. Okay, so now we're gonna start working in our home section. So first, we're gonna comment out a title before our video background just to kind of separate all of our elements. And then, as before, we're going to use a video element, and we're gonna move the source, So we're just gonna have this be you did Auto play can see it. Auto completed their and we're also going to give it an I D. Of video dash that ground. Okay. And inside, we're going to give it a source elements in the earlier video. I actually put a closing tag with that, but we actually don't need it. And so inside we're gonna have an SRC press enter. And the cool thing with visual studio code is that it auto completes our paths for us. So if we type dot, dot, slash, this will go up one folder from where we currently are, and we're going to click on the Assets folder and then into our I am G folder and we can see we have our video background there. All right, so that makes that nice and easy. We're also gonna explicitly add a type of video slash MP four. All right, cool. Eso This is probably a good time to actually serve our project so we can open up the terminal again. There's actually a keyboard shortcut for this, and it's control and single quote CNC we opened up our terminal and we're just gonna type n g serve dash. Oh, thank you. And we can use this and there we go. So I enclose this is well done that. All right, so we have our video here. It's some playing at the moment, but it's probably just loading, So we're gonna go back here. We don't really need to look at this as it's running, so we can minimize this for now. Okay, so the next thing we're gonna do is we're gonna add our video overlay elements, So we're gonna make a div dot video dash overlay, and we're also going to add in our Sorry, we don't want that inside the video. We're gonna put that to be a little of the video, and next we're gonna add are each one. So we're gonna do an H one this time we're gonna give it a class because we might have different each ones down the road. And we want to just target styles for this, and we're gonna make it same. Your title here. Okay, cool. Now we're gonna go back to our code pen project, okay? And now we're going to go to our dashboard, and we're gonna click on our video background project, and we're just commit control a control see in our CSS, and we're gonna old tab back to official studio code. Were you to go into our app dot component dot CSS. And in our home section, we're going to paste in our previous CSS. Let's increase the phone sized five and let's all tab back. And now we can close this and check it out. All right, so that's looking pretty great. We can see that the full screen is taken up with our awesome video. Here. We have our title here, and I think we're off to a very good start with our main project. Next, I'm going to show you how to add custom funds from Google to the project to really give it its own unique feel. All right, I'll see in that one. 11. 5.2 Custom Google Fonts: Alrighty. Welcome back. So you can see we have our video background here, loaded properly. I just need to manually save with control s and then it reloaded just fine. All right. So now, as I said, we're going to add a custom Google font locally to the project. The reason being that we want this to cash and function offline in r p w a. So to start with, we're going to go find a Google Funds were gonna go fonts dot google dot com and you can see that there is a wide variety of fonts here. And what I like to do is we can actually hover over one. And instead of a sentence, we can click custom, and then we can put in whatever our title is gonna be. And then we can click down here, apply to all fonts. And so now you can see what your title would look like in every front at a glance. This is, in my opinion, the best way to find a appropriate for mount for the title you're using. And so I already know which fund I would like. So I'm just going to search it. And so you can choose many fonts is you want, and then eventually you're going to use this plus button to select it. So we have one family selected. We're gonna open that up, and we're going to download this selection. So this is going to download as a zip file, and we're gonna show this folder and control X, And if we all tab down, we can actually go back into our assets folder that we previously had. And we're gonna pace that. And here, right click extract all. We're gonna extract it all into this folder, and you can see we have the font file here. So we're gonna control, See? And we're gonna actually put this into our assets folder again, just like we did with our image. And we're gonna have this font folder here that we're gonna create. I had created it previously, and we're gonna copy in this. We're also just going to rename it something a little simpler. So, Alex, dash brush and all right, cool. Now we're going to go into our CSS, and we're gonna organize that a little bit first. So first, actually, let's organize this. Let's just have some spaces, kind of between here and this kind of thing. So just there speaks for that. And, uh, in here is Well, actually, we need Teoh kind of shift stuff over, and we're going to separate this. So this is for our main title and this stuff? Yes, for our video. That ground. All right, so we're going to now use an import statement in our CSS to import our custom font. So we're going to do at Font Dash face. You can see that it comes up there already. And curly brackets, Funt family again auto complete. And then we're gonna type in the custom name that we made Looks, brush, semi colon. And then we're gonna have a SRC source, and we're gonna make it a girl bracket again. We're gonna use dot, dot slash to go up to our Assets folder, our phone folder, and Alex Brush Funt. And then we're gonna need to change this from Helvetica to Alex stash brush, and we're gonna comma and then add San Serif just in case it doesn't load. All right, so we can go back and check that out. Close this for now. All right, so I am a title here. We could probably stand to make that a little bit bigger. And we actually probably want to center it vertically and horizontally as well. Eso We're gonna go back to our code, uh, increase the foot size 25 ram instead of three, and then in order to center it, we're actually gonna modify our home i d properties. So we're gonna go hashtag home to target our home i d. And we're going to start by adding actually a background dash color of black. So a black background will happen before our video. If it doesn't load correctly and then we're going to use flex box, we're gonna initialize that with display flex. And then we're going Teoh align Items center and this is for centering vertically. And then we're going to use justify content center, and this will align everything horizontally. I think so. We can all time back to our project and yeah, that's looking a little bit better, but, uh, maybe that top is a little bit too much now. So let's give that a top of 30% instead. Okay, that's in the center, looking looking pretty great. If I do say so myself, eso That's it for now. And in the next one we're going to import are fun, awesome icons so that we can have our little social social media links down here below our title. All right, so I'll see in that one. Bye for now. 12. 5.3 Importing Font Awesome Icons: Alrighty. So moving right along, we're gonna learn how to install our front awesome icons into the angular project. So to begin with, we're gonna go to the front awesome website, and we're gonna go to the angular section, which I've done already. I'll provide the link in you to meet and you're gonna click on the A P I docks, which I've done already, and eventually you're gonna scroll down and you're going to see the installation section. So you can see here we have the two main parts the SPG cooler and angular dash fun. Awesome. And then we have these solid icon packs that are free, the brand icon packs that are free and the regular icon packs that are free. So we're gonna need to install all five of these things, and we're going to do it with in PM instead of yarn. All right, so let's go back to visual studio code and we're going to control single quote to bring back up our terminal CNC We still have our development server running here, gonna add a new terminal and we're gonna type npm install that fort. Awesome. So they're the makers slash font Awesome dash speed, G dash core. And so you can actually do all of these installs on one line, which is what I'm gonna do here. Angular dash. Awesome. This is gonna be free. Dash brand stash, speedy dash icons, Free dash Regular speech E Icahn's lastly free dash speech cones And then we're gonna add at the end dashed our save Dash Dev to save it as a deaf dependency and we'll let it run. All righty. Now that that's finished, we will minimize the terminal. And so the first thing we're gonna do is we're gonna set up actually importing that into our project. We're gonna go to our APP module. And so this is where we would import any kind of third party components or frameworks. You can see that we have angular at the top here and now we're going to be adding font. Awesome. So we're going to start with an import statement, so we're gonna import the front awesome module and from, and this is kind of cool. It auto completes. So we want the 1st 1 and then we're gonna add a semi colon at the end on to our next import statement. Import library, and this is going to be from the SPG core stands for scalable vector graphics, which are pretty neat. And we're gonna have our final import statement. So in this one, we're actually gonna import any of the specific brand icons that we want to use, so you can kind of see the pattern. Here we have just f a and then the name of whatever the company is. So if he wanted to add Facebook or Twitter, you can kind of see formula. You can always double check on the front awesome website to make sure that they haven't I gone for it, and this is going to be from the brand icons. All right, cool. So we need to start actually doing stuff all these air great out compared to these, because we're not actually using them for anything. So we're going to start with the library and we're going to dot ad, And now we're gonna enter in everything that we just entered there, and this is gonna auto complete. We actually just need to type the 1st 3 letters because, no, a combination of those three letters are the same. Right. And semi colon, There so you can see these are all good, but this is still great out. That's because we actually need to add it to our imports in our engine module here. So again, that's gonna auto complete. And we're gonna Atacama there. Alright, awesome. Okay, so now ready to actually put the icons into our HTML. So we're going to do that? We're still in our home section here. We're gonna comment on another title Control J and then social icons. A control question mark. Wow, for the third time, Okay, And now we're gonna make a div dot social icon. So this is gonna be our container press enter and then inside of this, we're going to make a elements that we're going to wrap everything in, and we're gonna had a few quick refinements here. So target underscore blank that's gonna have it open in a new tab. And real no opener is a security feature that has suggested through the lighthouse audits. All right, so we can copy and paste thes. We're gonna have six in total. All right, Next we're going to create our f a dash icon elements, and we're going to bind Icahn. So icon in square brackets equals and they were going to do double quotes. And then we're going to do square bracket, single quote F A B, single quote, comma. And then we're gonna go in order of the ones that we want to use and close square bracket so you can see that we have f A B that stands for FAA and then brands. And you can see that we just have the regular name, not the FAA and then the name and we're gonna follow this same format whole way down. So all of this is in the documentation. But again, I'm just going through it because I know how to do it already. So I'm just gonna change all of these here, and then I'm actually going to do one more thing. And I'm gonna add a title each of these so that when people hover over them, they know what it's four. In case they have never seen the Icahn before already. So now we're finally ready to style are icons, so we can go into our CSS, and we're gonna go down here below main title, commented another title. I think it's very important to be organized and the better organizer code, the easier it is to collaborate with you. Eso That's something that I I usually try to follow in. So should you. All right, so we're gonna turn it are dots, social icons class, and we're gonna give it a position of absolute. And so we're gonna put it We're gonna give it a top of, let's say, 60% so that will kind of fall a little bit below our title are their top for our title is 30%. All right. And then below that, we're actually gonna target special icons. And then we're gonna target any FAA icon element that is a child of social icons. We're doing it this way so that later on with our foot or icons, they can have different styles. So what we're gonna do here is we're going to set the size the color we're gonna make the cursor become appointer, and we're going to give them some padding so that they're spread out from each other. All right, so we're gonna start with a front size of three ram, the color white padding, 7.5 pixels and 15 pixels. So the first number is topping bottom. The second number is left and right, and then we're gonna give it a cursor pointer. Okay, so that's it, uh, for our styling. For now. Let's Let's check that out, See how it looks. All right, That's looking pretty pretty nice. So as we hover over, you can see we have the title pop up there. That's nice. If if anyone is unfamiliar with these icons All right, that's looking pretty cool. Um, but you know what I feel like? It is a little bit left of center. I feel like it can move over a little bit more. S o. I think we can fix that. We're just gonna add a margin left of five pixels Contents. Check that out. All right. Yeah, I think that's a little bit better. It's a little more in the center there. All right. Cool. Eso the last thing. I think we can changes. Maybe as we hover over there's some kind of color change or something. Um, that might make it a little bit more more dynamic. All right, so let's go back, and we're gonna go underneath here, and we're gonna target our social icons. Oughta completed FAA icon, and then we're going to target the hover pseudo class so inside of here, we're going to set a new foreground color. So instead of it being white, we're gonna have it be like a dark gray color. You could use any color that you want here on, and then I'm gonna flip it so that the background color is white. All right, so let's see how that looks. All right. Very cool. That's a lot more dynamic. And it's kind of giving some feedback to the user. You can adjust the padding if you want to, but yeah, I think that's Ah, that's looking really good. All right, so I think we're actually pretty much done with our our home page section. I think it looks pretty cool. We got our nice video background. You got a nice custom Google front title, and we have our nice, dynamic fun, awesome icons for social media links. All right, so in the next section, we'll look at tackling the about section seeing that one bye for now. 13. 6.0 Desktop Navigation Overview: OK, moving on to section six in this section, we're gonna be tackling the navigation. So we're gonna be building the navigation in two parts. The first will be desktop. And then later on, we'll tackle the mobile navigation. When we're doing the responsiveness for our project, we're going to start in this one with creating the navigation component, using the angular CLI to show quick and easy that is, in our desktop version will be a sidebar of links that will appear and disappear when we hover over and another on our menu text. But before we get all that, the very first thing we're gonna do is we're gonna build out our sections to be full screen and different colors so that we can actually test that our navigation is working properly. All right, so let's get started. 14. 6.1 Building & Styling Navigation: Alrighty. So before we get to the navigation itself, we're gonna need to modify our sections so that we can see and differentiate between them. Okay, So to start off, we're going to minimize our home section work eso It's easier to kind of just picture everything else. And the next thing we're gonna do is we're gonna set some CSS for all of these section elements that are shared between them And because these air shared elements, I like to add them at the very top because they don't really fit into any one section. So we're gonna target our section element, and we're going to start by giving it a min height of 100 you port because he wanted to at least take up the full screen. Then we're going to give it a height of auto in case it needs some extra space. And lastly, we're gonna give it a position of relative so that it floats on top of our video background . Okay, the next thing we're going to do is we're going to give each of the I DS for each section a background color, so it'll be easier to actually see which section we're in. So I'm just gonna fast forward to this choosing random colors. And lastly for the footer, I am going to set a background color. But then I'm also going to have a min height on set so that it doesn't need to be 100 vieux Port height and also going to explicitly call the height here, and it's gonna be 100 and 50 pixels. All right, so let's check that out. Okay? Can see we have our blue, are orange, are purple and are black is much shorter than the rest. All right, so now we can see and differentiate between everything Next, we're gonna go back, and we're going to create a components folder. That's the first thing we're gonna do. We're gonna create it inside of our APS folder were to create a Components folder. And the next thing we're gonna do is we're actually gonna c d into this folder in order to use our angular cli to create our knave menu component. Okay, so let's fire up the terminal and we're gonna go to a new one. And so we're gonna see d Yes, R c slash ap slash components enter and you can see that we have our path. Correct. Here, minimize a little bit. All right. And now we're gonna use the angular Seelye. So we're going to do N g gen rate component. And if we wanted Teoh make a short version for this, we can just do n g g c for generate component, and then we just type in the name of the component we want to generate. Okay, so you can see that. That created an HTML file, a typescript file and a CSS file, and it also updated our app module. So remember how we had to import are fun. Awesome module. We would have to have this component as a declaration, but this is done automatically for us with the angular cli. All right, Very cool. So now we can actually start in our HTM else. We're gonna minimize this terminal here, and we're gonna go into our components and we're going to start with the HTML. We're going to get rid of this, And you know what? Let's open this while we're at it, and then we could minimize this. So we have our HTML here. The very first thing we're gonna do is we're gonna create a div dot sidebar, sidebar, dash container. This is going to hold our desktop version. And then inside of that, we're gonna create an a Norden list with the class sidebar dash items, and then inside of that, we're gonna have four a elements, and inside of that, we're going to have our list elements. And so each of these is going to link to the corresponding section that we're looking for eso The 1st 1 will be home, and we could copy this a couple more times. So about projects in contact we don't really need one for our footer and in the list here, we can type it out. So home about projects and contact. All right, So before we continue, let's go back to our app component because we need to actually make sure that we have an element that's going to represent our knave component. So we're gonna end that just below the rapper here, and we're gonna add app dash, knave, dash menu. So automatically, uh, the angular cli appends app dash. And then whatever the name of your component is in our case, it was now dash menu. All right, So now onto the CSS for our nab menu. We're going to start by targeting our sidebar items class, and we're going to be giving this a position fixed and a Z index of 10. This is going to set where it is on the stack. So by default, everything is that one. So 10 is higher than one, so it should be on top of everything. And next, we're gonna give a list style of none. So because we have a bullet list by default, we're going to get rid of the bullets and we're gonna make the fund a little bit bigger, and we're gonna give it a font size of three ram. Next, we're gonna want to remove the underlying that's gonna happen on any, uh, navigational link. And so for that, we're going to go back and we're going to have a shared here. We're gonna have the A element's and list elements, and we're gonna have a shared for both of them. And that's just going to be a text decoration of none. So we're gonna get rid of the underlying blue purple that you would see by default on any links, and all right, next, we're going to actually target the list inside of our sidebar items. Active That and we're going Teoh want our text to be upper case, we're going to do text, dash, transform can see upper case the bottom here and we're gonna give it a front family. The one that I usually use is se goy said Goey not say it you are and comma Sohn Serif because that's a built in windows font and sunset earful cover the max We're gonna give it a cursor of pointer that auto completes for us and we're gonna give it some padding. So two pixels, 14 pixels and five pixels. So this is for top. And this is going to represent both left and right because we didn't finish it off with the 4th 1 and then this is going to be for the bottom. And next we're gonna add a margin bottom of 20 pixels. So we want these to be space from each other, and we're gonna have a color white, and we're gonna set a background color. And again, we're gonna use something with some Oh, pasty. So we're gonna have our rgb a and again we're gonna use black and again we're gonna use 0.5 . So 50% Oh, Pacenti And the very last thing we're gonna do is we're gonna add a hover similar to what we did last time. So sidebar, dash items list, and then the pseudo class hover, and we're gonna flip the background color and the color like we did before. So we're gonna make this the darker color and this side, we're gonna make it a little darker. So we're gonna make that 0.85 instead of 0.5 and we're gonna have a background color of F B F B F B, which is like an off white, not quite white, but yep, and lasting. Really. Throw on. There is a transition 0.3 seconds. So that'll make switching between them a little bit of a delay 0.3 seconds, that is All right. So let's check that out, see how that looks. Okay, so All right, that's looking all right, but we have some problems here. I mean, overall, it looks pretty good. Let's see if it actually functions, though that's kind of important. OK, so it's functional. It looks like we might have had that shared class in the wrong place for the text decoration. So this is what I was talking about with the ugly underlines. Let's go back and let's actually copy this and we'll throw this top here, okay? And let's go back and check that now. Okay, that's looking a lot better. So now there's no text decoration, and it's working perfectly. All right, great. So this is also showing off our smooth scroll that we added on her index dot html. Alright, awesome. So in the next step, we're gonna actually add the toggle and the hover functionalities. We're gonna have a little text box. It says menu. And then every time we hover over close enough, it will show our navigation, and then when we hover out of it, it's going to get rid of it. All right, so I'll see in that one. Bye for now. 15. 6.2 Navigation Functionality: all righty now, ready to make our navigation Onley appear when we hover over the left side of the page. This is gonna be accomplished by adding some javascript. But first, we're gonna start with our HTML. We're gonna start by making a P element in styled of our sidebar container, and we're gonna give it a class of sidebar. Ta go! This is going to act as a sidebar. Ta go! We're also going to give it that same I d and inside were just going to write menu. You could put a fun, awesome icon in here if you want it. It's just something to get the user's attention so that they go up and hover towards it. Next, we're going to be adding a desktop dash nev class to our sidebar items, as well as a display dash. None. Eso This is going to automatically hide our navigation when the page loads and then when we usar functions, it will both hide and show it as we hover in and out. Speaking of that, we're gonna need to target our sidebar container because this is ah, what's containing everything. And this is where we're gonna have the functions, we're gonna start with bracket mouse over equals and then we're gonna Neymar functions. Sidebar on and then we're gonna have brackets again to show that we're running the function . And then when we go out of it when we hover out, we're gonna trigger through this mouse out event, and we're going to give this a side bar off function, have some brackets there. All right, so now we're finished with the HTML we can move on to our CSS. So a cool other thing we can do here, actually, before we move on is you can actually split the editor so you can have multiple windows. Um, and we can actually do something with this too. We can activate were grab toggle word wrap. Eso that. It kind of makes everything visible on the page, even though it kind of screws up spacing. But that's good in this case because we're kind of zoomed in, and now we can see both things at the same time. All right, cool. Eso we're going to at the very top. We're gonna start entering some stuff here, so we're going to start by adding our desktop dash. Never class and We're going to give that a display initial and we're going Teoh, target our display. None class. And as you might have guessed, we're gonna give that a display. None. All right. Next we're gonna be targeting our sidebar container. So that's the parent of the items. That's why I'm putting it above it. Sidebar, dash container. And we're gonna give this a position fix because we don't want it to move. It will always be there. We're going to give it a display of initial, and we're going to give it a height of 100 VH. Make it the whole height for now, and we'll give it a with of se 350 pixels and Z index 10 because we wanted to be at the same height as our cyber items. And the last thing we're gonna do is we're gonna temporarily give it a background color of Dodger blue. Why not? Just so that we can see it as we're working on it. In the final version, we're gonna remove that all together and moving on. We're going to target our sidebar dash toggle class, and we're gonna give this a front size of two rim, and we're going to copy the front family from our list, and we're gonna give it a color weight and a background color R g B a. So shows the ones we've used previously, and we're gonna use that one. So 0.5 who pasty on black and we're gonna give it a with of 112 pixels and margin 40 pixels padding 10 pixels So these three values can be changed. This is just what I worked out in my own version. All right, so let's check that out. All right, So we have, ah, our menu here. Nothing's happening right now because we haven't actually written are JavaScript. That's what's gonna make it actually work. All right, so let's go back and do that. So we need to open up our typescript file. So this is our TS file here. We're going to start by making our sidebar on function first. So upside bar on bracket and we're going to start off by making a variable now equals document. Got get element by a D second choice there, and then we're going to I guess we missed. I guess we need to give this an idea of Just stop, Navas. Well, let's do that now. Just stop now so we can target it more easily. Okay, so we're gonna target that desktop dash. Knave, make this a little bit bigger, okay? And we're also gonna have a variable toggle and similar thing. Documents dot Get element. My i d. And we're going to be targeting our sidebar dash toggle I d. And now we're going to do something with these variables. You can see that they're kind of great out because we're not using them. We're going to do nev got class list and remove display dash None. So if you remember, we added that display none. And so when we have the sidebar on its removing that class from this element and similarly , we're going to toggle the class list. Sorry, we're going to the toggle is directed at our toggle, and we're going to add the class list display? None as well. So we're going to be removing the display, None showing the navigation. And we're going to be adding a display, none to the toggle itself. So then that will hide the toggle, but showed the menu, and, uh, all right, we can uh, check that out. Okay, Cool. So you can see that it works, but only once. Because as we're hovering out, we don't have our sidebar off function, so it's not turning it off. All right, so let's add that function so we can actually copy and paste this, and we're gonna be changing it around a little bit. We're gonna go down here, and we're going to have our sidebar off function peace that inside. And what we're gonna do is we're going to just do the opposite. So we're gonna put the add up here, and we're gonna put the remove down here. Okay? Let's see if that works. All right, so we have the blue here. As we enter into the blue, we can see that we have our menu here, and as we exit the blue, it goes away. All right. Very cool. So one last thing we can do is we're going to remove the background color now that we can see that it works, and we're also going to make the height smaller. Just in case you have content in this part of the page, instead of having a height of 100 Vieux port. We're going to change it to 30 All right? And you know what? The other thing I think we can do? We can do a text transform and make this menu capital letters. Okay, so let's do those couple things, All right? So we could make this bigger now. All right, so our sidebar toggle, we're gonna add a text transform here, text transform upper case. All right, Cool. And we can Well, just comment this out for now and will change the height. As I said 2 30 and, uh, all right, let's check that out. Okay, so we've got our color gone here. Let's see how far So we can go here without triggering it. And once we get up to 30 it triggers. All right? Very cool. So we have a nice little hover over two, and then before you get there, it launches the menu so you don't even have to click toe lunch the menu. I think it's a pretty cool idea, and you can see it's not overly complicated. All right, so that's it. We're done our desktop navigation, and now we're gonna move on to the rest of the sections, starting with the about section. All right. I'll see in that one. Bye. For now. 16. 7.0 About Section Overview: alrighty. So today we're gonna be looking at Section seven, the about section. The first thing we're gonna do is we're going to learn how to integrate a hero pattern background. So this is a SPG image that gets tiled, and we can customize the background color of the foreground color and the opacity so you could make a very unique look in your project. And then on top of that, we're going to create a custom modern card when we're gonna have a short biography and lastly, we're gonna have a button in that card that's gonna be a link to a resume. So this will either be a component like I'll show you later on, or you can have an external link to pdf document or whatever you want. All right, so let's get started 17. 7.1 About Layout HTML: So to begin with, we're going to go to the hero patterns website hero patterns dot com. And there are other similar sites where you can find repeatable SVG background patterns. But this is the one that I like the best. So this is something that could make your project really unique because you're able to pick a pattern of foreground color and a background color. Ah, and also change the opacity so that can give you a wide variety of looks. You can see that there is a lot of really interesting patterns here, but personally, my favorite is thesis circuit board pattern. So that's the one I'm gonna go with today. Here it is. So you're in a click on use pattern, and then you're going to go into the settings here. And so the first thing I'm gonna do is I'm gonna change the background color to white getting and changed the foreground color to black because I wanted to be neutral and not impact the other colors on the page. And then I'm going to turn the opacity down. You can see that this number changes as they move the slider up and down. I'm gonna put it 2.1, because again, it's a background. I don't want it to distract from whatever is going to be in the foreground of our page. All right, so now that that's done, we're going to copy both of these. And we can close this for now and go back to our code and down at the bottom here in our boat section. We can actually get rid of this altogether. And instead, we're gonna have a dot background class, and we're actually gonna need to give it the same properties that we had on these section because we're actually gonna wrap our section in this background, def. So we're gonna give it a position relative, Amen. Height of 100 report and a height of auto. And then we're gonna paste our background stuff so you can see it's a very long string of numbers, and that's what allows it to be infinitely scalable. It's using all of these points to kind of draw all the shapes, and so you could make it as big of a pattern as he want, and it will never lose quality. All right, so we're gonna go into our HTML now. and we're gonna cut actually this line with our boat section and we will make a div dot background and we're gonna pace that back inside because we want our background give to wrap our section. All right, so let's check that out. So we're gonna go down to our about section. All right? Very cool. So we have a nice looking pattern here. It's not too dominating, and we can see that it doesn't bleed through into our other sections. Okay, Perfect. Um, so now we're going to move on to making the card. So let's go back to our HTML and inside of our section, we're going to create a div dot card and then inside of that, we're going to create an image. So I am G tab, and you can see that it has a source and alter attributes so we can feel in the Altai attribute because that's good for access abilities of someone's using a screen reader on. Also, if the image doesn't load, they'll be this tag. So I'll just say, uh, picture of me, Okay, We will link the picture in a bit now, below the image we're going to create another Div. Don't card, dash body enter and we're gonna nest everything else inside of this. So we're kind of separating our image from our text and our button and everything. So we're going to first create in each one with the card dash title class, and then we're gonna enter some type of title. So just put about Yeah, that's that's enough. Ah, And then underneath that, we're going to create a p elements of p dot car dash current dash text enter and then inside of it, we're actually going to use another shortcut, Laura. Um, and then tab. And this is going to create ah chunk of dummy text and then finally below that we're going to create and a element with a diff inside of it. And this div is gonna have a class of card dash button. So the same thing we did before with our links were wrapping them in the a element's so that anywhere you click on it, it will trigger the link. And then inside of this, we're going to type you resume, because that's what's gonna be on the button. All right, so just space this out, and we're just gonna put a can stay there for now, we're actually gonna give this a class two of a boat desh image so that we can style this image specifically in case you have other images that we don't want to effect. Ah, And now the next thing that you do is actually link to a picture. So for this, I recommend using a square photo because we're actually going around it at the corners and you want to make sure that your image your likeness is kind of in the middle of that picture. Eso I'm gonna be using a picture from my social media and ah, what I would also recommend you do is go to tiny PNG dot com to make sure that you are optimizing the file size of your image so we can look up this image that I have on the desktop and you can see it didn't change much, cause I've already compressed. It s so I'm not gonna bother downloading. That version s. We can close that and we're gonna go back to the desktop, and we're gonna copy this into our assets folder and then we're gonna copy it into our actual project. so again source assets and then into the image folder, and we're gonna paste it there. So just Scinto dash long dot j peg. All right, so we can go back to our code, and we're gonna change our source or going again, do you dot, dot, slash And that will bring up our assets folder than our image folder. And then there's the image. All right, so let's check that out. Okay, so we have all of our content, but definitely doesn't look like a card or a button. And the image is way too big, and it's not in the center s. Oh, in the next video, we're going to tackle all the styling for this component. All right, I'll see in that one. Bye for now. 18. 7.2 About Layout CSS: already. So we're going to start working on the CSS for our about section. First, we can actually just clean up our editor a little bit, and we can also split our editor again so we can have a look at our HTML at the same time. Again, we can work wrap this shortcuts, Ault Z. Okay, so we're just gonna have This is our whole boat section html here, and ah. All right. So now I think we're ready to work on Ah. Could make this little wider work on our CSS. Okay, so we're gonna start with our card, which is the parent, and so we're gonna go dot card, and we're going to give it a position relative a top of five you Ford height in order to separate it a little bit from the top of the section and height of auto. I'm gonna give it a with of 40 Vieux port with cause he wanted to kind of be in the middle of the page, but we want to have a fair margin on either side. Uh, we're gonna give it a margin of zero and auto, so we don't want a top and bottom margin, but we want to automatically have the left and right side margins. We're going to give it a background color. RGB a But this time we're gonna go white. So to 55 to 55 to 55 and then 0.8. So we wanted to be mostly white, but just a little bit see through. And we're going to give it a padding. Three ram and 1.5 grim. So again, more padding on the top and bottom less on the left and right, We're going to give it a display flex. So we're gonna use flex box on this and flex direction column, and this allows us to make sure that our elements are all going top to bottom. Okay, so we're also going to take this Ah, moment as a time to switch our section to having a specific font all the time. And so we're going to give this a front family of ago. I you I com Asan Sarah. So I'm setting every section to have this default font, and if we want to override it, we can do that in our individual elements. Okay, so let's check that out. Okay, so that's looking more like a card. You can see we have the white here, but you can see that we can kind of see the background a little bit better on everything else. The title, the text and the view resume. Link is all in the card. Um, but we still have some work to do. So we're going to start Ah, working on our image now. It can definitely be a little bit smaller than that. And we want to make it circular as well. Okay, so let's go back down here and we're going to target are about dash image, and we're gonna give it a height of 35 the H a margin zero auto Samos before a border radius of 50%. So this is what's gonna make our square picture into a circle, and then we're going to give it a box shadow of two pixels, five pixels, 10 pixels, four pixels and then we're going to set the color as an RGB a and we're going to use actually 0.25 instead of 0.5, and this will give it a nice, smooth, subtle shadow border. Okay, so let's check that out. All right. So are our image. Looks a lot better. Uh, it's a nice circle. We have a nice, smooth, subtle shadow there. Okay, that's good. So now we're going to start working on our card body class. We are going, Teoh, go back to our code and card body. We're going to give it a little bit more padding. So patting zero none on the top and bottom, and then 1.2 RM on the left and right and onto the card title. We're going, Teoh, center it and we're going to do a text align center, which is a great thing to use. We use that a lot, especially with mobile stuff. When we want to center our titles, we're going to give it a funt Eclipse fund weight of 500 which is the same as bold. We're gonna give it a funt size of 2.5 rim and then we're actually gonna add a line that is going to separate our title and our body text. Eso We're going to give this a with items a with of 100% So that means it's only gonna be 100% of the with of the card itself. So 100% of the with of its parent and we're gonna give it a padding bottom of 25 pixels to separate the line from the title. And then we're going to give it a border bottom one pixel, solid black for creating our line and moving on. We're going to make our card text bigger. Then it waas because we have lots of space on the page. So we're gonna give that a font size 1.3 ram an emergent top zero to bring it closer to our line, and we're going to give it another text. The line this time I'm going to go with justified or justify, I should say, um, you could use center if you like. But I do feel like the text of lines Center is better for titles and not good for chunks of text. So let's see how that's looking so far. All right, cool. So we have our title here. We have ah, kind of even space and our line here, and we have our Texas a little bit bigger and you can see it's justified, so there's a little bit of a space extra space between these, but it means that the left and right corners are lining up. All right, so lastly, we'll need to deal with our our button here. All right, so let's go back to the code. We actually don't need to target our list here, but we actually want Teoh instead of the color being blue or purple so you could see that our button was currently blue. We're going Teoh, give this a color white instead. So we go back, we can see Well, it's white now, but because our backgrounds white, we can't see it. So we're gonna actually need to obviously make the button a different color. And then the white will look good on top of that button. All right, so let's ah, let's target o R. Card the button class. And again, we're gonna give it a text align center because it's kind of it. It's not a chunk of body text. It's It's like a title inside the button, and we'll give it a font size of 20 pixels. A fund weight of bold a background background color of RGB bracket Teoh one comma 22 comma 22 And that's like a darkish red color, deep red color. So this is going to become the primary color in this project. So you don't have to use this red. You can use any color you want. Just keep in mind that you're gonna want to use this primary color, uh, over and over again, and we're gonna give it a padding of 0.5 rim immersion, top of three VH. So we're gonna separate the text from the button, and we're gonna have a border radius, five pixels, and this will give us nice, subtle, rounded corners on the button. And lastly, we're gonna have a box shadow zero 0.3 rooms, ovary, subtle rgb A. And we're going to go with 0.65 this time. So a little bit more. And this will help with the illusion of the button getting pressed down. You'll see we're about to do the active part of that now, and you'll see what I mean when we go back to it. So next to complete this illusion, we're gonna target this pseudo class active for our card button. And we're going to give this a transform translate of zero comma 0.3 room. So you can see the same amount Lips 0.3, ram. Same amount as the box shadow that we have on it. And that just means that we're moving the X access of the button down 0.3 rim, and we're actually gonna copy our previous box shadow. But instead of 0.3 ram 0.3, ram will make it zero point one. Okay, let's check that out. All right, so that looks good. We have a nice ah, nicer looking button here. It's the full with, and the text looks good. And when we press the button, you can see that it actually looks like a real button. It engages. And that's simply by moving everything down and then reducing the amount of box shadow. All right, so I think that looks pretty great for our about section and Ah, yeah, we're ready to move on to our project section. I'll see in that one. Bye for now. 19. 8.0 Projects Section Overview: Alrighty. Welcome back. So today we're gonna be looking at Section eight and that is Thebe Project Section. This is arguably the most important part of a portfolio website. The way that you present the projects is a big part of that. So we'll be using hardware mock ups to show what our projects would look like in different devices. For example, an iPhone. In order to do this, I'm going to show you some websites that release free mock ups in photo show format. I'll also provide a mock up pile in case you don't want to go searching. Next, I'll show you how to use Chrome and the developer tools to get perfect size screenshots. And then we're going to use the online photo editor photo P in order to actually combine our mock up and are screenshot into one complete image. And then we're going to use flex box for making a responsive grid. And then we're gonna add titles and links to our projects and a link to our get help repository. All right, let's get started 20. 8.1 Photopea Mockup: already welcome back. So the reason I recommend using mock ups to show your projects is that I believe it gives more of a professional look than just having a square or rectangular image. It's also good for showing off mobile designs, even if your website is being accessed on desktop. The great thing is that there are a lot of free mock ups already made, and all you'll need to do is edit a layer of smart object pacing in a new image of the same size. I will now show you to the websites that I prefer using to find mock ups. The first is mock up world, and the second is freebies Berg. So I'll have links to all of this in the course and second see on mock up World. We have a variety of different types of mock up, so there's an eye Bad pro. This is even a food truck, so you could actually replace this with your own company logo. I guess it's the idea, and you can see you can browse by category. So, for example, iPhone and essentially what we're gonna do is we're going to paste in a screenshot of one of our projects that is this size. And so it'll fit into the iPhone and look like it's being accessed on an iPhone. All right, so we're gonna go to freebies, Berg and again, Another great website. I'm going to click on this s 10 1 because I think it's better to have one where you can kind of cut out the background and just have this floating and then put that into its own grid. So that's what we're gonna dio and you can see. You're just gonna scroll down down the photo shop file will go to a link, and then you click download for free and this downloads a zip file with Photoshopped files inside of it. I already have my own prepared. And the reason is because photo P cannot process 16 bit color depth. It can only use a bit images. So I prepared a few mock ups for you that I know the r eight bits of the work in photo p. And now I guess I can show you photo p so this will be able to open Photoshopped files. It can also open sketch files, but I prefer just using Photoshopped files because I have a photo shop on my computer as well. And so we can close this. We can go to file open, and you can see I have my iPhone X mark up here and we're gonna open it, and you might not be able to read that, but it says screen goes here, so we're gonna expand this and we see we have a layer that says your screen goes here so we're going to double click on that. And this is actually opening the smart object. And now what we're going to do is, if we don't know the pixel size, we can use this rectangular select tool and we can see that the pixel with is 11. 25 the height is 24 36. So I already know that this is an iPhone device. So we're gonna go into our chrome deaf tools Now, I'm gonna go to a project that I previously made. And so all we're gonna do is we're going to, right, click, click, inspect. And you can see I already have the device toolbar toggled on and you can see here There's actually a list of devices we can choose between these comes standard. You can actually add your own as well if you have custom dimensions that you want to get, and if you click responsive, you can actually just type in the dimensions so you don't have to save a preset for everything. But for us, we're using iPhone six. So you might see that the width and height don't quite match what we had before. That's because this has a different device pixel ratio. So basically it is times three. So we're divided by three, depending on how you look at it. But this screenshot will work for our purposes, cause it's the right dimension and the right density. Okay, so we're just gonna go back to this menu here, and we're just gonna capture a screenshot. And so this will go to a downloads folder and we can cut this and we're gonna put it into our Assets folder based just going to rename it Falcon Fear. And so we can close this for now. And now back in photo P. What we're gonna do is we're still on our smart object layer. We can actually get rid of the text layer. We don't need that and what we're gonna do is file open and place, and we're gonna click on our fucking beer file and we'll double click to confirm that that's there. And then we're going to control s to save a smart object. And then you can see that this updated our main file and so you can see that we have our Falcon Brewing home page in this iPhone now, very cool. So if you don't like that, this is kind of cut off. We can actually go back and change that. So depending on how it fits in the mobile device, So because our background Lear's black, that's perfect. And I'm just gonna lower this a little bit, okay? Save that again and go back and we have that a little bit lower, and that looks good. So I'm gonna save that, and you can see when I press control s it actually saved as a photoshopped file. And it's good to hold onto this just in case you want to edit it again later. So I'm just going to control X, and I'm gonna pay this into a mock UPS folder instead. I do have something by the same name, so I can't really pace in there. OK, but anyway, it's in the downloads folder for now. Alrighty. So now we've saved our project, we're going to get it ready to export. So the first thing we're going to do is we're going to remove this background, so that will give it a transparent background. That's what this checker pattern represents. And then we're gonna go to file export as PNG, and you can see that this is ah, a little bit bigger than what we're gonna need. So we're gonna make this smaller, so I'm just gonna make it 500 pixels, and that seems a lot more manageable. And we're going to safe. So we're actually going to run this file now through our tiny PNG again just to make sure we have an optimized version. So we're gonna do that, okay. And 60% we say pretty good. Okay, so we're gonna download that, okay. And we're gonna show that in our folder, and we're gonna take both of these and we'll put those into our assets folder, and this is the one that is optimized. So I'll just call this one project Dash one and so we're actually going to copy this. And I believe I still have my image folder open. So this is our again source assets image, and we're gonna pace that inside. So you're going to repeat this process for any other projects that you have. As I said, in my opinion, it's good to have it least six different projects on your website, and you should try toe have that amount before you start job hunting, because it shows that you have kind of a wide range of experience and ah, yeah. So now we're ready to actually use this project mock up in our project section code. All right, I'll see in that one. Bye for now. 21. 8.2 Projects Layout HTML: all righty, Sanoma. You know how to make mock ups. You should have six of them. Ideally, though, you can still do the layout with just one repeated six times as a placeholder. That's what I'm gonna do. All right, So we're gonna start in our HTML. We're going to minimize our about section because we're done with that for now. And we're gonna go into our project section. We're gonna start by creating a div with the class projects. This is going to serve as a rapper. And then inside, we're going to create an H one with the class of projects Dash title and our title. We're gonna type, click, too few projects. Next, we're going to create to dibs. Here. The 1st 1 will be div dot project Dash Group Dash One. And the second you may be able to guess will be def dot project dash group dash to. Okay, so we're going to start working on our first project group. We're actually gonna be making two groups of three. This will be easier for our layout. So, inside Project One, we're going to create an article element. This is pretty much the same as a Div. But just a different way. Teoh, identify it and project dash item classes. What we're going to give to this article and basically inside of this, this is going to be the parent class for the image inside of this, we're gonna have our mock up image which will be wrapped in the link. So when you click on the image, it will go to the live version of the project, and the project title will also be a link to that. And we'll also have a link to the get hub for that project as well. Inside of our article, we're going to make a div with the class project dash image, and then inside of that, we're going to create an a element, then is going to be pointed to our live project. In this case, I'm just gonna put my website and inside of that we're gonna have an image. And so this is going to point to the mock up in our assets image folder. So Project One and I'm just going to give it on all of project. All right, cool. Now, underneath our project imaged if we're going to create another div and this is going to be a project caption class Project Dash Caption. And inside of this, we're going to make an H four, and this is going to have the class Project Dash title. And then we're gonna have an a element inside of that. And again, that's gonna link to the same thing as above. And inside of that, we're actually going to write our project title. In this case, I'm just going to write project title. And next we're going to create in a six story each six h six with the class get hub Dash link, and it's also going to have and a element inside of it. And this is going to go to get hub. But we don't have a good, huh? But I'll just type. You have dot com and we're gonna type in here for you. Get Herb Repository just to confirm what this Linkous four. Sorry. We're gonna You know what? Let's shorten this. We'll just leave it as get hub. But then we're actually going to have a title inside of our link so that when someone hovers over it, it will give more of a full explanation. All right, Cool. Now that we're done with the each team l The great thing is we can actually just copy and paste articles. So we're going to have two more, and you can see that this spacing is off. So let's fix that. We're gonna have to more in our project, Group one class, and then we're gonna go down and inside of our project group to we will also paste three of these already. So obviously, for your purposes, you're gonna be changing all of the links, and you're gonna be changing the all tags and the project titles themselves. But in this case, I'm not gonna do it, cause it's just to show you how it's gonna work. So let's ah, out of curiosity, let's check that out. Let's see how that looks. Let's go down to our project section. Okay? So you can see that we have Ah, our mustard yellow still. And you can see that we just have all these kind of lined up in a row on the left side. All right, so we're gonna need to add some CSS to kind of fix how this looks. Eso We can do that in the next video. I'll see in that one 22. 8.3 Projects Layout CSS: Alrighty. So we're gonna move on to the CSS for Project section. We can start by splitting our editor here so that we still can see the structure of our HTML, and we're going to scroll down to the project section. The first thing we're gonna do is we're gonna change the color of our section two black. So I like using black a lot, because on OLEDs screens, black will actually save battery power because those pixels are turned off. It will also allow colors to be more vibrant in comparison. Okay, moving on, we're going to target the projects class, and we're going to give this a display flex and flex rap wrap. This will need to be applied to our projects groups as well. Eso that we have three images on one line and lastly, a justify content center and a margin. Zero on the top and bottom and 10% on the left and right. Okay. Next, we're going to be targeting our projects Dash title class, so you can see we're going in order of our html. And we're gonna give that a color off white. The font size of 2.5 rim and a funt dash wait of 500. So remember it. That's bold. Next we're going to I need to fill out for our project groups, so we'll do one and then copy it to the other. So we're going to also have a display flex, flex wrapped ramp justify content center, and we're going to copy this now and just change the number here down a bit. All right, So the next one we're going to do is we're gonna target our project image image. So this is targeting any image element that is the child of Project Dash image class. And we're going to give this a height of 325 pixels. Any with of 325 pixels. You can change this sizing just depending on how big of a how big of a image you can maintain within your grid or depending on how you want to lay out the grid. But this is gonna work for me because I wanna have three of them in one row and then another row with the other three. All right, so let's check that out. Okay, so we have our first year of three our second rule of three. That's looking pretty good. Pretty good start, but we're gonna need to fix our titles. We want them to be centered. We want them to be a little bit bigger and even at the bottom here, we actually probably want a little more margin. We don't want the next section to start right away there. So let's go back and quickly and our margin bottom. So we're gonna add that to our project group to give it a margin Bottom of 10 VH case. We can check that. All right, so now we have a little bit of a space between our next section. Now we can focus on all of our titles here. Okay, so we're going to start by targeting our project dash item class, and we're going to just give this a text align center. Very simple. This will center everything that's within our project item class. And now we're gonna target our Project dash title, and we're going to give this a font size of 1.4 ram a funded weight of 500 again, that's bold. And actually, I think that's it, and we're going to then target are get her dash link class, and we're gonna give it a slightly smaller size. So 1.1 room. But we want that too. Be bold as well. All right, so let's Ah, let's check that out. Okay, so we have Ah, nice difference between our titles here, but we can see that we still have too much space between them. We want to kind of bring that all a little bit closer together. Eso let's work on meant So let's go back. And we can give the project title a margin, zero and auto. So that's removing the top and bottom margins by default. Any H element is going to have a margin all the way around it. So we're adjusting that one, and we're also going to adjust this one we're going to make. We're sorry. We're gonna give this emergent top of only one VH. So that's smaller than what it was. So that should bring them closer together. All right, so that's looking a lot better, But there's a few more refinements I think we can make to our projects Page to make it feel a little bit more interactive. So we want when we hover over this to give us some kind of feedback and same with our links . So what we can do is where you're going to target our project image hover pseudo class, and we're going to give this a transform of scale 0.97 So that means getting 3% smaller as we hover over it. We're also going to add a transition all 0.3 seconds and ease in and out. This is going to make it seem like it's in motion rather than abruptly changing size. And next, we're going to add this class to our project image class as well, so that it transitions both ways. Okay, now we're gonna look at our project title. We're going, Teoh, do you are Project title and we're actually gonna be targeting the A element with the pseudo class hover, and we're going to use our primary color again. So for me, that is a red color that you can see that it remembers all the colors were using, which is very handy. And we're actually gonna copy this transition so that the Texas not just changing color in a split second, it's a little bit more of Ah, delay. And we can copy this for our kid, huh? Blink. We're just gonna change project title here to get up Link. And yeah, I think that's only needed there. So we can see that when we hover over this, it gets a little bit smaller. So it's more interactive. It shows that we can click on it. And same with thes thes change. You can see that we have our title here view get help, Repository. And, yeah, I think we're looking pretty good. I think we're done with our project section for now. And I think it's looking pretty great. Next we'll look at the contact section. All right, so I'll see in that one. Bye for now. 23. 9.0 Contact Section Overview: so there are a number of different ways we can approach our contact section. The two biggest functional differences will be deciding if you want to have a contact form that uses Phil owed on your website or a male to link, which opens the user's email client when clicked on. Originally, I preferred a contact form because it looked good. However, I was getting a lot of anonymous messages and spam through this method, so I decided to switch to a male to link instead. The other benefit of this is that you can just have a video background with an H one with your mail to link. It simplifies a lot in terms of development. When you're making a contact form, you have more coding in HTML and CSS, and then you need to code the back end functionality toe. Actually, make it send an email to you. So for this project, we're going to stick to a male to for simplicity sake. But I'm gonna show you a few different ways to present this. So starting off, we're going to create a male to H one with a custom font, and then we can either use a full image or video as a background. And then the third option will be to actually make a business card mock up. So I'm gonna show you how to do all three of these different versions. All right, I'll see in the next one. 24. 9.1 Video & Image Background: alrighty. So for both the video background and the image background in our contact section, we're going to need to create a link element with a male too. So let's get started in our HTML. First, we can minimize our project section because we're done with that. For now, we're gonna go into our contact section, and we're gonna create a male to laying common to no title. And below that, we're going to start with a a element. And we're going to give this a male too of your email dot address. Then we're going to give it a class of contact dash mail and then a target underscore blank so that it opens in a new tab and real no opener for security. And then, of course, inside the ailment, you're actually going to write your email address because that's what users will actually see. The next thing we're gonna do is we're going to actually go back into our home section, and we're gonna copy this video background element we had here, and we're going to minimize that and we're gonna pace this below here. We're gonna fix the's spacing here, and we're gonna change the video source to our second video, which is the video game background MP four, and we're going Teoh, change our I d to video dash background dash to because we want them to be unique. Now we're ready for the CSS. So we're going to start by changing our background color to black, just in case, even though we shouldn't be seeing it. And we're going to target our contact mail, and we're going to give it a position of absolute color White height, 100 pixels. This is so that we limit the era that could be clicked to follow the link, and we're gonna give it a fun family of Alex brush, which was our custom Google font. You could use different Google fonts if you want, of course, and we're gonna give it a font size full ram, a margin top 10 V aged space above a Z index of two to make sure that stays on top of the video or image. And next, I'm actually gonna modify the contact i d properties, and we're also going to give this a display flex as well as a justified content center that will justify everything in the middle of the Beijing. The last thing we need to change is we want our email to be underlined when users hover over it to show that it is something that they can click on. So we're gonna target Thedc on tact, male class. But we're going to target the hover pseudo class, and we're just gonna give it a text decoration of underline. We're also going to give it a transition to make it more of a smooth animation 0.5 seconds and he's in and out. And then we're gonna copy that transition back so that it's smooth both ways. All right. And we can actually copy our video background I d properties from before, and we're going to just change adding to their and instead of position fixed, we're gonna give it a position of absolute because we don't want it to be at the top there . And we can also change the with 2 100%. All right, so let's check that out. All right? That's looking pretty, pretty awesome. So we have our nice video here. See, we have a project section here, navigation scrolls down to this position, and as we go over our email. It's underlined. Very, very cool. I guess the last thing that could maybe do is we could add a splash of color to this. It's it's very white. So maybe we'll add our primary color here. So back in the code to do this, we're going to start by modifying our HTML. We're actually gonna create a span here, and we're gonna have our at symbol inside of that. And we're also going to give this a class of red, And now we're gonna go over to the CSS, and we're going to give put at the bottom here, read and color. And then red color again, automatically filled in by visual studio code. Very helpful. And, uh, yeah, let's check that out. All right. Cool. A nice little splash color there. We have our video back around going. I think that looks pretty great. Now, if you wanted to switch this out for an image, it's actually a very simple process. So, first, of course, make sure the image is in your asset folder and that you optimize it with tiny PNG. Next, we're gonna go back into our html and we're gonna comment out our video background and then we're going to go into our CSS, and we're gonna comment out our background color here, and instead, we're going to give a background. You are all, and then we're going to auto complete the path to our image folder and our mountain background, and that's it. So we can and the cynical in there, of course, to make that valid. And now we can check that out. All right, so our pictures a little bit big. We probably need to fix that. So we can give that a background background size of cover in background position, center and background. Repeat. No, repeat. We just wanted one time. All right, let's check that out. All right? Perfect. That's looking a lot better. And, yeah, so that's it for adding a video or an image to your contact section and just having an each one Lincoln there. All right, so in the next one, I'm gonna show you how to use a business card, Mock up instead for your contact section. All right. I'll see in that one. Bye. For now. 25. 9.2 Business Card Mockup: already. Welcome back. So you can see I've changed this back to the video background. I think it looks a lot better despite the fact that we're about to completely change it anyway. So we're going to start changing to our business card mock up version of our contact section by going to photo P. And we're gonna open up the file that I'm gonna provide to you guys. And this is a business card mock up. Of course, you can use anything you want for this, and this is gonna be very similar to before where you have smart objects, that you're gonna change the contents off. In this case, you would be changing the text to your own information if you wanted to. You could also add an image. Let's say that you already had a business card. You could just pace an image of that in there. And don't forget that you actually need to put the design here as well, because one is for this card and want us for the card on the stacks. The other thing you can change is the accent color. Here. You can do that by double clicking here and changing the filter color. This is a red that kind of matches Thebe primary color I've been using so far. And yet so we can minimize that for now. And you notice that we have this shadow here, I'm actually gonna get rid of that. I prefer for it to be flat. And the next thing I'm going to do is I want to make this a square. It's kind of a rectangle. And so I can do that by changing the canvas size to be 1 to 1. And let's say that I wanted to line this up a little bit better. I could just hold down shift, make sure that I have both of these selected, and then I can use the arrow to kind of move it around until I'm happy where it is. And the last thing there is to do is export. This is a PNG, So we're going to do that and we're just gonna change the size to make it a little bit smaller. It doesn't need to be quite that big. All right, cool. So we're gonna save that and we're going Teoh, cut that from our downloads and we're going to make sure that it's in our assets folder. And then, of course, don't forget that it also needs to be in our Project Assets Image folder as well. Okay, so we're done with that part, we can head back into the coat. So the first thing we're gonna do is we're gonna comment out our mail to link here, and we're gonna comment out our video background, and then the next thing we're going to do is we're going to use the same hero background as in our about section. So we're actually going to cut our content section here, and we're gonna create a div dot background and then we're gonna put our section back in here, and we're gonna fix our spacing here, and so we actually don't need to change the CSS. This is already set up. We will need to change the background color of our section I d. Cause right now it's set to black, and that's what's on top there. But first, we can create our element here for our business card mark up. We're actually going to copy this a element here, and we're going to remove all the text inside. And we're also going to remove the class of contact mail. And instead we're gonna add a title so that when someone hovers over the image, it'll be obvious what? It's 41 Just have click to send email. All right, Cool. Now, inside of our a element, we're going to create our image. And this is going to go, of course, to our assets image and our business card mock up. We're gonna add an ault as well. And lastly, we're also gonna add a class of business dash card cause we're gonna want to limit the size of our image. Okay, so we're gonna go back into our CSS. As I said, we're actually gonna comment out the contact background color, and we're gonna go down to the bottom here, and we're going to target our business groups business, stash card, and we're going to give this a height of 100 VH. We don't want it to be bigger than the page, and we're gonna give it a with of auto. Okay, so let's check that out. All right, so let's go back up. Let's go back down. All right? That looks awesome. So we have our stack of business cards centered here. You can see any time I'm hovering, so it's a big place to hover. I have this title that says Click to email and yeah, I think that that looks pretty unique. That's not something that I see often on a website. All right, so for now, this fits on the big size. But on smaller screens, we're going to need to control this image even more. Need to make it even smaller than what it is. But for now, we're finished our contact section. Congratulations for making it this far. Just one more little section. That's the footer section. And then we're gonna move on to resume component and our responsive design. All right, see, in the next one Bye for now. 26. 10 Footer Layout HTML & CSS: already. So this section will be the most straightforward of any we've done so far. Section 10 the footer section. So basically, we're gonna be copying the font awesome icons we had in our home section, and we're gonna make them smaller in alongside that. We're gonna add a small text area for our page author, and the year was made. All right, let's get started. Alrighty. So the first thing we're gonna do is we're going to minimize our contact section. Then we're gonna go into our footer section, and we're gonna create a diff with the class footer dash icons and inside of here, we're actually gonna copy our social media icons from our home section That makes it nice and easy. And we'll minimize this and this, and we're gonna pace them in here. And we can fix the spacing by using shift tab. And below this, we're going to create a p elements p dot footer, dash text. And this is gonna be where I gonna put just my name and then the year. But you can put whatever you want for your footer text. All right? So we're pretty much done with the HTML for Now we're gonna go into the CSS and we're actually gonna change this footer properties here. We're gonna add a display flex a justify content center. So again that centers things horizontally in a line. Items center will center things vertically. Next we're gonna target are icons themselves with the footer dash icons, FAA icon Onley targeting FAA icons that are the child of footer icons. And we're gonna give that a fund size of 2 a.m. a margin left of one VW so that there's some space between them. And we're also gonna target the hover for this so that when we hover over our icons, we have a color change. So we're just gonna add the hover pseudo class and we're gonna use our primary color. In my case, it's this red color, and lastly, we're gonna target our foot or text, and we're going to give this a white that is just a little bit see through like we had previously for our card, I believe, and we're also going to make sure that the text is centered. All right, so let's check that out. Okay, that's looking pretty solid. And when we hover over them, we have our titles and we have a nice color change here. The one thing you might notice is that it's a little bit off center. That's because we have a margin left on the 1st 1 when we don't actually want one to be there. So we can change this by going back to our HTML and on the 1st 1 here, this FAA icon after our title, we can actually give it an in line style which will override our CSS file. And we're gonna give it a margin left of zero. Okay, so let's go back and check that out, and you can see that we have are four that are kind of centered over this text here. That looks great. Perfect. So that's pretty much it. We're done with the main parts of our site. We have our home page with our icons. Here we have our menu we have are about The next step is we're actually gonna make a resume component that's going to be optional. And we have our projects here, and we have our contact page and our footer. All right, that's it for now. I'll see in the next one 27. 11 Angular Component Integration: already. The first step is to open up our terminal and we're gonna be using the angular Seelye to create a resume component inside of our components holder, just like we did for the knave menu. And we're going to start by going into that folder. So we're going to CD source slash ap slash components I could see were in this folder now, And to use the CLI, we're going to do n g g for Generate C for component and we're gonna create a resume component. So again, this creates the HTML file, the CSS file and the typescript file, as well as updating the APP module with the import for this component. Okay, so we can close our terminal for now and you can see that we have our folder created here. We can open up our HTML and CSS, and we're also going to need to modify the APP module as well. So we're going to start by it updating the APP module in order to allow for routing between our components. If you want to learn more about this, you can go to the angular documentation. I'll have a link for it in the course And so what we're going to do in the at module is we're going to import our rotor functionality. So we're gonna import roger module comma routes, and this is going to be from angular slash Roeder, and then we're going to go down. Above are N G module, and we're going to define the constant app roads, routes equals. And inside of this, we're going Teoh have the path. Quotation marks resumes. Whenever the URL subdural is resume, we're going to route to this component our resume component. You see it, auto. Fill that for me. Okay. And lastly, in the imports, we need to make sure that this functionality actually does. We wanted to dio so rather module 0.4 brut bracket roots. And we're gonna enable tracing. True for debugging. Just a little note there. Okay. And then we're gonna put a comma there. Okay, so this is making sure that we're actually using our app routes, which we weren't previously. All right, so now we're going to need to go into our AP component, and we're gonna need to provide a rotor outlet. So this is gonna go at the top of the page and this is where the component that the rotor picks up is actually going to populate this element here. So without this, it wouldn't work because it's actually like going inside of this element. The next thing we need to do is change our a element here that's wrapping our view. Resume button. And instead of an H ref, I'm gonna have a Roeder link equals quotes, slash resume and router blink active equals quotes active. So when a route Roeder link is active, we're gonna be targeted. The on the resume subdural, as I said previously, and now we need to actually make sure that something is going to be displayed. So we're gonna go to our resume component html file that we're gonna create a div dot resume dash rapper. And inside of this, we're going to create a P element with some Lauren text so we can use word wrap all too easy to show Oliver text here. Next, we're gonna go into our CSS, and we're gonna target the resume dash rapper class, and we're gonna give it a position. Absolute. The top zero left zero starting in the top left, and we're gonna make it 500 Vieux Port Heights of five times the height of the screen. We're gonna give it a with of 100% a background color Black in our fund color will be white . And let's make the fund big so we can see it. And we're going to give it a Z index of five. So everything but the navigation has Z index of one, so this will go over top of everything. All right, so I think we're ready to check it out. So let's go to our project. Let's go down to our about section and let's see what happens. Okay, so it's all black. That means we have our component. But where's our text? You can see that we're not quite at the top of the page here, where you're going to need to address that later. But you can see if we scroll to the top. We have our text there. All right. So our navigation works for our component. Now, we actually just need to populate our components. So if you wanted, you could make your own resume, um, and design it yourself and do it from scratch. But as I said, I've done the work of making a resume component that you're more than welcome to use and modify. So assuming that you're going that route, we can continue finalizing the resume component that I made. So make sure that you download the zip folder from the course. Once you've extracted the folder like I have here, we're going to right click and open with code so you can see that we have to phone files in here. Will copy those later. For now, we're gonna open up the html CSS and the APP module, and we're going to start by control a control. See, copying this over resume component. So we're going to replace this, and you can see that the spacing is a bit off. So we're just gonna quickly I like this shift tab twice. Okay, cool. And we're gonna go back, and we're gonna copy the CSS as well. And we're gonna pace that here. So something to keep in mind with CSS is that you want to make sure that if you're using different custom fonts that they are in your font folder And so what we're going to need to do is copy those funds over, so we're gonna minimize this and we're going to open up our downloaded folder here. We're gonna coffee are two fonts, and you're gonna go into your project source Assets Font folder. And you're gonna pace those inside there, right? And we can go back. And so these should work now, the other thing you can consider is you can change the hero pattern to whatever you want. You can change all the color schemes. There are many different ways that you can modify this resume, so there's a few other things will need to change to make it work. First, we're gonna need to modify our app module to import the other font awesome icons that we're using. So if we go back to our other project, we can see here we used I'll see again. Two word wrap. So you can see with that we're copying some solid icons, some regular I Commons and also some additional brand icons. So I'm going to copy those. You also make sure that you copy them to the library, add part down here. I'm just gonna fast forward through copying these. Alrighty. So we're done copying in our fun awesome icons. Let's check it out. All right, so that's looking pretty pretty awesome. We have our custom fonts here, So very cool. Resume is it is working. So let's go back to our home page and let's just confirm that everything still working. So we're gonna go about he resume, so you can see, as I mentioned before, we're not at the top of the page. We want to be appear when we click on it. So we'll actually need to add a function in our APP component that will scroll to the top of the page when we click on this. So let's go back into our code, and we're gonna open up the APP component TSS. Well, and but first, we're going to go to the HTML and our router link a element here, and we're gonna add our function. Click equals quotations, scroll to top and have our brackets to indicate we're running this function. And then we're going to go into our app component Don t s file and we're gonna make this function as well. And the 1st 1 will be for safari, so document dot body scroll top equals zero documents Document element Scroll top equals zero. So this will be for everything else. Chrome, Firefox and opera. And yeah, that's it. Let's check it out. See if it works. Case we're gonna go back to her home. I guess we're gonna go directly to about and really click this and it's girls at the top. Alright, awesome. So it looks like we're pretty much done without resume. You can see that as we click on each of these links. It goes to our different sections here, and you can see our fun. Awesome icons. Here we hover over. We have our titles. You can see we have a couple little s'more subtle funhouse of my guns here and yeah, that's looking. That's looking great. All right, So the cool thing is about this, we could still use our main navigation and our sub navigation without them interfering with each other. We'll have to modify that slightly for mobile, and yeah, but for now, we're actually finished the desktop version of our projects. So congratulations for making it to this stage. And next, we're going to start looking at our mobile navigation and responsive design to make sure that everything looks great on all screen sizes. All right, well, I'll see in the next one. Bye for now. 28. 12.1 Responsive Design Overview: Alrighty. Welcome back in this section, we're going to be looking at responsive design, and this is something that is very important in a time where a lot of Internet browsing is done on smartphones. As of now, our project should look pretty good on most monitors and laptops because it is a very simple layup. I would still recommend checking on as many different resolutions as you can, including Google Chrome, with or without the bookmarks bar, which is a 25 pixel difference and also in full screen for each resolution. Specifically a resolution I hadn't considered because I hadn't used it. In about six years I was 13 66 by 7 68 But that still makes up around 33% of all computers online. It is also necessary to consider tablets and smartphones both in vertical and horizontal orientations. So you can see here that thes sizes are gonna be more similar to a laptop, whereas this is gonna be more similar to a vertical smartphone, just something to keep in mind. The good thing about ipads is that even though they've changed over the years, most of them share a common resolution even the iPad Mini, the only exception being the iPad Pro, which horizontally is very similar to a laptop size resolution. Lastly, as a note for this section, I'm going to revise the project to include the video background in the contacts section, and I'm gonna upload a ZIP file for the beginning of this section. That's which is back to that. All right, so let's get started working on the mobile responsiveness for a large smartphone in both vertical and horizontal orientation. I'll see in that one bye for now. 29. 12.2 Large Smartphone (Vertical): Alrighty. So we're going to start by looking at our responsive design in an average mobile phone we're going to right click Inspect. This will open up our developer tools. We're gonna go to the top left, and we're gonna toggle the device toolbar. You can see that I'm already set to pixel to excel. If you go to this drop down, you can see there other options, including iPhones, iPad. You can also edit and add your own custom presets. And then you can also change this. Responsive to be whatever with and height you want. So you can do that on the fly without making any presets. So we're gonna start with the pixel to excel. The reason I like to use this is because it's larger than most smartphones. And a lot of the things that were going to do to fix it on this will also fix it on smaller phones as well. All right, so the next thing gonna do is I'm actually gonna full screen this to give us a little bit more space and so we can see things aren't ideal right off the bat. We can see that the video is not the full screen. It's a new aspect ratio now, so that's why it looks like that. But we need to adjust the aspect ratio for a mobile vertical device. We can see that our title is too big. We want that on one line. Our social icons are also too big. Our about photo is too big. This will need to probably become, ah full with card instead of the 40% that it is now. Our resume button will need to be bigger as well. Our title needs to be changed for our project section, but other than that, it's looking pretty good and our contact section you can see that this is the least right aspect ratio. It could be we wanted again to fill the hole vertical screen. We can also see that our mail to text here is two biggest well, so we'll need to make that smaller. And lastly, in the footer section, you can see these icons are very close together. We'll need to spread them out even more than on desktop because you have to take into account. People are going to be using their thumbs and you want the icons to be space enough apart that they're not accidentally pressing the wrong ones. All right, so let's go into our CSS and get started. We'll all tab back to visual studio code at the bottom. We're gonna comment out a title for media queries, and beneath that I will comment out a title for large smartphone vertical and let's get started by adding our media query. So it's at media screen and Max with will do 600 pixels. So because all smartphones are more narrow than 600 pixels, what this means is anything below 600 pixels will apply these style. So these could be different than the styles that we have above. And the other thing I'm going to do before we get started is I'm gonna open up our CSS file twice. So on the right side I will be doing the media queries, and on the left side, I'll be scrolling through the original CSS to compare it. So I think we're going to start with our video backgrounds because our orientation is changing. We cannot show the full with a video, so we're just going to show the center portion our container is already set to be 100%. And what we're going to need to do for our video element is give it an object fit, cover property. So we're gonna target our video elements, and we're going to give it an object fit of cover. And the next thing we're gonna do is we're gonna target our video background. Instead of having a height and width of auto, we're going to give it a height of 100 VH deport height and with 100 report with So it takes up the full screen just like it does on desktop. And we can copy this cause we need to do the same thing for the video that's in our contact section. And we're just gonna give it the dash to All right, so let's go check that out. Okay, so we can see that's looking pretty good. We can see that the text still is not ideally so we can see that we have this black outlined here. We can try to fix that by actually changing some of our elements to be smaller in our depth tools here. The social icons. We also want them to be smaller. Obviously not this small but for our purposes right now, I think it's actually probably this about image. So let's make that smaller and we can see that now. Our video covers more of the page here. We could probably also make this one smaller as well. Okay, lets go back up to Tom. OK, it's good now that's that's definitely better, so we can see some of the things that we need to do. Now. Let's start with our home section first, so we're going to start by changing the main title and we'll change our icon size here. So let's go back and we'll just make this a little bit wider. So we have our main title here. So our main title, our font sizes five rim. Let's try three room, see how that looks. And we have our social icons and just copy this over slash f A. I gone and we're gonna change that fund size to to rim. And you know what? Let's change the boat section stuff while we're here. Let's change the card and we'll give it a with of 100 instead of 40. And let's make the projects title smaller were at it, so we can see that our projects title is 2.5. So let's make that two for analyses that looks and our contact mail is four RAM. So let's make that smaller a swell. So let's make that 2.5. All right, so let's check that out. Okay, so that's looking quite a bit better, is you can see this can probably be a little bigger than that. So let's go back and change that right now. So we had that a 2.5. Let's bump it up to three. So yours is going to be different cause you're gonna probably have different text there, so you can kind of judge. Okay, I think that looks better. And let's have a look. Yes, this is centered now, so that's perfect. Are about is looking pretty good. And our title fits here. We could make that probably a little bit bigger. Our social icons, I think, are the perfect size. Let's make our main title. If you 0.5. Yeah, that's perfect already. So before we continue on, I just want to show that sometimes our view can get messed up here. So when we're going back and we're clicking inspect. You can see that it's kind of zoomed in here. This isn't how it was looking before. All you need to do is go up to responsive and then reset it to pixel to excel. And it will look good again. All right, so we have a few more things to fix. If we go down, we can see in our about section we could probably stand to make this a little less. We make it a little bit more see through, I should say. And we could also probably stand to make our font size a little bit smaller. And that will help create more of a space at the bottom here between the button and the project section. Okay, so let's go do that. And we're going to start with the card so you can see that we have this background color here. We're gonna copy this over, and then we're gonna change the a value of the Alfa Value to make it a little bit more see through. Okay. And next, we're going to target our car text. So we have 1.3 rim for the font size. We're gonna bump that down to one room. Okay, so let's check that out. All right, so that's looking a lot better. We have some space on the top, some space on the bottom. That's not a lot of text. So keep in mind if you have more text than that, you might need to have zero at the top here instead of the five year age that we have currently. Just to make it fit better in the full screen. All right. And that's it for our about section. Let's go down. I think we still need to change. Yes, our foot or icons. So in our CSS, let's check that out. We're gonna go down and down down footer icons. So we're gonna be targeting the margin left here. We're gonna make it a little bit more so we can go ahead and copy this, and we're going to give a margin left. We wanted to always be the same and all the mobile devices, so we're gonna give it a hard pixel value of 15 pixels. Okay, so let's check that out. All right? Cool. So they have some space now between them. You could choose to add a little bit more if you want. I think that that's OK. And yeah, everything is looking pretty great in the next one. We're gonna look, it's starting to work on our navigation to make it fit better on mobile devices. All right, I'll see in that one. Bye for now. 30. 12.3 Modifying Desktop Menu: Alrighty. So now we're gonna look at the mobile navigation. There's two ways I'm gonna show you how to do this. One is the alternative way that I've just kind of modified the desktop version a little bit and the other is a traditional hamburger menu. So we're going to do the alternate first. And what we're going to do is we're going to make this font smaller. We're gonna move this closer to the top left, and we're going to also change the padding on this so that it matches, and we're also gonna move this up to the top left. All right, so let's get started. So in our code, make sure that you have the knave menu component HTML and CSS files open. I'm actually going to open a second pain of the CSS file again so we can look at most of our stuff right here, and I'm gonna go to the bottom and I'm gonna comment out a title for our media queries. So we're also going to give this a media screen and bracket Max stash with of 600 pixels because for right now we're just looking at our mobile device. We will change it. When we do our iPad version, we want to make it a little bit bigger. But for now, we can just target our vertical smartphone. Okay, so looking at the CSS on the right, we can see that our sidebar Otago has a margin of 40 pixels. This is what's moving it away from the top and left screen. So we're gonna cut that in half. So we're gonna target are sidebar, toggle, and we're going to give that a margin of 20 pixels. Okay, so let's check that out. Okay, That looks better. It's closer to the top there. Next. Let's fix the font size for our actual menu, and we can see that our sidebar items is a font size three ram. So let's bump that down. 22 room. Okay, let's check that out. All right, so that's looking more of an appropriate size, the page that we're gonna want to adjust the padding on this. The top has a little bit too much. So let's go back to our code. And you know what? Let's just drag this over, give ourselves a little more space here, all right? So we can actually copy the padding from our side bar items list into our sidebar toggle, and let's check that out. Okay, so we can see that this is the with is a little bit off. We need to actually add some with because our padding used to be 10 pixels, and now it's it's 14 on the left and the right, so we're gonna need to add some eight pixels to our with we can see her with. Here is 112. So we're going to give that a with of 120 pixels. All right, so let's go back and take a look. All right, so that's looking better. The next thing we need to do is line these up, so we're gonna need to modify our sidebar items here. So let's give it a top of minus five pixels and will give it a left of minus five pixels. And then if we don't know what a value should be, you can figure it out by just adjusting this. So I think we need to go up a little bit civil. Let's do that. And we definitely need to go over quite a bit. Case. Let's say that and, let's see, case we're still a little bit off. So we need to go a little bit further left, and I think we need to go a little bit higher up. So let's do that and see Kant's check that. All right. Perfect. So you can see it looks like it just doesn't move. It just goes right into the other. They're anchored in the same top left point. Perfect. So our top is minus 12 pixels and are left is minus 20 pixels. And we're putting that on our side bar items. Let's go back to the code and do that. Okay, so we're gonna give it a top minus 12 pixels in a left of the minus 20 pixels. Okay, so let's go back and check that out. Make sure it's looking good. All right. Perfect. Already, So you can see that are now. Menu has been working because in a mobile device, a hover over becomes triggered by someone tapping on it. The problem is that our sidebar container is now too big, so we're going to need to make it smaller. Like if you click over here, you're gonna trigger the menu, which is not what we want. We wanted to be a little bit of a smaller area that you're clicking on. So let's go back to our code and we're going to actually uncommon out this background color . There was a reason that we kept it. And if we go back, we can now actually see that if you click anywhere in here, that's going to trigger the navigation so that space is definitely too big. So let's target that, and we can adjust it in our developer tools to see what the right size should be. So let's go with a height in pixel values. So let's go with, ah, 100 pixels. Okay, that's looking a little bit better. And let's go with a with of 200 pixels. Okay, so I think it could be smaller both ways. We want to kind of frame it around our navigation a little better, so let's just see what looks get here. Okay, so I think around 1 61 62 let's say I think that looks good. It's nice and balance there. And let's change this. Yeah, I think that looks good. So yeah, 91 62. Yeah. So looks good. So now when we click outside of here, nothing is going to get triggered. It's only when we get right into the area that it's actually going to trigger the navigation. So that's working a lot better now already. So we're going to change our height to 90 pixels are with toe 1 62 and remove our background color. So we're going to start in our media queries here, and we're gonna add our sidebar container, and we're gonna give it a height of 90 pixels with a 162 pixels. And then we're also going to get rid of our background color. Okay, so let's go back and check that out. So I'm gonna test targeting the menu case. You can see him clicking over here, and only when I get very close to trigger the menu. Okay, awesome. We're almost done. Let's just go through and check to make sure how the menu toggle looks on each of our pages here so we can see on the projects pages that it overlaps with our title here. So we're gonna want to give some padding on the top to this title to push it down a bit, so we can go back into our ap component dot CSS file. And we can close this for now. And we're gonna go down into our media queries and we're just gonna give our projects title a padding top of 50 pixels. Okay, so let's go and check that out. All right, so that's looking a lot better. It's clear of the menu there. And lastly, let's go down to our contact section and see. Yeah, I think that looks pretty good. All right, so I think we're finished with this approach. And in the next video, we'll take a look at the more traditional approach of using a hamburger menu. All right, I'll see in that one. Bye for now. 31. 12.4 Hamburger Menu Styling: alrighty. So the other approach I'm gonna show for the mobile navigation is creating an additional knave element with duplicate links. We would toggle between showing that version and the desktop version using media queries. We're going to use a hamburger, many icon, which is the most traditional look for mobile navigation. So this is an equally valid approach, and this is what I've actually implemented on my own website. The previous option is definitely more unique, but I will leave it up to you to decide which you'd like to employ. I'll be going forward for the rest of the course with this option. So I searched for animated hamburger menus online. Working as a developer involves a lot of Googling and learning different approaches and solutions that already exist in deciding what is best to implement. I found this approach on W three schools, which is a great site. They have a lot of different resource is that are very simple and easy to learn quickly. And so I'm gonna be using their version here So something very similar to this and you can see that it tells you step by step. What to do? This is the each team L This is the CSS for the animator one. It's a little more complicated. So we're actually going to be copying this a little bit later because we're going to use the animated version, and then we're also gonna have to write a function to actually make it enemy. All right, so let's go back into our code for now. So let's go back to our APP component. Most of our CSS is valid, but we actually don't need as much of a padding top on the projects title. We only did that because of the previous navigation. So we're going to drop that down to 20 from 50 and now we'll move into the and close this for now, we're gonna work on the knave menu, CSS and HTML. Okay, so the first thing we're gonna do is we're going to get rid of all of these media queries, and the next thing we're gonna do is we're actually going to increase this. I mentioned before that we want to be able to target ipads of most sizes with our mobile navigation. So that's why we're increasing this to accommodate that as well as all mobile phones. and the first thing we're going to do, we're going to target three classes at once. Sidebar container, comma sidebar, toggle comma and desktop Nev. And we're going to give all of these a display of none. So this is how we're going to display or not display our desktop navigation and mobile navigation. All right, so let's go now into our HTM. Oh, make this bigger for now. So we're going to want to move this down. So we're going to come in a title here and we're gonna go above it. And we're going to start out by commenting on a title for hambor menu, and we're going to create three developments inside of a container. First, the container will be a class of men you container, and it will also have an I. D. Of menu dash bars. Okay, And inside of that will have def dot far one and then on the next line div dot far too. And then Def Bar three. So these three bars are the three lines in our hamburger menu. Okay, so that's it for the hamburger menu. Html. Let's go back to our site here, and we're just gonna copy all of this CSS Over. Okay. And back to the code. It's close this for now. It's just do it this way. Okay, So we're gonna go down and just comment a title for our him burger menu, and then we will pace that below, so we're gonna have to make a few modifications. The first is instead of container. We're going to change it to class day menu container to match what we had in our HTML. We're also going to give it a position fixed because he wanted to stay the top, and we're also going to give it a Z index of 12 just to make sure that it's on top of everything. So the background color of our most of our website is dark, so we were gonna want to change the bars color so you can change the color of the bars to be anything that you want, but I'm just gonna use white. All right, so let's check that out. Okay, so we've got some decent looking ah bars here, but I think it would be better if they were in the top. Right? Because I think that that's easier to reach than the top left. So let's go back and target our menu container. And let's give it a top of 10 pixels and a right of 15 pixels. Okay, let's check that out. All right? I think that that's looking a lot better now. Time to move on to making the menu itself. Okay? So back in our HTML, we're going Teoh comment out another title for our actual mobile navigation. So inside of this, we're going to create a knave element with the class of mobile Dash Neff and an I. D of Mobile Dash nef. Okay. And inside of this, we're going to create an a Norden list, and we're going to give it the class naff dash items. And inside of this, we're going to copy our list from our previous navigation. Okay, Now, back in our CSS, we're going to start styling some of this stuff, so we're gonna go down here, come in, tow title, just application and we're gonna start by targeting our mobile Bashneft class. We're gonna give it a position. Fixed a top of minus 16 pixels, a left, 16 a left of minus 50 pixels, A with of 112% of the screen Izzy index of five. So these are will work for me to make sure that it stayed right at the top, that the text was centered and that it was wide enough to cover the whole screen. You might need to experiment with your settings on different devices, so just keep that in mind. Next we're gonna target are Nev Dash Items Class and we're going to give it a display Flex Flex Direction column. So that's going down. A text, a line of center and lastly, a list style type of none so that we get rid of the bullet points on our list. Right? Next. We're going to target our have items list elements themselves, and we're going to give this a text transform upper case, and we're going to just make sure we have the right font here. So that is, sir Guy, you I comma Sohn Serif. We're going to give it a padding 10 pixels, so that will be all around the text in our list, and we're gonna give it a margin left 10 pixels and senate effort to continue centering it . And then lastly, we're gonna give it background color of kind of black, but you'll be able to see through it a little bit. All right, so let's check that out. Okay? So you can see that it's kind of see through and we have our menu here. It's centered. It's the full with of the phone here and ah, yeah, I think it's looking pretty good. Um, the one thing will need to change is we don't want these to be this purple like clicked on link color that is in our browser by default. We're gonna want to change that to White, and we're also gonna want it to be kind of inverted when we click on it. So this black bar for the contact will become white as well. To start doing this, we're gonna go back into our CSS, and we're going to create a You know what? Let's dio we can do it here. Let's do mobile nev. Targeting the A element's specifically and we're just going to give that a color off white . And then when we are hovering over our oops mobile, I have a cover. We're going to invert our colors, so we're going to give it a color of 0.85 and then we're gonna give it a almost white but not quite white color. Not pure white, anyway. Okay, so let's do the same thing for our knave items list because we want to target the text and then the background of the text. That's why we need to do both of these. And what we're gonna do is we're just gonna copy this. Okay, so let's check that out. Okay, Cool. So you can see that when we click on it are colors get inverted. That makes it look a little bit more dynamic. All right. Very cool. So the one thing is that the white here blocks out the hamburger menu now, and we can do something to fix that. So the trick is to just add an extra list element above this That is blank. So let's do that now. So we're just gonna add a list and we're gonna give this one specifically a style of padding top and 48 pixels. All right, so let's check that out. Okay, so that's looking better when we click on the top one. We have a nice distance away from our icon here. Okay, So the One other thing to consider is that when our menu is disengaged so we can actually just delete it to show our hamburger menu will disappear if we have a white background or whatever call you have if it blends into the background. So in order to fix this, we're going to target all three bars and we're gonna give it a border on the top and a border on the left and then some shadow box shadow on the bottom and the right. So let's go back into our CSS. Go down to our hamburger menu here, and we're going to start by giving a border top of one pixel solid. And then we're also going to use our black that is half see through. And we're gonna copy this and we're going to target our border. Dash left and paste. That and for the box shadow, we're going to do two pixels, two pixels, two pixels, rgb A. And this is gonna be 0.5 as well. So feel free to look up what each of these mean. But essentially it's pushing it down to pixels to the right to pixels and has a spread of two pixels in this case, but there's actually an additional perimeter you can add if you want to. So let's check that out. Okay? And again are gonna have to delete this to see it. Okay, so that's looking a lot better. We can see it on our white background, and then when we go into our dark background, it just looks white. Okay, Perfect. So in the next one, we're gonna look at actually making our mobile navigation function, So we're going to be switching between the X and then the full hamburger menu icon. And we're also going to be on that same command, either showing the menu or hiding the menu. All right, so we'll see in that one. Bye for now. 32. 12.5 Hamburger Menu Functionality: I already said to make our navigation functional. We're going to start in our HTML and we're going to add a click event on our menu bars here . Our menu bars I d. So we're going to do bracket, click closed bracket equals quotes and then toggle and brackets again to run the function. And we're also gonna copy this into our A Nordling list element so that when we click on one of these, the navigation will also disappear. Now we're going to need to go into our typescript file, have menu component dot ts and inside of this, we are going to add a toggle function here, and we're going to start by targeting our mobile now. So far, mobile never equals documents, get element by d lips, get element by I d and then bracket quotes and we're gonna target our mobile dash. Never I d Then we're going to make a variable for our menu bars, and that's going to be document get element by I d bracket quote and we're gonna target our menu bars. And now we're gonna use them. So mobile never dot class lips class list dot toggle and we're gonna toggle this never expand class that we're gonna make on and off. And we're also going to have our menu bar start classless dot ta go. And we're gonna toggle our change class on and off. Okay, so let's go back and check that out. Okay? So our animation works, but our menu itself doesn't work. That's because we haven't created Are knave expand class yet? Essentially, what will happen is by default are mobile. Knave will be visible, but it will be above the view port. So this will be up top here and then on the knave expand class, it will bring it down into its current position. So again, our CSS we're going to create a knave expand class. Okay, so we'll just clean this up this well, space that out. Okay. And let's dio Sudhir. So we're going to create a knave expand class, and we're going to copy our top value from our mobile naff. It's this is what it will be when it's expanded. And then we're gonna change this 16 to be 300 so that it is above what's visible. Okay, so let's check that and see if that works. Okay, Cool. So it toggles on and off. But instead of appearing suddenly, I think we would be better if it slid down in from the top as an animation instead of instantly appearing and disappearing. So to fix that, we're gonna add a transition to both of these. So our mobile naff we're going to add a transition 0.5 seconds. He's And we can copy this into our never expand and will make it expand a little bit faster . So we're getting of that 0.3 seconds. All right, so let's check that out now. Okay. Awesome. So it slides down from the top, slides back up instead of instantly appearing That looks a lot better. All right, so I think we're finally finished with our mobile navigation. But when we go back, our desktop Mavica navigation is messed up here. So where he can quickly fix that. So, at the top of our CSS, we're going to target our menu Dash bars, I d. And we're gonna give that a display. None. And we're also gonna target are mobile Dash Neff. And we're gonna give that a display. None as well. And then we're gonna copy these down into our media query, and we're gonna give these both a display initial. All right, so let's double check that now. All right, so we have our desktop menu working fine now. And if we go back to our mobile, so remember when the screens messed up like this, go to responsive, then go back. All right, so our mobile navigation is working perfectly fine. And our desktop navigation is good. All right. Perfect. So I think that we are finished with our navigation finally and in the next one will actually go on to do the responsive design for our vert are horizontal. Sorry are horizontal orientation of our phone. All right, I'll see you. That one. Bye for now. 33. 12.6 Large Smartphone (Horizontal): All right, ease. We're going to do the styling in our app components CSS for our smartphone in the horizontal reintegration. So to start with, we're gonna comment out a title. We can actually just copy this one, and we're just going to change this, okay? And then we actually need to make the media query. So we're gonna do at media screen and Max with 850 pixels and max right, 500 pixels. So that's essentially taking the dimensions of smartphones and just flipping the heights and widths. The important thing to note is that these media queries will not apply here. So if there's anything that we need from here will need to add it again. So now let's go into the depth tools and figure out what needs to be changed already. So back in the Dev Tools, we have this button up top here. We can use this to rotate to the horizontal orientation. I would definitely recommend trying both orientations when you're doing your responsive design for other devices. All right, so let's take a look. In this case, it seems like our title could probably be raised up a little bit so we'll change the top value for that. Our mobile navigation looks good. Let's go to the about section. Okay. We can see that this card should probably be wider. There should be less of a gap here. That should move up. Uh, the image could probably be a little bit bigger. The text here could definitely be smaller. All right, let's go down to a project section. So we have to and then one and then two, then one. So we could actually make these images smaller in order to have 22 rows of three like we have on our desktop versions. So we'll try to do that. We can also probably limit the margin or to accommodate that, because I believe there's 10% margin on the left and the right so we can make that less if we go down to our contact section. Okay. I think that's looking great. We don't need to change anything. You might need to reposition your male to link here if it's, ah interfering with whatever video is there. But in this case, it looks good. Honestly, the social media icons in the footer we're probably gonna need to add some margin left to separate these a little bit because people will be using their thumbs. Okay, so let's go back up top here and let's start with our home so we can actually use control shift. See, And this toggles on this select an element, and we can actually just click on the element we want, and it will bring it up here. So that's sometimes better than scrolling through everything here. Okay, so we can see that we have a top of 30% so we can just lower that and see what looks good. Okay, I think 15% is good. So exactly half. All right, so let's go into our code, and let's change that. So we're targeting the main title, and we're changing our top to 15%. All right. Our auto saves on, so you can see it. Refresh their All right, So that looks better. Let's now go down and look at our about section. Okay, so let's Ah, let's target. Our cards will do the same thing. Control, shift, see, and click on the card here. And what we're gonna want to do is first, we can get rid of this top, I guess. So let's just make it zero. Okay, that's better. We can change our with to be a little bit wider than that. So let's make it 80%. I think we want it to be kind of most of the page, but not all the page. We can see some background here, and OK, that's looking good. Let's Ah, let's target the card text. So control shift, see card text. Uh, let's just bump that lips 0.3. Let's put that to one room. Okay, I think that's a little bit better. And lastly, control ship see, and we'll click on our image here and we can increase the heights to, let's say 50. I think that's a good, good balance there. All right, I think that's looking. That's looking pretty good. Let's Ah, let's go change that in the code. Okay, so we're going to start with our card, and we're gonna give it a with of 80% any top of zero. Next, we're going to target our card text, and we're going to give that a font size one room. We had the same thing on our smartphone. Vertical up here. Next, we will target our about image. Just double check. That's just about image, okay? And about image. And we're gonna change the height to be 50 each. Okay, so let's see how that looks. All right, So it's reloaded. I think that that's looking a lot better. Alright, Awesome. Now let's Ah, let's go down to the project section. Okay? So let's ah, select the element. We want to kind of select this and, uh, wanna go one level down? Yeah, assisted. We want. So we can see we have the margin here. And when we hover over it, we can see that we have 10% and it's in the orange here. And so we're just gonna bring that down. Teoh, I think 2% is good. That's good enough. Margin. Okay, so will change that. And then we need to actually target one of the images so we can see we have a heightened with of 3 25 Let's Ah, just bring this down with with matters more in this case will fix the height after. Okay, let's go with Let's make it a little smaller. Yeah, maybe 2 45 So we'll control C. Copy that. Double check all right? Yeah, I think that that's looking a lot better. Okay, so we're going to change our project image image to be to 45 in 2 45 then we're going to change our margin as well. So, project image, image, and we're going to give it a height of 245 pixels. Any with 245 pixels. And our projects class, we're going to have a margin zero and then 2% instead of 10%. All right, let's Ah, let's check that out. Okay. Perfect. Looking good. The last thing, the change is gonna be our footers. So let's ah, control she of C one more time. Let's actually select this one, because the 1st 1 does not have a margin left, so you can see who selected the vector graphic. We'll just go one up to select the FAA icon so you can see you have a margin left of one view port with Let's change that pixels. 10 pixels again. You can see it there in orange. And let's see is Thea pair. I think we need a little bit more. Okay. I think 2020 is probably good. All right. So let's ah, change that. We're targeting the footer icons and then FAA icon, which is the same as this, actually. So we can actually change. Just copy this and we'll change it to 20. You know what? Let's change this 1 22 wider. All right, let's their throats. All right. Perfect. So I think that that's pretty much it. We've finished our responsive design for a large smartphone. I hope you can follow my strategy with testing things out in the Dev Tools, selecting the elements and seeing what fits. Just remember that it's important to focus on alignment, proximity, video image sizing, font sizing when going over your layout on different screen sizes and orientations. All right, so I'm going to wrap up the responsive design section in the next video, and then we're gonna move on to our final steps, and then we're going to build, optimize and host our project. All right, I'll see in the next one. Bye. For now. 34. 12.7 Responsive Design Conclusion: alrighty. Welcome back. Now that we've gone through the process for making media queries for a large smartphone, I will give you two options moving forward. I will upload to project versions. They will both have all the media queries I normally use in the order that I use them, one will be blank and one will be complete. The blank media queries will have more than is necessary for the very simple page we've created, but they're good reference. Moving forward. You can choose to use my final version and then move along to the next section, or challenge yourself to figure it out on your own in the Dev Tools. I'd recommend the second option because you'll need to get comfortable with this process. Moving forward So included There are blank media queries for most major smartphones, both vertical and horizontal ipads, both vertical and horizontal, and also for monitors and laptops factoring in different amounts of browser. You I So, for example, in this case we have our bookmarks bar, which is an additional 25 pixels to when we do not have our bookmarks bar, and it will also look different still in full screen because we're removing the browser, You I up here, which takes up space. So in my media queries, I didn't end up using any of the screen variations for no bookmarks bar because it was so close that it just fit properly as it waas even mind that for something like 13 66 with where you haven't exact with, you'll need to copy styling from previous queries because they won't apply to this exact resolution. The same goes for iPads as well. You'll need to copy over quarries from other components. When I finished the media queries for this project, you can see that there are a lot of differences in this case. We're looking at the iPad before and after in the vertical orientation we needed to fix how the video was so that it filled up the whole screen. In this one, you can see we needed to make our about section card wider, and we also needed to reposition it into the center of the page and again, in our contact section are video needed to be fixed so that it filled up the whole screen instead of just being down in the middle. There an example that we had to change on her iPad Horizontal was our project section. We wanted to make two rows of three, just like we have on our laptop or desktop size. So we needed to decrease the margins on the left and right. In order to accomplish that, when you're working on your own project, it might need more or different media queries. Depending on how much you've changed. You can continue using similar methods and testing in the deaf tools to make it look perfect when you've finished or downloaded The responsive design. Media queries joined me in the last section where we will perform some final optimization Z and then finish up by hosting our project online for free with fire base. All right, I'll see in that one. Bye for now. 35. 13.0 Optimizing & Hosting Overview: Alrighty. Welcome back. Admitted to our final section. And that is about optimizing and hosting our project. So to start with, we're gonna make icons for a progressive web on mobile so that it will look like a native app will have an icon for it. We're going to run a lighthouse audit in order to test our application, and we're gonna optimize based on any of those suggestions. And we're gonna use the angular Seelye to build a production version of our project, and then we're gonna host it online with fire base. You should be proud of what we've built so far. And be sure to share it with everyone when you're done. All right, let's get started. 36. 13.1 Making a Favicon: already. So in photo P, we're going to start out. We're gonna go file new, and we're gonna make our project 5 12 by 5 12 into a square. That's the biggest with we're going to need. We're also going to change the dp I to 96 we want the background to be transparent. Okay, so there are many things you could do here, and you can get as creative as you want, experimenting with colors and shapes. And you could even look up other tutorials about logo design if you want. But for our purposes, I'm going to keep things very simple. So there are a ton of cool fonts built into photo P, and we're gonna be taking advantage of that. So we're going to start out, we're gonna open our texts here, and we're gonna tape just the first letter of my name, which is a J. And we're gonna change the size. We're gonna make it 700 and we're gonna change the font so you can see there are many, many, many, many different fonts. I'm going to search for the font that I already know that I want to use and that is silk screen. We're going to click on that. It's gonna load the front, and we can now highlight this. I'm actually gonna make it bold as well. And then we're going, Teoh, drag this into place. You can see that when I do this, that actually that's snapping to center vertically, and that's snapping to center horizontally. So that's exactly in the center of the page. I would recommend only using one letter because it fills out the square, and that will make for a better looking icon and a better looking Fabrikant. In my opinion, you could use two or maybe three letters if you want, but I would recommend sticking toe one, so I'm gonna leave this layer as black. But you could change the color if you want and stop there if you like. But the other thing I'm gonna do is I'm actually gonna make a second copy of this. So we're gonna duplicate layer. And on this copy, I'm actually going to Rast arise, which means it's no longer text, it's a shape. And then I'm going to use my paint brush tool to change the color. Okay? And so I'm gonna want toe change my primary color here, and I'm going to use the RGB value from our primary color, which is 1 99 red, 26 green and 26 blue. Okay, so let's do that now. All right, So it's a nice read, and the next thing I'm gonna do is I'm just going to shift it slightly to the left. So we're gonna select our selector here. And just like that, e could bring it up a little bit. Let's do it like there. So you can see we've added, like, a pseudo three d effect, which I think looks kind of cool, and that's pretty much it. So now we're going to start by saving it is a PSD just in case you want it later. And the other thing we're going to do is we're going to export this as a PNG we need to save it is a PNG. In order to maintain the transparent background, which is important for the fabric on in the browser, as browsers are different colors, some could be white. Some would be blacks, um, could be gray. So by having that transparency, it allows it to just pick up the main part of our icon. All right, so we're going to save that, and we're gonna go into a folder, and we're gonna copy these are cut them, I should say. And we're going to go into our quoting projects into our main assets folder, and we'll make a new folder, Icahn's and pace that and there. So we'll just rename this Icahn. Well, it's called J I. And this one that we're actually gonna use in our project, we're going to rename. This one actually will rename this the same thing. We're gonna actually run it through the fabric on generator anyway. All right, so our total time to create this unique icon is about five minutes pretty cool. All right, Now we're going to go to the real fabric on generator, as I said, so I'll have the link to this website. I think it's currently the best way to create the multiple icons we're gonna need for R p W A. So all we're gonna do is we're going to select a picture, and we're gonna go into our coding projects into our Assets Icons folder, and we're gonna copy this J icon so you can see that this shows what it will look like in a bunch of different devices. And we can actually modify things a little bit if we don't like the way it looks. So, for example, I could add a solid background. I think that that looks better playing background there, and in this case, I will just leave it for Android. And let's say for this I want her background to be black instead. And yeah, I think that stuff looks pretty good, all right? And we can even style it for a touch bar, which is pretty cool. So I could just Ah, you know what? I'll just change that. Maybe not black. Let's So let's go with, like a red, dark red. All right, Cool. Okay, so we're just going to generate our fabric cons and honor code. We're not going to use the code. We're just going to use the fabric on package. So we're just gonna click this to download it, and we're going to go into our folder. We're gonna cut this, and we're gonna put this into our assets folder here. And then we're going Teoh extract to our folder here. Now that we've extracted are Fabrikant Package. We're gonna go to a new window and we're going to go to our actual project. So we're gonna go Teoh Project into our source assets so you can see that we already have an icon's folder. And this is because when we first made R p. W a angular already created all these icons for us, so we actually only need two of these. We only need 1 92 and 5 12 So what we're gonna do is we're gonna copy. That was over these 1st 2 right here, okay? And we're just going to rename them to this so icon dash and then the size times the size. So get rid of these. And lastly, we're gonna copy over our fabric on dot aiko file. The benefit of this file is that it can actually be a slightly different size, depending on what's needed. And finally, now we're going to get back to the code to make sure that we have all this stuff plugged in properly. Okay, so first thing we're going to do is so we're going to go into our index dot html file. So it's close all this for now. and we're gonna go here and we're going to change. Where are Icon is pointed at, and assets icons have a condom. I co okay, That's it for our fabric con and onto the icons themselves were going to modify our manifest that Jason file. So it's called manifest dot a web manifest dot Jason and we're going to remove the sizes of our icons that we did not use. So he didn't use any of these. So we're going to get rid of those. And we didn't use 3 84 either. Sereni aru That's now we just have these 2192 and 5 12 While we're here, we can also change our theme color to just be black. So six zeros you can choose to modify your app name here And keep in mind that the short name should be less than 12 characters if you're going to trying to do it properly and yeah , I think we're pretty much done. So let's go back and check on our project. We can close this. This we're gonna inspect so you can already see that we have our Fabrikant up here. That looks great. And if we go into our application and we click on our manifest. You can see that we have are two icons here on 92 5 12 Perfect. So that concludes our icon related work in the next one. We're gonna lighthouse, audit our project. I'll see in that one. Bye for now. 37. 13.2 Lighthouse Audit & Meta Tags: Alrighty. So now we're gonna run our lighthouse audit and learn about meta tags, including those for Facebook and Twitter posts. So you can see we've started out in our developer tools from a previous video, and we're just gonna go into our audits tab. So we ran a lighthouse audit at the beginning of the course, and you can see as a reminder weaken, target, desktop or mobile. And we can also slow down the CPU to simulate a mobile device in this case will just do desktop and no throttling, and we will run it. All right, so we can see here that we have some pretty good scores. Are performances, 100 accessibility, 96 Best practices 93. Let's have a look at that. So this one will actually change when we are hosting it online. Right now, we're running it in a local server when it's actually on the internet. This will resolve itself so you can see that s CEO is 89. So we need to probably address this so we can see here. Document does not have a meta description. And if we click this arrow here, it says meta descriptions may be included in search results to concisely summarise page content. So if we want, we can click, learn more to see exactly how we should fix this, which is a very handy part of the lighthouse audit. So you can see that we're simply adding a medic element with the name, description and the content of whatever the description is into the head of our page in this case, we're gonna enter it into our index dot html head so we can go ahead and do that now so you can see we already had this open. We're gonna also kind of reorganize stuff a little bit better. So we'll put the theme color of top here and will change this to match the other one just in case which was black. And we can move our description to be appear. And in this case, we're just going to write portfolio progressive groups progressive when? Yeah, Okay, So now that that's complete, we're going to create an image for our Twitter and Facebook posts. So this will be shared as a card with a top image. Whenever we copy and paste a link in the message or in a post on Facebook or on Twitter as well. I've read some articles and I already know the right dimensions that we can make one image that is optimal for both. So let's go into photo p and do that. Now, we're gonna close this and we can clear this for now. And we're going to make a new project. In this case, we want a with of 1200 pixels in a height of 630 pixels. And again, we'll just change this to 96 the background could be white. So for this one, I'm also going to keep this simple as well, and I'm essentially just gonna take a screenshot of our video. All right, so we're gonna go back from our Icons folder into our assets folder to our image folder, and we're gonna open our main video background with VLCC. We're gonna make it full screen, and then we're also gonna open our snip and sketch application. We're going to create a new one, and then we're going to drag this so that we take a good chunk. We don't need all of it because it's going to be wider than it is tall and that's their guess. And we're gonna save a copy of this. We're going to save this into our main assets folder, and we'll just save it into the main folder here. So we're just gonna call this one social media, okay? And we can close this and this and we'll go back to photo P, and we're going to go file open and place and same thing we're gonna track down in our assets folder. We have our social media file here, and now we're going to stretch it to fit. Make sure to hold down the shift key so that we maintain our proportions and we don't skew our image. All right, such three. Big enough. Weaken, double click. And then just kind of move that into position there. All right, that looks great. So now we're going to save our PSD again, and this time we're actually going to export it as a JPEG, because any time we have an image that is complex, it will be a smaller file size. Is that J Peg? The main reason to use PNG is if you need it to be a transparent background, we're gonna up the quality a little bit, Let's say 85%. That's pretty good. And so we're going to cut both of these things now, And we're gonna go back into our assets folder, and we'll pace thes. And this is our social dash media and make it lower case this time just to differentiate. And our new project, This is our social media. Okay. And now we're gonna copy this one into our image folder. So we have our social dash media file there. Okay, back to the browser. We're gonna figure out the best way to do both of these at the same time. So I have this article that I found on CSS tricks, and I'll post a link as well. If you scroll down a bit, you'll come to reconcile ing meta tags. So this allows us to just use these meta tags altogether and with same picture, and it will work for both, So we're gonna copy these meta tags into our index dot html. Okay, so we're going to put this stuff back together, and we're just gonna comment out a quick title here for our social media tags, and we're gonna pay some down here line these up so we can change our title and our description already. So I'm just going to call this portfolio project. And I'm just gonna copy this description here. This description at this point, we actually don't have our image yet. We're going to need to wait until we actually can host it online. The trick that I like to use is I actually hosted on my get hub. And then I pointed to that. And you can also change your with project address. But again, if you haven't pushed a firebase, you don't know what it is yet. So we'll just put this as what my website actually is. All right? So last thing is, we just need to change our Ogi image here, so let's go ahead and we're going to We're going to go into our get bashed terminal and we're going to get ad get commit and with a message. Sorry, it whips Dash M, and we're going to say section 13 bracket social icon. Okay, and then we're going to get push origin Master. Okay. And now we're going to go and close that for now. Close that for now. And we're gonna want to go into our kid hub and so into our angular P w A into our project source assets and our image and our social media image. So we can right click on our download, and we can actually go to the content itself. So we're gonna copy that. And we're gonna go back into our project, minimize this, and we'll copy that into their All right, so that's pretty much it for our meditate updates. We're going to be able to test our Facebook and Twitter posts, but we have to wait until we actually host our project on fire base, which we will do in the next video. All right, I'll see in that one. Bye for now. 38. 13.3 Building, Optimizing, Hosting: alrighty. So one last optimization we're going to make is in the meta tags, and we're going to add progressive Web app support for Iowa's devices. I discovered that this is necessary when building my own portfolio website by using X code on a Mac computer. It allowed me to simulate any Apple device, and that's how I realized that it wasn't working properly. I found a medium article that explains the process, but again, we're just gonna copy and paste this. You can read it if you want. I'll provide a link, so we're gonna go back into our index dot html and we're going to comment out a title for R P. W A compact and will pace this and we'll actually move the manifest down as well to join it . And I also noticed I should probably have a space between the two words and my title. So let's fix that. All right, so now we're actually ready to build and deploy, so I like toe have three terminals, open it once. One is our local server. The other one would be get hub, and then the other one is for building and deploying, so we can see that we have our first terminal open our local server. We're going to stop that with control, plus C. You can see we've stopped that That will help us optimize the time it takes to actually build our project. So if you remember, we had our get hub in our 2nd 1 here. So we're gonna make 1/3 1 and we're going to do this with the angular CLI We're gonna run, Engy, build dash dash prod, and then dash, dash, build, dash optimizer. And we're gonna run that This is going to output just a couple of files into our distribution folder up here so you can see that we have some warnings and some errors. So this is a new feature with the newer version of the angular CLI. You can see that we've exceeded the budget for our CSS file here in our app and for our resume, and it gave us the same errors below. We can actually fix this by going into our angular dot Jason file. And so we will get rid of the terminal for now. And so from the top here, we're gonna scroll down. You can see that we have budgets. And this is for a regular file. This is for any components style. So this is our CSS. We're gonna make this 10 into a 100. So we don't want an error and listens bigger than 100 we'll change our six into a 50. Okay, so now we can go back to our terminal, and we're gonna run the same thing again just to make sure we don't have those same errors . Alrighty. So that finished properly that time with no warnings or errors. Now, we already set up our firebase account in the beginning, so we're just gonna need to run one command to deploy our project. And that is firebase deploy. These two commands will need to be run back to back any time that you want to change to be live on your website. Now, after it's finished, we're gonna copy and paste are your URL into our meta tag. Okay, so this is our hosting your l We're just gonna copy this, and we're gonna copy this into our meta tag R o g or L. Here. This is for social media tags. Just that we have the same exact project that we're talking about. And now that that saved itself, we're going to actually do this process again, okay? And we're going to deploy it one more time. But actually, before we check out our project, let's quickly test to make sure our Facebook and Twitter meditate. Eggs are working correctly. So we're gonna go back into our second terminal, and we're gonna ensure that everything is committed to our get hub. So we're going to go get add, period at everything, get commit, and then a message will be final version, and then we're going to push origin Master. All right, So we previously copied our project, Your l which we're gonna need as well. But now let's head over to chrome and you can see that I have the links here. I will share them in the course of swell and basically in both them. You're just entering the URL of the page and it will give you some information. So we're gonna pace that in there and press debug. Okay? It hasn't been shared on Facebook before, but we conclude this button to fetch new information. So there's some warnings here. You can see that it doesn't have a picture yet, but we can scrape again and you can see now our picture loads here. So any time that this is shared on Facebook, it will appear as this card here, and it will have this thumbnail preview. All right. Very cool. Let's check out the Twitter one. It's a similar processes. I've said we're just gonna paste Lincoln there, and we're gonna preview the card. Okay? Cool. And also, we have our nice thumbnail here in the card. Awesome. So that's pretty much it. Now we can get back to taking a look at our project, and this time we're gonna control Click on it and check it out. Okay. So you can see that we have our old, very original set up here, So we're gonna go to inspect, and we're going to empty cash and hard reload. And you can see now we have our proper project. This is a little bit messed up here. Okay, so we fix that. All right, so let's ah, let's for fund goto lighthouse and see what our audit looks like. Now let's run it. Okay? So you can see that our scores, or even better, our best practices is at 100 rs. CEO went up r p w a scores. This shows that it is actually a PW way. We can also see that we have this plus sign here that proves that it's a P w A. And yeah, I'm very happy with how this project turned out. I hope you are too. And let's do this for fun. We can install this on our desktop and could do that. So we have our full screen application here. Very cool. Here we go. Now it's loaded care videos air. Good, Awesome. So in the next video, I'm going to show you what the experience is like now on a mobile device because that's one of the main benefits of a PW way. But I think we've got a pretty cool project on her hands. I hope you're excited to share it with everyone, and I'll see you in that next one bye for now. 39. 13.4 PWA on Smartphones: Lastly, I'm going to show you the experience on an actual android device. So I'm using my computer and I'm capturing the footage from my smartphone. And we're going to start by going to Google Chrome. And you can see that I have are project loaded up here. Ready? You'll notice that there is an ad to home screen banner at the bottom. And so we're going to click on this and we're gonna click, Add, And now, if we go to where our APS are located, you can see that we have our APP icon here now and are short name of just portfolio. When we open it, you can see that we have a real splash screen and then it loads into the project. The video background might take a few seconds to load. And at first, when you deploy it, it might take a few hours so you can see that are video has not yet loaded here. Okay, so now you can see the video has loaded properly. We can do something cool here, and what I'm gonna do is I'm gonna turn on airplane mode and I'm going to clothes are project here, so I'm gonna close this, and I'm gonna close chromosome well, and we're going to go back to our projects, and we're gonna click on it. So we have no internet right now, and you can see that our page has still loaded. And that includes the video background, despite the fact that we're currently offline. All right, I think that that's pretty awesome to see. So that's it for the course. Congratulations on making it to the end. I hope you've learned a lot from the process. And now you can build any website into a progressive Web app. Don't forget to share the link to your project with the class. All right. I'll see you in the conclusion. Bye for now. 40. 14 Conclusion & Thank You: Hello. I want to start by thanking for taking the time to complete my course Island. And my first job is a senior Web developer through an online course just like this one. And I wanted to take the opportunity to get back and maybe help someone else lend their first developer job the over local. This course is to encourage students to be more design conscious developers. We started out by going over design principles. Then we looked at some exceptional portfolio websites for inspiration. Learn how to make mock ups for our projects using photo, and in the end, we used the angular eight Seelye and Fire Base to create our own portfolio website with progressive Web app functionality. I hope that you've learned a lot from this project and have gained the confidence to build your own. There are a lot of steps on your path to becoming the best Web developer you can be, and I hope that you embrace those challenges and make this something you love doing. Feel free to reach out to me and share what you've created or asked me any questions you might have. I'm happy to help whenever I can until next time. Bye for now,