Code Review: Healthy Recipes (CSS)

#1

I just completed this. Was hoping someone would review what I did and give me any suggestions? Code in question is CSS.

img {
  height: 150px;
}

h2,
.ingredients {
  list-style: square;
}

body {
  font-family: Helvetica;
}

.time {
  color: gray;
}

.description {
  font-size: 20px;
}

.external-link {
  color: SeaGreen;
}

#cook-time {
  font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>
  <title>Quinoa and Kale Salad Recipe</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

  <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/salad.jpg" alt="Kale Caeasar Salad"/>
  <h1>Kale Caesar Quinoa Salad with Roasted Chicken</h1>
  <p class="description">Kale and quinoa provide a healthy base for roasted chicken topped with a light Caesar sauce.</p>

  <p id="cook-time">Total time: 45 minutes</p>

  <h2>Ingredients</h2>
  <ul class="ingredients">
    <li>1/4 cup kale</li>
    <li>1 cup Quinoa</li>
    <li>2 tbsp Olive Oil</li>
    <li>1 chicken breast</li>
    <li>Caesar Dressing</li>
  </ul>

  <h2>Preparation</h2>
  <ol>
    <li>
      <p>Prepare quinoa and roast chicken until golden brown and 165 in middle.</p>
      <p class="time">Time: 40 minutes</p>
    </li>
    <li>
      <p>Toss quinoa, chicken, kale, and Caesar dressing until coated.</p>
      <p class="time">Time: 4 minutes</p>
    </li>
    <li>
      <p>Add walnuts and olive oil as garnish.</p>
      <p class="time">Time: 1 minute</p>
    </li>
  </ol>

  <p class="citation">Find this recipe and more <a href="http://www.myrecipes.com/recipe/kale-caesar-salad-chicken" target="_blank" class="external-link">here</a>.</p>

</body>

</html>
2 Likes
#2

It looks good to me! But then again, I’m also learning. :raising_hand_man: :+1:

2 Likes
#3

It seems pretty great! I think that if you want suggestions, one of the big things that I always try and do is avoid using color names… like “SeaGreen”. Look for the hexadecimal equivalent, so that no matter which browser they’re using, it will always look the same. This can be accomplished with a quick Google search, which will return that sea green is #2e8b57. Hope that helps, and great job!

3 Likes
#4

Named colors are more than a convenience. They are an aid to accessibilty. A user agent can parse out the color name and decide whether or not it fits the user profile. If not, revert to a default.

There is no crime in specifying color names.


We’re pushing forward and the pressure on vendors to keep up with or ahead of the curve is sufficient enough for us to expect nominal behavior.

3 Likes
#5

The color SeaGreen is what the project said to use. Blame it. Yes at the end I could of changed it. What I was looking for I guess was if the specificity/order of things called was optimal.

1 Like
#6

There is little we concern ourselves with what is optimal as that implies efficiency and optimization. In CSS, the order matters as it has an effect on which rules will apply to a given selector. If the page looks how you intended then the order must be correct, or at least not incorrect.

1 Like
#7

I always try and base my answers off of research I do if I feel that my answer would be bias. In this case, I based it off of the multiple answers here:


It is rather old, has this changed? I would love to improve my knowledge on this. Obviously, you don’t need to put in support for IE6, but sometimes the system colors can change depending on where you load the site from, as it depends on the current browser and system to determine what color it is. If it is your branding, then it may look off, or different than how you want.

2 Likes
#8

Support for named colors has doubtlessly improved these past few years so any cautions from ten years ago are less of a concern. If we feel the need to use stricter syntax then there is no harm in that for reasons of backward compatibility.

1 Like
#9

Alright, thank you for your help. This will help me later, as well as him, I’m sure! :smiley:

2 Likes
#10

OK, so I am new to HTML/CSS so its hard for me to be specific. Yes that did answer my concern. The other concern is it readable to others. I am big on that period from where I come from. But I was also concerned with the order of what goes where so it doesn’t want to override or re-render anything.

#11

Being as HTML and CSS are both declarative languages, what goes where is all up to us. We’re the boss as to placement and presentation.

If we want to optimize for size our style sheet then maximizing inheritence will be the first order of business. D. R. Y. is the order of the day and it plays out in several ways. If several selector rules give the same property values then that group of same props can be abstracted away to a new selector rule. Or it might suggest a generic rule.

We write the rules. We get the effect we want, or we go back and study it again. Rinse and repeat.

1 Like
#12

It looks pretty great, what I can add to all other great comments and suggestions are below:

  • I think I see some misuse of Id’s and classes, using ID’s and Classes could be a little bit confusing as in the beginning. However, planning the structure of your design in advance and having D.R.Y code principle in mind as @mtf mentioned would help a lot knowing what CSS rules are completely unique (ID) and what rules are somewhat generic and can be used at multiple places (classes)

  • Having Responsive design in mind is always a virtue, even from early stages of learning. Not using “fixed” values for sizes and measures would definitely help you along the way. I recommend the responsive design course of Codecademy which gives you a great foundation.

there are also further topics that can be discussed there like using Sass, applying semantic HTML, and have accessibility in mind but these could be seen as more of the next steps in the journey.

Good luck!

2 Likes