Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
14
feelgooddd
@feelgooddd

All solutions

  • URL shortening with dropdown hamburger nav on smaller screens

    #accessibility

    feelgooddd•430
    Submitted about 1 month ago

    I would like help with naming conventions i feel like my function and class names may not follow any standards which are used in the professional field. I have heard about BEM but have not yet learned or used it. I do not know how clear my code reads to someone coming into my project with fresh eyes.

    I also do not think my css is organized well, I tried to keep it structured in a way where the classes are organized in the order which they appear on the page but somewhere in the middle I started adding new classes and it got messy quickly. I would like advice on how you deal with a growing css file. Do you split it into separate css files ? Should I maybe learn and use sass/scss? Any advice in making the code more eligible would be great.

    I also barely used utility classes so there I'd a bunch of reused code especially for margins and padding. Would you tackle this issue by using a framework or would a framework be too much for a project this small and instead I should write my own custom helper classes ?


    0 comments
  • Using HTML/CSS/JS populating cards from JSON file


    feelgooddd•430
    Submitted 5 months ago

    I have added comments for my confusing spaghetti code.

    I don't like the way I implemented the eventlisteners for the All/Active/Inactive buttons. Currently it adds an eventlistener 12 times to each of these buttons because i have it in my foreach loop which adds cards to my page.

    because of this I have 12 * 3 = 36 event listeners for 3 buttons.

    But I could not think of a way to do it otherwise because if I try to move the event listeners and the functions which they trigger outside of the foreach loop I can not access the card that I want to affect. Any help is appreciated with how to move these event listeners outside of the loop so they only need to be added once to each button. app.js


    0 comments
  • Basic Static Component using React with Vanilla CSS

    #react#vite

    feelgooddd•430
    Submitted 6 months ago

    I want help with making my Components more reusable. How would you go about splitting this project up into more separate components? I know the question is vague but I think I have too much hard-coded stuff and would like someone who is more experienced than me with React to give some insight into how they would approach this project using React.

    (Also I know I have all of my components in 1 file and should split them into separate files, but since it is a very small project I just left them all in the app.jsx)


    0 comments
  • Responsive signup page with Form using Vanilla JS + CSS(No Frameworks)


    feelgooddd•430
    Submitted 7 months ago

    In my javascript I changed the input.style on many different properties for the background and it looks ugly and inefficient. If anyone could advise me on a way to do this in a cleaner way and give an example that would be amazing. Please help!!


    1 comment
  • Landing page using vanilla CSS Grid + Flex / No frameworks


    feelgooddd•430
    Submitted 7 months ago

    I don't like the way I did the header. I made it a div with a background of the image, and through a series of background image manipulation such as positioning the background on its Y axis I got it to appear almost how I wanted. I am not a fan of how much blue space I have between the nav bar and the orange. I got frustrated and gave up accepting the way it looks finally.

    If you have any advice about positioning the image as a background and making it look nice that would be appreciated.


    0 comments
  • Notification page using Vanilla JS and CSS


    feelgooddd•430
    Submitted 7 months ago

    Anything about my markup and if I overdid it with divs, if there is any cleaner or better way I could have written my markup.


    0 comments
  • Chat App Illustration using no CSS Frameworks


    feelgooddd•430
    Submitted 7 months ago

    0 comments
  • Contact form using emailJS


    feelgooddd•430
    Submitted 7 months ago

    I don't like the way I used visibility: hidden instead of display: hidden in my project. It leaves a lot of white space between the different sections. But when I use display: hidden my input shift up and down on the page ruining the whole layout.

    For example(using display: hidden) First name and Last name are side by side, if the error text below First name is visible but the the error text below last name is hidden then the layout would shift first name upwards to fit the error text below it making first name and last name not line up side by side anymore.


    1 comment
  • Blog Preview Card using Flex


    feelgooddd•430
    Submitted 7 months ago

    1 comment
  • Flex-Box Vanilla CSS QR Code Component


    feelgooddd•430
    Submitted 7 months ago

    1 comment
  • Tip Calculator with colour slider at bottom using CSS/JS


    feelgooddd•430
    Submitted 8 months ago

    I don't think the way I did the colour scheme change was the most efficient. I used Javascript to record all of the colours in my CSS :root variable as JS variables and then changed them within JS. If you have another way for me to change the colour scheme then please write a message telling me how you would tackle this.


    0 comments
  • Advice Generator using adviceslip API


    feelgooddd•430
    Submitted 8 months ago

    CSS styling and html formatting could probably be better, any advice on what you would do differently would be appreciated.


    2 comments
  • Responsive Huddle Landing Page


    feelgooddd•430
    Submitted 11 months ago

    In the following image you can see what the webpage looks like when viewed from my friends iPhone 14 on Safari iOS. This is not what it looks like on PC nor what it looks like on a samsung Galaxy S10, nor on an iPhone 13. Any help to fix this would be appreciated.

    https://imgur.com/a/MqzFr0i

    Image below is what it looks like on most other devices.

    https://imgur.com/a/x8AiW7G


    0 comments
  • Order Summary Page using flexbox


    feelgooddd•430
    Submitted 11 months ago

    If anyone can help look over my flex containers and items and give me feedback if I've implemented and used them correctly or if there is a better and more efficient way I could have used them please give me critique here so I can improve my skills using flex.


    2 comments
  • Beginner recipe page using HTML/CSS


    feelgooddd•430
    Submitted 11 months ago

    I faced issues, and did not solve how to create a border-bottom under each table row in my table. The project JPEG showed a line between each row in the table in the Nutrition section.


    1 comment

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub