Lab 12 / Part 3: Preparing for Your Final Assignment
C O N T E N T S
- Overview of the MTEC1003 Final Assignment
- Requirements of Your Website
- Brainstorming Content for your Website
1. Overview of the MTEC1003 Final Assignment
Our last class is on Monday, December 20 (i.e. Week 15), as marked on our Schedule page.
On that day, your final project for the semester will be due. This will be a simple, personal website design that you write in HTML, CSS, and JavaScript.
You will present your website to the class on December 20, so it must be complete and presentable by this date!
Everything you need to build your website will be demonstrated + practiced during these last few weeks of class; during our unit on HTML/CSS. However, you may also choose to add external elements to your website if you would like to do so — these can include custom navbars, JavaScript libraries, and other elements that you can easily test & debug in your web browser.
Get creative! Try new things. That’s encouraged…
2. Requirements of Your Website
Your website will have the following elements:
- a Home page
- including some simple, animated JavaScript artwork. (We’ll learn about this in Week 13, but on your website it CANNOT BE THE SAME THING AS OUR LAB! You must BE CREATIVE and make your own animation, use your own colors, etc.)
- an About Me page
- including a photo of you (OR if you prefer not to use your own image, no worries — any placeholder image will do!)
- at least 1 Portfolio page, demonstrating some of your work or professional goals
- can include photos, videos, text explanations, excerpts of your code, etc.
- a Contact Me page
- 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.
- 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!
Your website may optionally include some external HTML or JS elements, if you feel comfortable using them.
For example, our Course Website utilizes the following JavaScript libraries:
- Reveal.js for animated slide presentations
- Highlight.js for code highlighting in web pages
Feel free to experiment these or any others, if it would help you get inspired, and to help make your website more expressive!
However, do note that THE USE OF ANY EXTERNAL WEBSITE BUILDER, SUCH AS SQUARESPACE, CARGO, WIX, WORDPRESS, ETC., IS STRICTLY PROHIBITED! The point of this assignment is to code a simple website and design it from scratch. You will be graded on the source code you submit (not only on the elegance of your site's appearance) and your ability to follow instructions for hosting your site through GitHub pages _(we'll learn this in Week 14)_.
3. Brainstorming Content for your Website
For each of the pages Home, About Me, and at least 1 Portfolio page, start brainstorming ideas for content that will appear on your site.
Think of what you want the viewer to see when they first see your Home page, how you want to present yourself in your About Me, and what among your own projects, or professional interests, you’d want to present on any of your Portfolio pages. Write out some initial ideas…
Navigate to your /lab-12-html repository, and create a new folder inside of it. (Remember: If using Terminal, what command will you use to create a new folder?) Call this folder /final-project-brainstorming. (If using Terminal, change your directory so that your Terminal is pointing to this folder. Verify you’re in the correct location by running pwd.) The path to your new folder should look like this:
/Users/yourUserName/myClasses-Fall2020/mtec1003/lab-12-html/final-project-brainstorming
In your text editor (e.g. SublimeText, Atom, VS Code, etc.), create 3 new text documents (.txt) and save them in your /final-project-brainstorming folder, which is within your /lab-12-html repository, using the following names:
- brainstorming-01-home-page.txt
- brainstorming-02-about-me.txt
- brainstorming-03-portfolio-v01.txt
In each of these files, type out your ideas for the content on each of the pages of your site. For example, in brainstorming-02-about-me.txt, type out a 1-2 paragraph personal biography with information about your education, work experience, your professional expertise and goals. What is your dream job? Where do you see yourself in 5 years? Think about how you want to present yourself to a future employer, a future scholarship committee, an art gallery that might feature your design work, or a graduate school application, etc. Put your best foot forward!
Do the same for the brainstorming-01-home-page.txt and brainstorming-03-portfolio-v01.txt. What is the first thing you want them to see when they load your site? What pieces of your work do you want to present?
Each of these text files should contain at least 1-2 paragraphs of text explaining your initial ideas and/or draft of body text to be published on your website.
Keep in mind: You can change the contents of your site later! You don’t need to turn in 100% complete ideas yet! Right now, the idea is to brainstorm and have at least a first draft of the site — that way, when we begin coding it later, you’ll already have content to drop in! You can always revise this content later, add, or change things as we move forward…
Crucially, DO NOT WAIT TO WRITE THE CONTENTS OF YOUR WEBSITE! You will have plenty of technical details to learn in the weeks ahead — HTML/CSS, Javascript animation, click and drawing events, etc. I’ve seen students who waited to do it all at the very end of class, and they ended up failing the assignment because they couldn’t turn stuff in on time — so do this initial planning phase NOW.
Make sure your files are included in your /lab-12-html folder, and don’t forget to add, commit, and push your changes!
Your final /lab-12-html folder by the submission deadline should include the files from parts 1 + 2 of the Week 12 Labs, plus the new folder /final-project-brainstorming containing the 3 text files described above.