Hi! Just finished the Tribute Page challenge:
It’s HEAVELY commented. I hope that’s a right thing to do.
Can you guys give me some feedbback? Thanks a lot!
CodePenTribute Link - https://codepen.io/sebastianmaciel/full/LeyqaO/
Dang, it’s so neat, and awesome! I wish I could make a tribute page like that.
I’m very impressed, a lot of tribute pages have poor design (not surprising for beginners), but yours is very unique and expressive. Good colors, consistent font family with differing weight and size, good whitespace, message conveyed directly and to the point – probably the best tribute I’ve seen on here.
I am not sure I like the numbering order. You have two columns spread out with numbering going from left to right then down. My problem is that the column is more closely spaced than the row. In other words, my eye wants to go from point 1 to 3 not from 1 to 2 because 1 and 3 are closer together and at glance seem related together. Personally, I tried reversing the order so 2 was below 1, and I didn’t like it. I like the horizontal reading, so I would create less space between 1 and 2 and more space between 1 and 3 so the whitespace aids the reading flow. Something like this:
I also am not sold on the alignment on the my-paragraph text. The headings are good center spaced, but usually I prefer the paragraphs to be left aligned as the sides line up and it is more conducive to reading. You would have to modify some of your HTML and possibly add a new container for the paragraph to center it, but think about something like this:
Be consistent with quotations. Point 3 doesn’t need them.
Just a final question, is this your original tribute page or are you remaking it?
Now to the code. Some people like comments at closing div tags, That’s fine and I do that occasionally, but some are just unnecessary and clutter it.
<!-- This is an h1. We know it's the title. If you want extra clarification use an id. -->
<h1 class="text-light text-center p-2 mt-4 mb-4">My 6 Tips to Innovate</h1>
<!-- Basically same as above -->
<h3 class="text-light text-center mt-4 mb-4">According to Steve Jobs</h3>
<!-- Are you seriously telling me this is an image... Do you think I'm stupid? -->
<img src="https://orig00.deviantart.net/c0ef/f/2011/312/b/a/steve_jobs_by_snizitch-d4fiov7.png" alt="Steve Jobs" class="rounded mx-auto d-block w-25 mt-5">
I think you can cut back on the comments for every line and just let the code explain itself. Start and end comments are fine, but I think your code would be more understandable if you just nested and spaced it more typically then adding a plethora of comments.
Hi! Thanks a lot for taking your time to review my code, you helped a lot! (Sorry for my English)
To answer you, I did it from scratch, looking a lot in the Bootstrap documentation. And actually I’m trying to do a personal tribute page, like giving a tribute for what that person added to my life, the info was taken from a pinterest image (to not overthink in english the things I wanted to write). I think it’s better that way.
About the 3rd point, it was something he actually said, that’s why I quoted it, but you’re right, that cuts the simetry with the other points 
You’re right about the reading flow. I’m gonna try to make it like a zigzag this time, like intercalating 1 to the left, 2 to the right and a little below the 1. 3 on the right a little below the number 2, and so on. I guess it could help to the flow.
I’ll try to add more spacing, I had a real trouble trying to make Boostrap making what I wanted.
Yes, also you’re right about the extremelly commented code. Honestly, I was thinking about the other begginers like me, the ones who really look into the code and trying to know exactly what is everything.
I take your advice, I will take away the OBVIOUS things 
And again, thanks a lot!