- Any advice on how to use BEM more efficiently
- Please let me know if I made any mistakes in using semantic HTML tags
- Any Sass advice on how I can use it to make the code DRY (for eg - use of mixins)
Ivaylo Ivanov
@ValsCodesAll comments
- @py-code314Submitted 27 days agoWhat specific areas of your project would you like help with?@ValsCodesPosted 25 days ago
Great job! Sematic HTML looks okay, might want to look more into it so you can feel more confident when using it. The layout is great, great touch with the 3 media queries. The mobile version at least in my opinion could use a max-width set to something lower. Very good separation of logic with the SASS. Even for a small project as this it very nice to see order in good shape. There aren't any considerable differences. Your purple testimonial's quote should have a different opacity and the box shadow seems a little bit more than needed. All minor stuff.
Keep going!
Marked as helpful0 - @RasMurph420Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm proud of my ability to effectively use HTML and CSS to create a clean and responsive layout for the QR code component. The final product meets the design specifications and is visually appealing.
What challenges did you encounter, and how did you overcome them?Initially, I struggled with aligning the QR code image, title, and description to create a visually appealing layout. Ensuring everything was centered and looked good on different screen sizes was tricky.
The QR code image did not display properly on various devices, either being too large or too small, which affected the overall look of the component.
I initially encountered issues with linking my CSS file to the HTML document, which resulted in styles not being applied as expected.
@ValsCodesPosted about 1 month agoGreat solution! Congrats on your first submission!
I couldn't check the code on github. Just in case make sure to add alt to your image, use a sematic HTML tag and look into dynamic size units such as em and rem instead of px.
Keep at it!
Marked as helpful0 - @hikawiSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
At first, because of the weird positioning of the background and the calculator, I was going to use absolute positioning on the calculator section. But it got too cumbersome and annoying to manage for each screen size, I ended up making the background absolute instead of the calculator, probably the better way.
The last section looked pretty intimidating. Using a grid with 12 columns may not be the optimal answer, but it worked out... well enough?
@ValsCodesPosted about 1 month agoVery impressive! Everything looks great!
Here are my suggestions for improvements:
- check the bool that changes the calculators welcome section. When you enter the site it shows the BMI text instead of the Welcome text
- the left blue part of the hero section in the design spans a little lower under the calculator
I think the 12 column grid looks awesome, don't touch it :) Size wise things are great and the code is readable.
Great job overall, keep going!
Marked as helpful0 - @cendyzSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
My java skills improved, learned more about clamp and don't using height
@ValsCodesPosted about 1 month agoGreat job!
I barely have anything to say. Here is what I came up with:
- notice where the share button is in the design compared to the solution, a little margin on the right won't hurt
- try to stay away from using px as a unit especially when setting max height or width, there are some good extensions that convert px to em, rem and other units
- I couldn't see a sematic HTML tag used, adding role="main" to your main div is more than enough
Great job overall! Very impressive scss and solution, keep going!
Marked as helpful0 - @Jala30Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Instead of just directly using htm, css and js. I tried writing thr code in typescript and scss and compiling them into Js and css using webpack. Doing so improved my knowledge in not only webpack but also in dynamic creation and querying of languages using typescript.
What challenges did you encounter, and how did you overcome them?I faced some issues due to the relative path of the image and mobile view.
What specific areas of your project would you like help with?Like I mentioned above, I faced some issues eth mobile view. So kindly provide suggestions and tips if any on not only mobile view but also overall. Also, is the way I applied mobile styles correct?
@ValsCodesPosted about 1 month agoGreat Job!
Here are some ideas for improvements:
- the mobile view can use more margin
- there is something weird happening with your bool that checks if a dropdown has been closed and opened, after you click it and close it, the header of the drop down stays with less opacity rather than going back to it's original state
- a little size up will get you closer to the design
- I could not see whether you have used sematic HTML tags such as <main></main> or just giving your main div this attribute role="main"
I am sorry if I didn't give you a better direction. Glad to hear that you learned a lot from this experiment. I am not sure if it is a common practice to write everything through code but since you had fun I guess everything is alright :)
Best regards, keep up the good work!
1 - @Provee510Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Well just proud i did went harder than the last time, and probably would go even harder next time
What challenges did you encounter, and how did you overcome them?the toggle part was one of the hardest part for me because i am still new but somehow i did went pass it, follow by managing the useState, i know i need to improve more on this aspect just a very slow process for me.
What specific areas of your project would you like help with?managing useState and creating toggles to pop out a content
@ValsCodesPosted about 1 month agoGreat work! Very impressive work with the Javascript
Here are some ideas to look into
- the elephant in the room, the background color
- the mobile confirmation page can use some tweaking in terms of the margin/ padding
- a little size up on everything would get you closer to the design
- don't forget sematic HTML tags, add a simple role="main" to your outest divs
- take your time to get closer to the desired topography, it is supposed to have heavier font-weight at some places
Great work over all!
0 - @jjdavenportSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Learning how to setup a bento grid with tailwind.
What challenges did you encounter, and how did you overcome them?the desktop layout and particularly the positioning of some of the images.
What specific areas of your project would you like help with?any feedback is appreciated.
@ValsCodesPosted about 1 month agoGreat job overall!
Here are some small improvements:
- take your time when adding the topography, your text is a little smaller than the design and could use more work on spacing the letters
- you could look into setting max-width for p tags to better match the design
- don't forget to add some kind of alt to your images
Awesome job, I haven't touched react and still was able to navigate and find what I needed to look into. Size wise things are great, sematic HTML is on point. I myself am trying to move away from tailwind and switch to scss in order to not have to have too much lines in the html.
Keep going!
Marked as helpful1 - @marianoglnxSubmitted about 1 month ago@ValsCodesPosted about 1 month ago
Great Job!
Here is just a small thing to look into:
- the original price is crossed, you can use text-decoration: line-through to fix it :)
- take a look at the corners of the image in the mobile view, they are also rounded. Just overwrite them in the mobile breakpoint
Everything else is as good as it gets. Size, fonts. Keep going!
Marked as helpful0 - @Sol1manSubmitted about 1 month ago@ValsCodesPosted about 1 month ago
Great solution!
Here are some tips:
- take a closer look at the font, you can see that some of the text uses ligher font opacity
- look into sematic HTML tags, simply adding role="main" to your first div is more than enough
- your div is a little shorter than the design
- you can up the padding of the div just a little more
Keep going! Best regards!
Marked as helpful0 - @VaishsCodeSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am really proud of completing this challenge and achieving a design that closely matches the original. Next time, I will focus on avoiding unnecessary classes and organizing my code in a more structured and efficient way.
What challenges did you encounter, and how did you overcome them?One challenge I faced was ensuring that the page looked consistent across different devices and screen sizes. I overcame this by using Media Queries and Bootstrap's grid system to create a responsive layout.
What specific areas of your project would you like help with?Are there any improvements I can make to the overall structure of my HTML and CSS? How can I make my code cleaner and more maintainable?
Are there any better practices I should follow to ensure the page is fully responsive on all devices? Is there anything I can improve with my use of media queries?
Is it beneficial to use frameworks for small-scale projects, or should I focus on building everything from scratch?
@ValsCodesPosted about 1 month agoGreat work overall! I could not see sematic HTML tags being used. The code is readable from what I can see, haven't used bootstrap for the challenges but things look good.
Here as some suggestions:
- Simply adding role="main" to your main div is enough for the beginner challenges
- The margin on the top could be improved as well as the margin of the image
- The solution is a little it bigger than the design
- Feel free to remove the frontend mentor footer if you feel like it :)
Great Job overall. Keep going!
Marked as helpful1 - @PetrakoowSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
The main challenge I encountered was figuring out how to distribute the display blocks as the screen size decreased. Initially, I used Flexbox as the foundation, but I found it difficult to manage the layout effectively when the screen size shrank. After considering various options, I ultimately transitioned to using CSS Grid. This allowed me to stack the elements in a single column in a more efficient way, simplifying the layout management as the screen size adjusted.
@ValsCodesPosted about 1 month agoThe Desktop Version is perfect! The mobile one though can use some work as it's not quite like the design. Still great work. The solution uses sematic html, code and folders are well structured and looks reusable.
0 - @kadiryildiriSubmitted 2 months ago@ValsCodesPosted 2 months ago
Yes. It is accessible, some minor padding improvements can be made as well as text sizing. The layout if perfect in terms of size. The code is readable even for someone who hasn't touched vite and React. It is very close to the design with minor flows, well done!
1