Project

Individual website development: students will design a website to showcase their academic, professional, and/or personal development. Examples include academic portfolio sites, professional portfolio sites (or a blend of the 2), resume or resume-complementary sites, entrepreneurial sites, personal sites, etc. Remember that this site will be presented in front of the class, so content should not be too personal or explicit in any capacity.

Sites may not be created on a drag-and-drop site builder (Wix, Squarespace, etc). You don’t need to start completely from scratch – but you can. If you borrow the “bones” of your site from an established site, you must include credit to the original creator above the fold on your home page. The students may choose whether or not to host the site live on the internet; static files hosted locally are also acceptable.

Please check your connections needs before your presentation date and plan accordingly. I have a VGA to HDMI adapter you can borrow, and a VGA to Thunderbolt adaptor as well. Depending on the room we are in, you may need something else in order to connect. For example, new macbooks require USB-C adapters which are not available here, you will need to procure it yourself.

Resources for online markup/coding:

W3Schools

https://www.w3schools.com/

W3Schools includes extensive tutorials about HTML, CSS and Bootstrap (a website style that allows for greater functionality on mobile), and also has an interactive editor built-in to help you practice.

CSS Zen Garden

http://csszengarden.com/

CSS Zen Garden has a large selection of FREE CSS templates for websites, that you can use in your HTML, to design your website to your liking.

Code Academy

https://www.codecademy.com/catalog/subject/all

Award-winning site dedicated to tutorials of many programming languages, and of course web development.

HTML Color Picker

https://htmlcolorcodes.com/color-picker/

Easy reference/explorer for CSS Hex Colors. Copy and paste hex codes.

Start Bootstrap

https://startbootstrap.com/ – A website that gives out free Bootstrap themes, all which include bootstrap for improved functionality on mobile.

If you want to, you have the ability to sign up for an account in the unix lab (link to Glenn Hoffman’s instruction page on how to sign up below), which will grant you access to a directory in which you can host a free website on the cs.umb.edu server. Translation: you can make a website from scratch publicly available.

If you choose to do so, it can give you practice in managing a website directory and sourcing images and stylesheets from your local directories. You will also most likely need a Unix account in the future, as some professors collect assignments from them.

Here is the link to the apply process: https://www.cs.umb.edu/~ghoffman/linux/apply_process.html

Rubric:

*Note that for technical elements, if you aren’t learning HTML and CSS from scratch, you can show us the inspect element page and explain where content is featured.

There are also plenty of sites that provide templates. Avoid these for the CS187 project, but feel free to check them out for yourself.

TEMPLATED

https://templated.co/

Free HTML packages that include CSS and JS, easy to implement and good practice for coding HTML with JS and CSS as the elements are already given to you.

HTML5 UP

https://html5up.net/ – Another website that has FREE HTML packages.

IDEs and Text Editors for online markup/coding:

These are programs that provide a more intuitive markup environment for website coding. Some of them transition easily from purely markup work to other coding, others are specialized for HTML/CSS.

Sublime Text: quite versatile

Brackets: specialized for HTML/CSS

Visual Studio Code: very versatile

Atom: Somewhat more trouble for initial setup, but great payoff.