Skip to content
OverviewSolutions
9
Comments
11
P

Micha Huhn

@MichaHuhn200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Konrad•370
    @konradbaczyk
    What challenges did you encounter, and how did you overcome them?

    Work with svg files was difficult, but now I understand so much more when it comes to working with them.

    Article preview component

    #sass/scss#accessibility
    1
    P
    Micha Huhn•200
    @MichaHuhn

    That looks really good, well done! Awesome that you learned much about SVGs. The tooltip/popover is also well made.

    Here are two points that can be improved:

    1. Semantic HTML:
      • As your class name article-box indicates, we created an article in this exercise. That's why we can use the semantic <article> element here instead of a <div>.
      • The main heading should always be the <h1> element, even if there is only one heading on the page. The different headings h1, h2, h3, ... are purely semantical. That means we shouldn't choose heading elements based on a desired style. The style can be adjusted with CSS. So in this exercise we should use the <h1> element, because it's the only heading on the page. Then we can style it accordingly like defined in the mockup.
    2. Naming:
      • Just a small point: Currently, the function to toggle the "icons box" is called showIconsBox(). Because its task is to toggle stuff, we could also name it toggleIconsBox().

    I hope that's a bit useful. Very good project.

    Marked as helpful
  • P
    MAGENE Sem Joel•320
    @Jomagene
    What are you most proud of, and what would you do differently next time?

    I am most proud of the clean and efficient responsive design, which was achieved using a combination of Sass/SCSS for modular styling, Flexbox with wrap property for layout management, and a mobile-first design approach. Next time, I might explore using CSS Grid in combination with Flexbox for even more flexible and complex layouts, and consider implementing mixins in Sass to simplify and reuse media queries.

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

    One challenge was ensuring that the layout and images adapted perfectly across various screen sizes. I used media queries to handle different breakpoints effectively and applied Flexbox to maintain consistent alignment and spacing.

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

    I would appreciate feedback on optimizing my Sass/SCSS structure, especially around organizing media queries and potentially integrating mixins for better reusability.

    Meet Landing Page using Sass/SCSS, Flexbox, and Media Queries

    #accessibility#sass/scss#semantic-ui
    1
    P
    Micha Huhn•200
    @MichaHuhn

    The native CSS media queries don't support variables unfortunately. That's why I came up with a custom SCSS solution to organize media queries and breakpoints.

    When I create a new project, I always paste this _media-queries.scss file into the project:

    @use 'sass:math';

$breakpoint-tablet-min: 550px;
$breakpoint-laptop-min: 1100px;
$breakpoint-desktop-min: 1500px;

$font-size-base: 16px;

$tablet-and-bigger: '(min-width: #{math.div($breakpoint-tablet-min, $font-size-base)}rem)';
$laptop-and-bigger: '(min-width: #{math.div($breakpoint-laptop-min, $font-size-base)}rem)';
$desktop-and-bigger: '(min-width: #{math.div($breakpoint-desktop-min, $font-size-base)}rem)';

    It's inspired by Josh Comeau:

    • With this approach you can define pixels as breakpoints and convert them to rem.
    • The breakpoints are in areas with few devices, so each category (mobile, tablet, laptop, desktop) has the same experience.
    • The media queries can be called tablet-and-bigger, ...

    Then I use these media queries in the following way:

    /* import `_media-queries.scss` file here */

