Skip to content
Submitted 3 months ago

Job listing with filtering

Gaurav chauhan•50
@ravenbirdb1b
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Job listings with filtering
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

** Filtering Filtering Logic part is a bit tricky. gave some time to it to figure the solution out.

What specific areas of your project would you like help with?

Need some help with the css, as to how can i improve it, please point out any mistakes if possible and also what can i do to improve the feature.

Community feedback

  • Sara Dunlop•430
    @RiscloverPosted 3 months ago

    Hi! Nice job! I just wanted to point something out. When you click on tags, there are inconsistencies with how they're staying highlighted. I'll try to provide a very specific example so you can see what I'm talking about.

    Steps to reproduce:

    1. Click on the Frontend tag in the 1st listing (Photosnap Senior Frontend Developer)
    2. Click on the Junior tag in the 2nd listing (Account Junior Frontend Developer)
    3. Click on the CSS tag in the 2nd listing (MyHome Junior Frontend Developer).
    4. Click 'Clear' to clear the tags.

    You'll notice that the CSS tag is still highlighted.

    1. Click Frontend in the 1st listing again.

    CSS is still highlighted, so it's not an issue of it merely being the "last tag clicked" or anything.

    1. Close the Frontend tag by clicking the X close button.

    Frontend and CSS are still both highlighted.

    Just as an example. It seems that that's some logic that you need to hammer out. :) Just thought I'd make you aware! <3

    Marked as helpful
    0
    Gaurav chauhan•50
    @ravenbirdb1bPosted 3 months ago

    @Risclover Hey thanks for pointing it out! I'll try fixing it :)

    0
  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi @ravenbirdb1b,

    Nice project—it looks really good! However, it seems you might have overlooked responsiveness.

    Are you using Chrome DevTools? If not, I recommend starting to use it. After you finish each project, check it across various common screen widths to ensure it doesn’t break.

    I’d also suggest looking into a mobile-first approach and avoiding fixed widths and heights. Instead, use properties like min-width or max-width to prevent overflow issues. Currently, your site breaks between 375px and 500px wide, making it difficult to use on phones and small tablets.

    For improving your CSS skills, I recommend watching Kevin Powell on YouTube. His best practices can help you become a CSS master.

    I hope this feedback is helpful!

    Best, Teodor

    Marked as helpful
    0
    Gaurav chauhan•50
    @ravenbirdb1bPosted 3 months ago

    @TedJenkler Thanks a bunch! I'll look into it

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord