Hi all, today I'm gonna share with you a small project named "MarioClub". It's just a simple project which will help you to refresh your knowledge in some of the important & basic concepts of both HTML & 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 coz it's the best in the business & is 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 the site each time when you make any changes to the code & is super easy, Trust me!
So when you are done setting up the environment, 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 (it is just a basic template of our html file) for our html file by pressing "shift + 1" (!) and then press enter or you can just simply type the word doc & then press tab. 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
Let's start by adding a main heading to our site & it can be done using the header tag "". Let's write our first heading MarioClub within a heading tag.
The available tags for the 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 for our site. 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 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
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
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
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.
Top comments (0)