Skip to content
OverviewSolutions
9
Comments
11
P
Micha Huhn
@MichaHuhn

All comments

  • Konrad•370
    @konradbaczykSubmitted 4 months ago
    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

    1
    Micha Huhn•200
    @MichaHuhnPosted 3 months ago

    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
    0
  • MAGENE Sem Joel•320
    @JomageneSubmitted 3 months ago
    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

    1
    Micha Huhn•200
    @MichaHuhnPosted 3 months ago

    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.

    1
  • Benhemin•180
    @BenheminSubmitted 7 months ago
    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

    1
    Micha Huhn•200
    @MichaHuhnPosted 3 months ago

    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.

    0
  • leodev•290
    @hangtime319Submitted 6 months ago
    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.

    1
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    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.

    0
  • Maian Lucas de Jesus Oliveira•100
    @MAIAN-HUNTERSubmitted 4 months ago
    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

    1
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    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
    0
  • Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    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
    0
  • Laura Nguyen•130
    @laura-nguyenSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Proud: making the page responsive between two devices, using flexbox, keeping code concise

    What to do differently: I feel like I shouldn't have added class names to almost all of the tags in the HTML file and didn't reference most of the class names in the index.scss file.

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

    I noticed that the bullet points in the unordered list are horizontally centered on mobile with the text beside them. I wasn't sure how to accomplish that. I tried looking at some resources online, but I couldn't find anything.

    Also, it's been somewhat challenging to complete exercises without the Figma files but what I've done is used a Figma plugin to convert screenshots into the designs

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

    See challenges above

    Recipe page using SASS

    1
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    Looks really good, well done!

    I also noticed that the bullet points are centered on mobile. However, I wasn't sure if that was made on purpose by the designers, so I didn't center them.

    But if you want to know how to center them, this YouTube tutorial might help. CSS grid is used in the video which allows you to center elements.

    It seems like the black/gray text color is slightly different, but that's not a problem.

    I like that you used the header element. I forgot it. I will add it too :)

    Good job with the table. I didn't use the table element, because I didn't know how to style it with this semantic table element. But your solution helped me, so I will update my table.

    0
  • Vincent William Rodriguez•50
    @vincentwilliamrodriguezSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge has been a great way to learn more about flexbox and responsiveness.

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

    However, getting the padding and size of the card to match those in the design was a bit challenging, but this was solved using the clamp() function.

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

    What are better and more effective ways to implement a responsive layout for this particular challenge?

    Responsive social links profile using CSS Flexbox

    1
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    Good work!

    You are using good class names.

    Do you know why your solution is so small compared to the mockup?

    Regarding your question: You can put the elements card__profile and card__btns into a dedicated HTML element, e.g.:

    <div class="card">
  <div class="card__profile">
  <div class="card__btns">
</div>

    Then it's easier to center this card element. For example you could use grid on the main element to center the card:

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

    To make the card responsive, I applied a max-width-wrapper class to the card element. This technique is explained in this YouTube video. That's an interesting approach, but there are also other ones.

    I hope that's a bit useful.

    0
  • Gian•30
    @gippo05Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the way I wrote the HTML and CSS styles for this without any help.

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

    I was challenged about flexbox and display properties but I went back on my previous projects and re-learned it.

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

    I need help with the border part of the project. As we can see I only came close. I also wanted to get feedback on how I did and what can I improve on.

    Blog Preview Card using HTML & CSS

    1
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    Good work!

    I created the border/shadow with the help of this video: https://www.youtube.com/watch?v=GI8t1ubXoX0

    box-shadow: 8px 8px black;

    You may noticed that the corners of the image are a bit squashed. It can be fixed by applying the padding only to the .container2 class and by removing the padding from the image.

    I hope that's a bit useful.

    Marked as helpful
    0
  • Rehm-Ali•60
    @rehmaliSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that i wrote whole code with my own head , without seeking any code online. I will next make a plain on paper before starting a project

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

    Well, in the footer it was hard for me to align text with the author image, i researched somethings online and i overcome this issue.

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

    I want people to tell me more about position elements within elements

    using plain HTML and CSS

    1
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    Good work!

    You used display: flex; and align-items: center; correctly to position the author name. When using display: flex; (or display: grid;), it's possible to use the gap property to create a gap between each element inside a flex container.

    E.g.

    display: flex;
align-items: center;
gap: 0.75rem;

    The padding on the author name can be omitted with this approach.

    The image corners are a bit squashed. It can be fixed in the following way:

    1. Wrap the card with a dedicated HTML element like <div class="blog-preview-card"> or <article class="blog-preview-card">
    2. Apply padding to this card component
    3. Remove the padding from the image

    I hope that's a bit useful.

    0
  • Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    Good work!

    If you want to improve the responsive design, there is a nice technique:

    1. Images become responsive by adding: max-width: 100%; With this CSS declaration, width and height can be omitted. Now the image will scale automatically.

    2. Currently, width: 320px; is applied to the card. By changing it to max-width: 320px;, the card will automatically shrink on small screen sizes to prevent overflow.

    I hope that's a bit useful.

    Marked as helpful
    0