Interview: Basic Horizontal Nav Bar

#webdev #html #css #angular

It's like this:

Here is the code:

Mostly self explanatory:

<ul class="list">
    <li *ngFor="let item of list">{{item}}</li>
</ul>

.list {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
    border: 1px solid grey;
    margin: 5px 5px 0 5px;
    > li {
        display: inline;
        padding: 11px;
        border-right: inherit;
        opacity: 0.7;
        &:hover {
            background-color: grey;
            opacity: 1;
        }
    }
}

Thanks,
Vishwak

Top comments (1)

Gil Fewster • Dec 19 '22 • Edited

I’d recommend wrapping in a nav element for good semantic practices, improved seo and accessibility.

When interviewing, you should also stick to vanilla html and css, rather than using Angular directives (or React etc) unless the interviewer has specifically asked you to.