Skip to content
OverviewSolutions
6
Comments
5
Mir Mubashshir
@mmubashshir

All comments

  • Clive Kifumbi•10
    @clivedev88Submitted 7 months ago
    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
    @mmubashshirPosted 7 months ago
    • 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 🥳

    0
  • CodeDemon-Abhi•90
    @CodeDemon-AbhiSubmitted 7 months ago
    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
    @mmubashshirPosted 7 months ago
    • 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</> 😊

    0
  • Ogbe-cloud•30
    @Ogbe-cloudSubmitted 7 months ago
    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

    1
    Mir Mubashshir•90
    @mmubashshirPosted 7 months ago
    • 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<>😊😊😊😊

    0
  • magname•60
    @magnameSubmitted over 1 year ago

    Here's my solution to the Interactive rating component challenge.

    Changed the color scheme a little.

    Problem that I faced

    • My first container is not following the margin when I resize the window.

    Feel free to leave a suggestion that can help me improve my code. Also help me to add Media queries to my code.

    Interactive-Rating-Component using Flexbox and JavaScript

    1
    Mir Mubashshir•90
    @mmubashshirPosted over 1 year ago

    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
}
}
    0
  • JWord•140
    @jwren4170Submitted over 1 year ago

    I found the validation part of the project difficult. Honestly it is still buggy in my opinion. After you've completed the fields if you go back to one and enter wrong data, the label and border of input turn red, but does not display error message anymore. If anyone could help me with that I would appreciate it.

    I used sass on this one. Also did mobile first this time. A lot better

    1
    Mir Mubashshir•90
    @mmubashshirPosted over 1 year ago

    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 😊

    0