What is the project?

The first project that I accomplished within the Front-End Web Developer program through Treehouse was the Personal Page project. The project was the first time for me to put my HTML and CSS skills to the test and create a personal webpage for myself. The project required you to change an HTML profile Treehouse provided and make it your own. The project requirements included the correct file structure (index.html, css folder with linked css file, images folder with profile image), new background image for the webpage and two new HTML pages linked to the main page.

How was it put together?

For my first project, the beginning process was rather simple as I already had an example webpage that I just needed to change. I changed the placeholder text of the example webpage and styled the elements that suited my needs. I added two separate HTML webpages to the same CSS file and made one webpage that listed my education and experience and the other a list of my hobbies. The main webpage was a brief description of me which also listed my goals for the future along with a nice header and footer and linked social media icons. I uploaded a profile avatar as my main profile image and a rotation effect through CSS transitions.

What were the challenges?

I submitted my project through Treehouse and it came back with a couple errors that I needed to correct. I forgot to add an images folder within the HTML document and it was not linked correctly. They also reminded me that they would like to see a background image in the header of the page and not just a background color. Lastly, they informed me that there was a simple error through the CSS validator regarding missing a curly brace. I added an images folder and put the image inside it with the correct href process, changed the background color to a background image and fixed the CSS and ran it through the validator. The second time around I passed the project.

What did I learn?

For my first project using CSS and HTML I definitely learned a lot. I learned about placeholder text and how to change text within HTML documents. Structure of the documents and linking the pages together with the proper syntax took some getting used to but was easy once I got used it. Using a validator for CSS and HTML is a definite must in web development and that will be helping my skills down the road so my projects do not have errors. I enjoyed using HTML and CSS and knowing how to properly use those integral components will help me in all upcoming projects and I really loved styling it to fuel my creative side.

View Project Page!

View Project on Github!