I'm open to help in all areas. In particular, I'd like to hear feedback on HTML for structure and accessibility, SCSS for better organisation and best practices, and JavaScript for functionality and logic. Any insights or suggestions for improving my approach would be great.
I'd like to improve my styling techniques and refine my HTML and JavaScript skills. Any feedback on best practices or optimisations would be greatly appreciated!
I'd like to learn more and explore the use of SCSS to manage complex network layouts, as well as learn about alternative approaches to improving responsiveness and scalability in HTML.
I would like to explore the use of SCSS to manage complex grid layouts and learn about alternative approaches to improve responsiveness and scalability.
I'd like to learn more about advanced CSS and SCSS techniques, especially how to create more effective and reusable styles. I'm also keen to find out more about clamp() and how to make future projects more accessible.
Orgulhoso por ter dado mais um passo np aprendizado de programação.
What challenges did you encounter, and how did you overcome them?Um dos maiores desafios que encontrei foi no posicionamento dos cards.
What specific areas of your project would you like help with?No final não consegui completar a estilização do top dos cards, se alguém puder me ajudar seria grato.
Your project looks so good! I don't have to give you feedback. Well done and keep it up!
Great job on your project! It's pretty similar to the suggested design, and I've tested it out and it works well. Your HTML structure is already strong, with semantic elements such as <h1>, <label>, and <ul>. But there are a few areas where you could make your code even better by improving accessibility and maintainability.
One big thing you can do to make this form more usable is to use a <form> element instead of <div class="form">. This small change makes the form more meaningful and it means that users can submit it by pressing 'Enter', which is easier for them.
You've got a label for the email input, but adding a for attribute would properly associate it with the input field, which would make it easier for screen readers to interpret.
<label for="input">Email Address</label> <input id="input" type="email" placeholder="email@company.com">
Another key thing to keep in mind is to make sure error messages can be seen. At the moment, when an error message appears, screen readers may not announce it properly. To fix this, add aria-live="polite" so it gets picked up when it becomes visible:
<span class="txt hidden" aria-live="polite">Valid email required</span>
So, not only is it more accessible, but adopting the BEM methodology can really improve your SCSS structure. For example, some class names are too general, which makes scaling and maintenance more difficult. BEM provides a clear naming convention that keeps styles easy to work with. Instead of this:
<div class="container"> <div class="content"> <h1>Stay updated!</h1> </div> </div>
Using BEM would structure it more effectively:
<div class="newsletter"> <div class="newsletter__content"> <h1 class="newsletter__title">Stay updated!</h1> </div> </div>
Your styles could be improved with nesting to make them cleaner and more readable. For example, instead of defining styles separately for <ul> and <li>, you can structure them within a block like this:
ul { // Better to use a BEM class like .newsletter__list display: flex; flex-direction: column; gap: 10px; li { // Better &__item display: flex; gap: 10px; list-style: none; font-weight: 400; } }
You're doing really well and these improvements will make your project even stronger. Keep up the good work and happy coding!
Great job on your project! The design is excellent – every element fits perfectly into the proposed layout, and your attention to detail is impressive. I was particularly impressed by your well-organised SCSS. It has a clear structure that makes maintenance easier, and it means that we don't have to scroll through endless code to look for or fix things. Your approach is both elegant and efficient, and I'm inspired to adopt similar practices in my own projects, especially the bigger ones.
Well done on utilising the BEM methodology. It makes the code so much easier to work with, and it's great to see such a well-structured approach in action.
I have a few suggestions on how you could further enhance your code and workflow in future projects:
Accessibility:
When you're developing a website, it's really important to not overlook accessibility. If you provide meaningful descriptions, it'll improve the experience for users who rely on assistive technologies and it'll also be better for SEO. Instead of leaving the alt attributes empty or using aria-hidden="true", it's better to include descriptive text. For example, rather than hiding the Facebook icon from screen readers, you could add alt="Facebook icon" so that assistive technologies can recognise it.
User Interaction:
The social share panel opens when clicking the button, which is great. But it would be even better if it also closed when clicking outside of it or pressing the Esc key. If you could make it so that JavaScript could do this, it would make it feel more user-friendly.
Overall, you have done an amazing job. Keep up the excellent work, and happy coding!
I learned both grid and flex well now.
What challenges did you encounter, and how did you overcome them?How to make set difference area for cretain box, but eventually i fixed that.
Great job on your project! You’ve made a solid effort with the layout. Here are a few tips that might help you take it to the next level:
Nice use of semantic HTML. It’s good to see you using elements like main and article. These tags make your code more meaningful and easier to read.
Be careful with identifiers. I noticed that some ids, like user-profile, user-name, and user-status, are used more than once. In HTML, id is supposed to be unique for each element. If you reuse it, it might cause problems, especially when you start working with JavaScript. It’s better to use class for cases like this.
Accessibility is important. Adding alt attributes to your images can really improve the experience for people using screen readers. For example, instead of leaving the alt attribute empty, you could write something like alt="Profile picture of Daniel Clifford". It’s a small change, but it makes your site more user-friendly for everyone.
Responsive design tips. Your layout looks great on desktops and very small screens (like under 375px), but on larger smartphones and tablets, it could use a bit more balance. Sometimes the grid gets too narrow or overflows. Fixing this will make your site look good on all devices.
Try a mobile-first approach. Have you thought about designing for smaller screens first? It can make things easier because you start simple and then add styles for larger screens using media queries. Here’s a quick example to show what I mean:
/* Default styles for mobile screens */ main { display: flex; flex-direction: column; width: 90%; margin: 4rem 0; } /* For tablets */ @media (min-width: 768px) { main { /* Use two columns for better readability on tablets instead of four */ grid-template-columns: repeat(2, 1fr); } } /* For desktops */ @media (min-width: 1440px) { main { grid-template-columns: repeat(4, 1fr); } }
These adjustments will make your project look even more professional. You’re doing great, so keep it up and happy coding!
I am really pleased with the layout and look. My main struggle was figuring out how to align the elements on the grid. Spent a bit of time at the beginning working on the SASS architecture. The code itself didn't really take me so long, I spent a lot of time doing research and looking at different ways to get the result.
What challenges did you encounter, and how did you overcome them?I think I spent most of the time on the cards, how to make the layout and spacing work for them. I had a look at other peoples solutions which was interesting to see how it could have been done differently. Also the box-shadow was fiddly, I made a custom colour because the lightest one provided was too dark.
I chose to keep everything inside the grid. I have a min height and width on the cards which made grid alignment a little trickier. I wasn't sure if there was another way to fix the height/width of the cards without affecting the grid layout. I didn't want them to grow/shrink but wondering if I could have used a different method to achieve the same results. Thought about putting the headings outside the grid but the gap was too big. Also I was assuming this would be the component within a page so it should be all in one container.
Great job on your project! Here's what I noticed:
@use and logic, which add flexibility and maintainability to your code. This is something I haven't explored much yet, so it's inspiring to see it in action!However, I do have one small suggestion. To improve accessibility in your HTML, make sure you include alt attributes for images. This will help visually impaired users understand the content of the images through screen readers.
To be honest, I can't give you any more suggestions for improvement because your SCSS code looks more advanced than mine. I feel like I can actually learn a lot from your approach!
Keep up the great work, and happy coding!
Great job on the project! I have a couple of suggestions that might help improve your code and make it even more efficient.
First, I noticed some unnecessary lines in your html and universal selectors. For example, you're using -webkit-box-sizing and -moz-box-sizing, which are pretty much obsolete these days because most modern browsers support the standard box-sizing property. Simplifying this would make your code neater. Also, you're setting box-sizing in both the html selector and the universal selector, which is unnecessary. You can just keep it in the universal selector for a cleaner, more maintainable approach. I've put together a revised version for you:
*, *::before, *::after {
box-sizing: border-box; /* Universal box-sizing */
margin: 0; /* Reset margins globally */
padding: 0; /* Reset padding globally */
}
This setup means you don't need to set line-height: 0; to fix spacing issues between images and text. It's simple and gets the same result.
Secondly, I noticed a proportional layout issue on tablets. When resizing the screen, the image and product description lose alignment because the max-width of the image and .product container are both set to 100vw. This creates an imbalance where the image width stays the same, but the content can expand beyond it.
To fix this, you could set the width of both the image and content (.product_description) sections to 100% within the .product class. Avoiding max-width in this case ensures consistency and better responsiveness. Here's an example of how you could refine the layout:
.product { width: 21.5rem; /* Fixed width (or adapt as necessary) */ &_descriptions { padding: 26px; /* Ensures consistent spacing */ width: 100%; /* Not necessary, but ensures that it reaches the container */ } &_image { width: 100%; /* Scales the image with the container */ &__img { width: 100%; /* Maintains proportions */ } } }
You're doing a great job, and with just a few minor changes, your design will be even more polished. Keep up the great work and happy coding!