div {
  padding: 1rem;

  @media #{$tablet-and-bigger} {
    padding: 1.5rem;
  }

  @media #{$laptop-and-bigger} {
    padding: 2rem;
  }

  @media #{$desktop-and-bigger} {
    padding: 2.5rem;
  }
}

    My SCSS folder structure is inspired by this YouTube video.

  • Benhemin•180
    @Benhemin
    What are you most proud of, and what would you do differently next time?

    I took my time to organize my SCSS as best I could and it really paid off in the end when I was adding all the media queries.

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

    .

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

    .

    Meet Landing Page using SCSS and HTML

    #sass/scss
    1
    P
    Micha Huhn•200
    @MichaHuhn

    Looks really good, well done!

    Also good job with making the site responsive and including the 3 different views (mobile, tablet, desktop).

    Here are some ideas:

    You can add cursor: pointer; to the buttons to give them the right cursor.

    If you want to enhance the semantic HTML, you can add the following tags in addition to the footer tag you already used: header, main, section, article.

    Another nice improvement is to use rem for sizes, font sizes, and media queries. This way the elements scale automatically when the user adjusts the browser's default font size. Here are two related tutorials:

    I hope that's a bit useful.

  • leodev•480
    @hangtime319
    What are you most proud of, and what would you do differently next time?

    In this project I used other grid layout functions to position the elements such as the grid-area. I'm proud to have learned this technique to apply to specific projects.

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

    My biggest challenge was trying to fit the sections within the grid in the project order. With the grid area it was easier to do this. In the next projects, I will apply this function.

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

    I would like help making the grid more responsive with less code.

    Testimonials grid section using CSS Grid Layout responsive.

    #accessibility
    1
    P
    Micha Huhn•200
    @MichaHuhn

    Looks really good, well done!

    About your question:

    Frist we can start with the centering. I would structure the HTML in the following way:

    <body>
  <main>
    <ul class="testimonial-list"><ul>
  </main>
</body>

    An unordered list could be a good semantic HTML element for the testimonials, but it doesn't have to be a list. You can also use a div.

    We don't need margin or padding on the body, because we can handle centering in a different way as explained below.

    The main should span across the whole viewport as usual. This way we could change its background color for example. In addition, we can use the main for centering the testimonials like so:

    main {
  display: grid;
  place-content: center;
}

    place-content: center; centers everything horizontally and vertically.

    After that, we apply a max-width to the testimonials to prevent them from spanning across the whole viewport. In the Figma mockup it's max-width: 1110px;. For accessibility we can use max-width: 69.375rem;.

    We can remove grid-template-columns and grid-template-rows and use grid-auto-columns: 1fr; instead. This will create equal columns automatically when using grid-template-areas. The rows will also be created automatically.

    Finally, we can introduce a media query to make the site responsive. I did this challenge with a mobile-first approach. That means I wrote all the styles for the mobile view and then updated the styles for desktop with the help of a media query. In this case we can use this media query:

    @media (min-width: 68.75rem) {
  grid-template-areas:
    'one one two five'
    'three four four five';
  gap: 1.5rem 1.875rem;
}

    68.75rem is equal to 1100px. That's a good size, because there are not many devices in this area.

    On mobile you can stack the testimonials like so:

    grid-template-areas:
  'one'
  'two'
  'three'
  'four'
  'five';

    With this approach the grid layout adapts automatically and it also works on mobile through the media query.

    I hope that's a bit useful.

    Here is also a solution as a YouTube tutorial.

  • Maian Lucas de Jesus Oliveira•120
    @MAIAN-HUNTER
    What are you most proud of, and what would you do differently next time?

    svg, grid

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

    svg

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

    svg

    four-cards

    #accessibility
    1
    P
    Micha Huhn•200
    @MichaHuhn

    Good work.

    It's possible to embed an SVG with the normal img tag like so:

    <img src="path/to/icon.svg" alt="">

    There is a nice technique to create a wrapper element which centers the content and provides spacing left and right.

    It's explained in this YouTube video.

    It could be applied to the header.

    I hope that's a bit useful.

    Marked as helpful
  • P
    Micha Huhn•200
    @MichaHuhn

    Your mobile view looks really good, well done.

    There is a nice technique how to create equal columns. You can put the following code on the card component:

    display: grid;
grid-template-columns: 1fr 1fr;

    Currently, the button text is squashed. That can be fixed by removing to padding left and right. After that, width: 100% can be applied, so the button stretches from left to right.

    I hope that's a bit useful.

    Marked as helpful
View more comments