Project1_ProfilePage
TechDegree Progect1
Hi! I'm Billy. This is the first project assignment in the teamTreehouse Tech Degree Front-End Web Developer Course.
This is the first course and only one Avalible.
Project Instructions
To complete this project, follow the instructions below. If you get stuck, ask a question in the community.
4 steps Create or find an image file to represent yourself and a new image for the background. Be aware of file size: keep the profile image under 400 KB and the background image under 1 MB (see the link in the resources section to Picresize, an online image resizing tool). Using a text editor, modify the HTML of the index.html file: Add the images you collected in step 1 to the page. Personalize the text on the page by changing the name, background and goals. Feel free to make up the information if you do not wish to share anything personal. Adding links to your GitHub, Twitter and LinkedIn accounts. If you don't have a Twitter or LinkedIn account, or don't want to share those, then delete those links. Feel free to expand on this project, by adding an additional page or two, adding more images and customizing the CSS. If you do not want to add an additional page then delete the experience link in the HTML. Put your project in a new GitHub repository on your GitHub account: See the workshop on Using GitHub for the Degree Program (linked in the Additional Resources section). The GitHub Desktop application can automatically create a new repository for you. Make sure that you're only putting the files for this project in that repository. Make sure to check your code is valid by running it through an HTML and CSS validator. Links to the validators can be found in the Project Resources. This will help you spot any errors that might be in your code. There are a few exceptions that you don’t need to fix: Don’t worry about any warnings, we just need you to check any errors that might be there. If CSS validator flags use of calc, or vendor prefixes these errors should be ignored. If HTML validator flags use of pipe (‘|’) in Google font links/URLs this error can also be ignored.
Your Grade
Here’s how you were graded on the individual requirements for this project. These requirements are combined with your reviewer’s overall assessment to make up your overall grade.
Elements that Met Expectations Valid code HTML and CSS code passes the validation. HTML and CSS errors are accepted exceptions. Reviewer Comments:
Great! You code is all valid and error free!
Elements that Exceeded Expectations Create required files Additional pages. Reviewer Comments:
Nice one! It's great that you have gone ahead and added some extra pages to your project.
Added a photo Profile photo styled with additional CSS. Additional images added to the page. Reviewer Comments:
Great, it looks like you have spent time adding some extras into your project!
Changed placeholder text for name, background and goals Added additional text content. Reviewer Comments:
Great job adding some additional text in! Your profile page looks great.
Overall Comments Billy;
Very nice looking site and I like that while you kept to the spirit of the portfolio site you put your own design spin on it. Very nice work.
There are a few places in the styles.css file which could benefit from some "polishing".
Line 42 is a duplicate of line 38 in the same selector and is unnecessary. There are several instances, too many to list here, in which you are assigning a unit of measure to a zero value, i.e. 0%. For zero values in CSS it is best to leave the unit of measure off, so 0% would become simply 0. The file path on lines 264 and 618 are incorrect. Using a ../ in the file path tells the browser to "go up" one level in the folder structure. Since images is at the same level as styles.css the ../ is incorrect. There are also several instances in which you can optimize your properties by combining like properties into a single statement, for example lines 405 & 411. Great project overall, Billy. I look forward to seeing your future projects.
Thanks for being a part of the Techdegree program.
Happy coding.