I have made some changes to my resume page from last week to serve as examples of the research I did regarding the topics this week.
The following two sections discuss how to effectively use color and understand the box model. On this page I have added a little bit of color to highlight the sections.
I have also used a bit of internal CSS to demonstrate the box model on this page as well.
Considering that CSS deals with the appearance, styling, and design of a webpage, it makes a lot of sense to really understand how to implement color well when using it to create a page. I would say the key things to keep in mind before the actual implementation of color are color theory and accessibility. A good understanding of concepts like hue, saturation, lightness, and contrast will aid in making a page look visually appealing. Also understanding how the human visual system is affected by color arrangement is helpful--for example, the same color could look different when paired with another color, since we try to see contrast. Understanding that individuals can be color-blind can assist in making a webpage more accessible, and choosing high contrast colors can help with making things more visible for those who don't have very sharp vision. Applying color in CSS is not too different than HTML. You can use the RGB values, HSL, or hexadecimal values and different parts of a page can have color applied to them, like borders, text, and backgrounds.
The CSS box model is made up of four parts: The content box, padding box, border box, and margin box. The content box is where the content of whatever element is bound to the box is going to be displayed. The padding is the space in between the content and the border. The border is pretty self-explanatory. The margin is the space between the border and any other element on the page. Boxes also have an outer and inner display type. The outer display type dictates how the box itself is displayed on the page, while the inner display type dictates how the elements within the box are displayed. The main two types are block and inline, as they are the default settings. An understanding of the box model can help a web developer display their content in a reliable way across different platforms, and allow them more precise control over how their site is designed.