Latest solutions
- Submitted 21 days ago
Newsletter sign-up form with success message Solution
#sass/scss- HTML
- CSS
- JS
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.
- Submitted about 1 month ago
Article Preview Component Solution
#sass/scss- HTML
- CSS
- JS
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!
- Submitted 2 months ago
Testimonials Grid Section Solution
#sass/scss- HTML
- CSS
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.
- Submitted 3 months ago
Four Card Feature Section Solution
#sass/scss- HTML
- CSS
I would like to explore the use of SCSS to manage complex grid layouts and learn about alternative approaches to improve responsiveness and scalability.
- Submitted 4 months ago
Product Preview Card Component Solution
#sass/scss- HTML
- CSS
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.
- Submitted 4 months ago
Recipe Page Solution
- HTML
- CSS
I would like to learn how to create websites more efficiently, especially when it comes to pages with a lot of content. I want to learn professional CSS techniques for working with complex layouts, such as using advanced grid and flexbox strategies, responsive typography, and other tools to simplify the process of managing and organising large amounts of content.
Latest comments
- @JusticeJatauSubmitted about 1 year ago@vladyslav-shulhachPosted 17 days ago
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 afor
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!
0 - P@thibault-devergeSubmitted 5 months ago@vladyslav-shulhachPosted about 1 month ago
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 thealt
attributes empty or usingaria-hidden="true"
, it's better to include descriptive text. For example, rather than hiding the Facebook icon from screen readers, you could addalt="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!
0 -
- @ChinaLiuXinXinSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
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.
@vladyslav-shulhachPosted 2 months agoGreat 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
andarticle
. These tags make your code more meaningful and easier to read. -
Be careful with identifiers. I noticed that some
id
s, likeuser-profile
,user-name
, anduser-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 useclass
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 thealt
attribute empty, you could write something likealt="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!
0 -
- @lrdelmarSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
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
What specific areas of your project would you like help with?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.
@vladyslav-shulhachPosted 3 months agoGreat job on your project! Here's what I noticed:
- Your project is true to the original design and the attention to detail is great!
- I'm impressed with your SCSS setup. Using a folder structure makes your code more organised and scalable, while I still use a single SCSS file.
- You've used advanced SCSS features such as
@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!
Marked as helpful0 - @espxdevSubmitted almost 2 years ago@vladyslav-shulhachPosted 3 months ago
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 standardbox-sizing
property. Simplifying this would make your code neater. Also, you're settingbox-sizing
in both thehtml
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 to100vw
. 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 to100%
within the.product
class. Avoidingmax-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!
0 - @ZoooriielSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of how quickly I was able to complete this challenge, and I’m particularly happy with how much neater my CSS turned out compared to previous projects. For next time, I’d like to experiment with using a CSS framework like Bootstrap.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was with the images not loading on the live site. I spent a few hours troubleshooting, thinking the issue was with the paths or something else, but eventually realized that I hadn’t used git add to commit the image files to the repository. Once I added the images to GitHub, the problem was resolved.
What specific areas of your project would you like help with?I’d love some guidance on using a CSS framework, specifically Bootstrap. I want to learn how to incorporate it into my projects to improve the overall responsiveness of my designs.
@vladyslav-shulhachPosted 4 months agoGreat job on your project! The design is looking really close to the original, and it's clear you've put a lot of effort into it. I have a few suggestions that might help you take your code to the next level, making it even cleaner and easier to maintain. Here are a few things to consider:
1. Embrace semantic HTML
You're already doing a great job, but adding a little more semantic HTML can make a big difference. Using tags that describe the content (not just its appearance) can make your code easier to read, more accessible to visually impaired users, and better for search engines (SEO).
For example:
- Instead of
<div id="recipe_background">
, consider using<main>
to wrap the main content of the page. - Swap
<div>
elements for sections of content with<section>
for ingredients, prep time, or instructions. - You might also consider using
<footer>
instead of<div class="attribution">
for attribution content.
These small adjustments can help anyone to read your code understand the purpose of each part. You can find a useful guide to semantic HTML here and here.
2. Simplify styling with reusable classes & CSS variables
I noticed you've got a lot of small classes in your HTML that are just for styling, like colour or font weight adjustments. While this approach works, it can make the code a bit harder to manage in the long run. Instead, creating reusable classes or using CSS variables can save time and keep things tidy.
For instance:
-
Instead of using individual classes for every little styling tweak (
<h3 class="brown_800 youngserif_font header_fontsize">
), you could create one class like.subheading
that combines those styles. -
You can also use CSS variables at the top of your stylesheet with
:root {}
for colours, fonts, or other constants::root { --brown-800: hsl(14, 45%, 36%); --young-serif: "Young Serif", serif; --header-font-size: 24px; }
Then, use the variables with
var()
to keep things consistent:.subheading { font-family: var(--young-serif); font-size: var(--header-font-size); color: var(--brown-800); }
This will make it easier to make changes later on, as you'll only need to update the variable instead of looking for each and every single instance in your stylesheet.
3. Better use classes instead of IDs for styling purposes
Using IDs for styling is fine, but they're best for unique elements because they have higher priority in CSS, which can make changes harder later. IDs are great for JavaScript, but for styling, classes are usually a more flexible and reusable choice.
4. Try to explore Flexbox & Grid for layouts
Using Flexbox and Grid can make your layout work much easier. These are powerful tools for organising the page layout without any unnecessary positioning tricks. If you haven't used them yet, you might want to give them a try. They give you more control over how elements are placed and aligned.
Here are a couple of great resources to get you started:
There's also a fun game called Flexbox Froggy that’s perfect for learning Flexbox interactively: Flexbox Froggy.
Again, great job on your project! Keep up the good work and I'm sure you will get better and better. We are all learners, so let's grow together!
0 - Instead of