Skip to content
OverviewSolutions
48
Comments
10
Nadir Bousalah
@Medido1

All comments

  • MARCUS-IMPERATOR•90
    @MARCUS-IMPERATORSubmitted 8 months ago
    What specific areas of your project would you like help with?

    Making a website responsive

    Recipe page

    1
    Nadir Bousalah•820
    @Medido1Posted 8 months ago

    for the mobile version : in your Html try to the first img ine one div and the rest of the page in a different one so you can apply padding on the content alone and the img would take the whole width of the screen and .container { width: 100vw; } this is before the media queries ! i hope this helps

    Marked as helpful
    1
  • Nadir Bousalah•820
    @Medido1Posted 8 months ago

    first i declared an array const month31days = [1, 3, 5, 7, 8, 10, 12]; every number represents a month that is 31days long then in my checkValidity Function i used a condition to check: if the current day > 30 and the current month is not included in the array it will be invalid. else if (!month31days.includes(month) && day > 30 && month > 1 && month < 12) { isValid = false;

    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • Used grids effectively to create the desired layout
    • Used background pattern and configured it as per the design
    • Used css classes to differentiate between similar elements with different properties
    What challenges did you encounter, and how did you overcome them?
    • Took a while to figure out the proper colours for each paragraph.
    • Matching the height of the last testimonial with the other ones - did it using a flex container.
    • Using the background pattern on the first testimonial - managed to position it using percentage.
    • Restyling the testimonial containers for mobile screens - needed resetting the columns to 1, but also the positioning, like so
     .testimonial--large-2 {
    grid-column: 1;
  }
    What specific areas of your project would you like help with?

    Maybe a more reliable way of styling box shadows.

    Testimonials grid section using CSS Grid

    1
    Nadir Bousalah•820
    @Medido1Posted 8 months ago

    great idea to have mulitple break points!! i'll try to apply that to my own challenge

    1
  • Nadir Bousalah•820
    @Medido1Posted 8 months ago

    well done!!

    0
  • Mohamed Ashraf•300
    @hamody-74Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

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

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

    Product preview card component - Flex

    1
    Nadir Bousalah•820
    @Medido1Posted 8 months ago

    great work !!

    Marked as helpful
    1
  • Michael•80
    @vonsackerSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how the result looks like the designs.

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

    I had some issues with making the page responsive in the right way. I learned a bit about media queries and how to use them and fixed it.

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

    maybe my code could be more redundant.

    Responsive recipe page

    1
    Nadir Bousalah•820
    @Medido1Posted 8 months ago

    well done!!

    1
  • Nadir Bousalah•820
    @Medido1Posted 8 months ago

    nice work!! you can center the card in the screen and fix the footer at the bottom of the page using flex-box

    1
  • Prantaneel Pegu•60
    @Prantaneel-PeguSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Making the site responsive on all screens, from desktops to small mobiles. It even supports mobiles in landscape mode. Also, I wrote the code in a very clean and organized way.

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

    Not any really.

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

    How can I implement responsive typography page-wide? I would like some links to guides on this topic.

    Responsive Blog Preview Card using Absolute Positioning and Transforms

    3
    Nadir Bousalah•820
    @Medido1Posted 8 months ago

    Great work!! if you look at the design of the active state, you can see that there is an increase in the box shadow of the container when hoverd over, you should consider adding that to your code

    0
  • Nadir Bousalah•820
    @Medido1Posted 8 months ago

    Great work!! but i think it's recomanded to write the CSS on it's own seperate file, it offer much better readability than being in the header of the Html document

    Marked as helpful
    1
  • Nadir Bousalah•820
    @Medido1Posted over 1 year ago

    Great work !! Try to add the following code to center your card horizontally:

    body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

    Marked as helpful
    1