Frontend Mentor | Results Summary Component Challenge using Flexbox coding challenge solution

@0xabdulkhaliq

Posted about 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the <footer"> element not has been placed bottom properly. So let me explain, How you can place the component at bottom with using absolute positioning for footer

Luckily you already used Flex layout of css to center the component, So you just want to add absolute position for <footer> element to place it in bottom of the page

body {
position: relative;
}
footer {
position: absolute;
bottom: 1em;
}

Now your footer has been properly placed at bottom as per the design.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Tushar Biswas• 4,080

@itush

Posted about 1 year ago

Congratulations on completing the challenge! 🎉

The solution looks nice to me ;)

When choosing class and ID names for HTML elements, it's important to use names that are descriptive, meaningful, and easy to understand. Here are some suggestions for effective class and ID names:

Be descriptive: Choose names that accurately describe the purpose or function of the element. This makes it easier for other developers (including yourself) to understand the code and its structure.
Use meaningful names: Aim for names that convey the purpose or meaning of the element. Avoid generic or ambiguous names that don't provide much context.
Be consistent: Establish a consistent naming convention throughout your project. This helps maintain a clear and organized codebase.
Use lowercase and hyphen-separated words: Stick to lowercase letters and separate words with hyphens (-) for class and ID names. This improves readability and is a commonly accepted convention.
Keep it concise but not overly abbreviated: Use concise names that are easy to read and understand. Avoid excessively long names, but also avoid overly abbreviated names that may be difficult to decipher.
Avoid using presentational or stylistic names: Class and ID names should reflect the purpose or function of an element, not its appearance or style. Separating structure and presentation (using CSS for styling) makes your code more maintainable and reusable.

For example, consider using class and ID names like:

<header id="main-header" class="site-header">...</header>

In this example, the ID "main-header" and the class "site-header" provide a clear indication that this is the main header of the website.

<nav id="main-nav" class="site-nav">...</nav>

Here, the ID "main-nav" and the class "site-nav" indicate that this is the main navigation section of the website.

<main id="content" class="site-content">...</main>

The ID "content" and the class "site-content" convey that this is the main content area of the website.

<section id="about" class="section-about">...</section>

In this example, the ID "about" and the class "section-about" describe that this section is specifically about a particular topic.

<article id="blog-post-1" class="blog-post">...</article>

Here, the ID "blog-post-1" and the class "blog-post" indicate that this is an individual blog post within the blog section.

By using semantic elements along with descriptive and meaningful class and ID names, you can create a well-structured and easily understandable HTML codebase. It helps improve code readability, maintainability, and the overall organization of your web page.

The benefit of using min-height: 100vh; instead of height: 100vh; is that it allows the parent element to dynamically adjust its height based on the content inside it.

In my projects:

I always start with mobile-first workflow.
I use at least one main element for a page (entire content goes into the main, if I'm not using header & footer), and avoid divs as much as possible and use section and article element wherever I can.

<body>
<main>
All content 
</main>
</body>

I Use relative units as much as possible and avoid absolute units whenever possible.
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with important topics like block and inline elements, HTML Semantic Elements.

I hope you find these resources somewhat helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨

Marked as helpful

Results Summary Component Challenge using Flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community