Turn in Exercise 2: CSS Basics
- Upload files to U-Drive. (Drag your 360 folder to the myweb folder on the U:drive if you haven’t yet)
- Upload PDF of CSS and HTML and screenshot of web browser to the #exercise2 Slack Channel
Review CSS
Click to See Resources:
W3Schools.com
CSS Class Lecture
CSS Cheat Sheet
Additional help:
- What is CSS?
- CSS Terminology
- CSS Selectors
- CSS Locations (How to link to style sheet)
- Web Font Tutorial
- Box Model
Free Code Camp to test your skills and learn along the way
W3 Schools Video Tutorials
Crash Course in CSS Video Tutorial
Project 1: Website Redesign
Following process was due today:
- 3 desktop home pages Example
- links to designs uploaded to #project1 Slack Channel using Invision.app Freehand or a Prototyping Tool such as Figma or Adobe XD.
In Class Critique:
Critique the Following:
COMMUNICATION
- Brand Values/Communication – accurately & appropriately representing your organization
DESIGN
- Layout, typography, color, assets/treatment, contrast, negative space, alignment, hierarchy, unity…
USABILITY
- Navigation – clear groupings, labeling, prioritizing, clear and consistent location
- Content/Organization – choice of content that is on the page in addition to the navigation. Prioritization and flow of content.
Due Next Class
Project 1: Website Redesign
- Choose a direction based upon the class feedback and refine the Homepage design.
- Apply the refined design to a mobile layout.
- Start working on your first version of the Secondary page.
- Optional: If you can get to the Tertiary page – design the first version of that as well.
- Upload a link to your designs again on #project1 Slack Channel.