Today we learned about the core languages of every webpage, HTML and CSS. In this project, we are going to practice both of those languages. In this project, we are going to mimic the BloomTech Alumni page (you can find that here: https://bloomtech.com/profiles). We want you to create your own profile. Don't worry this won't be made public, it's just a fun exercise for now. One day you will have your own profile on that page.

In order to get started you will need to download this project as a .zip file and open it in VS Code (like Module 1). Here are the instructions to do so:

1. Click on the Green button that says Code in the upper right-hand side of the screen.
2. You will see an option at the bottom called Download Zip.
3. You will need to find the place the .zip file is downloaded to. This will usually be the Downloads folder on your computer. Tip: if you are using Chrome, you should be able to click on the download itself in the bottom left-hand corner of your browse, this will open the location of the downloaded file in My Computer or Finder.
4. Double-click on the .zip file itself. Once you unzip the file you should see a Folder or Directory with the name "Foundations_Module_1_proj" next to the .zip file.
5. Either drag and drop the entire folder onto the VS Code icon, OR open VS Code -> click on File > Open -> Find the folder from step 4 -> Click open.
6. Open the index.html file in your browser. In most cases you can drag and drop the HTML file directly to your open browser screen.

Before you open the project, one thing to note. A LOT of code has already been written. This may be overwhelming at first, that's OK! Take a moment and just analyze the code that has already been written. Are there elements that you recognize? Are there elements that you've never seen before? Take note of these things. A major skill in software development is learning to read the code that is already there and figuring out where to insert your own code. We've done that step for you today but as an exercise try and answer the questions below:

1. In index.html, on line 3, what is the purpose of this HTML element? [Write Your Answer Here]

2. In index.html, on what line is an Image being included in the code for the first time? [Write Your Answer Here]

3. In index.html, what is the element on line 19 and what is it's purpose in HTML? [Write Your Answer Here]

4. In index.css, on line 48, what is this CSS property changing the color of? [Write Your Answer Here]

5. In index.css, on line 34, what is the code using to select the element? [Write Your Answer Here]

Now it's your turn to write some code! In index.html, starting on line 74 you will find some instructions to create your own student profile card. You may use the existing student profile card on lines 34-71 for reference, but please try to write out your own code and don't copy/paste (just like learning a new spoken language, muscle memory is a real thing!).

Important Note About Line 87: To complete this line you will need to either include an image file (photo of yourself) in the assets folder in this project and properly link to it, OR you will need to find an image of yourself existing on the internet. If you can't do either, that's OK! You can use this URL as your source: https://avatars2.githubusercontent.com/u/24780114?s=200&v=4

In this section, we'd like you to take your learning into your own hands! It is an important skill to be able to find the answers you are seeking on the internet while working on a software project. In today's case, we've helped you out a bit. Below we've listed a few popular resources when researching Web Development.

HTML: Starting at the bottom of the page you will see a div element with the class go-further. Inside of this div element you will need to include any three HTML elements of your choosing. Bonus points if we haven't talked about the element(s) in class. Please give one of these elements a class name and one of them an ID. Then continue to the next step.

CSS: Research CSS properties and choose three that we haven't talked about in class (there are hundreds!). Use these three properties to add style to the HTML elements you created above (after line 175 in index.css). You may also add any other styles you would like to the elements you created. Get wacky, have fun!

Resources:

W3Schools - HTML Reference

W3Schools - CSS Reference

Mozilla Developer Network - HTML Reference

Mozilla Developer Network - CSS Reference

An impactful technique in learning something new is attempting to reiterate the concepts you just learned from memory in your own words. This allows you to highlight areas you are not comfortable with and could study on a little more. We'll start this exercise off pretty simply. Just remember that this is merely an exercise, there are no right or wrong answers here. Please answer the following question in your own words

1. What roles do HTML and CSS play in creating a webpage. What is the difference between the two languages? [Write Your Answer Here]

Once you are completed with all of the above exercises, find the Folder Web-Foundations-Module-2 in your Finder or My Computer. Right-click on the folder and select "Compress Web-Foundations-Module-2". This will create a .zip file. Upload this .zip file to Canvas the same way you uploaded your .txt file yesterday.