All solutions

On this project, I don't have any specific questions for the community although feedback is always welcome.

This was the first time that I used CSS Grid to complete a project. The layout was pretty simple though and I don't have any specific questions. But feedback is always welcome.

As always, feedback is certainly welcome. However, I don't have any specific questions for this project.

While feedback is always welcome, I don't think that I have specific questions for this project.

Reading in a local JSON file was surprisingly difficult. In the end, I edited the data.json file so that it defined data to be a list of objects. Then, I loaded the file in index.html using a script tag. But to do this, I needed to be able to edit data.json which won't always be the case. So, what's the simplest way to read a local JSON file?

I have no specific questions on this project. But, as always, feedback is certainly welcome.

While feedback is always welcome, I don't have any specific question for this project.

The is a re-submission of this project in which I have taken into account community feedback as well as some new techniques that I have learned in the past few months.

This is a re-submission of this project where I have taken into account community feedback.

While feedback is always welcome, I don't have any specific questions for this project.

• To tint the header image, I positioned a div right on top of it and fiddled with the background-color of the div until the result looked like the design. Is there a simpler (and/or smarter) way?
• I used Sass in this project. With that in mind, which style files should I include in my git repo? Even though the .css and .css.map files are generated by Sass from the source .scss files, I included them both in my git repo as I'm not sure how to make the live site work otherwise.

• Using CSS, is there an easy way to add a circular border to an element whose box is not square? For this project, I carefully tweaked padding to turn rectangular elements into square elements before applying border-radius: 100%;. But, I kept thinking that there must be an easier way.

• This is a bit of a technical one, but here goes: for responsiveness, I used Bootstrap 5 which has its smallest breakpoint set to 576px. However, in my styles.css file, I had to use a breakpoint of 620px to get a seemless transition between desktop and mobile. I found the 620px value by trial and error. Initially, I'd assumed that I needed a breakpoint of 575px to match up with Bootstrap. Can anyone explain the discrepancy? Thanks in advance.

Regarding best practices:

• Are main and footer tags overkill for a project this small?
• Is it ok to use an h1 tag well into the html document or should h1 tags be placed near the beginning of the html document?
• For setting the document's root font size in CSS, should the specification style the html or the body element (or something else)?

Thanks in advance.