Frontend Mentor | 3 column preview with flexbox using coding challenge solution

@DivineUgorji

Posted 10 months ago

Good effort and congratulations on making an effort on this challenge. Just as @jacksen has pointed out some things you could do to improve the project, I would also like to point out a few more things to assist you.

I noticed that you did not load the custom fonts provided for this project. The font for each project is provided in the style guide file. Use Google fonts to select the font family and font sizes of the fonts as provided in the style guide, then copy the generated script and paste it into the header of your HTML file in the project. Then copy the font family and paste it in the body of your CSS file or create a custom property for it.
Your project is not centered on the page, to achieve this, add the following lines of code to the body in your CSS;

body {
display: flex;
align-items: center;
justify-contents: center;
min-height: 100vh;
}

Learn to be more semantic in naming your CSS classes and selectors. it is usually advised to name your selectors according to the context of the project you are building. This helps you in organizing the code base, and maintenance of the project in the future. For more about this, you can learn how to use BEM methodology, which is widely used in many CSS projects.

There's an overuse of pixels in your project. You need to learn how to use relative units such as rem, em, vh, percentages, etc. Relative units help in making your projects to be more responsive.

You do not have a custom Readme page for your project on GitHub. It’s always a good practice to have a custom Readme for your projects, using the Readme template provided as a guide. The readme page is a good way to document your project and helps with future contributions to the project.

To learn more about building responsive web pages, I'd recommend this course,conquering responsive layouts course by Kevin Powel.. This course would help you to understand more about building responsive web pages in less than no time. I hope these few suggestions help you along as you continue to learn, build, and grow.

Once again, nice effort 👍, Happy coding!🙏

Jacksen• 350

@jacksen30

Posted 10 months ago

Hey @leodk293,

Good effort! The solution definitely requires a bit more fine-tuning, though. I'd recommend starting off with some of the more basic challenges first. Here are some points to consider:

HTML Structure and Nesting:

The <main> tag must be nested within the <body> tag. Currently, it's outside of it. Remember, all the content of the page goes inside the <body> tag.

Use of Headings:

Instead of using generic div tags for the titles like 'SEDANS', 'SUVS', and 'LUXURY', consider using semantic heading tags. This could be <h1>, <h2>, or <h3>, depending on the content hierarchy.

Semantic Tags:

Utilize semantic HTML tags where appropriate. This enhances both accessibility and the meaning of the content. For instance, the description of each car type can be wrapped in a <p> (paragraph) tag. Additionally, if "Learn More" is intended to be a link, you should use the <a> tag.

Line Breaks:

Be cautious with the use of <br> tags for content formatting. They should be used sparingly. Instead, try to control content presentation and spacing using CSS.

I've noticed a lot of redundancy with your CSS code, when multiple classes or elements require the same property and values it best to create another generic class for that element for example="container1 container",

please note below I only consider reducing redundancy not fixing the multiple other issues that should be addressed.

Here is your original code:

body{
    display: flex;
    justify-content:  center;
}
.overall{
    display: flex;
    flex-direction: row;
}
.container1{
    padding-left: 20px;
    height: 400px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border: 1px solid orange;
    background-color: orange;
}
.container2{
    padding-left: 20px;
    height: 400px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border: 1px solid #207178;
    background-color: #207178;
}
.container3{
    padding-left: 20px;
    height: 400px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border: 1px solid #0A5054;
    background-color: #0A5054;
}

.item1,.item4, .item7{
    color: #EFEEEE;
    font-size: 30px;
}
.item3{
    text-align: center;
    width: 130px;
    height: 35px;
    border:  1px solid white;
    background-color: white;
    color: orange;
    border-radius: 15px;
}
.item6{
    text-align: center;
    width: 130px;
    height: 35px;
    border:  1px solid white;
    background-color: white;
    color: #207178;
    border-radius: 15px;
}
.item9{
    text-align: center;
    width: 130px;
    height: 35px;
    border: 1px solid white;
    background-color: white;
    color: #0A5054;
    border-radius: 15px;
}
a{
    font-size: 30px;
}
.item2,.item5, .item8{
    color: #ECEBEB;
}
@media screen and (max-width:990px){
    .overall{
        flex-direction: column;
        height: auto;
    }
}

Here is a refactored version that moves a lot of the container and item properties and values to a generic class as to avoid unnecessary duplication of CSS rules:

body {
    display: flex;
    justify-content:  center;
}
.overall {
    display: flex;
    flex-direction: row;
}

.container {
    padding-left: 20px;
    height: 400px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

.container1 {
    background-color: orange;
}

.container2 {
    background-color: #207178;
}

.container3 {
    background-color: #0A5054;
}

.item1,.item4, .item7 {
    color: #EFEEEE;
    font-size: 30px;
}

.item {
    text-align: center;
    width: 130px;
    height: 35px;
    border:  1px solid white;
    background-color: white;
    border-radius: 15px;
}

.item3 {
    color: orange;   
}

.item6 { 
    color: #207178;
}
.item9 {
    color: #0A5054;
}

a {
    font-size: 30px;
}
.item2,.item5, .item8{
    color: #ECEBEB;
}
@media screen and (max-width:990px){
    .overall{
        flex-direction: column;
        height: auto;
    }
}

If you want to start on some of the more simple challenges I'll be more than happy to provide more detailed feedback on specific pieces of code to help you improve, as you work up to the more difficult challenges. I hope you find my consideration points helpful ☺️

3 column preview with flexbox using

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community