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 a 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!
We'll be using a template from Envato Elements in this tutorial. If you want to browse other web design template options, look through Envato Element's collection of website templates. You'll find professional, responsive options that are ready to customize for your next project.
Before We Start Our Web Design Code
You're probably excited to learn how to begin coding a website. But looking at 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 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 which 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 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
Do you have everything you need? Then let's get started!
1. Edit the Title and Header
We're working on the index-onepage-personal.html file in this tutorial. It's a simple website design 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 HTML code and your browser will let you see the changes in real-time.
In Sublime Text, find the title tag under the title comment (line 9). This changes the name that appears on the tab or window of the page. It will look like this in HTML:
<!-- 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 in the tab at the top of the window:
Let's move on to the navigation bar of this simple website design for beginners. This bar is visible as visitors scroll, and also includes a spot for a logo on the left. You can change the logo starting in line 45 with these lines of 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>
Line 45 and line 46 are both for your logo, but for different parts of your page. Line 45 is for a light logo against a dark background. Line 46 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 code (logo-light.png and logo-dark.png) to match the file names of your logo.
Note: your logo should be in the PNG file format with a transparent background. Also 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 tutorial.
In this 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 starting on line 54 to 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 HTML code for this web design project and refresh to see your changes.
2. Update 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 comment on line 96. 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.
Let's start by changing the images. You can edit the background photo in line 99 and the avatar in line 104. 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, 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. I'll be using one of these stock background photos.
Changing the avatar is the same process. Drop your headshot in the avatar folder within the img folder. Replace avatar01 in line 104 with the name of your photo. Save the HTML code for this web design project in Sublime Text and refresh your browser to see how it looks now.
Change Name and Bio
Editing your name and bio takes a few simple steps. Find the H1 tag in line 107, and add in your name. In 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>
Lines 112 through 129 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 in lines 113, 115, 121, 123, and 129. If you'd like to change this entire section, you'll need to change the dt tag in lines 112, 114, 120, 122, and 128 too.
<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 HTML file, refresh the page, and see your changes.
Notice that you can have visitors download your CV or resume from 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. More specifically, line 134 of the sample 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. Line 134 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 in what services we offer. 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 in line 155 with the h5 tag. This can be any service you offer. In the following line, give a brief description of your service in the p tag. Save the file and see the changes in your browser.
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 to use web icons for personal and commercial use.
Search for a matching icon from the Themify link above. Add in 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 like now:
That's better. Repeat this process for the rest of your services in lines 162, 169, 178, and 185 of the sample code for website design.
4. Add 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.
In line 209, change the skill that you want visitors to see. It's found in the strong tag.
How good are you at performing this skill? To show this off on your site, we need to backtrack to line 207. 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.
5. Education And Job Experience
This is the section in our web design code that lets us add education and job experience.
Let's start with lines 255 through 257. 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 location. So if I want 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 entries found in lines 262-264 and lines 272-274.
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 someone trusting you with their next project.
This testimonial section starts with the comment in line 294. 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 in line 298. 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 to finish this section.
7. Media
Do you have photos of your work that you'd like to share? You can have them ready in this step.
Before we get started, it's important to note 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 online website like Pixlr.
Once you have your pictures ready, let's see how we can add them to our website. In line 337, 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 what 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.
You may notice that hovering over your photo shows a special effect. It looks like 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 lines 333 and 334 of the sample code for website design. In the first line, let's leave the name of this project. In the second line, let's add what related service 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 line 332, 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 your work you'd like to share.
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.
We start by adding your headshot in line 425. This follows the same process talked about in the second step of this web design code tutorial.
Within the address tag starting on line 426, 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 on lines 440, 443, and 447. Changing the text of the button can be done on line 451.
<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 file contact-form.php in Sublime Text.
In line 9 of this file, you'll see the following code:
$emailTo = 'example@mail.com';
Replace the example email with your own email address, and save the file. Now when a visitor completes the contact form, you will get an email with what they said.
9. Edit Footer
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.
On line 476 of the sample code for website design, you'll find the following code:
<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 lines 477 and 478.
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 easier 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. AppStorm—App Startup Template
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.
2. Jadusona—eCommerce Baby Shop Bootstrap4 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 to start your website.
3. Erika—Portfolio, CV And Resume HTML Template
Complement your physical CV or resume with Erika. This online landing page is the perfect place to tell visitors everything about you and your skills. Show off your services, portfolio, and more with Erika. It's Retina-ready, cross-browser compatible, and responsive so visitors can browse from any device. Basically, Erika is everything you'll need from a personal web template download.
4. Modaz | Minimalist eCommerce HTML Template
If you're starting an e-commerce site, you'll want to let your products be the star of the show. With the Modaz e-commerce HTML template that's possible. The minimal design directs attention towards your product photos and item pages. Choose from 11 home page variations and customize the inner pages to complete your website. The clean code makes Modaz one of the easiest ways to code a website.
5. Emily—Personal Blog HTML Template
Give your content the aesthetic platform it deserves with Emily. This personal blog HTML web page template comes with over 14 HTML pages for you to build your site. Its design is full-responsive and cross-browser compatible, so visitors can enjoy your blog on any device. If you're starting a blog as a web designing in HTML code project, try out Emily.
Find Even More HTML Web Page Templates
Who doesn't like having options? The web design templates featured above are some of the best web design examples for beginners you can find online today. If you want to look at premium options with clean code, check out these articles from the Envato Tuts+ team.
Web Design20+ Best One Page Website Templates With Responsive Designs for 2020
Responsive Web Design19 Best Responsive HTML5 Website Design Business Templates for 2020
HTML23 Best Responsive Restaurant & Food Website HTML Templates for 2020
eCommerce25 Best eCommerce Website Templates: Updated for 2021
Learn More About Code With Envato Tuts+
Whether you're a beginner or are experienced with code, there's always something new to learn. If you'd like to find video tutorials and guides to help you along, check out the Envato Tuts+ YouTube channel. There are hundreds of video tutorials available, including for code. Just check out our code video guide playlist. Here's a look at what you can find:
There are also written tutorial guides and courses available on the Envato Tuts+ website. Below are a few you can get started with.
AndroidThe Simplest Android App: Hello World
Web DevelopmentSubmit a Form Without Page Refresh Using jQuery
WordPressHow to Make a Sticky Menu in WordPress
VueDesign Patterns for Communication Between Vue.js Components
Keep Exploring the World of Code!
Today you learned how to begin coding a website with a web template and looked at some excellent template options. Web design templates are perfect if you want HTML made easy, or quick web design for beginners and experts.
Remember, you can find even more useful web design templates from Envato Elements with your subscription. There are even more HTML web page templates from ThemeForest, which you can purchase without a membership.
If you're interested in designing more web pages, you can find more tutorials on our site and YouTube channel. Did you find this guide helpful? Let us know in the comments!
No comments:
Post a Comment