Skip to content
OverviewSolutions
19
Comments
11

Francesco

@FraCav99Italy310 points

Hi everyone! I'm new into programming and i'm passionate about web application developement.

I’m currently learning...

HTML CSS3 SASS/SCSS Javascript Angular

Latest solutions

View more solutions

Latest comments

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

    I'm proud of replicating the design closely and organizing my CSS using Flexbox. It helped me understand spacing, alignment, and mobile-first design.

    Next time, I’d spend more time improving responsiveness and using more semantic HTML elements like <section>, <article>, and <aside> where necessary.

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

    One major challenge I faced was aligning and spacing elements to match the design exactly—especially making the nutrition section and preparation time area look like the reference image. At first, my layout looked off in different browsers, and I struggled with making things sit on the same line or properly styled.

    I overcame this by revisiting Flexbox and learning how to use gap, justify-content, and align-items effectively. I also inspected elements using Chrome DevTools to figure out what was causing layout shifts. Additionally, I reviewed CSS units like em, rem, and % for better responsiveness.

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

    I’d appreciate feedback on how to better structure my HTML for accessibility, or how to make the page more responsive across all screen sizes.

    Responsive Recipe Page using Flexbox and Custom Styling

    #accessibility
    1
    Francesco•310
    @FraCav99

    Hi @Sarahchimaroke, congrats on completing this challenge!

    Overall the semantic of you code is ok, here's an improvement for the nutrition table:

    <h2>Nutrition</h2>
<table>
  <caption>The table below shows nutritional values per serving without the additional fillings.</caption>

<tr>
   <th scope="row">Calories</th>
   <td>277 kcal</td>
</tr>

