I'm open to all suggestions. Thank you for taking the time :))
I'm open to any suggestions.
Thank you for your time :))
I'm open to any other suggestions.
Thank you for your time :))
For the card's active state, on hover the color becomes lighter also on the ellipse hover the card retains its original color (basically the card isn't in a hover state) and only the ellipse is in a hover state, I ended up using javascript to toggle a class on the card to handle this, I'm wondering if there's a better approach.
Also, I'm open to any other suggestions.
Thank you for your time :)))
I would like to know if I'm handling the signup and signup properly, because currently, it's a single page and I hide one to display the other, and on submitting a form it normally reloads, I decided to preventDefault() for that also.
Thank you for your time :))
I would like to know if how I handled the active part is fine and if there's a better approach particularly the js part.
Thank you for your time :))
By learning how to make accordion-style drop-down elements.
What challenges did you encounter, and how did you overcome them?The container didn't expand when opening the accordion. Then I fixed it.
What specific areas of your project would you like help with?When you click on the accordion button in the mobile version, a blue background appears and then disappears.
Hello Sanya,
Congrats on finishing the challenge! 🥳
How to remove the blue background: In mobile browsers, interactive elements like buttons, inputs, text areas, links, and selects often get a default blue highlight. To remove it, you can use the following CSS rule that I found in a Stack Overflow post
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: transparent;
}
Other Suggestions:
For better semantics, I’d recommend using the <main> tag instead of a <div> for .content.
One last thing, I'd suggest moving the <span class="plus"></span> inside the button. This will ensure that both the text and the icon are clickable. It would look like this:
<div class="question">
<button class="accord-header" aria-expanded="false" aria-controls="content2">
<span class="plus"></span>
</button>
</div>
Great work overall, and keep it up. Happy coding :))
I am proud of finishing this in less than 2 hours but I wish it could be more perfect than this.
What challenges did you encounter, and how did you overcome them?I have challenges the image showing. the image was showing in my local browser but when I deployed it the image did not show, so I had to make multiple changes which also didn't work
What specific areas of your project would you like help with?how to work better with directories
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.assets/.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:
rating and thank-you sections within a single <main> tag.<section> elements inside the main tag to group related content, but avoid using multiple <main> tags.<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! :))
I added an additional button and message for if no rating had been chosen.
Hello Simon,
Great job completing the challenge 🥳
I have a couple of suggestions for improvement:
section tag instead of a div. Regarding the use of two h1 tags, it's generally recommended to have just one per page, but since only one will be visible at a time, it's likely fine. However, if you're using them purely for styling (like font size), you could consider using h1 for the first section and h2 for the second. This would maintain the semantic structure and allow you to adjust the font size and weight as needed..
Once again, great work! Happy coding :))
I am proud of making the functionality of this project more interactive and easy.
What challenges did you encounter, and how did you overcome them?I am still encoutering the challenge of responsivenesss. But somhow I handled it.
What specific areas of your project would you like help with?I am seeking help in Responsive of this project.
Hi itachidevs,
Congrats on completing the challenge! 🥳
Regarding the responsiveness, I don't want to overwhelm you with too many suggestions all at once, so instead, I’d recommend going through this learning path: Building responsive layouts It will help you get up to speed, and you'll also have the opportunity to practice what you’ve learned. (Make sure to check out the additional links included they’re also super helpful!)
If you need more assistance along the way, feel free to reply to this comment, and I or other helpful community members will be happy to help you out. 😊
Once again, great job, and happy coding! 💪
P.S. By the way, love the name! XD
Hello Itoro,
Congrats on completing the challenge 🥳, great work 💪🏿
Here's my review
profile and work cards are the only ones expanding to fill extra space. This seems to happen due to using grid-template-rows: repeat(2, 1fr) for mobile view. To address this, you could add grid-template-rows: repeat(7, 1fr) to the media queries targeting mobile devices, so the addtional space can be evenly distributed..card class and use it to apply common styles across all cards:.card{
background-repeat: no-repeat;
background-size: fit;
background-position: top right;
}
This will help you avoid repeating the same code for each card.
I hope these tips are helpful. Keep up the great work, and happy coding :))
simple form with javaScript validation, I used js for validity rather than using built-in attributes where in element input like required and pattern
Hello mohamedsec,
Congrats on completing this challenge. 🥳 Awesome work! I have a few suggestions that can help improve your page:
body element to center it both vertically and horizontally. You can add this in your media query for Desktop:body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
This will center the main nicely.
main.container I'd recommend adjusting the style to:main.container{
color: var(--DarkSlateGrey);
width: 100%;
height: 100%;
}
the position: relative isn't necessary here, using width: 100% instead of max-width and min-width will ensure that the container takes up the full width on mobile screens.
picture tag, I'd suggest the media query to (max-width:700px) instead of (max-width:600px) because you're using 700px as breakpoint for desktop. This ensure better image scaling.
Also, consider tweaking the image's height a little to have more height..content. I'd suggest checking this property and adjusting/removing it if necessary to avoid any unwanted overflow..com, It's better to allow all valid email formats unless you have a specific reason for restricting this.You can achieve this by breaking up the current loginForm.addEventListener and create a validateInput() function like this:
const validateInput = () => {
const formData = new FormData(loginForm).entries();
const {email} = Object.fromEntries(formData);
const isvalid = emailValidation(email);
if (isvalid === "valid"){
displayEerror.style.visibility ="hidden";
formRreg.style.visibility = "hidden";
formSucc.style.visibility = "visible";
}
if (isvalid === "invalid"){
displayEerror.style.visibility ="visible";
emailInput.classList.add("errorstyle");
}
}
Then, add an event listener to the #email input (emailInput)
emailInput.addEventListener('input', (e) => {
validateInput();
}
Additionally, update the submit event listener like this:
loginForm.addEventListener('submit',(e)=>{
e.preventDefault();
validateInput();
}
These adjustments will improve the user experience.
I hope you find these suggestions helpful, Happy coding!!! :))