eliasfang / sp21-cse110-lab3 Goto Github PK

Is your feature request related to a problem? Please describe.
The code can be difficult to read and it is hard to quickly look over.

Describe the solution you'd like

• Comment /* write down comments to make your css easier to read */

Describe alternatives you've considered
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
The page is unresponsive on multiple devices.

Describe the solution you'd like

• Responsiveness /* make your website friendly for multiple devices */
  • At least one query based on the screen width
    • Media Query

Describe alternatives you've considered
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
The page does not have a clean look because everything is aligned left and not consistent in size.

Describe the solution you'd like

• Unit /* units of measurement for sizing and spacing your elements */
  • Use 3 unique relative units total
  • Use 3 unique absolute units total
• Box Model /* configure the containers that holds your HTML content */ (“long” and “short” refer to longhand and shorthand syntax and should give the same results. They’re simply different ways to declare your style rules, use at least one of each syntax)
  • Margin /* spacing between html elements */
    • Long (margin-top, margin-bottom, margin-left, margin-right)
    • Short (margin: )
    • Auto margins: margin: auto
  • Padding /* spacing within html elements */
    • Long (padding-top, padding-bottom, padding-left, padding-right)
    • Short (padding: )
  • Borders (Links to an external site.) /* borders around html elements, hint: apply borders before testing out padding and margin to better understand the difference between the two */
    • border-style
    • border-color
    • border-width
    • border-radius
• Display
  • Experiment with these values: none, block, inline-block, inline. Include at least two of them in your page.
  • Apply theses values to the display property
• Sizing /* set the height and width for an element */
  • height / width
  • max-width / min-width /* add sizing constraints for responsive web pages */
• Position /* element positioning on the page */
  • Experiment with these values: static, relative, fixed, absolute, sticky. Include at least two of them in your page.
  • Apply these values to the position property
• Pseudo-class (Links to an external site.) /* elements that exist in your document conditionally */
  • :hover
  • :active
• Layouts
  • Flexbox /* allow your elements to lay themselves out automatically */
    • apply flex to the display property
    • Must have more than two children within the element that is using flexbox. Must use minimum three of the flexbox related attributes
  • Grid /* instantiate a grid for your layouts */
    • apply grid to the display property
    • Must have more than two children within the element that is using the grid. Must use a minimum of three of the grid related attributes

Describe alternatives you've considered
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
All of the text of the page looks the same with very minimal size and style differences.

Describe the solution you'd like

• Text /* style your text */
  • color
  • text-decoration
  • text-align
• Fonts /* pick varying font styles to make your text fun to read */
  • Include and use a 3rd party font (https://fonts.google.com/ (Links to an external site.)). You can load the font in either your HTML or your CSS

Describe alternatives you've considered
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
The GitHub Page looks very bland in black and white.

Describe the solution you'd like

• Color /* apply colors to your HTML elements */
  • rgb(r, g, b) or rgba(r, g, b, a) /* red, green, blue, alpha values */
  • #FFF or #FFFFFF /* hex codes */
  • hsl(h, s, l) or hsla(h, s, l, a) /* hue, saturation, lightness, alpha values */
  • Color name (i.e ‘orange’)
• Background /* apply background styles to your elements */
  • background-color

Describe alternatives you've considered
N/A

Additional context
N/A