All right. 1
Well done on making it to the end of the section. 2
And it's time for your project. 3
In this project, we're going to be building your very first Web Developer Portfolio. 4
It's a website where you're going to be able to show off all of your work. 5
Most web developers and designers out there will have their own website where they actually show people 6
what they've built before and link to those websites that they've created so that if somebody wanted 7
to hire you, they would be able to look at this page, see what you've done, and then maybe contact 8
you or learn more about you. 9
And this is the website we're going to make, but we're going to make a very simple version of it using 10
just HTML. 11
What you need to learn in order to do this and hopefully you already know how to do this, but we need 12
to be able to take screenshots. 13
Now on your computer, it will be different whether if you're on Windows or if you're on a Mac or if 14
you're on Linux. 15
What I want you to do if you don't know how to take screenshots on your particular computer, is just 16
to go into Google and search for how to take screenshot on Windows Mac or Linux, depending on what 17
system you're working on. 18
Once you've figured that out, then we can proceed to download the Portfolio Project zip file and extract 19
it and open it inside VS Code. 20
There's quite a lot of files I've got in here. 21
If you take a look inside the goal.png, this is what we're trying to create, a very simple HTML 22
only portfolio website. 23
It's got a title, it's got a subtitle, it's got some horizontal rules, but we've also got the two 24
projects that we've built so far: the Movie Ranking Project from Section 2 and the Birthday Invite 25
Project from Section 3. 26
What we're going to do is we're going to add an image which is a screenshot of each of those projects, 27
and we're also going to link to each of those projects, 28
and also an About Me and Contact Me page. 29
If you look inside the public folder, I've actually already got the movie-ranking.html and the 30
birthday-invite.html. 31
Notice that the code here is the project code that you've written before, 32
what I recommend is to actually replace the code here with your own code because it will probably be 33
a little bit different. 34
You might have customized it, you might have made it look a lot better than the standard version, 35
and your birthday is probably not on the 12th of May. 36
Similar with the Movie Ranking, your top three movies is probably different and I want you to take 37
the code that you've previously written because we're taking this portfolio website seriously, right? 38
We're actually going to show off what we've done so far, which is actually a lot already. 39
And I want you to customize the About page, the Contact Me page, basically make it your own web page 40
because later on we're going to be putting this live on the Internet, which you can share with anybody 41
in the world. 42
So let's take this project seriously. 43
What I mentioned about screenshots, the reason why we're doing it is so that when we look at our website, 44
we can see a little preview of the project that it's going to link to so that people can see which ones 45
they actually want to go and take a closer look at. 46
And in order to do this, we're going to right-click on the files that you've got, say, the birthday- 47
invite, Show Preview, 48
and once our preview is up, we're going to take a screenshot of it using whichever method you've discovered. 49
And once you've got that screenshot, then you can go ahead and drag it into the assets folder. 50
And inside the asset folder there's the images folder. 51
So there you have your screenshot and then you can go ahead and rename it to a sensible name, whatever 52
it is you want. 53
And this is how we're going to end up with some preview images for our website. 54
Now you can see there's already some images I've got in there, so in case your screenshot doesn't work 55
or you can't figure out how to use it, or you simply just want to do this project quickly, then you 56
can of course use the images I've already included for you. 57
But what you need to do is a seven-step process and I've added seven to-do's in there. 58
Just like any real web developer working professionally, you would split your big task, creating this 59
portfolio website into smaller tasks such as here are seven TODO's. 60
So first step, create the HTML boilerplate using what you learned from the last lesson. 61
Change the title to whatever it is you want. 62
Add your previous projects' HTML into the public folder, so replace the code in here with your own. 63
Then take screenshots of your projects and add it to the images folder here. 64
Rename them and make sure you've got them 65
ready to go. 66
Then go ahead and add some titles or subtitles, your portfolio, you're a web developer, whatever it is 67
you want to do, using what you've learned from previous lessons, then add a link to the project pages. 68
For example, the Movie Ranking Project link here, 69
this is an anchor tag. 70
This is the Birthday Invite Project anchor tag, and these two should link to their respective web pages, 71
so birthday-invite.html or movie-ranking.html. 72
And then we want to add the images in order to show off the previews. 73
Now, I've got a hint in here because you might find that when you take a screenshot, the image ends 74
up being massive and it doesn't really render properly like what we see in the goal here. 75
So a small, tiny image instead it might take up the entire page and it will look very, very awkward. 76
So one of the things you can do is set an attribute on the image element, which is the height, and 77
you can set it to 200, which means it'll be 200 pixels high and it will automatically figure out the 78
width. 79
And if you want to learn more about this, I've included a link to the Developer Documentation so you 80
can read up on that attribute and see how it works. 81
Now, once you've made the image show up and made it smaller, the final thing to do is to add the Contact 82
Me and About Me page links at the very bottom down here. 83
So maybe add a horizontal rule. 84
You can add whichever HTML elements you like because this is your project, this is your portfolio. 85
And of course, in later lessons, when we learn more about styling and CSS, we can jazz this up, 86
but at this stage, we're just aiming for a very simple HTML-only project page like this. 87
So I'm going to leave you to it and I want you to really put some time and energy into this portfolio 88
because it's going to be shown off to the entire world. 89
Pause the video and give that a go. 90
Now, I want to briefly run through my solution with you, 91
but remember, this is just an example. 92
It's your website and you can make it however you like. 93
But a couple of things to note is firstly, I've got my HTML boilerplate here. 94
I've removed the unnecessary meta tags, I've changed my title, I've added in some h1's and h2's, 95
and horizontal rules just to separate some of the content, 96
but more importantly, I've got my anchor tags in. This anchor tag links to the movie-ranking html, 97
and this is embedded inside an h3 so that it will be a little bit bigger. 98
And I've got an image that will show off the preview of that particular web page. 99
And at the very bottom, I've got my two other pages, my About and Contact. 100
In this case, what the preview looks like is like this. 101
When I click on this link, it goes to one of my projects. 102
This link goes to one of my other projects and at the bottom, I've got the About Me and Contact Me pages 103
that will tell people a little bit more about myself. 104
Hopefully you've created something similar and in the next lesson there's a bonus lesson where I want 105
to show you how to put this live onto the Internet so that you can share it with your friends and share 106
it with us; the other students and myself, 107
so we can see the beautiful portfolio website that you've built. 108
So for all of that and more, I'll see you on the next lesson.