Skip to content
OverviewSolutions
12
Comments
11
Manish Singh
@manishsinghraj

All comments

  • Zeref1028•10
    @Zeref1028Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    I have a little knowledge of media queries thats why im having a problem in that part where the container is not at the center eventhough i used, display: flex; justify-content: center; align-items: center; Although I wanted it to work with this code but it wont budge thats why I tried a different solution which is margin-top.

    Mobile-first solution using CSS Grid and Flexbox

    3
    Manish Singh•230
    @manishsinghrajPosted 4 months ago

    Hi, Great Start!

    Though I don't see any valid links for site or code. But answer for your question is use min height as 100vh (view height)

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

    This is the usual pattern one can use to center.

    0
  • Manish Singh•230
    @manishsinghrajPosted 4 months ago

    Great work!!

    Just to keep content, center of the page view - use min-height: 100vh for the body element.

    display: flex; justify-content: center; align-items: center; min-height: 100vh;

    Marked as helpful
    0
  • Ridwan Hasan•400
    @Ridwan10000Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of using media queries. It switches design when device width crosses 450px.

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

    I would like to get help in making the box shadow. I could make it while building the project

    result-summary-component using HTML, CSS

    1
    Manish Singh•230
    @manishsinghrajPosted 4 months ago

    Hi,

    You can try out box shadow generator

    https://www.cssmatic.com/box-shadow

    1
  • shalri•620
    @shalriSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Creating a reusable TestimonialCard component was interesting, since the cards have distinct values. I had to make the component customizable. I tinkered with Tailwind's grid utility classes. I realized I have to practice this more often.

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

    Tailwinds grid classes. I need to use it more to gain more familiarity. I went hard on the docs for this one.

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

    I'm all good for now. Just appreciating the free challenges.

    Responsive Testimonials Grid Section - React & Tailwind

    1
    Manish Singh•230
    @manishsinghrajPosted 5 months ago

    Great work!

    I've learned a thing or two from your code approach.

    0
  • xarisVavl•130
    @xarisVavlSubmitted 6 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?

    .

    flexbox and grid

    1
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    Good work!!

    0
  • Mesoma•140
    @mesoma-hubSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Improving on my use of flexbox for alignment and responsiveness and also working with images a lot more better.

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

    working with the image and making it span exactly half of the parent container.

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

    The heights and widths of the card, the paddings and margins used also the font sizes and line-heights and letter-spacings used.

    product-preview-card-component-main

    2
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    Hi,

    For the desktop view, you might consider limiting the width of the card by using a max-width property. :)

    0
  • Yeob•10
    @corkangSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Being honest, I had no idea after adding some tags on HTML. I didn't know what to begin with in CSS, but I started from small things like colors, and searched everything I need and tried it. I'm proud that I finally made it, including the responsive part!

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

    It was my first time to build a responsive web design, so I had to study about it. I studied about media query and made the background color and some margin settings in it so that it can be changes depends to the size of browser

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

    In my CSS code, I feel like things are not really ordered. I just looked for the properties I need, try it and add it without any steps or any rules. So I think I need some advise about how to order them or the steps for using CSS.

    Responsive Page using media query

    1
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    Its up to your preference to decide the ordering.

    Personally I prefer to follow the hierarchy of the HTML structure when arranging CSS properties. I begin by organizing elements based on their position in the HTML hierarchy.

    for individual properties I typically start with layout adjustments, like padding and margin, and then styling properties. I group related properties together for easier reference.

    For example:

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
    Marked as helpful
    0
  • Roman•110
    @AfterWaGaSubmitted 6 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?

    Had some troubles with section's borders on mobile devices. Still looking for how to fix

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

    Recipe page challenge

    1
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    Hi,

    About troubles with section's borders on mobile devices.

    You can include an extra <div> before your recipe__title section. So that all your text content resides within this div. and finally, you can apply padding to this div.

    Marked as helpful
    0
  • Akhlaq Ahmed Shaikh•20
    @AkhlaqShaikh1Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Some styling

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

    Card components

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

    Responsiveness and flex boxes

    Card

    3
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    Good work.

    You can utilize the <main> element to serve as the background, (bg-yellow), and introduce another <div> element for the card, (bg-white).

    Then, systematically include elements within this card, such as the image and text. This will help in readability and a well-structured codebase for developers to read.

    0
  • Simon•20
    @kgomotsosimonSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of building my first on frontend mentor. It is a way of making sure that you understand HTML & CSS.

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

    I struggled a lot with centering the container but still I don't think I did the right thing but I tried my best to center it.

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

    Hey community, I am kind of lost when it comes to make it responsive, because it seems I can't seem to get the screen sizes right.

    QR-code-component

    1
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    You did great!. About centering the container you can always try with flex.

    The object you want to center. You need to make it's parent element as flex. In your case (according to the your code), body should be made to flex.

    It's better to have another div element before the card container and after body. As we don't want to make body as flex( not good practice).

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

    All you need to do is make it flex.

    In order to center it horizontally use justify-content : center.

    In order to make it vertically aligned use align-items : center.

    And the current min view height should take up to 100vh.

    This is the usual pattern one can use to center it.

    Marked as helpful
    1
  • Satyam Jha•150
    @satyamJha002Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am practicing my HTML and CSS skills to complete challenges.

    QR Code

    1
    Manish Singh•230
    @manishsinghrajPosted 6 months ago

    Congratulations on completing your first QR code challenge!

    I would like to mention the topics you can search and you can start including them in your projects.

    Incorporate div elements strategically to enhance UI design. Utilizing divs effectively can significantly improve the structure and layout of your web pages.

    Before starting any new project, establish default CSS properties like box-sizing, margin, padding, and font family. This practice ensures consistency and streamlines your development process from the outset.

    Expand your understanding of the .root concept in CSS. Mastering its usage will empower you to optimize your styling techniques and create more robust projects.

    Marked as helpful
    0