@Prototype-113322
What challenges did you encounter, and how did you overcome them?
I encountered an issue when I had to change the color of a bullet point, so I used W3Schools to overcome it.
Latest solutions
Product List with Cart (VueJS, Pinia, TypeScript, A11Y)
#pinia#typescript#vue#accessibilitySubmitted 8 months agoSocial Links Profile (Animation)
Submitted about 1 year agoNone at this time. General feedback is welcome.
Time Tracking Dashboard with editable, stored values (React)
#reactSubmitted about 1 year agoGiven the level of state changing, the app could do with added accessibility. Pointers to good articles/tutorials about how to approach accessibility in React applications would be welcome.
Latest comments
- @tinuola
Nice work getting this close to the design spec, Muhammad.
A layout issue I notice is that the CSS styles are not applied when the screen is larger than 1440px. To fix this, update the second media query by removing the
(max-width: 1440px)range.Also, there's little need for the first media query:
@media (max-width: 600px)since by default you're starting with the mobile style, and the second media query sets the next breakpoint.Lastly, I recommend grouping the page sections with either
divorsectiontags so that the code is organized and can be easier to read.Good luck with future projects!
- @ABU-BAKAR-SWhat are you most proud of, and what would you do differently next time?
Proud to make responsive for all devices.
@tinuola@ABU-BAKAR-S, Nice work on the responsiveness and getting this almost exactly mirror to the design! 👍🏾
One recommendation would be to remove the last media query (1024px) and use its rules/values in the 768px media query instead. This would give the page a more fluid transition from mobile without the extra "shift/jump" to the layout that is currently happening at 1024px resolution.
Good luck with your next challenge.
Marked as helpful - P@danielmrz-devWhat are you most proud of, and what would you do differently next time?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
- HTML 🧾
- Tailwind 👾
- JavaScript 🤖
- Mobile first workflow approach 📲
I tried Tailwind again on this one. I've been trying to finish bigger projects using only Tailwind, but there's always one thing or two that I'm not able to create with it so I have to use a bit of pure CSS too.
Anyway, it took me a few hours to finish, but I enjoyed every minute of it.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
@tinuola@danielmrz-dev,
Looks great and kudos on the use of Tailwind. 👍🏾
A suggestion for what to improve on would be to make the nav menu keyboard accessible when the menu collapses. Currently, when the screen resizes down the first clickable/focusable element is in the body, not the nav.
Starting to consider accessibility beyond native elements can be a great skill to practice and cultivate as a frontend developer.
Marked as helpful - @JreyIVWhat are you most proud of, and what would you do differently next time?
i was able to finish this quicker. I'm getting more used to patterns, noticing the stuff that I keep repeating in other challenges. I am getting better at using more standard practices and I think my code looks a little cleaner now. next time I hope to be able to work quicker and make my code even cleaner
What challenges did you encounter, and how did you overcome them?This was the first time working without a figma or design file. It was a lot harder to eyeball this one especially with the text because I swear mine looked bigger then the design picture. I wouldn't say I overcame it, just tried my best.
What specific areas of your project would you like help with?is there anyway I can clean up my code further? I notice that I have a lot of code where I repeat a lot (see below). Is there a way to make that more efficient or is this the common way that people write css?
.profile-details { padding-block: 1rem; } .profile-details h1 { color: var(--clr-white); font-size: 1.5rem; font-weight: var(--fw-bold); } .profile-details p:nth-of-type(1) { color: var(--clr-primary); font-weight: var(--fw-normal); font-size: 0.9rem; padding-top: 0.5rem; } .profile-details p:nth-of-type(2) { color: var(--clr-white); font-weight: var(--fw-light); font-size: 0.875rem; padding-top: 1.5rem; }@tinuolaGreat work with this challenge. The code is concise and not overly repetitive. If you notice that code is repeated, one approach is to use CSS Variables, which you already are doing. Another would be to organize the repeating rules under one class name and then apply that to the markup.
For example, if I'm using this rule set a lot:
display: flex; flex-direction: column;I could create a declaration:
.flex-col { display: flex; flex-direction: column; }And use that selector/class name (
flex-col) in the markup. It would be similar to creating/using utility classes--code that does specific things and can be used in multiple places. If you decide to get into Tailwind CSS, you'll learn about this approach.A somewhat advanced option is using Sass/SCSS, which allows you to do a similar thing--creating reusable blocks of CSS called mixins.
There are many approaches to explore and use depending on the project scope and on your preference as you continue to learn more. Good luck and happy coding!
- @Nifix001What are you most proud of, and what would you do differently next time?
I am proud that I was able to use another CSS framework for the project (Bootstrap CSS).
What challenges did you encounter, and how did you overcome them?I was faced with the challenge of making the accordion button functional.
@tinuolaUnique solution to go with bootstrap. It's an efficient way to take care of accessibility--making the accordion navigable by keyboard. The animation also works nicely.
The layout/component size and icon positioning as the screen resizes down could use some tweaking. The text starts to get compressed/squished and the icons overlap the headings. There's also a light-blue background that shows up when the accordion is expanded. Looks like that might be a bootstrap thing?
- @LLL0908What are you most proud of, and what would you do differently next time?
I'm getting familiar with controlling the position and also believe that I can do better next time.
What challenges did you encounter, and how did you overcome them?Everything went better than last time.
What specific areas of your project would you like help with?still need to learn about how to deal with images
@tinuolaHello LLL0908. Congrats on completing your second project!
Good job using flexbox to work out the positioning -- centering the component, and the user/byline row.
One area of improvement would be to use more semantic HTML elements. Instead of the 'div class p1/p2/p3/p4", use descriptive tags such as p, h1, h2 etc. Divs are generic--they have no meaning and are best used for grouping elements, which you've done well in some areas of the code.
Also, the class names "p1/p2/p3, etc" are not particularly intuitive or meaningful. Instead use descriptive names for the classes, such as "card-heading" / "card-subtitle" / "card-description", etc. Meaningful and descriptive naming makes code more readable.
I recommend refactoring the code and then practicing these tips in future challenges.
Good luck!
Marked as helpful
