Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
7
MaelkMark
@MaelkMark

All comments

  • ポール•70
    @mukisapaulk
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    the grid system, the first time it failed but on the second try i figured it out. and i really enjoyed this challenge though things didn't come out the way i wanted but it was really a nice experience

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

    i got a challenge working out the responsiveness on medium screens i think i failed on that but i will improve that in the near future and also the centering of the grid i don't know why margin: 0 auto; refused to its magic the way i wanted it to appear

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

    putting my grid in the middle of the page. if any one can look at my code and tell me why it is not put in the middle the way i want.

    grid testimonial component

    2
    MaelkMark•150
    @MaelkMark
    Posted 10 months ago

    Nice solution!

    The grid itself is centered horizontally, it just has an extra unnecessary empty column. Modify the grid-template-columns to repeat 1fr 4 times instead of 5: grid-template-columns: repeat(4, 1fr)

    (Please upvote if this helps)

  • Arcloan•770
    @Arcloan
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I managed to complete the task.

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

    The buttons to select the tip required a little more of thought to fully function within the tip calculator.

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

    I dont't know how well I managed the buttons for selecting the tip and the total working of the tip calculator. Any suggestions are really appreacited :) Thank you

    tip-calculator

    2
    MaelkMark•150
    @MaelkMark
    Posted 10 months ago

    Nice solution, good job!

    For the tip amount buttons you can use input type radios instead of checkboxes, because then you don't have to uncheck them manually from js. Just replace checkboxes with <input type="radio" name="tip" value="5">. You must give them an identical name for the automatic unchecking to work. You can also give them a value (eg. the amount) and then you can get the tip amount with this line of code in js: document.querySelector(".button > input[type='radio']:checked").value. This line will return the given value of the checked radio button.

    Hope this helps (and please upvote)

    Marked as helpful
  • Zeynab Movasaqpoor•500
    @zeynabmvs
    Submitted 10 months ago
    What specific areas of your project would you like help with?

    I can navigate through form using tab key, but since I styled the radio buttons they get skipped, It would be helpful if anyone has a solution for this.

    Mortgage Calculator App react & react-hook-form & yup

    #react#tailwind-css#vite
    2
    MaelkMark•150
    @MaelkMark
    Posted 10 months ago

    The radio buttons don't get skipped, you just can't see the outline because you've set their outline to transparent. If you remove that declaration, the styling won't change and you'll see the outline on focus. Or if you want the whole label to have a focus, keep the outline style for the input and declare a new rule: label:has(input[type="radio"]):focus and put the focus styling there.

    (Also, you can toggle between the two radio buttons by pressing the up/down arrow keys)

    Anyway, nice solution :)

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch
    Submitted over 2 years ago

    Multi Step Form

    #accessibility#sass/scss#typescript#vite
    3
    MaelkMark•150
    @MaelkMark
    Posted 10 months ago

    Cool!

    I've solved this challange too (thanks for the like) and I wanted the sidebar to be interactive (just like yours) so the user can jump between steps. But then I realized that then the user can skip some steps (like addons) and if this was a real subscription form, we wouldn't want that because we want the user to pay more. I think you should correct the form so that the user can jump only if he/she has completed the previous steps (clicked next).

    And just one more tip for future projects maybe, if you want to create a sidebar like this, the easiest way is to add input type radios with the same name inside all .step containers with a unique value (<input type="radio" name="step" value="1">), and style like

    .step > input[type="radio"] {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      appearance: none;
    }
    

    Appearance none will hide the radio button, so nothing will change apparently but if you click on one step, the radio buttons will be checked secretly and the others will be unchecked automatically (because of the identical name). Also you have to give .step a position: relative for the positioning to work properly.

    Then you can get which step is active from js with document.querySelector(.step > input[type="radio"]:checked).value, and it'll return the checked radio button's value.

    Or you can display steps from only css by adding all the step forms inside .step__component and display only that what is active with this rule:

    body:has(.step > input[type="radio"][value="1"]:checked) .step__component form:not(:nth-child(1)),
    body:has(.step > input[type="radio"][value="2"]:checked) .step__component form:not(:nth-child(2)),
    body:has(.step > input[type="radio"][value="3"]:checked) .step__component form:not(:nth-child(3)),
    body:has(.step > input[type="radio"][value="4"]:checked) .step__component form:not(:nth-child(4)) {
      display: none;
    }
    

    This will work like this: 'If the radio button in .step with the value of 1 is checked then hide all forms inside .step__component which is not the first inside .step__component'.

  • Neil•10
    @Neil10241126
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of modularizing the design guideline using CSS variables, making it easy to reference and modify. Next time, I would try using Sass to structure the code, which would make the CSS more concise.

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

    Initially, I encountered issues with shadow effects. I tried using box-shadow to create the effect, but it didn't feel quite right. Later, I used ::before and ::after elements to handle the shadow effects.

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

    In constructing the CSS, I developed with a desktop-first approach and added @media queries whenever mobile-specific properties were needed. I'm not sure if this development process is a good idea, or if integrating all mobile CSS into @media would be easier to understand.

    Responsive card solution using HTML5, CSS3, and Flexbox

    2
    MaelkMark•150
    @MaelkMark
    Posted 10 months ago

    Looks cool, great job! But you should't use multiple media queries for the same breakpoint. Declare only one and then put all the needed styling inside it. It's important because if you want to change the style of the card later and need a different breakpoint, you'll have to change it everywhere in the code! And using only 1 media query for 1 breakpoint is also much cleaner, easier to maintain and understand for other people and for you too.

  • Rahul Kumar•570
    @rahulkumar215
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am glad I got this project done the way I wanted to, as well as to be able to add one feature from myself other than mentioned in the challenge. I was ready to give this project more than A week but I am glad I got it done in less than that.

    I think I need to improve my folder structure and the way that I write styles. I used SCSS in this project but I was mostly writing normal CSS in an SCSS file, so I will work on that.

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

    Well the biggest challenge for me and for all of us who are gonna take and have taken this challenge is getting that flip animation going. I spent so much time and energy just watching YouTube tutorials and making that flip animation work, however It was worth it in the end.

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

    I am really struggling with responsive design with CSS GRID, I would appreciate feedback on that.

    Launch Countdown Timer Solution 🎯 [REACT, SCSS]

    #react#sass/scss
    1
    MaelkMark•150
    @MaelkMark
    Posted 10 months ago

    This is cool, you did a great job! But I think you should restrict the hover styling for the buttons to only apply if they're not disabled. Because it's a bit strange and confusing that the cursor is pointer and the buttons get bigger when they're disabled and don't do anything.

    Marked as helpful
  • Derp•180
    @DDeerrpp
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Finished a project!

    Some things were kind of confusing but understood how custom radio and checkbox inputs work. I would need to plan out more on making these as ordering the boxes around got a little confusing for me, so I could organize better next time.

    Please let me know any feedback you have!😗

    Responsive Contact Form

    1
    MaelkMark•150
    @MaelkMark
    Posted 11 months ago

    You did a great job, I like the custom radio buttons and checkboxes.

    But actually you've forgotten the email validation. You can submit the form even if the email address is invalid.

    You can check the validity from js with inputElement.checkValidity(), returns true / false (this works because the input type is set to email).

    Also, if you want to create real-time feedback to the user, you can use the :valid and :invalid pseudo classes. If interested, you can watch this video by Kevin Powell on youtube.

Frontend Mentor logo

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