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)".

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?

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.

Style your next blog with vanilla HTML. No CSS. 😵

Vaibhav Khulbe ・ Jun 12 '20

#beginners #html #css #tutorial

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:

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:

<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.

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

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

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

• <blockquote>
• <code>
• <form>
• <pre>
• <samp>
• <small>
• <sup>
• <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:

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

<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> 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 and 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.

<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.

<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:

More resources 🤩

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

• MVP.css on NPM
• Live demo of a landing page made with MVP.css
• MPV.css GitHub repo

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

This week's Dev Humour. 😂 👇#DevHumour #Developer #Programmer pic.twitter.com/369TOve9FP

— Microsoft Developer UK (@msdevUK) December 4, 2020

📫 Subscribe to my weekly developer newsletter 📫

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's my Medium profile.