Hey guys! Just a quick update on the Freecodecamp.org course I'm taking.

Okay, time for me to fess up.

As I mentioned before in my previous post here, I started the Responsive Web Design training in freecodecamp.org.

Well... today I felt brave, so I went ahead and skipped a few lessons and headed straight to the first exercise.

And well... I uhh... Kinda cheated a little bit.

GOMEN

Yes! I know cheating is bad. That's why I'm keeping myself accountable by sharing this.

Anyway, the first exercise is to create a Tribute page that fulfills several User Stories or coding specifications.

here is an example of a user story:

My tribute page should have an element with a corresponding id="main", which contains all other elements

Simple enough right? Just create elements with the corresponding ids.

For those who don't know, to add an id to an element, you use the id property.

ex.

<div id="main"> </div>

this div now has the id called main

Anyway, so there I was writing my elements, creating my basic CSS.

Checking w3schools.com for correct syntax.

Shocked

What? checking your references is not cheating... well, for me it isn't! 😆

Anyway, what got me to cheat are the following user stories:

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.

For most of you, you probably already know the answer. Me on the other hand I was stumped.

I checked my notes, not there. I checked my screenshots, not there.

I tried looking up possible properties in w3schools, none of what I clicked worked.

So as I say...

And If there's something strange, with your code?

Who you gonna call?

Yes! I directly googled the text in user story 8, which pointed me to Stackoverflow

Which in part, gave me this answer:

 #image {
  width:100%;
  height:auto;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

I have encountered most of these properties in previous lessons except for these two

  max-width:500px;
  display:block;

max-width I can imply the meaning, it sets the elements maximum width to 500px.

display though... I really had no idea.

So off we go to w3schools to find out.

woosh

And it says

The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Which until now as of writing this, tells me nothing. 😵😵

So that's my progress so far... And that my lesson for today is... Read all the materials required before attempting to do the exercises. 😆😆

EDIT

Okay, I think I figured out how it works! And pardon my crappy paint skills 😅

According to w3schools.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

display block explanation.png

So if we apply that value to the image itself, that means that we stretch the image out to the left and right as far as it can.

and by using

max-width:500px;

we limit the width of the actual image to 500px, thus making it shrink to the center.

So did I get it right? Was my explanation the right answer?

Comment down below to let me know.

Also, did you think I cheated by Googling the answer?

Leave a comment down below to share your opinion about Googling answers for these types of exercises.

Thank you to Hashnode for an incredible BootCamp!

Thank you to our wonderful host Sam Sycamore for having our speaker Shaquil Hansford give a great talk! So much insight in that one

Thank you to freecodecamp.org for the wonderful courses. (please don't revoke my submission ✌✌)

For anyone curious, you can check out the exercise that I submitted here

Web Development: Biting off more than I can chew.

There is a reason why the exercises are at the last. 🤦‍♂️

EDIT