DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

Interview: Basic Horizontal Nav Bar

#webdev #html #css #angular

It's like this:

Image description

Here is the code:

Mostly self explanatory:

<ul class="list">
    <li *ngFor="let item of list">{{item}}</li>
</ul>
Enter fullscreen mode Exit fullscreen mode 
.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;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Thanks,
Vishwak

Top comments (1)

Collapse
 
gilfewster profile image
Gil Fewster • • 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.

Read next

brunociccarino profile image

How to Write APIs Like a Pro in Go with GopherLight

Bruno Ciccarino λ -

tsudhishnair profile image

Benchmarking Crunchy Data for latency

T Sudhish Nair -

mpoiiii profile image

Creating Automated Marketing Tools with Zapier

mpoiiii -

railsdesigner profile image

Tailwind CSS Patterns

Rails Designer -