Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile First with HTML/CSS/ Vanilla JS

Bubi 110

@voxx1

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback? :)

Community feedback

Cian 80

@ciandm

Posted

Hi Bubi,

Great job.

I would encourage you to install the Prettier extension for your code editor, and configure it to format your document whenever you save. If you use VS Code, here is a good blog to introduce you to Prettier. This will help you keep indentation consistent and will improve readability in your files. Some of your code is not indented consistently, and it can be difficult to read.

I would also recommend implementing the BEM notation for your CSS classes. This is simply a naming convention for your CSS classes, but it helps to improve the readability of your classes a lot, and when you want to learn SCSS it will help out massively when you want to use the & feature for nesting. To give you an idea of what this would look like, using your code as an example, you can see below:

Your code --

footer {
    background-color: black;
    color: white;
    text-align: center;
    font-family:"Alata";
    padding-top: 50px;
}

footer ul li {
    font-weight: 200;
    margin:20px;
    list-style: none;
}

 li:hover {
    border-bottom: 3px solid white;
    padding-bottom: 5px;
    cursor: pointer;
}

footer p {
    opacity: 0.4;
    padding-bottom: 50px;
}

Your code with BEM notation --

.footer {
    background-color: black;
    color: white;
    text-align: center;
    font-family:"Alata";
    padding-top: 50px;
}

.footer__list {
 // styles for the <ul> element can go here
}

.footer__listItem {
    font-weight: 200;
    margin:20px;
    list-style: none;
}

.footer__listItem:hover {
    border-bottom: 3px solid white;
    padding-bottom: 5px;
    cursor: pointer;
}

.footer__paragraph {
    opacity: 0.4;
    padding-bottom: 50px;
}

Hope that helps.

1

Bubi 110

@voxx1

Posted

@ciandm Thank you for your response! I will have a look! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord