@jasper2virtualSubmitted 11 days ago
ChristianM
@DevXtianMAll comments
- @RegexRiddlerSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Happy with the layout and enjoyed brushing up on SCSS. Next time I would stick to a naming convention.
What challenges did you encounter, and how did you overcome them?Creating the chevron underneath the share menu "bubble". I used the ::after pseudo element and styled it like this:
What specific areas of your project would you like help with?::after { content: ""; position: absolute; bottom: -11.8px; width: 0; height: 0; left: 50%; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #48556a; }Semantics, accessibility, readability.
- @Mirjax2000Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I made it by flexbox. But i thing that there is a better way with Gridbox.
I have to open new branch in git and make it with Gridbox.
What challenges did you encounter, and how did you overcome them?Switching flexbox in breakpoints. I needed working with calculator and sort it out some percanteges. to be better dynamic and fluid.
What specific areas of your project would you like help with?Need focus on gridbox. But i like flexbox. damm.
- @MelissaZhuuSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that I found this challenge to be pretty easy and it allowed me to understand CSS Grid better.
What challenges did you encounter, and how did you overcome them?I encountered some challenges with styling the box shadow as many details weren't provided like the color and blur radius, but I just played around with the values till it looked right. It was also a bit challenging switching from flexbox to grid and understanding how both work.
What specific areas of your project would you like help with?After researching a bit on best practices, I assumed that the images used for this particular challenge were more decorative and I ended up having empty alt values for them. However, I was just wondering if others did the same or if I should still included some text that described the icons such as "lightbulb icon" or "magnifying glass with eye".
- @juliusalbertoSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was most proud of creating a responsive design, both for desktop and mobile. It was hard at first, but I finally can do it (it's not that hard actually, it's tedious).
I also changed the picture using a js script so yeah that's pretty cool.
What challenges did you encounter, and how did you overcome them?The difference between desktop and mobile layout is pretty annoying as I'd have to configure the margin between elements manually. Furthermore, I use a set width and height for the mobile page so yeah... Should've make it moar responsive :)
What specific areas of your project would you like help with?Nooooo
- @35degreesSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I planned the layout ahead of time, and took advantage of sections and Flexbox layout.
What challenges did you encounter, and how did you overcome them?Centering a div, image widths can be tricky. Learned how to style a table, still didn't do it perfectly.
@DevXtianMPosted 4 months agoNice work!
Try this website might help you practice Flexbox Layout : Flexbox Froggy
0 - @kalWick01Submitted 4 months ago@DevXtianMPosted 4 months ago
Nice work!
Here are some tips that might help you 😊
-
Avoid using 'px' on font-size, as it cause issues with accessibility, scalability and responsive layouts. Instead use relative units like rem and em. Check this video
-
Since this challenge doesn't have complex layout. Try using HTML Semantics
Best Practices
- Use Semantic HTML First: Prefer using semantic HTML elements (like <header>, <footer>, <section>, <article>, etc.) whenever possible for better accessibility and SEO. Use <div> only when no other semantic element is appropriate.
- Class Names and IDs: Always use meaningful class names and IDs to help identify the purpose of the <div>.
- Avoid Overuse: Overusing <div> can lead to unnecessarily complex HTML structures. Keep your markup clean and minimal.
Additional Resources Try this to improve on Flexbox usage: FlexboxFroggy
Marked as helpful0 -
- @anandkunalmishraSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I learnt to write better css.
What challenges did you encounter, and how did you overcome them?I was not able center the card but at the end I did it successfully.
What specific areas of your project would you like help with?I want help in better flex position learning and applying.
@DevXtianMPosted 4 months agoHi! You did a great job, but there is still room for improvement!
Here are some tips for you:
-Try to reduce the use of <div> elements for now and focus on better HTML semantics. It will help you a lot. Check out this video: "Introduction to HTML : Improve Your HTML Semantics".
-In terms of centering elements check Flexbox and Grid Layouts, If you want to learn Flexbox check this page: FlexFroggy
-Instead of using percentages (%) for text, padding, border, and margin, use rem or em. Check this for reference: "CSS Units & Sizes "
0 - @Muhammad1917Submitted 4 months ago
- @DeeSzubertSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I used classes and Sass to structure the code more effectively. The design closely resembles the template.
What challenges did you encounter, and how did you overcome them?again had an issue with fonts and Sass, but I think I know where the problem was.
What specific areas of your project would you like help with?nothing special on this one
- @exploresahilSubmitted 10 months ago@DevXtianMPosted 4 months ago
Great Job! However the card gets too wide on my screen, Hope this video can help (https://www.youtube.com/watch?v=_a5j7KoflTs&t=1589s), you can just watch the first 30mins it's about SASS basics. It will also help you organize your file structure.
If you want to learn best practices in using SASS i found an article about it here's the link: https://evnedev.com/blog/development/sass-best-practices-tips-and-tools-you-should-know/
0 - @sksksk2024Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This is my second site that i did all alone.
What challenges did you encounter, and how did you overcome them?Trying to do it responsive
What specific areas of your project would you like help with?I want to give me feedback and tips to do it even better!
@DevXtianMPosted 4 months agoHi i found this tutorial helpful -> https://www.youtube.com/watch?v=_a5j7KoflTs&t=627s (Sass) Study more on flexbox and grid, learn why and when you should use them.
1
