Hi, fellow freecodecampers!
I have finished my first freecodecamp project, and I would love to hear some feedback from you.
Here is my project: https://codepen.io/Darthcolo/full/WNpGZZR
Here is the GitHub repository: GitHub - Darthcolo/freecodecamp-01-Build-a-Tribute-Page: Responsive Web Design Project #1
My key takeaways from this project:
- I started by complicating things too much, trying to use flexbox, but after viewing the source code of the example provided by freecodecamp I simplify the project considerably.
- The HTML semantic elements: at first I wasn’t sure about the structure, so I used this link to shine a light on it: Using HTML sections and outlines - Developer guides | MDN
<body> <header> <nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> <h1> Page Title </h1> </header> <section> <h2> My Blog Posts </h2> <article> <header> <p> Article Title </p> </header> <p> content </p> </article> <article> <header> <p> Article Title </p> </header> <p> content </p> </article> <aside> <p> Author info </p> </aside> </section> <footer> Copyright Info </footer> </body>
- I used media queries to change line heights, widths and font sizes of ceratin elements (most noticeable in the block quotes).
max-widthproperty applied to boxes and images is very powerful! Great for responsive design.
- I had to review many concepts that I considered learned, but I think this is why we are building this type of projects.