Materials
Read the following chapters/sections in the Road to React text:
- React Styling > CSS
- React Styling > CSS Modules
- React Styling > Styled Components
- React Styling > SVG
Assignments
Coding Assignment
The lesson assignment for this week can be found here:
For DOVE class: Dove Lesson 3.1
For all other classes: Lesson 3.1 Coding Assignment
When the link opens read and follow the instructions. Be sure you create a new branch (lesson-3-1) on which to do your assignment work. When your work is complete make a pull request from your lesson-3-1 branch into the main branch of your own repo. Submit the link to your pull request via your usual Assignment Submission Form.
Below is an example of a styled todo list application:
Explore other real-word examples here:
https://blog.hubspot.com/marketing/best-to-do-list-apps-tools
Mindset Assignment
This week we’re discussing design. Designing a website can be an intimidating task; there are so many details you need to consider from designing the structure (home page, about page, etc.) and how you link JS, HTML, CSS, and other files to optimize functionality all the way to seemingly smaller details like picking a color and font for the site. 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.
We can divide design into two ideas: layout and style. This article from Adobe is a lengthy one, but covers basically all the variables to take into account when creating a layout. Where you place things, how much space you put around them, and the fonts and colors too, all go into the design of a site. So now let’s talk style, this article from WebSpecDesign gives a good introduction to beginners about color theory and usage on the web and also touches on the importance of color contrast to make your site accessible for people with visual differences. We won’t have an opportunity to dive into accessibility this course, but if you’d like to learn more about that you can visit the WebAIM page.
Some may wonder if the color of your background or how much space you put between elements really matters all that much. Take a moment and think if you ever been somewhere (in person or on the web) that was new to you and you needed a minute to find your way around? If it was a physical location, how did you find the exits/bathrooms/stairs? If it was a website, were you able to find the page that had the information you wanted easily, like the product description page? Visual cues that can be given through styling or layout can go a long way in whether or not the user has an easy and pleasant experience navigating their environment, or a challenging and frustrating time. Just like whether or not there are clear bathroom signs, your design choices can make for a great or uncomfortable experience.
Based on the Adobe and WebSpec articles above…
Please answer the below prompts in your assignment submission:
- Think about a time when a layout personally impacted your experience (like the examples of bathroom signage or finding product details on a page) and describe the scene for us. Also share how you felt when you could/couldn’t find what you were looking for.
- In the Adobe article, were there topics about layout that surprised you? If so, which one(s) and why?
- What are some of your most favorite and least favorite design features as a user?
- Since you’re working with styling this week, try out some different background/foreground color combinations using this tool from A11y (another great accessibility resource). 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 (coding and mindset) using
