- 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 project 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. Please leave the class "profile-image" intact on your profile image.
- Don't forget to update the text for your new profile image's
altattribute!
- Personalize all 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.
- Add 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 you need to delete those links.
- Edit the href value of the Home link so it navigates to
index.html. Note: do not use root relative links, or links that begin with a leading forward slash,/.
- Create an additional page to expand on the online profile
- Create a second html file. Name the file experience.html or something similar, such as resume.html. Change the href value of the Experience link in index.html to point to this new file.
- Add HTML and text content to the additional page. Base your design and HTML on the index.html file or create your own HTML.
- Edit the href value of the "Experience" link to navigate to your new page.
- Feel free to change the name of the page ("Interests", for example), just make sure that you update the links to match the name of the page.
- You can write custom CSS for the new page, as long as you use
style.cssfor both pages.
- Put your project files in a new GitHub repository on your GitHub account:
- Make sure that you're only putting the files for this project in that repository.
- Please do not create any new folders for this project.
- The GitHub Desktop application can automatically create a new repository for you. See the workshop 'Share Your Techdegree Projects with Github Desktop' for more info on how to put your project onto GitHub using the GitHub Desktop app (linked in the Additional Resources section).
- 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, vendor prefixes or pseudo-elements/pseudo-classes these errors should be ignored. - If HTML validator flags use of pipe (
|) in Google font links/URLs this error can also be ignored.
- Once you’ve completed the project, don’t forget to introduce yourself in the #welcome Slack channel so your fellow students can congratulate and encourage you!
- If you're having trouble with this project, make sure you take a look at this great study guide: Project 1 Study Guide
-
Create at least one more page in addition to the Home and Experience pages, like a "Hobbies" or "Contact" page for example.
- You can write custom CSS for any new pages, just make sure you use
style.cssfor all pages.
- You can write custom CSS for any new pages, just make sure you use
-
Edit the styling of the profile photo’s CSS properties. Pick at least one of the following properties to change:
borderborder-radiustransitiontransformation
-
Add more photos and imagery to the page
-
Add more text to the page such as a list of your hobbies.
-
Make the HTML more semantic.
- Overall
index.htmluses semantic markup, however, there are several opportunities to enhance some `divs with more descriptive tag names:<div class="main-nav"><div class="card">
- Overall