web design 101 – Build Your First Website – Part 1

Today I’m going to share with you a little bit of my experience in the web design industry. I will help you in this tutorial to build your first HTML and CSS website. I’m going to suppose that you already have some basic understanding of both HTML and CSS, and if you don’t I recommend that you take first a look at this tutorial made by Codeacademy which I think it’s a good one for absolute beginners.

 

web design tutorial

This part one will be focused on the HTML structure. We can split the website into 6 sections:

  1. The header
  2. Intro section
  3. Services section
  4. Blog section
  5. Contact section
  6. The footer

And about the font, we will be using a popular one called Roboto font from google fonts.
You can check the full file structure at Github. 

 

1. The Header

header html

So we will have inside the header a .container which is an important div to set a width for the page content, and inside of it, we will have the logo in form of an h1 tag, plus the primary navigation with four elements inside of it.


<!--********************************************** 
	1 HEADER  
********************************************** -->
<header>
	<div class="container">
		<!--LOGO-->
		<h1 class="logo">Css Party</h1>
		<!--NAVIGATION-->
		<nav class="primary-nav">
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Blog</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</nav>
	</div><!--CONTAINER-->
</header>

2. Intro Section

hero html

The intro section will be the area where we will be showing the welcome message. I’m using the <section> tag which is an Html 5 tag and inside of it, there is the .container that I’ve mentioned before. And inside of the container, we will show the intro title, plus the intro subtitle.


<!--********************************************** 
	2 INTRO  
********************************************** -->
<section class="intro">
	<div class="container">
		<!--INTRO TITLE-->
		<h1 class="intro-title">Welcome To CSS Party</h1>
		<!--INTRO SUBTITLE-->
		<span class="intro-subtitle">This is your first website built with Html & Css <br> enjoy the tutorial</span>
	</div><!--CONTAINER-->
</section>

3. Services Section

services html

The services section will contain three service elements, each one of them contains an image wrapped inside of .service-image class, plus the service title and service description.

<!--********************************************** 
	3 SERVICES  
********************************************** -->
<section class="services">
	<div class="container">
		<h1 class="section-title">My Services</h1>
		<!--SERVICE ITEM-->
		<div class="service-item">
			<div class="service-image">
				<img src="images/html5.png" alt="">
			</div>
			<h3 class="service-title">HTML 5</h3>
			<p>Lorem ipsum ex vix illud nonummy, novum tation et his. At vix vivendo ali Lorem ipsum ex vix illud nonummy</p>
		</div><!--END SERVICE ITEM-->

		<!--SERVICE ITEM-->
		<div class="service-item">
			<div class="service-image">
				<img src="images/css3.png" alt="">
			</div>
			<h3 class="service-title">CSS 3</h3>
			<p>Lorem ipsum ex vix illud nonummy, novum tation et his. At vix vivendo ali Lorem ipsum ex vix illud nonummy</p>
		</div><!--END SERVICE ITEM-->

		<!--SERVICE ITEM-->
		<div class="service-item">
			<div class="service-image">
				<img src="images/sublime.png" alt="">
			</div>
			<h3 class="service-title">Sublime Text</h3>
			<p>Lorem ipsum ex vix illud nonummy, novum tation et his. At vix vivendo ali Lorem ipsum ex vix illud nonummy</p>
		</div><!--END SERVICE ITEM-->

	</div><!--CONTAINER-->
</section>

4. Blog Section

blog html

The Blog section will contain two blog articles using the HTML 5 tag <article>, and each one of them will contain an image wrapper .blog-article-image plus an article title .blog-article-title and article content inside of the paragraph tag <p>.

 

<!--********************************************** 
	4 BLOG  
********************************************** -->
<section class="blog">
	<div class="container">
		<!--SECTION TITLE-->
		<h1 class="section-title">From The Blog</h1>

		<!--BLOG ARTICLE-->
		<article class="blog-article">
			<div class="blog-article-image">
				<img src="images/blog-image1.jpg" alt="">
			</div>
			<h3 class="blog-article-title"><a href="">Your First Guide To Html & Css</a></h3>
			<p>
				Lorem ipsum ex vix illud nonummy, novum tation et his. At vix vivendo ali Lorem ipsum ex vix illud nonummy, novum tation et his scriptaset patrioque scribentur, at pro fugit erts verterem molestiae, sed et vivendo ali Lorem ipsum ex vix illud nonummy, novum tation et his
			</p>
		</article><!--END BLOG ARTICLE-->

		<!--BLOG ARTICLE-->
		<article class="blog-article">
			<div class="blog-article-image">
				<img src="images/blog-image2.jpg" alt="">
			</div>
			<h3 class="blog-article-title"><a href="">Start Your Online Business Now</a></h3>
			<p>
				Lorem ipsum ex vix illud nonummy, novum tation et his. At vix vivendo ali Lorem ipsum ex vix illud nonummy, novum tation et his scriptaset patrioque scribentur, at pro fugit erts verterem molestiae, sed et vivendo ali Lorem ipsum ex vix illud nonummy, novum tation et his
			</p>
		</article><!--END BLOG ARTICLE-->

		<div class="read-more">
			<button class="btn">Go To Blog</button>
		</div>
	</div><!--CONTAINER-->
</section>

 

5. Contact section

Contact html

The contact section will contain two main elements contact information and contact form. Inside of the first one, we will have info rows. And inside of the second one, we will have the contact form with two inputs “full name” and “email” and a <textarea/> for the message.

<!--********************************************** 
	5 CONTACT  
********************************************** -->
<section class="contact">
	<div class="container">
		<!--SECTION TITLE-->
		<h1 class="section-title">Contact Me</h1>

		<!--CONTACT INFOS-->
		<div class="contact-infos">
			<!--INFO ROW-->
			<div class="info-row">
				<h4>Address</h4>
				<span>The company name 45 n8</span>
			</div>
			<!--INFO ROW-->
			<div class="info-row">
				<h4>Phone</h4>
				<span>+1 54 678 534</span>
			</div>
			<!--INFO ROW-->
			<div class="info-row">
				<h4>Email</h4>
				<span>Johndoe@gmail.com</span>
			</div>
		</div>

		<!--CONTACT FORM-->
		<div class="contact-form">
			<form action="">
				<!--INPUT HOLDER FOR FULL NAME & EMAIL-->
				<div class="input-holder">
					<input type="text" placeholder="Full name">
					<input type="text" placeholder="Email">
				</div>
				<!--TEXTAREA FOR MESSAGE-->
				<textarea name="" id="" placeholder="Message"></textarea>
				<button class="btn message-btn">Send</button>
			</form>
		</div><!--END CONTACT FORM-->
	</div><!--CONTAINER-->
</section>

 

6. The footer

Footer html

And finally the footer. We will add a logo to the footer and the copyrights paragraph.

 


<!--********************************************** 
	6 FOOTER  
********************************************** -->
<footer>
	<div class="container">
		<h1 class="footer-logo"><a href="">CSS Party</a></h1>
		<p>&copy; 2018 All Rights Reserved <a href="">CSSPARTY.COM</a></p>
	</div>
</footer>

 

All the HTML code

Now after clarifying all the sections put this code inside of an HTML file name it index.html and wait till I post the CSS part. You can find all the files at Github.

 

 

Now we need to add the CSS and that’s what we gonna do in  Part 2 so stay tuned and don’t forget to subscribe and one last important thing make sure you apply this and if you have any issue or didn’t understand well what I did here please comment and I’ll make sure to help you.

2 comments On web design 101 – Build Your First Website – Part 1

Leave a reply:

Your email address will not be published.

Site Footer