Skip to content
OverviewSolutions
7
Comments
8
thaArcadeGuy
@thaArcadeGuy

All comments

  • Karen Robertson•190
    @indigoroseSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    The solution was a real push to develop CSS Grid. I have done it in the past but as I moved to backend work and development, my knowledge was hazy and the main reason why I am following these learning paths and designs to have good reference templates for future web applications.

    Now that I have this grid template, I will definitely refer back and experiment with other bento style layouts.

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

    This challenge definitely pushed my knowledge of grid and positioning of the testimonial cards.

    In the mobile view, it was simple to use flexbox and flex-direction: column for the initial card layout.

    However the issue came when wanted to use grid. I have previously used the site Layoutit! to design my grid designs.

    At first I thought the horizontal cards would be contained within their own div with the fifth card being vertical on the end.

    This took a long time to correct as doing so created various width and height card sizes. It wasn't until I stumbled on a css video about grid that finally helped and I was able to refactor my code removing the unnecessary parent child container elements and more seamless design.

    As I completed the challenge without using figma files, this is as close I could get.

    I am also building on my css custom properties, I mainly use them for the colourways, as it can become tedious typing out hsl colours for each html element.

    Maybe with the next I will look into SASS and Tailwind.

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

    In terms of styling, what I have struggled with is box shadowing. It may be due to my computer set up, but sometimes it hard to see from the design brief photos if you don't have the Figma files yet.

    As this challenge more focused on the ability for page to be responsive, it may be seen as minor detail but in the long run for web design it would be good to know how to gauge it on photos.

    Testimonial Grid Section

    1
    thaArcadeGuy•120
    @thaArcadeGuyPosted about 1 month ago

    The layout is responsive though could have also set the max-width and margins on either the body element or container class.

    0
  • thaArcadeGuy•120
    @thaArcadeGuyPosted about 1 month ago

    Your solution is the same and its responsive except that for smaller screen it goes back to the desktop design.

    0
  • Fachrezi•200
    @Fbeye04Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    The different thing I did on this project was how I set the markup on the html file where through https://fedmentor.dev/posts/html-plan-product-preview/, I learned to use the picture tag to wrap images on various types of screens, use hgroup to make it easier to write titles, and use the s tag.

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

    adjustment to start working on the project through mobile design first. Other than that, the other things I faced were the same as in the previous question.

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

    all area of html and css

    Simple Product Preview Card using vanilla HTML and CSS

    1
    thaArcadeGuy•120
    @thaArcadeGuyPosted 3 months ago

    Your solution is responsive on different screen sizes.

    1
  • thaArcadeGuy•120
    @thaArcadeGuyPosted 3 months ago

    Congratulations upon finishing you solution. So here are a few issues that I think you can work on:

    • Add a horizontal line below the ingredients and instructions sections using the <hr> element in your index.html file.
    • Add border bottom lines using such CSS code:
    table {
    border-collapse: collapse;
}

tr {
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

tr:last-child {
    border-bottom: 0;
}
    • Style lists by adding space between the list markers and text using such CSS code:
    ul, 
ol {
    padding-left: 1.25rem;
}

li {
    padding-left: 1.125rem;
    margin-bottom: 0.5rem;
}

li::marker {
    color: hsl(332, 51%, 32%);
    font-weight: 700;
}
    • The other issue is that your solution is not responsive so instead of using px use rem or em and percentages for your measurement values. And also do some research on Media Queries.

    Let me hope you find this helpfully.

    Marked as helpful
    0
  • Sudais Ahmad•10
    @AhmadDeveloperProSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    know i learning tailwind css so i use tailwind again with some project

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

    this my first challenge and i started from basic

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

    this is very easy project so for this project i don't need any help from websites and youtube

    Social link profile using css flex and for responsive media screen

    1
    thaArcadeGuy•120
    @thaArcadeGuyPosted 3 months ago

    Your solution is on-point except that you forgot to include the font family. Include <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> in your index.html and do the necessary styling.

    Marked as helpful
    0
  • thaArcadeGuy•120
    @thaArcadeGuyPosted 3 months ago

    Hey, I think you uploaded the wrong solution to the challenge.

    0
  • Natnael Gete•40
    @Natiman1Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing

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

    No Challenge it's pretty easy

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

    I wanna use grid next time

    Blog preview using CSS flexbox

    1
    thaArcadeGuy•120
    @thaArcadeGuyPosted 3 months ago

    Your solution came out very well but the only issue is that the layout doesn't seem to be responsive to smaller screens.

    0
  • Angelo Silva•60
    @angelo-sigoSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Hello! This is my solution for the QR code component challenge. I've opted by using just HTML5 and CSS3 for this project, and the thing that's make me most proud is the CSS code organization, I've spend a considerable time in code refactor to make it more readable and maintainable. I already have an idea of how to improve maintainability, but if you've any suggestion feel free to tell me!

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

    No particular challenge in mind, once I'm very familiar with the used technologies.

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

    I would like to know how I can improve my HTML code, for example, in terms of accessibility and good SEO practices.

    QR code component using semantic HTML and flexbox

    2
    thaArcadeGuy•120
    @thaArcadeGuyPosted 3 months ago

    First of all I like how your CSS has been arranged. Me being a newbie in web development I think its well structured. The issue I see from your solution is the font color of the h1 element. From the style-guide that was given it should have been {color: hsl(218, 44%, 22%);}.

    0