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 going to go into our coding projects folder into our Angular pw 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, our 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 Studio code will remember it by default. So you can just open up Visual Studio code, instead of going into the folder.

Okay, so we can get rid of this and now we're actually going to look into our File Explorer 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 the source folder, because that's where all of our code all of our main code is. And we're going to start by modifying the index dot HTML. So this is where our Angular app will get served to.

And this allows us to override certain style properties that we wouldn't be able to otherwise specifically targeting the HTML, 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 going to add it wherever we think it's necessary. And also, we're going to add a scroll behavior property which will allow us to scroll between sections with just this one line of code. Alright, so we're going to type style and then we can actually press tab and it will autocomplete that for us. And so we're going to target everything, as I said with Star. So let's shift eight.

And then we're going to comma, and then we're going to add the pseudo tag for after, comma. And then we're going to add the pseudo tag for before, so that's using colons there for that. And then we're going to give it a box. sizing of border, dash box. Okay, and then we're gonna make one more style tag. And we're going to go style again, tab.

And this time, we're going to target the HTML comma, body elements. And we're going to give those a margin of zero and a scroll. Dash b havior. Oops, booth. Okay, and the closing bracket. All right, so that's done.

So you can see this white dot, that means that we have changes that we haven't yet saved. So if we press Ctrl S, that'll save that file for us. Okay, so now we're going to 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, they even have their Angular logo here. And so we're actually going to get rid of all of that don't need any of that anymore. And while we're at it, instead of manually saving this every time Visual Studio code has a cool feature, and it's called autosave. So this will allow us to not have to press Ctrl S ever again, it'll just keep saving as we keep making change. Okay, so we're gonna be begin by creating a div.

And we're gonna give it the wrapper class. So div dot wrapper, and then we're gonna press enter. That's a cool thing about Visual Studio code is that you can use 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 wrapper class is because it gives us a parent class above all our sections in case we need to have some property that affects every section. And so the next thing we're going to do is we're going to comment out titles for each of the next sections.

So we're going to use Ctrl J, or sorry, control question mark, to comment out a line. And this allows us to write code that's not going to be run. And so we're just going to type home section and we're gonna make it a little bit longer, just to make it easier to decipher. From our code, and then we're gonna copy and we're going to add all of the other sections that we're going to make. Okay, so now that we're done with our titles, we can copy those. And we're actually going to paste them into our CSS.

Double click our app component CSS, we're going to paste them in there. And we're actually going to highlight every Well actually, we're going to highlight one line at a time. And Ctrl J, sorry, control question mark. I don't know why I keep saying Ctrl J. Okay, and we're going to comment out each of these. And we're actually going to get rid of this, these end caps as well.

And we're actually going to use a cool feature called Ctrl D. So we're going to select what we want to get rid of. Press Control D see it selects the multiple events, and we're going to delete And we're going to do the same thing with these, get rid of all these 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, hashtag and then the idea of the section in order to add an ID. Again, this is another shortcut.

Alright, and that's it. We're done setting up our project. And now we're going to go section by section and fill out each one of these before moving on to our responsive design. All right, well, I'll see you in the next one. We're going to start on the home section. All right, bye for now.