It is time to bring all the skills you've accrued together to tackle a challenge: building a full webpage layout from scratch. Specifically, we will be building a portfolio page describing yourself and some of your work. Here is an example of what we will be creating:

To begin, you'll need a GitHub repository to commit your code to. We will use this repository as a template, so that you can make your own repository with the files necessary for this project. There are steps below the following image to help you out.

1. Open this link in a new tab, and click on the "Use This Template" button shown in the image below.

   

2. You will be redirected to a new page which looks like this:

   

3. Set the Owner to your own GitHub username.
4. Name your repository portfolio or something similar if you already have a portfolio repository.
5. Give it the following description: An HTML and CSS page to showcase my work.
6. Ensure the repository is set to Public.
7. Do NOT check the "Include all branches" checkbox.
8. Click the "Create repository from template" button.

Once your GitHub repository has been created, you'll need to clone it to your computer with the git command.

1. Open your Terminal (on Mac) or Git Bash (on Windows).
2. Change to your ~/repos directory with the following command:

   cd ~/repos

3. On your repository's GitHub page, find and click the Code button.
4. Make sure to change the clone option to SSH and copy the URL that is displayed.
5. Back in your Terminal (Mac) or Git Bash (Windows), clone your repository with the git clone command. You'll need to paste the URL you copied instead of the example below.
   Don't copy-paste the below command, it's just an example. You should use your own SSH URL.

   git clone [email protected]:my-profile/portfolio.git

6. Then, change directories to your freshly cloned repository.

   cd portfolio

7. Now run the npm ci command to set up your linters for HTML and CSS.
8. Lastly, open your new portfolio directory in your code editor!

With that done, we are now ready to begin the project!

When you are setting out to begin a new project, the first (and most important!) step in the development process is to plan. Before we even touch code, the first step is to create a complete plan of what needs to be built, and how it should be built. Given that we want to make the portfolio page shown in the gif above, the first step in the planning process should be to make a visual representation of the page known as a wireframe.

There are quite a few different approaches to making a wireframe, but the quickest and easiest way to make a simple wireframe is to draw it out on paper. Here is a drawing representing what we intend to make:

Now that we have a visual representation of the application we intend to build, we can start thinking about features that need to be completed, and plan out the size and placement of elements on the page.

When setting out to determine the size an element should take in a page layout, a common mistake for new developers is to plan for both height and width of an element. As a general rule, you should anticipate how much width an element should take up, but except in specific cases, the height of an element should be determined by the size of its content.

Since height is effectively infinite in a webpage, elements should be allowed to take up as much height as they need to show their contents to the user. One of the rare exceptions to this rule is in situations where your element would not have size if it is not directly given a height, such as an element with a background image but no content inside the element. We will see this situation in practice over the course of this project, but it is important to know that manually setting the height of an element is oftentimes not the right path to follow, and should be avoided unless you have a compelling reason to do so.

Now that we are ready to begin planning out the sizing and placement of the elements in the application, it's time to decide on how we want to accomplish this. If we set out to build the entire page at the same time, that would be a humongous task that would likely lead to more stress than progress.

When setting out to plan out the specifics of a webpage layout, it is extremely helpful to break the page down into individual sections. Based upon the wireframe we constructed above, we have some very clearly separated sections that we can use to break this layout down into individual objectives to tackle.

A good place to start would be the page header, as seen above. The header section takes up a full horizontal row of the webpage, which makes it an easy structure to consider separately from the rest of the document. In fact, the rest of this project would probably be much easier to tackle if we consider each section of the page to be its own separate task to break down. Given that, we now know how we want to divide up the workload:

1. Header
2. Hero Image
3. About Me
4. Technologies
5. My Projects
6. Contact Me
7. Background Image

Now that we have a plan of action, let's start working through the header in the next section.