DEV Community

Cover image for Let's build the Mario Project!
Sharoπz
Sharoπz

Posted on

Let's build the Mario Project!

Hi all, today I'm gonna share with you all a small project named "MarioClub". The guaranteed outcome of this project is that, if someone attempts this project and complete it, then he/she will become excellent in HTML and also will become Intermediate CSS. So, why's the delay start coding & follow along!!

So, first thing's first - Setting up the environment for Project Mario

Here, I'm using Visual Studio Code & I will also highly recommend using it if you aren't coz it's the best in the business & it's free too.

After downloading it, I will also recommend downloading an extension called Live Server in VsCode and it will help you to create a local server and view the changes made to the website without refreshing it each time & is super useful, Trust me!

Okay, So you are done setting up the environment, now let's move forward & start building the website.

Let's start by creating a new folder & name it whatever you like. And then create a file named "index.html" which will contain all of our html codes.

So we can easily create a Boilerplate (means just a basic template of our html file) for our html file by pressing "shift + 1" (!) and then press enter. The generated boilerplate might seem to be a bit scary if you are a beginner, so don't worry we will cover it as we move forward.

Headings

Image description

Let's start by adding a header tag "" and let's write our first heading **MarioClub **within a heading tag, the available tags for different levels of headings are :-
h1, h2, h3, h4, h5 & h6
For viewing the different heading level's, click here.
So, here let's use the h1 tag for our main heading:

<header>
<h1>MarioClub</h1>
</header>

Now let's create a section tag (a section is used for diving our website into different sections) for storing the image & the welcome message. We can also provide a class to this section, so that this section can be targeted later to style using CSS (which we will cover in the later part of this blog).

<section class="banner">
<img src="img/banner.png" alt="marioclub welcome banner" />
<div class="welcome">
<h2>Welcome to <br/><span>MarioClub</span></h2>
</div>
</section>

Explanation of the above code:

The** img** tag is used to embed images in an HTML file and it contains an attribute named alt which is used to provide an alternate text or description about the image, if the image couldn't be loaded on the client browser due to some unforeseen reasons.
It also contains the main heading of our website enclosed within h2 tags and their is also a span tag used between them just to style the word.

Now let's create a navigation area in our website to help our users to navigate through the website more easily and quickly. It's format is shown below:

<nav class="main-nav">
<ul>
<li><a href="/join.html" class="join">Join the Club</a></li>
<li><a href="/news.html">Latest News</a></li>
<li><a href="/games.html">New Games</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>

Now let's add the main section of our website and that can be done using the main tag and within that we can add all the main contents like images, paragraphs (within the article tag) etc.

<main>
<article>
<h2>It's a me, Mario!</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci
dignissimos dolor, fugit libero exercitationem quos. Rem ex vitae
natus distinctio. Pariatur expedita a dolores obcaecati temporibus
quam? Aliquam, laudantium deleniti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptas voluptatem eum numquam cumque
architecto mollitia quam quaerat assumenda, fugit recusandae,
accusantium voluptates labore ab aut quis, error quisquam cum
expedita.
</p>
</main>

Images

Image description

Now lets add images to our website to make it more interesting. To do that we use the** img tag. Here let's do something different by adding the images as unordered lists & for that purpose we use the ul** tag and for the elements we use li tags. The format is shown below:

<ul class="images">
<li><img src="img/thumb-1.png" alt="mario thumb-1" /></li>
<li><img src="img/thumb-2.png" alt="mario thumb-2" /></li>
</ul>

Now lets add a Join Today! session to make it more interesting. And it can be added it in a section tag and also lets give it a class named Join to target it for styling using CSS, which we will cover in the next blog. Also lets add some dummy contents to it by using some sentences of lorem ipsum to make it more attractive.

<section class="join">
<h2>Join Today!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est repellendus cum laudantium quaerat aperiam voluptatum quasi vitae! Provident tempore molestias sint, eum officia culpa cupiditate? Pariaturnihil aliquid fugit voluptatem!
</p>

Forms

Image description

Now for the final thing, lets add a form at the bottom of our page. Forms are usually enclosed within the form tags and contain an input field with different type of attributes like type, name, placeholder etc. Here the type of the input form is email, so we can provide the value 'email' for the type attribute and we can also provide the same for the name attribute. Next is an attribute named placeholder which store a particular text or message to be displayed on the form box and it will automatically disappears when the user starts typing and is usually used to help the users to identify the purpose of those particular form boxes. Next we can use an attribute named required which will prevent the user from skipping those particular form box.

<form>
<input
type="email"
name="email"
placeholder="Type your email & hit enter!"
required
/>
<!-- submit button is not always necessary as hitting the enter will do the same. -->
</form>

Note: Comments are enclosed in html within <!-- Comments --> symbol.

Footer

Image description

The final section of our page is the footer section which contains the message to be displayed at the bottom section of our page. So lets simply add a copyright message as shown below,

<footer>
<p class="copyright">Copyright 2022 MarioClub</p>
</footer>

For the completed project files click here. The second part of this blog will be released soon and in it we will be styling the webpage using CSS, When it gets released it will be linked here.

Discussion (0)