-
Notifications
You must be signed in to change notification settings - Fork 5
Bootcamp Part 5: Make it Pretty
Deadline: December 3rd 11:59pm ET
Now, make your app pretty using some basic CSS!
To Get started, check out this page for basic CSS knowledge: https://www.w3schools.com/css/css_examples.asp.
Once you skimmed through it, check out this page to use CSS with react components: https://www.w3schools.com/react/react_css.asp.
CSS stands for Cascading Style Sheets. It's a language used to describe the presentation of web pages. While HTML structures the content of a web page, CSS is responsible for how that content is displayed. You can control colors, fonts, spacing, and layout using CSS.
Go through this helpful tutorial.
Understand CSS selectors, which help you target specific HTML elements for styling. Checkout CSS properties like color, font-size, margin, etc.
Bootcamp Contents:
Explore ways to set colors and backgrounds for elements, including solid colors, gradients, and images.
Learn how to style text with properties like font family, font-weight, and text-align. Dive into Google Fonts for more font choices.
Master the box model, which describes how elements are rendered as boxes with content, padding, borders, and margins. Control layout with width, height, padding, margin, and border.
Discover modern layout techniques using Flexbox and Grid. These tools allow you to create complex layouts with ease, arranging elements in rows, columns, and more.
Learn the importance of responsive design for modern websites (like Datamatch!). Use media queries to adapt your styles based on screen sizes. Make sure your app works on both a monitor and a smartphone!
CSS can help produce cool visual effects, which makes Datamatch attractive. Check out this this and this site for some ideas:
To wrap up this week of the Boot Camp, style your Flash Card app with one of these design categories. Don't get discouraged if you get stuck, and consult Google, ChatGPT, and your helpful web leads for help!
Once you're done, submit your work in this form.