Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Design and Code Your First Website in 9 Easy-to-Understand Steps
  • dislike -1 19

    Design and Code Your First Website in 9 Easy-to-Understand Steps

    1. January 2014
    2. Daily
    3. read 0

    Learning how to begin coding a website can be a tough task. If you’re not familiar with coding languages, it’s even harder. But learning how to code a website is easy with the right guide.

    In this tutorial, we’ll go over simple website design for beginners with an HTML web page template. They’re the easiest way to code a website. It’s a process that will save you time in the long run, while letting you create a professionally designed website for your visitors!

    Black male in front of computer screen coding mobile app web development computer programmingBlack male in front of computer screen coding mobile app web development computer programmingBlack male in front of computer screen coding mobile app web development computer programming
    Black male in front of computer screen coding mobile app, web development, computer programming (Stock photo from Envato Elements)

    We’ll be using a template from Envato Elements in this HTML web design code tutorial. If you want to browse other web design template options, look through the Envato Elements collection of HTML website design code templates. You’ll find professional, responsive options that are ready to customize for your next project. 

    Two Free Web Design and Coding Courses for Beginners

    Follow Adi Purdila through these two epic free courses for beginners, as he explains the fundamentals of web design, and HTML & CSS. With these guides you can go from knowing nothing whatsoever, to being able to design and code your own website. Subscribe to the Tuts+ Youtube channel for more!

    Web Design for Beginners

    Web Design for Beginners | FREE COURSE

    “How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.

    HTML & CSS for Beginners

    HTML & CSS for Beginners | FREE MEGA COURSE (7+ Hours!)

    In this free course, you’ll learn how to code with modern HTML web design code and CSS. These are the main building blocks of any website. If you want to become a successful web developer, this is where you need to start! 

    Before We Start Our Web Design Code

    You’re probably excited to learn how to begin coding a website. But looking at HTML website design code can be intimidating if you’re a beginner. So before we dive in, let’s have a look at some useful terms to know so you can understand the changes you’re making in the below steps to code a website.

    • HTML: Hypertext Markup Language is a language that organizes web pages. Things like text and links are added here. In this web design code tutorial, we’ll be working with HTML.
    • Tags: Tags are how code works in HTML. They are written between angle brackets. One tag opens (i.e. <title>) and another closes (i.e. </title>). Text content goes between the opening and closing tags. 
    • PHP: A server-side scripting language that is mostly used to build web-based applications. You’ll see it used to collect data. Almost all contact forms work with a PHP file. 
    • Comments: Comments are notes left by the writer of the code. These don’t change anything about the page, but they let you see what the code is supposed to do.

    What We’ll Need

    If you want to follow along with this simple web design code tutorial, you’ll need a couple of things:

    • Okno—Ultimate Multipurpose HTML5 Template. We’ll be editing a personal landing page from this HTML web page template.
    • Sublime Text editor. Sublime Text is what we’ll use to edit the markup.
    • Chrome, Safari, Firefox, or another web browser. You’ll need your browser to make sure your changes work properly.
    Okno - Ultimate Multipurpose HTML5 TemplateOkno - Ultimate Multipurpose HTML5 TemplateOkno - Ultimate Multipurpose HTML5 Template

    Do you have everything you need for this website design code tutorial? Then let’s get started!

    1. Edit the Title and Header

    Okno offers a lot of HTML design codes, but we’re working on the index-onepage-personal.html file in this tutorial. It’s a simple website design code template for beginners to work on. Open it in Sublime Text and your browser after extracting the Okno ZIP folder. Sublime Text will let you edit the sample HTML code for website design, and your browser will let you see the changes in real-time.

    In Sublime Text, find the title tag under the title comment. This changes the name that appears on the tab or window of the page. It will look like this in the simple website HTML code:

    <!-- Title -->
