Bring the power of semantic HTML to make a hero section with MVP.css. 🕴
Tags: html, css, webdev, tutorial
Published: 2020-12-18 13:45:55

What do you call a developer who can make efficient websites with ease? A developer who is ever-ready to finish making landing pages like a pro, or a dev who literally doesn't use any cool frameworks out there but still manages to output a world-class product? 

You may call them: "Most Valuable Dev (MVD)".

But what if a new dev comes, they just take the bare minimum, focus on _meaning_ and _structures_ the code to the best of their knowledge, and still does very best then that MVD? 

You should definitely call them: "Most Valuable Professional (MVP)".

![MVP Gif](https://media.giphy.com/media/xdEAArhWF50cM/giphy.gif)
<figcaption>You got to have some respect for that MVP </figcaption>

Now, what all was this for? How does an MVP have to do with a developer? Let's take a look.

---

# No class names, no frameworks, just semantic HTML, and you're done!

That's not what I promise, that's exactly what MVP.css promises it to be!

### What is [MVP.css](https://andybrewer.github.io/mvp/)?

> It is a **minimalist stylesheet for HTML elements**. 

Counting on features? Here are some:

1. Out of the box _CSS styling_.
2. No _class names_ or no _framework(s)_ to learn.
3. Uses semantic HTML.
4. Straight up HTML and nothing else.
5. Responsive by default.

I have previously tried a similar library where with just HTML, you can have a decent looking webpage.

{% post https://dev.to/vaibhavkhulbe/style-your-next-blog-with-vanilla-html-no-css-dc8 %}

But that had some specific tags and was geared towards a more complex approach I guess. Here, MVP.css tries to simplify things way more.

In my opinion, if you need a quick 'starter-template' for your next e-book, product, or you made a really awesome dev library, then this can definitely help. The process is extremely fast, the webpage you get is lightweight, and it follows semantic rules! 


### What we will be making?

This:

![MVP.css landing page](https://dev-to-uploads.s3.amazonaws.com/i/th1zjj90gki56o3ddxn8.png)
<figcaption>We are not much concerned about the design, but more on the overall building process.</figcaption>

Consider (the aptly named) "Ideanator" to be a fictional service provider whose aim is to make online products. Here are a few things this hero section has:

- The navigation (with dropdown).
- The sale banner.
- The heading, subheading, and call-to-action buttons.
- The testimonial.

Pretty basic of course but let's see how it's done.

#### ➡️ Step 1: Add the MVP to your webpage

There's literally ZERO configuration you need in order to start. No need for any `npm install` or some complex SDK integration. Simply load the core _mvp.css_ file to your _index.html_ file:

```html
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
```

#### ➡️ Step 2: Start making the structure!

The game of MVPs is all about being semantic. If you're unsure what semantic HTML means take a look at [this MDN documentation](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML). 

According to them, there are around 100 semantic HTML elements including:

- [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)
- [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
- [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
- [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
- [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
- [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
- [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
- [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
- [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
- [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
- [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
- [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
- [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) 

Of course, these elements are supported but there are a few more that can spice things up:

- [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)
- [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
- [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
- [`<pre>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
- [`<samp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
- [`<small>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small)
- [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)
- [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)

The ones that are **bold**, we can make use of those.

Let's start with the `<header>`. This houses our `<nav>` with `<ul>` / `<li>` lists and the headings. As for the following dropdown:

![MVP dropdown](https://dev-to-uploads.s3.amazonaws.com/i/nvj6szkdqib011f9hije.gif)

This can be achieved by simply adding a set of lists under an `<ul>` as shown:

```html
<li><a href="#">Learn more</a>
    <ul>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Get help</a></li>
    </ul>
</li>
```

Next up we have the sale tagline. I thought that can be a good use case of the `<article>` tag to achieve the desired result. So, inside it, we will have our `<aside>` with the text needed. Now to center the text, we can surely use the famous CSS trick of `text-align` but as we are some kind of MVP, so we will use HTML's native [`<center>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) tag. 😎

That quirky "MADE WITH ❤️ IN MY BACKYARD" might look cliché but that can be a good use of some of the skills to showcase! It's done with the help of the `<sup>` tag. Sup!? This is generally a superscript tag but MVP.css makes it look so cool!

The heading is simply the `<h1>` tag with a few not-so-common <mark>mark</mark> and <code>code</code> tags.

As for the CTA buttons, they simply don’t use the usual `<button>` tag. A nice trick is to use the `<p>` along with the `<a>` anchor tag for adding links. MVP will take care of the rest.

```html
<h1>Where ideas <mark>thrive</mark> with <code>code</code>.</h1>
<p>We are world's <b>#1</b> idea building company 💡 
coding all night long 👨🏻‍💻 </p>

<br>

<!-- CTA BUTTONS -->
<p><a href="#"><i>Get Quote</i></a><a href="#"><b>
Get Started &rarr;</b></a></p>
```

The content section comes next, which semantically means the `<main>` area. So that the hero section doesn't become too long (or becomes longer than the viewport), we will just include a testimonial here.

What great way to make a testimonial with the actual quote and the quoter's name than using the `<blockquote>`. Inside this, you can write the quote sentence (and can make it italic with the `<i>` tag). As for the name, the `<footer>` is more than enough for us. It gives us the perfect style needed.

```html
<main>
    <blockquote>
        <i>"One of the best services you can get in the year 2020."</i>
        <footer>- <b>PEETER LOO</b>, COO, Kingley Products Inc</footer>
    </blockquote>	
</main>
```

Boom! We are done. 🙊

Hah, two steps in, and you got a solid landing page! That's was super quick if you ask me. ⚡️

Here's the CodePen of the above example for you to try:

{% codepen https://codepen.io/kvaibhav01/pen/vYXmXJO default-tab=result %}

---

# More resources 🤩

Be a good MVP and follow these pieces online for better understanding:

- [MVP.css on NPM](https://www.npmjs.com/package/mvp.css)
- [Live demo of a landing page made with MVP.css](https://andybrewer.github.io/mvp/)
- [MPV.css GitHub repo](https://github.com/andybrewer/mvp)

---

_Thanks for reading. I appreciate it! Have a good day. (✿◕‿◕✿)_

---

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">This week&#39;s Dev Humour. 😂 👇<a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Developer?src=hash&amp;ref_src=twsrc%5Etfw">#Developer</a> <a href="https://twitter.com/hashtag/Programmer?src=hash&amp;ref_src=twsrc%5Etfw">#Programmer</a> <a href="https://t.co/369TOve9FP">pic.twitter.com/369TOve9FP</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1334896574137323520?ref_src=twsrc%5Etfw">December 4, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.