Learning Objectives
- Getting Started With CSS
- Basic Selectors
- Understanding Values and Units
- Fundamental Concepts
Materials
If you are using Odin as your primary learning materials, please go to each link in this list and read through the content on that page. If there are links you are redirected to as you read/work through the content, follow those links as well and read the content there also.
- The Odin Project – CSS Foundations
- The Odin Project – The Box Model
- The Odin Project – Block and Inline
- The Odin Project – Inspecting HTML and CSS
If you are using Treehouse as your primary learning materials, please go through the following courses in treehouse:
- CSS Basics (191 mins)
Assignments
Coding Assignment
This week you will be transforming the look and feel of your webpage using CSS:
An example site to review is located here:
Elliot Thompson Sample Portfolio
Mindset Assignment
This week we’ll be getting in touch with our creative side! Designing a website can be an intimidating task; so many colors and fonts and icons and graphics! When it comes to designing the structure (home page, about page, etc.) and how you link JS, HTML, CSS, and other files there are clear rules or at least guidelines in order for the site to be functional. But when it comes to picking a color and font for the site anything goes, right? While you do have a lot more creative freedom (which is fun for some and terrifying for others) when it comes to the look of your site, there are still useful guidelines to keep in mind. After all, we hope that more than just you and your team and the client you’re building for will be viewing and using your site!
This article from WebSpecDesign gives a good introduction to beginners about color theory and usage on the web. In almost any resource about color theory on the web you’ll notice references to accessibility. We’ll dig more deeply into accessibility the last week of class, but since you’ll be choosing colors and fonts this week, please be sure to use the tool in the second question below by entering your font color as the “foreground color” and your page/background color as the “background color” when making some of your creative decisions this week while working with CSS.
– What was something new you learned about colors/color theory and how do you think that knowledge will effect your design choices?
– Try out some different background/foreground color combinations using this tool from A11y. Are there any combinations that surprise you in terms of not meeting accessibility guidelines?
When you’ve completed your Coding Assignment, and have read and thought about the mindset questions above, submit ALL of your assignments (link to your pull request on GitHub and mindset) using the Homework Assignment Submission Form.