# Project 6: Coded Website
# Building your design in the browser
Points: 100
# Objectives
- Apply the HTML/CSS skills you have been learning.
- Practice the complexities of layout with CSS to better inform your web design decisions.
- Practice extracting web assets from design files.
- Learn to publish your site online.
# Task
You will be coding a responsive web layout representing your design from Project 5. Your task will be to extract the appropriate assets from your design files and layout a single web page in the format of an HTML file with an accompanying CSS stylesheet and all necessary images.
- Text should be live text (not represented by images).
- Links should be created, but can point to “#”. For example:
<a href="#">Link</a> - The use of “Retina” graphics and SVG images is a plus.
- Considerate use of the CSS cascade will be part of your grade.
- You will also upload your final files to a free web host.
# Where to Start
# HTML Boilerplate
You’ll be starting with a custom starter based on HTML5 Boilerplate. It has an HTML and CSS file already started.
Download the starter from here by choosing “Clone or Download” and “Download ZIP”.
You’ll find an “index.html” file for your markup, a “main.css” file, and some javascript stuff if needed and you have time.
You’ll find both files heavily commented, and I’ll go through them in class to give a little more context. I’ve also provided a lot of helpful base styles that don't really impact the look of your page but will make writing your CSS easier.
# Helpful Links
Before you start:
Everything you need is likely covered in our lectures, and remember, our course website is searchable.
These are great resources if you’re trying to remember how to do something in HTML or CSS.
Learn to Code HTML & CSS
CSS Basics
These are good trustworthy resources, especially for syntax (the exact code you need to write).
Mozilla Developer Network
CSS Visual Reference
# Planning Your Layout
I recommend you start this project by reviewing the above links, and then, printing out a black and white version of your page design. Then, take a red pen or marker, and start planning out your “block-level elements” and how it will fit together.
I encourage you to use VSCode and run the Live Server extension but feel free to use any code editor you wish.
# Design Notes
You will need to make this site “responsive” and work on mobile devices. You will implement your mobile and desktop designs from Project 5, but you will also need to make sure they work everywhere in between, possibly requiring additional media queries and even additional design solutions.
Larger monitors should be considered though. Decide if the design you have been given would look better with its main content areas background infinitely extending to the left and right, or if they should stop, and there should be a separate background.
# Grading
Since this project is a little different, you can use the following as a guide to the grade determiners on this project:
- Constructive Use of Time: No change.
- Problem Solving: I’ll specifically be looking at how you used code to solve the layout “puzzle”.
- Creativity: I’ll be looking for any creative solutions you implemented, and more specifically, how well you used the Cascading part of CSS to effectively implement the layout.
- Participation: No change, participating in critique and general participation in class.
- Presentation: Well organized code with no major errors (missing images, unclosed tags) will figure into this, as well as successfully publishing your site to the internet.
- Comprehension: I’ll be using your statement, your communication with me in class, as well as your class presentation, to judge your comprehension.
- Final Outcome: Overall, how close did you get to implementing your given layout.
But, you'll remember I said you won't be graded on code, but on effort. Communication with me is key if you're struggling, but I can see you're putting forth the effort, that will matter more than your exact code. I expect you to show you understand the CSS Cascade, and that even if you cannot finish your entire layout, or can't figure out a particular aspect, that your code is well-organized and readable.
# Publishing
We'll discuss this more in a lecture and an in-class exercise. You should work on this assignment off of your computer/jump drive/etc. using VSCode's Live Server extension, or something equivalent. You'll use Netlify to publish your work, which will be covered in that same lecture.
# Presentation
After publishing, place a link to your site in a section on your InVision board called "Assignment 6"
You are also required to write a short summary (150–200 words) on your findings from this assignment, with emphasis on any insights you gained by using HTML and CSS on a real project. Place this as an additional text note on your InVision Board.
- Arrange your summary in an InVision text note.
- Paste your link to your live site in an additional InVision text note.
Additionally, I'd like you to compress your site folder and send to me via Slack (if your Zip file is too large for Slack, you can try using E-mail, Dropbox, Google Drive, etc.).