add the other rows in the same way...
</table>

    Eventually you will have to adjust the style for the table, but in this way you can provide the semantic meaning of tabular data.

    With scope we specify that the <th> (the header) is related to the row is in it. I'd suggest to take a read from this article from Mozilla Docs which goes in more details about the topic.

  • Francesco•310
    @FraCav99

    Hi Godwin, congratulations on completing this challenge!

    You don't necessarily need to upgrade to pro plan. I real world project, usually most of the time you have to work with a figma, but sometimes not.

    I'm telling you this because happens to me a couple of times on previous projects I've worked on that the designs were shipped on pdf files or images.

    It's all a matter of practice. The more you practice, the more your eyes get trained to catch the details. It's not easy, but not impossible.

    I just wanted to share my experience. Nice job and keep on coding! :)

    Marked as helpful
  • Francesco•310
    @FraCav99

    This

    alt="A girl throwing tantrum but looking kinda cute LMAO"

    definitely makes me laugh hard! :D

    Anyway, good job on that! Also really like the accessibility approach with the use of aria attributes

  • Piyumi Premathilake•30
    @piyumi-1991
    What are you most proud of, and what would you do differently next time?

    I think I was able to design this web page more similar to the challenge which is provided. It's a win compared to the previous challenge. Added some CSS features like flexbox, grid.

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

    align the div center of the web page was a challenge. Fixed that issue by googling the solution.

    Blog preview card using HTML, CSS

    1
    Francesco•310
    @FraCav99

    Hi Piyumi, congrats on completing this challenge!

    Just some hints to help you write better HTML for future challenges.

    Avoid too much <div>s in your markup.

    By definition from MDN:

    The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

    Basically, has no meaning, cause it's just a generic container. Also using lots of divs inside the markup makes hard to understand what each part of markup is referring to (maybe a navbar, a sidebar?, for example).

    It's useful in cases like, taking from your solutions, to organize related things in a group, like you did in the author's details.

    Instead of using a <button> for the tag Learning, I've rather used a <p>.

    That's beacuse we don't need to do an action with it, but it's just a presentative thing.

    You used lots of <p>, which is not bad per se, but not all the text should be a paragraph. Some text is meant to be intrudoctory, like a title.

    In this example the title of the card with the class .course-title, would have been an <h1> instead of <p>.

    <h1> is a heading, there are six levels of them (<h1> - <h6>) but <h4> to <h6> are barely used.

    Another thing is, naturally some elements occupy all the available width (in CSS are called block level elements, so they naturally stack vertically and save you from adding extra markup for this.

    An example from your solutions for this is:

            <div class="learning-btn-div">
            <button class="learning-btn">Learning</button>
        </div>

    button is an inline element, which means it will occupy only the necessary width, based on the size of its content. You can change the behaviour of these elements by simply changing their display property from block to inline (or viceversa or to inline-block as well, which combine the best of both worlds. I suggest you to study which are the differences between all of these three.)

    so an alternative to this would be, for example:

    <p class="learning-tag">Learning</p>

    After all of this, an alternative and more semantically version of your solution would be:

        <div class="blog-card">
        <img class="illustration" src="assets/images/illustration-article.svg" alt="illustration">

        <p class="learning-tag">Learning</p>

            <p class="date">Published <time datetime="2023-12-21">21 Dec 2023</time></p>

            <h1 class="course-title">HTML & CSS foundations</h1>

            <p class="course-description">These languages are the backbone of every website. defining structure,
                content,
                and presentation.
</p>

        <footer class="tutor-details-div">
            <img class="tutor-img" src="assets/images/image-avatar.webp" alt="avatar">
            <p class="tutor-name">Greg Hooper</p>
        </footer>
    </div>

    To summarize, writing semantic HTML helps you better write organize and your content on the page (and it's a plus for accessibility as well!)

    As you can see I used other different tags like <footer> or <time>. Those are just a bonus to show that in the HTML there are lots of elements, each with their appropriate usages.

    It may seems scary at first, but don't worry, in practical use cases people don't use all of them, but just a bunch, some have just a very niche case of use. It's just a matter of building an intuition and referring to the MDN docs time to time! :)

    For the CSS part, it's overall good, but avoid using pixels as units for font-sizes. Rather use rem units.

    This beacuse if users take time to change the default font size from browser settings, the changes wouldn't be reflected and the users would have hard time to read the content of your page.

    To summarize all, I know that there are lots of things going on, but don't be scared by it! You did great and also completed another challenge!

    I hope my explanation will be useful to you! :)

    Also I leave you some good articles to read from Josh Comeau blog:

    If you have any question, don't hesitate to ask!

    Happy coding! :)

  • Fareed•100
    @hsfarid
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to complete this project successfully. I learned a lot of things, including how to host web pages using github pages, how to use fireshot to take screenshots of pages, how to better write a markdown, and many others.

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

    At first it was difficult getting the design right and I was missing some details because I was eager to complete it. But I had to relax and study the design very well, and eventually got it right.

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

    At the moment, I don't have any challenges.

    QR Code Component using HTML and CSS

    1
    Francesco•310
    @FraCav99

    Hi Fareed, congrats on completing this challenge!

    Your solution is great, just one thing is to put a value inside the alt attribute.

    Sometimes it's not necessary, if the image you're using is just decorative, like a logo or an icon, but in this case it's good to put one, just a brief one, like alt="qr code link" or something like that.

    Also, don't use px units for font-size, but use rem. This because if the user will change the default font size from browser settings, the size of the font will always be the same, and it's not good for accessibility!

    I'll share a useful blog post from Josh Comeau which explains the differences and how to build an inuition on which unit to use in any scenario.

    It's useful for people with visual impairments which happen to use screen readers. Overall, good job and keep up the good work! :D

    Marked as helpful
  • Francesco•310
    @FraCav99

    Hi Rafael, good work on this! :)

    Your code looks clean and organized, just one thing, don't use px units for margins, padding and font-size.

    For padding and margins are better ems unit, since the adapt better if the text shrinks or grow.

    For font-size, use rems, since they adapt better if the user takes the time to change font size from browser settings. If you keep using pxs for font size, they won't adapt to the user preferences.

View more comments