first projact (css html)

Community feedback

• 

  P

  MELT•170

  @MeltedGreenVelvet

  Posted over 3 years ago

  I think your solution is looking great, and congratulations on your first challenge! I hope you enjoyed it, and you continue to put out other completed challenges as well!!

  I have a few suggestions:

  1. Vertical alignment is a pain. On my display, your component is not vertically aligned. In this case, utilizing flexbox would be the easiest option. Not to mention, if you get comfortable using flexbox, you'll have more flexibility with other forms of alignment in future projects as well.

  2. If you were to check #D3D3D3 (light gray) against #FFF (white), you'll find that the color contrast is at a 1.50, which is calculated as "very poor" in terms of web accessibility. This means that the font color is hard to read, especially for folks that have disabilities. There are color contrast checker web apps that are great for this. The standard is at least a 4.5:1 ratio. This is more of a web design thing, but important if you decide to change the color of the given design's font. I installed a Chrome extension called Slick Color Picker that lets me color pick straight from the webpage. It's helpful in situations where I don't know the exact color of something. It gives you the exact hex code you need for your code. (It's also great if you enjoy digital art and graphic design!!)

  3. I see that you have a mix of inline and external CSS, plus an empty internal style tag. Using solely external CSS is best practice. It improves website performance and efficiency. On a more human level, external CSS is viewed as more organized. If you were to have a large website with many webpages and lots of styling, inline CSS would quickly get confusing, especially for those on your team who didn't create the original code.

  4. The universal selector is VERY handy. I can definitely understand why you'd pick that one to define your default styling. But, it's also hefty. It can slow the rendering of your webpages, so it's best to use it sparingly. It interrupts CSS inheritance, and you may have to write more CSS to account for that. A body selector, instead of a universal selector, would be great to define default styling.

  I hope my suggestions are helpful and make sense! Let me know if not!!

  00

  Marked as helpful