Lab 15: Your Personal Website
C O N T E N T S
1. Overview of This Lab
By now, you’ve learned all about creating a multi-page website, designing it with a good layout, your own preferred colors and typefaces (fonts), and pushing the site to GitHub Pages for remote hosting.
Previously, you brainstormed ideas for content on your own site, helping you prepare for the final assignment in MTEC1003.
In short, you have all the ingredients you need to complete your own personal website!
The remainder of your week will be spent finishing your own site, pushing it to GitHub Pages, and preparing to present your work to the class next week: our final class this semester.
Below, I’ll describe the requirements for this lab:
1. Requirements of Lab 15 (Your Website)
Previously you gathered your ideas and planned for your website in Lab 12 / Part 3: Preparing for Your Final Assignment.
For the final project, you will take this content you developed and plug it into the website template presented to you in Lab 14: Advanced Web Design + GitHub Pages.
Your website will be hosted on GitHub in a repository with name of your choice (Recommended: lab-15-personal-site) and then CLONE it onto your local machine inside your /mtec1003 folder. (As always, use your knowledge of git and all of your previous references in order to do this.)
You can choose your own repository name to further personalize your site; especially if you want to share it publicly (e.g. Louis-Goldford-homepage).
You will finish your site this week, push it to GitHub Pages, and to complete Lab 15 you’ll EMAIL ME 2 LINKS by the start of class next Monday, December 14:
https://github.com/yourUserName/lab-15-personal-site/
and
https://yourUserName.github.io/lab-15-personal-site/
(The 1st link is the “back end” of your site, where I can see the source files you pushed. The 2nd link is the “front end”, or the website interface itself.)
Your website must have a minimum of 4 linked pages:
- a Home page
- an About Me page
- at least 1 Portfolio page: can include photos, videos, text explanations, excerpts of your code, etc.
- a Contact page, where people can easily learn how to reach you (e.g. email and/or phone number, or placeholder contact info if you don’t want to use your own!)
In addition, your website must have the following elements:
- at least one CSS stylesheet linked in the header of your site’s pages; i.e. for stylizing your site’s appearance
- You may opt to have more than one stylesheet if your design requires it.
- Your Home page must include some simple animated JavaScript artwork. (see: Week 13)
- Your About Me page must include a photo of you (OR if you prefer not to use your own image, no worries — any placeholder image will do!)
- On any page of your site, you must have at least one of the following things we’ll learn in future classes:
- one click event OR
- one drawing event.
- (We’ll also learn about these in Week 13, but on your website they CANNOT BE THE SAME THING AS OUR LAB! You must BE CREATIVE and make your own click event or drawing event.)
- You must also include one of the self-guided supplemental HTML/CSS elements (find them under Week 14).
- These are all fun, simple HTML elements and code snippets you can easily include in your web projects, and they can be learned quickly from Instagram posts. Choose from different HTML input types and other UI objects, or even CSS image hover effects!
- Optionally: If you’re feeling confident, you can browse any of these Instagram coding accounts and find other cool web effects that you’d prefer to use instead. (However, I’d recommend staying with one of these simple ones if this is your first-ever web project!) The point here is to show you how easy it is to teach yourself more about front-end web design!
Design elements to include in your site, based on our work this week:
- Create a navbar at the top of your site’s pages, for easy page linking across your site.
- Use the template provided in Lab 14: Advanced Web Design + GitHub Pages to create & stylize your navbar!
- Use
<div>containers to separate, stylize, and position content on your pages. - Use class and ID selectors to distinguish between group styling and individual styling throughout your site.
- You must choose your own website colors (using any of the tools discussed. e.g. Adobe Color).
- Recommended: You can use the Adobe Color tool to extract a color scheme from a photo you may use on your site!
- You must include your own preferred fonts (using Google Fonts).
- Recommended: Choose at least 2 fonts (1 for headings and another for body text, also demonstrated in Lab 14.)
You may optionally include a “hero image” at the top of your website as well.
CRUCIAL: Reusing the fonts, color schemes, photos, and other content given in our tutorials is strictly prohibited. You will need to “design” your site yourselves: choose your own colors, fonts, images, and potentially videos and layout. You now have the tools to make your own creative decisions. Repeating the same elements in your own site will result in a lowered grade!
At the end of this lab, your /lab-15-personal-site repo should contain the following files:
- your Home Page, e.g. index.html
- an External Style Sheet, e.g. style.css
- Your “About Me” page, e.g. aboutme.html
- Your “My Portfolio” page(s), e.g. myportfolio.v01.html
- Your Contact page, e.g. contact.html
- Include any image or video files that will be linked inside your HTML (Not necessary if you’re linking content from other sites, such as an image hosted elsewhere or a video on YouTube, for example. In this case, you’ll use
<a href="...">...</a>tags in your HTML source). - Optionally: include any necessary external JavaScript, e.g. navbar.v01.js
Make sure all files are all included in your /lab-15-personal-site repo, and don’t forget to add, commit, and push your changes! (Remember: for pushing to GitHub Pages, you’ll invoke git push origin gh-pages!)
Be sure it worked!
Check in 2 places:
- Check your GitHub repository just as you normally do each week to be sure all files are there.
- Check your website address to be sure the site loads properly on GitHub Pages. Remember, the formula for your address will be:
https://yourUserName.github.io/lab-15-personal-site/
In addition, prepare to present + discuss your website and personal work for approximately 5-10 minutes on the last day of class. Additionally, as you watch each other’s presentation, think of questions or constructive comments to share; plan to answer a few questions from the class. If you’re shy, be prepared to ask a question of the presenter when I call on you.