Skip to content
OverviewSolutions
16
Comments
10
MukhammadBobur
@Bobstyle23

All comments

  • Ahsan•110
    @ahsanmaSubmitted 19 days ago
    What challenges did you encounter, and how did you overcome them?
    • How to work with images within a container
    • How to work with CSS Custom Properties
    • How to center a div horizontally & vertically within a page
    • How to use basic Flexbox
    What specific areas of your project would you like help with?

    I know this is a very basic project. But would be helpful regarding the CSS reset, whether to include a popular reset or treat it on a project basis.

    Another area of input I would like to get would be on, organizing CSS code based on what I have coded.

    Also, any input regarding improving my code would be grateful.

    QR Code Challenge - HTML & CSS Solution

    1
    P
    MukhammadBobur•250
    @Bobstyle23Posted 19 days ago

    Hi @ahsanma,

    Good job! To take control over any layout you are building with CSS I highly recommend resetting the CSS, you don't know what to expect from your HTML elements because they come with default margins or padding from the browser type you are using.

    1
  • P
    Josh Kahlbaugh•380
    @Joshk7Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm glad that I switched from a purely flexbox layout to using some CSS grid because grid allowed me to split up cards into different sections without worrying too much about containers.

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

    The biggest challenge was deciding on flexbox or CSS grid and I overcame that challenge by trying flex and them using grid instead.

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

    The one thing that I know needs some work is the height of the cards on desktop because they are ever so slightly smaller than the figma design.

    Four Card Feature Section using CSS Grid

    #pure-css
    1
    P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Hey Josh, well done! Let me help you with setting up a grid. You don't need to declare the grid rows but let the grid set them up for you unless you need full control over rows. Just declare 3 columns with the same width or 1fr and align-self 1st and 3rd grid-items to the center and you are good to go.

    0
  • P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Hi Sebastian, did you also notice the difference between the provided design and the solution design?

    0
  • P
    Jye Harry•250
    @jyeharrySubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I like to use as little media queries as possible so I wanted to make the grid intrinsically responsive. I couldn't quite figure out how to do that so had to use a media query to resize the grid.

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

    I'd like help figuring out how to make the grid intrinsically responsive if possible, so I can avoid using media queries as much as possible. This may not always be possible but I think there could be a way. I'm trying to model Andy Bells way of thinking by making everything fluidly responsive.

    Testimonial grid section using Cube CSS

    #accessibility#bem
    1
    P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Hey Harry! You can do better by centering the main container and slightly modify the fonts and add a shadow to containers

    0
  • P
    Harta Shuwanto•140
    @hartashuSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Being introduced with CSS grid, make a complicated layout more achievable.

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

    The challenge I encountered: How to make the colorful line on the top of each card looks exactly the same as in the design. What I used right now is border-top property, but still has a slightly different.

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

    Need to have more experience in:

    • Semantics HTML in depth.
    • Make an efficient, modular, maintainable CSS code to work with a team.
    • BEM naming convention

    Responsive four card feature section page with CSS Grid

    #bem#semantic-ui
    1
    P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Good job Harta! You can do better by changing the body's background color and by adding negative spread value to the box-shadow of -11px so it does not spread horizontally

    0
  • P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    If you could do this, you can do better! Try to add more semantic tags in your HTML file rather than divs. Give meaningful names to your class and ID's so the person who is reading your code could understand. You do not need to add line break tags for the product title just give it font-size and your container the certain width and they will handle the rest. Add at least one heading tag in your HTML. Add alt attribute to your image.

    0
  • P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Good job! You can improve more like background colors and spacing between sections

    1
  • P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Good job! Would be better if you increase spacing between image and name and decrease a little bit of space between profile links

    0
  • pruwt•20
    @pruwtSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge was much more seamless compared to the previous QR component. Approaching responsiveness by using simple fundamental principles, like not using px for elements except images, for instance, helped. I'm proud of improving on the responsiveness. It was much easier, which I guess is a sign of improvement.

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

    For challenges faced, even though there was an improvement with my approach to responsiveness, I think there's still much more work to do. For instance, units such as em and rem, even though I understand them, I must say it's a bit confusing. Additionally, thinking critically on when to use max width is something that's starting to make sense.

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

    I think trying to match the design as closely as possible is still in the works. I need help on the best way to handle the margins (mostly top and bottom) in this case (I didn't use auto in this case). That's pretty much it

    Blog preview component

    3
    P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Good!

    0
  • Rodrigo Valladares•30
    @RoValladaresSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Successfully centering the content perfectly on the screen using Flexbox and achieving a clean, responsive design. I’d experiment with Tailwind CSS or a modular CSS architecture (like BEM) for more complex projects.

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

    Vertically aligning the content and avoiding overflows. d min-height: 100vh to ensure the content always occupies the full screen regardless of resolution

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

    Validating if the use of relative measurements (like percentages and vh) is the best practice for this type of challenge. Feedback on how to better handle whitespace (padding) on larger devices to improve the scalable design.

    Includes tools like CSS Flexbox, mobile-first design, and accessible.

    #accessibility#pure-css
    1
    P
    MukhammadBobur•250
    @Bobstyle23Posted 3 months ago

    Hey, it could be better if you add some padding around your text container and fix the width of your overall container. Hope it helps

    Marked as helpful
    0