<title>Okno - Ultimate Multi-Purpose HTML5 Template</title>

    Replace the text with the name of your site. Since this is a personal one-page website template, this will most likely be your own name. Save the file in Sublime Text, and refresh the page in your browser. You’ll see the changes to the web design code in the tab at the top of the window:

    html code for website design project tutorial title taghtml code for website design project tutorial title taghtml code for website design project tutorial title tag

    Let’s move on to the navigation bar of this simple website design for beginners. This bar is visible as visitors scroll, and it also includes a spot for a logo on the left. To change the logo, find the Logo comment and edit these lines of HTML design code:

        	<!-- Logo -->
		<a class="logo-wrapper" href="index.html">
			<img class="logo logo-light" src="assets/img/logo-light.png" alt="Okno">
			<img class="logo logo-dark" src="assets/img/logo-dark.png" alt="Okno">
		</a>

    Both lines are for your logo, but for different parts of your web design code page. The top line is for a light logo against a dark background. The bottom line is for a dark logo against a light background. This is to make sure your branding is visible on the page.

    Place copies of your logo in the img folder found inside the assets folder. Change the file names in the website design code (logo-light.png and logo-dark.png) to match the file names of your logo.

    Your logo should be in the PNG file format with a transparent background

    Note that the alt attribute is very important for your webpage in case the photo doesn’t load or a visitor is using screen-reading software. Give an alternate description for all your images while working on this simple website HTML code tutorial. 

    In this website design code template, the navigation bar represents different sections of the one-pager. If you don’t want to rename these sections, feel free to skip ahead.

    Under the primary menu comment, you’ll see the names of each section. Edit the text between the a tags under the Primary Menu comment rename the links in your navigation bar. 

        		<!-- Primary Menu -->
			<div class="module menu left">
				<ul id="nav-primary" class="nav nav-primary">
					<li><a href="#home">Start</a></li>
					<li><a href="#services">Services</a></li>
					<li><a href="#skills">Skills</a></li>
					<li><a href="#experience">Experience</a></li>
					<li><a href="#testimonials">Testimonials</a></li>
					<li><a href="#works">Works</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div>

    Save the simple website HTML code for this web design project and refresh to see your changes.

    2. Update Your Personal Information

    Now it’s time to start editing your information in the web design code. 

    Let’s look at the section starting with the Section / Home comment. What can be changed here? We can replace the background image and avatar. You’ll also be able to add your name, job title, area of expertise, and other information.

    how to code a website easy tutorial personal informationhow to code a website easy tutorial personal informationhow to code a website easy tutorial personal information

    Let’s start by changing the images. You can edit the background photo from the bg-image div and the avatar from the img tag within the container v-center div. Unlike altering text, you’ll need to make changes to the img tag itself through the source attribute. The src attribute tells the webpage where the photo can be found. 

    If we look at the src attribute for the background photo, we can see where to find the image. In your Finder or File Explorer, head to assets > img >  photos to find the image file yourself.

    To change the background image in your simple website HTML code, have a replacement JPG ready with the exact dimensions of the original file. Give your photo a simple name and place it in the photos folder. Now change the name in the src attribute, and save.

    If you don’t have a replacement photo ready but want to change the background, head to Envato Elements. You can find a stock photo or cool graphic to use. For this simple website design for beginners tutorial, I’ll be using one of these stock background photos.

    where to start coding a website tutorial background image changewhere to start coding a website tutorial background image changewhere to start coding a website tutorial background image change

    Changing the avatar is the same process. Drop your headshot in the avatar folder within the img folder. Replace avatar01 with the name of your photo. Save the simple website HTML code for this web design project in Sublime Text and refresh your browser to see how it looks now.

    where to start coding a website tutorial avatar changewhere to start coding a website tutorial avatar changewhere to start coding a website tutorial avatar change

    Change the Name and Bio

    Editing your name and bio takes a few simple steps. Find the H1 tag within the col-md-9 div, and add your name. On the line below, type in your job title.

        				<h1 class="mt-20 mb-0 text-lg">Mike Lee</h1>
					<h3 class="lead text-muted mb-40">Professional Front-End Developer</h3>

    There are three Description Lists under the Section / Home comment. They’re defined by the dl tag. They are where you can briefly add more professional information. As you can see in your browser, the default fields are Specialty, Born Date, Previous Company, Years Experience, and Current Company. If you want to share this information, edit the dd tags within each dl. If you’d like to change this entire section, you’ll need to change the dt tags within each dl tag.

        					<div class="col-sm-4">
							<dl class="description-2">
								<dt>Speciality</dt>
								<dd>Front-End Development</dd>
								<dt>Years experience</dt>
								<dd>6+</dd>
							</dl>
						</div>

    Made your changes? Save the simple website design HTML code file, refresh the page, and see your changes.

    where to start coding a website tutorialwhere to start coding a website tutorialwhere to start coding a website tutorial

    Notice that you can have visitors download your CV or resume by clicking a button. To set this up, we’ll first create a folder titled cv within the assets folder. Then, we’ll put our CV in this new folder.

    Now let’s look at the HTML and figure out how to make this work. Head to the Download CV line in the sample HTML code for website design:  

        					<div class="col-sm-4"><a href="#" class="btn btn-primary btn-filled btn-block">Download CV</a></div>

    We are going to replace the # in the href attribute with assets/cv/name-of-cv-file.extension. To make the CV downloadable, add the download attribute after the href attribute. The line in your sample HTML code for website design should now look like this: 

        					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div>

    Save the HTML code for this web design project and test it out in your browser. Note that for now you’ll only be able to open the file from the button. But once your website goes live, visitors will be able to download your resume.

    3. Services Section

    Let’s add the services we offer to our sample HTML code for website design. If you changed the name of this section, or any other sections, in Step 1, you can still follow along with the rest of the tutorial. Just make sure to change the h6 tag in each step.

    Change the name of the first service with the Mobile Apps h5 tag. This can be any service you offer. On the following line, give a brief description of your service in the p tag. Save the website design code file and see the changes in your browser.

    web designing in html code project tutorial services sectionweb designing in html code project tutorial services sectionweb designing in html code project tutorial services section

    Looks like we might run into a problem. If you changed the name of the service, the mobile app icon no longer matches up. That’s not a problem. Okno uses Themify Icons. These are free web icons for personal and commercial use.

    Search for a matching icon from the Themify link above. Add the name of the icon’s attribute in the i tag. For this example, I will use the ti-shortcode icon. Let’s see how that looks now:

    web designing in html code project tutorial icon changeweb designing in html code project tutorial icon changeweb designing in html code project tutorial icon change

    That’s better. Repeat this process for the rest of your services to edit the Desktop Apps, Graphic Design, HTML/CSS Development, and AngularJS lines of the sample HTML code for website design.

    web designing in html code project tutorial icon changesweb designing in html code project tutorial icon changesweb designing in html code project tutorial icon changes

    4. Add Your Skills

    This is a well-designed section in this simple website design for beginners. As you can see in your browser, the skills section has a meter to show your proficiency. This can be edited in the web design code under the Skills comment.

    You can change the skills that you want visitors to see. The names of these skills are found in the strong tag under the Section / Skills comment.

    How good are you at performing this skill? To show this off on your site, we need to backtrack to the progress-bar div. Within the div tag, we are going to edit the aria-valuenow attribute, as well as the style attribute. These values will use the same number to represent your skill level out of 100. If you’d like to put 97 out of 100, make that change in both attributes. Your changes should match the code below.

        						<div class="mb-40">
								<div class="progress progress-2">
								    <div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;">97%</div>
								</div>
								<strong>Adobe Photoshop</strong>
							</div>

    Save and refresh your browser window to see your new skills! You can repeat this step to finish the rest of your skills section in your web design code.

    html code for website design project tutorial skills section progress barhtml code for website design project tutorial skills section progress barhtml code for website design project tutorial skills section progress bar

    5. Education and Job Experience

    This is the section in our web design code that lets us add education and job experience.

    We’ll edit the three tags within the event class div. The first line lets us edit the date, the following line is for the title of your education or work experience, and the final line is for the location. So if I wanted to share my three-month rocket science course at NASA, I’d edit the code to look like this: 

        						<div class="event">
								<div class="date">15.02.2004 - 15.05.2004</div>
								<h5 class="mb-0">Rocket Science Course</h5>
								<span class="text-muted">NASA</span>
							</div>

    You can repeat these steps for the other two event class div tags.

    html made easy web design for beginners tutorial experience sectionhtml made easy web design for beginners tutorial experience sectionhtml made easy web design for beginners tutorial experience section

    6. Testimonials

    If you’re following these steps to code a website as a freelancer, then you know how important this section is. Testimonials from past customers, clients, and bosses go a long way towards persuading someone to trust you with their next project.

    This section starts under the Section / Testimonials comment. These quotes have special formatting that we’re going to leave as they are. All we’re going to do is edit the text found in the div tag. If you have an exact quote you want to use, add it here. Use the strong tag to make parts of the testimonial stand out with bold text.

    If you have a headshot of the person giving the testimonial, add it to the img tags in this Testimonial section. If not, feel free to remove that line of code. The following two lines of code let you finish the testimonial with the person’s name and job title.

        					<div class="col-sm-6">
							<div class="testimonial testimonial-1">
								<div class="quote">
									These tutorials are <strong>excellent</strong>. I’ve learned so much. I can’t wait to try more!
								</div>
								<div class="author with-image">
									<img src="assets/img/avatars/avatar01.jpg" alt="testimonial author avatar">
									<span class="name text-uppercase">Mark Johnson</span>
									<span class="caption text-muted">Envato Tuts+ user</span>
								</div>
							</div>
						</div>

    Repeat these steps in your sample HTML code for website design to finish this section.

    html made easy web design for beginners tutorial testimonial sectionhtml made easy web design for beginners tutorial testimonial sectionhtml made easy web design for beginners tutorial testimonial section

    7. Media

    Do you have photos of your work that you’d like to share? You can have them ready for your simple website HTML code in this step.

    Before we get started, it’s important to note that getting the exact dimensions of your photos is important for this section. Each photo must be exactly 640x563. Use Adobe Photoshop to resize your images. If you don’t have the program, you can use a free website like Pixlr or Photopea.

    Once you have your pictures ready, let’s see how we can add them to our website. Find the Section / Works comment, then the img tags under the Media Item comments. We can change our photo with a familiar line of code. If we read this line, we can see that we need to have our photos within the works folder, which is found in the img folder. We’ll also need to change the file name so our website knows which photo to use. 

        					<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter">

    Let’s make these changes and save. Refresh your browser to see your photo.

    html made easy web design for beginners tutorial works sectionhtml made easy web design for beginners tutorial works sectionhtml made easy web design for beginners tutorial works section

    You may notice that hovering over your photo shows a special effect. It looks as if we can leave a brief description of the project shown in the picture. Let’s take full advantage of this HTML web page template and add a brief description.

    Backtrack to the h5 tags under the Media Item comments of the sample HTML code for website design. On the first line, let’s leave the name of this project. In the second line, let’s add a related service that was needed to finish the project. 

        			<div class="image-box image-hover bg-black text-center">
					<div class="image">
						<div class="hover dark">
							<a href="#">
								<h5 class="mb-0">Cityscapes</h5>
								<span class="text-muted">Photography</span>
							</a>
						</div>
						<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter">
					</div>
				</div>

    If this work is available to see online, we can link to it. In the a tag under the Media Item comment, replace the # in the href attribute with the link to the webpage featuring your project. Try linking to Google to see how this works.

    This section lets you share up to six projects. Follow the steps above for each piece of work you’d like to share.

    html made easy web design for beginners tutorial works section hoverhtml made easy web design for beginners tutorial works section hoverhtml made easy web design for beginners tutorial works section hover

    8. Contact Section

    Now is the time to set up the contact information in the HTML code for this web design project. This is an easy step to get done in your web design code.

    We start by adding your headshot in the img tag under the Section / Content comment. This follows the same process that we talked about in the second step of this web design code tutorial. 

    Within the address tag under the Section / Content comment, we’ll add our address, phone number, and email address. Feel free to change the type of contact information you share by editing what’s within the strong tags.

        					<div class="col-sm-4">
							<img class="img-circle mb-25" width="72" src="assets/img/avatars/envato-avatar.jpg" alt="envato avatar">
							<address>
								<strong>Address:</strong><br>
								A795 Folsom Ave, Suite 600<br>
								San Francisco, CA 94107<br><br>
								<strong>Phone:</strong><br>
								+48 221 909 99<br><br>
								<strong>E-mail:</strong><br>
								<a href="#">your.name@example.com</a><br>
							</address>
						</div>

    The contact form doesn’t need many changes. If you’d like to add a fun spin to the default text, just change the placeholder attributes found within the form tag. You can change the text of the button with the button tag.

        					<div class="col-sm-8">
							<form class="contact-form validate-form" id="contact-form">
								<div class="row">
									<div class="form-group col-sm-6">
										<input name="name" id="name" type="text" class="form-control bordered" placeholder="Name">
									</div>
									<div class="form-group col-sm-6">
										<input name="email" id="email" type="text" class="form-control bordered" placeholder="E-mail address">
									</div>
								</div>
								<div class="form-group">
									<textarea name="message" id="message" cols="30" rows="7" class="form-control bordered" placeholder="Message"></textarea>
								</div>
								<div class="row">
									<div class="col-md-4 col-sm-6">
										<button class="btn btn-filled btn-primary btn-block">Send it <i class="i-after ti-arrow-right"></i></button>
									</div>

    But will our contact form work? Not yet! We need to make a very quick edit to our PHP file. In your Finder or File Explorer, go to assets > php within the Okno folder. Then open the contact-form.php file in Sublime Text.

    In this file, you’ll see the following line of code:

    $emailTo = ’example@mail.com’;

    Replace the example email with your own email address, and save the web design code file. Now, when a visitor completes the contact form, you will get an email telling you what they said.

    sample code for website design tutorial contact form move mesample code for website design tutorial contact form move mesample code for website design tutorial contact form move me

    This is the last of our steps to code a website. The footer of this one-page website features a copyright credit to the creators of the Okno web template and three links. You can remove the footer entirely, remove some elements, or edit the links. If you want to edit the links, I’ll walk you through how to do that.

    html made easy web design for beginners tutorial footerhtml made easy web design for beginners tutorial footerhtml made easy web design for beginners tutorial footer

    Under the Footer comment of the sample HTML code for website design, you’ll find the following list item:

    <li><a href="#">Sign Up</a></li>

    Within the href attribute, replace the # symbol with a link to a website you want to share. This change will let visitors go to that website by clicking on Sign Up. You can change this text to anything you’d like. Repeat this process for the next two list items.

    We’re Done!

    Congrats, you successfully followed the steps to code a website with a web template! This process saves you a lot of time if you’re creating a site for yourself or a client. And as you can see, it’s one of the easiest ways to build a website. 

    Find Awesome HTML Web Page Templates From Envato Elements

    If you liked the web template we used in this tutorial, you can find even more variety on Envato Elements. There are a ton of modern choices for you, and you’ll be able to edit them just as easily as Okno. Here are just a few options you could try that are found on Envato Elements.

    1. Aster: Creative Portfolio & Agency HTML Template

    Aster Creative Portfolio Sample HTML Code for Website DesignAster Creative Portfolio Sample HTML Code for Website DesignAster Creative Portfolio Sample HTML Code for Website Design

    If you don’t know too much coding for web design, Aster will still let you create a stunning website. This HTML template is a great example of web design coding. It is made for digital portfolios and creative agencies. There are more than five home page samples to choose from, as well as over 17 inner pages. The code is clean and commented, making Aster one of the easiest ways to code a website. 

    2. AppStorm: App Startup Template

    AppStorm App Startup Simple Website HTML Code Web Design TemplateAppStorm App Startup Simple Website HTML Code Web Design TemplateAppStorm App Startup Simple Website HTML Code Web Design Template

    Learning coding for web design? Here’s the perfect HTML web page template for a tech startup. AppStorm is designed with promoting software in mind. The layout is incredibly modern and functional, as well as being made for mobile. Choose from three different home page designs and customization options for the perfect look. AppStorm is the easiest way to code a website for your new app or SaaS product.

    3. Jadusona: eCommerce Baby Shop Bootstrap4 Template

    Jadusona Website Design Code Web Design TemplateJadusona Website Design Code Web Design TemplateJadusona Website Design Code Web Design Template

    Jadusona is a minimal, easy-to-use e-commerce website. You’ll have a variety of page demos to use to show off your baby and child products. Get your online baby shop ready thanks to Jadusona’s features, like:

    • fully responsive design
    • clean code
    • included Google Fonts
    • Ajax contact form

    Try Jadusona if you’ve been looking for web design examples for beginners. This is a good web design coding example to start your website.

    4. Erika: Portfolio, CV and Resume HTML Template

    Erika Website Design Code HTML Web Design TemplateErika Website Design Code HTML Web Design TemplateErika Website Design Code HTML Web Design Template
    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News