Help with Colors and Custom Styles for HTML Cheat Sheet Project

Hi all. I’m working on this project: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-improved-styling-with-css/modules/wdcp-22-build-your-own-cheat-sheet/projects/independent-project-html-documentation
I have the HTML written, and I think I can write the CSS without a problem once colors and styles are picked, but it’s that which is giving me trouble. I’m completely blind, so I have no idea what would look good. Would anyone be willing to help me choose colors and custom styles for my project? Thanks.
Edit: Just created a pen on CodePen with my work so far. Here’s the link: https://codepen.io/Lanie_Carmelo/pen/vYdMQNe

Hi there!
I styled your table for you. I don’t know if other people will like it but looks good to me :slight_smile:
For documents’ body I chose almost black background color #001219. Your h1 and h2 I made orange #ffa90a and placed them in the center. I also changed font-family to be sans-serif.
I centered the table too, using margin property.
Table head has background-color #0A9396 (which is kinda blue-ish) and text inside it is the same as document body: #001219.
Table body has background-color #fbf8ef (beige) and the same color of text as table head.
I also added some padding 0.25rem to and tags.

I’m not sure if the description was helpful. As I got it, you just wanted me to pick colors and style, and you will convert it in CSS yourself. If this is not exactly what you meant, I can provide you with the CSS stylesheet that I just described.

1 Like

Hi. Thanks for your help. I’m trying to do as much of the work as I can independently, so that’s why I thought I should at least try and write the CSS. If you could provide the work you did, though, then I could compare it to what I do and use it if my attempt doesn’t work out. CSS is extremely difficult if you’re totally blind.

1 Like

Here is the CSS:

body{
  background: #001219;
  color: #ffa90a;
  text-align:center;
  font-family: sans-serif;
}

table{
  margin: 2rem auto;
}

thead{
  background: #0A9396;
  color: #001219;
}

tbody{
  background: #fbf8ef;
  color: #001219;
}

td, th{
  padding: 0.25rem;
}

Please, don’t hesitate to contact me if you need any assistance or have any questions. I’ve recently finished Full Stack Path and struggled a lot. So, I would be glad to help someone who is at the beginning of it :slight_smile:

3 Likes