Today I'm trying to make up for missing a day yesterday so I thought I would try and do four courses on freecodecamp.org. It's a bit late and I'm tired from my personal training session, so I'm hoping it will go well but if it doesn't it just means I need to go to bed.
The first course of the day is Applied Visual Design: Set the font-size for Multiple Heading Elements. In this exercise, I have to change the font size of six heading elements.
At first, I wanted to go ahead and do
but then I thought about it a little bit more and remembered that I am doing CSS here and that isn't how you style an element. I went to the style section and entered:
h1 { font-size: 68px; }
I continued to do this for all six heading elements and it turned into this:
I passed the challenge and moved onto my second course of the day: Applied Visual Design: Set the font-weight for Multiple Heading Elements. This challenge was basically the same as the above, but with font-weight instead of font-size. I did the same thing as before but I made a mistake. I added px after the font-weight numbers and then realized my mistake after I ran my first test. I removed the px's and then I passed the challenge.
The next challenge was Applied Visual Design: Set the font-size of Paragraph Text. In this challenge, I had to change the font size of the paragraph element. As the styling for the p element was already done, I simply had to change the number of the font-size and this challenge was completed.
Last,but not least, was the Applied Visual Design: Set the line-height of Paragraphs challenge. This one was also pretty quick, though I had to add line-height to the styling I already completed in the last challenge.
Difficulty: 1 Time spent: 1 hr Takeaways:
- CSS is coming pretty easily to me as most of what I've learned so far is basically what I did today.I feel like it will get trickier as I go along because I still haven't learned how to create shapes and whatnot. I don't see how I can make CSS art out of what I've already learned.
- I need to learn when to use an id vs a class vs a variable vs HTML when it comes to styling. I still haven't figured out the difference between all of these and so far free code camp hasn't really explained it much. Is there a cheat sheet somewhere that may help me?
What did you learn today? Are you enjoying this content or would you rather read something else?Let me know in the comments below.