Skip to content
OverviewSolutions
6
Comments
5
P
Michał
@Michal-Majchrzak

All comments

  • Shah Mohammad Mohibbullah Shovon•150
    @mohibbullahSh0vonSubmitted 30 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud that in this challenge I have learned how to handle many types of style difference in a single page and keep the CSS style sheet as clean as possible.

    I would try to make different files for different classes/styles (Ex. general.css, utilities.css etc.)

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

    Implementing the difference of styles like color, font-weight, font-family, list bullet point styles etc. while keeping my CSS code clean were challenging for me.

    Most of the cases I have overcome them by making my own custom utility CSS classes and implementing them on desired html elements.

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

    In the first unordered list of this page , in the first list item the last word 'minutes' when it comes to mobile viewport goes to next line which is okay but it does not horizontally aligns with the first line.

    I need help to solve this problem.

    Responsive Recipe Page using CSS media query

    1
    Michał•160
    @Michal-MajchrzakPosted 21 days ago

    Hey Shah 👋, congrats on finishing the challenge i like your utility classes approach. 😀

    Regarding your unordered list problem. Text in li element is not aligned when it breaks to new line because of the ::before pseudo-element and position: relative. In relative position element is still part of document flow and space for it is still reserved even if visually it is in different location.

    When you change position from relative to absolute on li::before, the element will be removed from normal document flow and space for it wont be reserved ( which is causing misalignment ).

    .card-unordered-list-custom-style li::before{
  position: absolute;
  left: -1.4rem;
}

    Now to set ::before next to li text ,we can add position: relative to li item itself.

    li {
 position: relative
}

    Because of that change, now ::before will be positioned relative to li element which is closest positioned ancestor. If you want to read more on position this MDN documentation on position helped me to figure this out.

    Hope this was helpful, have a nice day and Happy Coding😀

    Marked as helpful
    0
  • Michał•160
    @Michal-MajchrzakPosted 27 days ago

    Hey Ramkumar 👋, your solution looks really good and faithful to the original design. Your CSS code is also well organized and readable.

    Keep up the good work 👍 and Happy coding 😀

    Marked as helpful
    0
  • Anuska Jose•10
    @JoseRaidersSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the following:

    • Responsive design: the card adapts well to the two given screen sizes (mobile: 375px & desktop: 1440px), which is a huge accomplishment for me. Ensuring a consistent user experience across devices is key.
    • Pixel-perfect implementation: Although the Figma design didn't mention all the dimensions, I did my best to match the design as closely as possible, especially when considering details like spacing, colors, and typography.
    • Code structure: I kept my HTML and CSS as organized as possible making use of the BEM methodology and semantics.
    • Hover effect: Subtle interactions like the hover state over the title adds an elevation for user experience.
    • CSS variables: Implementing variables for colors, fonts, and sizes would make future changes or theme switching easier.
    • Flexbox: While the card may look great, digging into more advanced CSS layout techniques like Flex provides more control over responsiveness and creative possibilities.
    What challenges did you encounter, and how did you overcome them?

    Achieving the responsive design was the challenge. Having to ensure that the blog card looks good across different screen sizes can be tricky, especially when dealing with image scaling and maintaining layout consistency. I overcame this by the use of media queries. Media queries help to adjust the layout and make the design responsive.

    Also, matching the design to the pixel-perfect was another challenge, especially with spacing and font weights. To combat this challenge, I did the best I could with what the Figma design provided.

    Blog Preview Card

    1
    Michał•160
    @Michal-MajchrzakPosted 27 days ago

    Hey Anuska 👋, congrats on finishing challenge, i like your solution it looks really good.

    If you don't mind i have one suggestion. In the design for the mobile view the main image is cropped on the left and right side, you can achive this result by using object-fit: cover property on the img element and in the same time setting width and height of the img. By using object-fit: cover browser will try to fill rectangle of the img element but image will keep original aspect ratio.

    I hope this was helpful, Happy coding😄

    Marked as helpful
    0
  • Matthew Lancaster•120
    @lank81Submitted 29 days ago
    What challenges did you encounter, and how did you overcome them?

    I'm still having issues with my media query. I tried to change the image and border radius when shrinking to 768 or less. I wasn't seeing the results I expected. I tried to have ChatGPT and GitHub Co-Pilot look over my work and there were no suggestions to fix my issue.

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

    Media Queries

    Product Page Preview Challenge

    2
    Michał•160
    @Michal-MajchrzakPosted 29 days ago

    Hey @Matthew 👋, here are some suggestions that may help you with this challenge

    • to change product image based on viewport width you can use picture and source elements inside HTML file. This resource: Responsive Images helped me to implement this in my solution.

    • inside your .container class you can change flex-direction to column when width is less than 768 px so the image would be displayed on top.

    • additionaly inside media query you are using > to apply styles to img element that is direct child of the element with .container class.

    .container > img {
      border-top-left-radius: .625rem;
      border-top-right-radius: .625rem;
    }

    This rule is not applied because direct children of .container are divs with .column class. You can change this to .container > .column > img then top-left and top-right border radius will be applied to image.

    I hope this is helpful, Happy Coding😀

    Marked as helpful
    1
  • Michał•160
    @Michal-MajchrzakPosted 29 days ago

    Hey @aohinoyi 👋, great job on finishing the challenge

    I have some suggestions to help improve your solution :

    • text inside h2 and p elements should be switched in places. In the design the heading is Improve your front-end skills by building projects and the rest is in paragraph.
    • there is additional left and right padding between text and edges of the QR image, you can add it to your .card-text class to make your solution look more like the design.

    Happy Coding 😀💻

    Marked as helpful
    0