London | 26-ITP-January | Karla Grajales | Sprint 1 | BIkes-for-Refugees

[Grajales-K]

Bikes for Refugees In this project, I worked on following a wireframe to make the website look exactly as planned. I focused on fixing the links, styling the buttons, and centering the content to make it look professional. I also practiced how to use Flexbox for layouts, how to use CSS variables to manage colors easily, and how to organize my code using the right classes for each div.

[netlify]

✅ Deploy Preview for cyf-bfr ready!

Name	Link
🔨 Latest commit	5ff38bf
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-bfr/deploys/695ed79ac5aa0a0008756659
😎 Deploy Preview	https://deploy-preview-544--cyf-bfr.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jenny-alexander]

👋 Hi @Grajales-K, I remember seeing an email about this PR...and then I forgot about it. 🤦‍♀️ Would you still like me to review what you've done? I'm not familiar with this stretch exercise but I'm happy to review the code and see what can of feedback I can give!
By the way, how is the CYF ITP program going so far?

[Grajales-K]

Hi @jenny-alexander, thank you so much for your message. This was about fixing the image and placing the elements the same way as in the example picture. If you have the time and would like to, I would appreciate it if you could review my work. You have been very informative and instructive in your previous review, and I am definitely learning from you.

[jenny-alexander]

@Grajales-K - I took a look over the exercise guidelines and your PR. Your styled page looks very similar to the screenshot provided in the readme file. 🙌

I do see some opportunities for you to make changes that will make you dive a bit deeper into semantic html and accessibility.

Let's highlight 3 sections for now.

• Accessibility:
  • Can you run Lighthouse against your page and see if you can get the Lighthouse score to 100?
  • I think you may have forgotten the alt text on images. 🫣
• Semantic HTML: One of the goals of the exercise to replace as many <div> elements with a semantic tag. Maybe that's not possible for all of the <div> but an attempt should be made to replace a lot of them!
  • Semantic HTML is important because it gives meaningful structure to your page that helps screen readers and other assistive technologies know how to navigate your page. It's also helpful with SEO and search engines indexing your page correctly.
  • Here are some often-used html tags when setting up the layout of a page (in no particular order). :
    • <header>, <nav>, <main>, <aside>, <article>, <section>
    • MDN reference guide to help you: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
    • AI (ChatGPT, Gemini, Claude, etc) can help you if you ask it to give you a basic structure for a webpage with a header, main content, sidebar and footer.
• CSS:
  • When I hover over a button, the surround layout shifts a little bit. I suspect that the border you are adding on hover might be the culprit. Can you see if you can find a solution so that there isn't shifting of layout when hovering?
  • Is it possible that the 'Donate a bike today' button is using the wrong class?