Brett Anda 🔥🧠 for Developer Bacon 🥓🥓

Posted on Feb 25, 2020 • Originally published at developerbacon.ca on Feb 25, 2020

Making a simple author byline for your website

#tutorial #beginners #webdev #css

Why would you want an author byline on your website

The main reason you would want to add an author byline to your site is to give credit where credit is due, and by this, I mean giving information about the author of the post or article.

The HTML for this author byline example contains a rel="author" attribute to help with the SEO of the page.

HTML

<div class="author">
    <img
        class="author__item author__pic"
        src="https://en.gravatar.com/userimage/137371786/7395c6c605915c6315f96d8cd8f6ada9.jpg?size=200"
        alt="my face"
    />
    <div class="author__item author__name">
        <span><b class="author__heading">Author:</b></span
        ><br />
        <span
            ><a class="author__link" rel="author" href="//brettanda.ca" target="_blank"
                >Brett Anda</a
            ></span
        >
    </div>
    <div class="author__item author__date">
        <span><b class="author__heading">Date Posted:</b></span
        ><br />
        <span>Today</span>
    </div>
</div>

SCSS

.author {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    @media all and (max-width: 600px) {
        flex-flow: column nowrap;
        text-align: center;
    }
}

.author__item {
    flex: 0 1 8rem;
    margin: 1rem;

    @media all and (max-width: 600px) {
        flex: 1 1 3rem;
        margin: 0.5rem;
    }
}

.author__pic {
    flex-shrink: 0;
    flex-basis: 8rem;
    object-fit: cover;
    object-position: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    padding: 0.3rem;
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.author__heading {
    font-size: 90%;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.author__link {
    text-decoration: none;
    color: blue;

    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

There is no javascript needed for this example

Codepen example

If you want to see this in example in action here is a Codepen I made for it.

See the Pen Author byline example by Brett
(@brettanda) on CodePen.

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

Shipping Fast: Test your knowledge of deployment strategies and techniques
Authentication: Prove you know your OAuth from your JWT
CSS: Demonstrate your styling expertise under pressure
Acronyms: Decode the alphabet soup of web development
Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