Using JavaScript to manipulate HTML DOM and populate content dynamically.
What specific areas of your project would you like help with?In this solution, I stored data in a JavaScript Array. I would like help with any function of fetching data from data.json to populate data dynamically using JavaScript.
I really like that you kept your code simple and readable, and how you used grid for positioning elements — well done! Based on what I see in your code, I have a couple of tips:
First, try using semantic elements like <main>, <section>, <article>, and <footer> instead of relying only on <div>s to improve the semantics of your HTML. These elements help assistive technologies communicate the content's structure and hierarchy more effectively, which is crucial for individuals with disabilities.
Also, if you want your <div class="main"> element to be centered in the viewport, I recommend changing the position of the attribution to fixed. This will take the attribution element out of the document flow, preventing your main element from being shifted up. Try adding the following code to the attribution: .attribution { position: fixed; bottom: 0; }.
I see that fetching data from the JSON file works perfectly now — you figured out how to fix the error too :) For your JavaScript code, I have a small suggestion: it’s generally better to declare variables with const or let instead of var to avoid unexpected behavior related to variable scope.
Hopefully, these tips will be useful for you!
It’s clear you put a lot of creativity into this, nicely done!
I'm proud that I probably spelled this out more by heart than asking chatgpt because I've worked on the project before.
What challenges did you encounter, and how did you overcome them?Maybe the challenge I faced in terms of design was difficult because I didn't use the plus so I didn't get a figma design so I just worked with sample photos.
What specific areas of your project would you like help with?in terms of padding margin due to not getting the figma design
Hello! If you'd like, I can recommend preconnecting fonts to enhance styling. You can find the font names in style-guide.md and add them to the <head> tag (through the <link> tag) in your HTML. Alternatively, since the starter files already include the fonts in the assets folder, you can add them directly to your CSS using @font-face. I hope you find this advice helpful. Wishing you all the best with your projects!
