Hello Balogun,
Great work completing the challenge! 🥳
You asked about working better with directories, and a good approach is to start with ./ which represents your current directory (the directory the current file is in). If you need to go to the parent (previous) directory, you use ../. From there, follow the directory structure as needed.
For example:
/my-project
│
├── /assets
│ ├── /images
│ │ ├── logo.png
│ │ ├── banner.jpg
│ │ ├── profile-avatar.png
│ │ └── background-pattern.svg
│ └── /styles
│ └── main.css
│
├── /src
│ ├── /components
│ │ ├── Header.js
│ │ └── Footer.js
│ ├── /pages
│ │ ├── Home.js
│ │ └── About.js
│ ├── /utils
│ │ └── api.js
│ └── index.js
│
├── /public
│ ├── index.html
│ └── favicon.ico
│
├── .gitignore
├── package.json
└── README.md
Let’s say you're working in index.html and you want to use the profile-avatar.png image. The correct path would be ../assets/images/profile-avatar.png. Breakdown:
../ takes you to the parent directory.- Then, it navigates to the sibling directory
assets/.
- Inside
assets/, it goes to the child directory images/; finally, it accesses the file profile-avatar.png.
Scrollbar Issue
To fix the scrollbar issue, I recommend adding a CSS reset like this:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This reset removes the browser's default margin and padding, and the border-box ensures that padding and borders don’t affect the set height and width of elements, preventing unwanted scrolling.
HTML Structure
It is generally recommended to have just one <main> tag in a document to represent the primary content of the page.
Here’s what I’d suggest:
- Wrap your
rating and thank-you sections within a single <main> tag.
- Use
<section> elements inside the main tag to group related content, but avoid using multiple <main> tags.
- In cases where content doesn’t fit semantically into <section>, you can use
<div> for grouping.
Here’s an example of how the structure would look:
<main>
<section id="rating-section">
<div class="rateing">
...
</div>
<div class="rateword">
...
</div>
<div class="number">
...
</div>
</section>
<section id="thank-you-section">
...
</section>
This structure allows you to keep the content well-organized and semantically correct. I also recommend reading more about semantic HTML. A great place to start is this freeCodeCamp article on semantic HTML5 elements..
Cursor Pointer
For buttons (or clickable elements), you can add a cursor: pointer; rule to the :hover state. This gives the user a clear indication that the element is interactive.
Example:
button:hover {
cursor: pointer;
}
I hope these tips help. Once again, great work, and happy coding! :))
