Tribute to Dr. Ruth Pfau as my first ever webpage

Hey guys! Hope you guys are doing well. I have not completed all the lessons from the Responsive Web design certification yet but I just really wanted to build something on my own so here I have created my first ever webpage. I tried creating a tribute page using all that I could recall. I have heard that the actual projects in the certification come with some guidelines so probably I will make something better next time. I am too excited to share what I have created with you guys please check it out and give feedback :slight_smile:
https://codepen.io/Jtoob/pen/MWbojoR

Hi I love the webpage! It’s very clean, and I especially love how you did mobile first in terms of responsive design.

What I’m thinking as possible future improvements:

  1. correct the aspect ratio of your image, right now it seems vertically stretched.
  2. add another media query before the 800 px breakpoint, right now it seems like the image is too small for a screen between around 600-800px in width.

Hey! Thanks for the feedback, will surely look into this next time :slight_smile:

Welcome to the forums @jtooba70. Some things to revisit on your page;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 1/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.