arthurlockman / cs4241-a2-arthurlockman

Assignment 2 for WPI CS4241.

Assignment 2 - Basics HTML and CSS

Due Nov 9

This assignment introduces you to the basics of HTML and CSS, two fundamentals that compose a website. You will learn to use different HTML element, and style them up with CSS.

Assignment details

Do the following to complete this assignment:

{0}. [x] Clone the starting project code. DO NOT FORK THE REPO and DO NOT MAKE IT PUBLIC. This repo contains: * [x] the server code, server.js * [x] the Procfile that you need for Heroku deployment * [x] A starting index.html file that you will edit as described below * [x] A blank style.css file that you will use to style your own content {0}. [x] Edit index.html to your liking, provided it contains: * [x] At least one of these: * [x] An image * [x] A table * [x] A list * [x] An anchor * [x] Proper structure: * [x] Using div * [x] Using span {0}. [x] Edit style.css to meet these requirement: * [x] Use CSS Selectors: * [x] ID selectors * [x] Classes selectors * [x] Multiple classes on one tag * [x] Basic CSS * [x] Positioning * [x] Font styling * [x] CSS Pseudo Classes {0}. [x] Use a decent color scheme to style your webpage {0}. [x] Bonus if you make the page visually appealing, and/or use different fonts {0}. [x] Test your project on your local machine to make sure that when someone goes to your main page, it displays correctly. {0}. [x] Deploy your project to Heroku. {0}. [x] Ensure that your project has the proper naming scheme (cs4241-a2-yourGitHubUsername) so we can find it.

Resources

A good resource for general HTML/CSS/Javascript is the Mozilla Developer Network. This contains all the references you need for front-end design.

A good resource for font would the the Google Font project, with hundreds of different fonts to choose from so that you don't have to stick with Comic Sans. Or Impact.

If you want icons, look into Font Awesome.

Advanced Resources

Note that none of these are required for a good assignment, but it's generally a good idea to master a couple of frameworks if you are interested in developing web application in a real environment. As always, you should master the basics first before moving on to other parts

Bootstrap is a popular front-end framework for building responsive web pages and in general makes your life easier.

UIKit is another alternative to Bootstrap that you could look into. It is lighter than Bootstrap and supports animation, if that's what you are into.

Sass is an extension to CSS that makes maintaining/writing CSS easier and more fun. You basically write in Sass, and the complier will output a CSS file to use in production.