Skip to content
OverviewSolutions
6
Comments
5

Mir Mubashshir

@mmubashshir90 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Clive Kifumbi•30
    @clivedev88
    What are you most proud of, and what would you do differently next time?

    I was able to adjust the container's size to fit different layouts. Next time I'd focus more on my CSS file, using grid or flexbox in order to make it happen faster.

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

    Making my initial design fit any layout.

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

    Automatic layout fitting, because I think I made it fit, but it could be done easily. I just don't now how.

    WR code page using HTML and CSS flex

    2
    Mir Mubashshir•90
    @mmubashshir
    • Just remove that fat padding, always maintain consistent padding through out the card, would make hell of difference .
    • Always make the descriptive sentences, font weight of regular or light, making bold is not a good idea.

    Congrats on that completion 🥳

  • CodeDemon-Abhi•90
    @CodeDemon-Abhi
    What are you most proud of, and what would you do differently next time?

    All Good

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

    All Good

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

    GOOD

    Responsive Web Page With Simple HTML And CSS

    1
    Mir Mubashshir•90
    @mmubashshir
    • The padding could have been more overall
    • Always consider having those divider line color as light as possible, you just want them subtle, not too striking
    • Same for bold text, consider making text semibold or medium, make them just slightly bolder not too striking bold (depending on design).
    • Using <b> tag 🤔, I prefer using a <span> make that class of semibold or medium, when you want to next time change the font-weight just change for that class, rather than changing each place
    • Good consistency with padding

    🥳 Kudos on the completion, happy coding</> 😊

  • Ogbe-cloud•30
    @Ogbe-cloud
    What are you most proud of, and what would you do differently next time?

    I am proud that i used semantic tags to make my project accessible

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

    i encountered the problem of deployment to github because this is my first time trying but i was able to have it sorted

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

    i need a mentor to guide me through and someone i could always look forward to and ask questions

    A simple recipe page

    #accessibility#backbone#foundation#smacss#airtable
    1
    Mir Mubashshir•90
    @mmubashshir
    • I suggest rather than giving padding to the image, it would be better to give padding to the whole card. Just maintain consistent padding throughout the card.
    • For instructions and ingredients section, the content does not require any padding
    • The main card in mobile could have taken whole width, maybe use media queries
    • Overall better padding management would just make it perfect

    🥳 Congrats on that completion, happy Coding<>😊😊😊😊

  • Mir Mubashshir•90
    @mmubashshir

    Hi, Pretty could job nailing the design.

    Margin of 3rem which does give a margin till my width of the screen is 420px, which is pretty much the size of mobile phones.

    If you want to target lower screen sizes use media queries and decrease the width of your first container

    @media only screen and (min-width: 750px) and (max-width: 1200px){
// styles when screen between 750 and 1200px
.card{
// styling
}
}

    @media only screen and (max-width: 750px) {
// style below 750px
.card {
// styling
}
}
  • Mir Mubashshir•90
    @mmubashshir

    Hi,

    Answering your question use a span below each of those input fields and hide them using display none.

    • You can first check if inputs are empty, if not using DOM, style the element as red and now unhide the span element with text "The fields is required"
    • If they are not empty, you can check for validation, and if invalid you can do similar job with DOM to show invalid states
    • Lastly, only run the function to calculate the age , if they are not empty and if they are valid

    Good job done with responsiveness for mobile, couple of things to note

    • Firstly, with this type of designs don't initialize a definite height, so whenever you shift to mobile size the height is automatically is adjusted.
    • And giving an overall padding on all sides will take care of spacing on the bottom.
    • center alignment, I think was not required, reducing width along with screen size does the job
    • You could use input type="number" which wont take any text into consideration
    • Using flex and gap between those elements is a good one

    Congratulations, keep it up buddy 😊