Mobile First with HTML/CSS/ Vanilla JS

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.