Code Your Own Website
Have you ever wanted to learn how to design web pages or make a site online? Today, we’re going to show you how to build your own personal website!
Read on for more information about the importance of learning web development, a step-by-step guide to accompany the video, and to learn about tools you can use to further enhance your web development experience.
REMEMBER:
The website in this tutorial is just an example project for teaching purposes. Before starting, keep in mind that minors should not post personal information online like your full name, address, or telephone number! Also be careful when uploading personal photos online.
If you’re unsure what is okay to upload, always check with an adult.
Who’s this for?
This project info and learning outcomes summary will help you decide if this HTML/CSS coding project is right for you.
This beginner HTML/CSS tutorial is for students that want a medium challenge project, about 121 lines of code long. It will help to have a basic understanding of how HTML and CSS work beforehand, but if you’re completely new, we also explain more basics in this video!
This tutorial is great for beginners in coding, especially those interested in design or art. We recommend that students be 12 years old or older to follow along.
For learning outcomes, you'll get a lot of practice with div, lists, links, position, display, text (h1/h2/p), fonts, and general CSS. This project is estimated to take you about 40 minutes or longer, depending on how creative you get, but you should move faster or slower at your own pace!
Why Learn Web Development?
These days, you don’t need to know web development or coding to create a website. Toward the end of this article, we’ll show you a few drag-and-drop website creators that will make the process incredibly easy to do. So why should you learn web development? That’s a great question.
Unlimited Customization
All of the easy website creation tools are actually limited. They offer you a set of themes and plugins that are very easy for beginners to use – as long as you don’t need to modify them.
When you do need to modify a theme or do something more custom with your website, however, you will need at least a basic understanding of web development code. As an example, with a bit of Javascript knowledge, you can integrate nearly any social media feed into your website!
Coding Careers & Foundations
If you’ve ever considered a career in coding, web design and web development knowledge will also give you a huge head start. Web development helps kids and new coders interested in art and design to explore their passion while also learning coding basics. Career aside, there are also countless life skill benefits to learning coding for kids.
Applicable to Many Fields
Lastly, being able to build your own website is a valuable skill in today’s digital age. Bloggers want developers to make them custom blogs. Internet businesses are looking for developers to build eCommerce sites instead of just posting items on Amazon.
It’s a golden age for website design and development, and a great time to learn how to build your own site!
Let’s Get Started!
We’re going to use basic HTML and CSS to learn how to make a simple personal website.
Project Demo
Before starting to write code, see how our finished project works for reference. Watch the video to check out all of our project website's features.
You can also view our project solution code if you get stuck.
What to keep in mind before you start:
There’s an image header with text on it. The text is different sizes, and uses two different fonts. It also has a white outline.
The white section below it has two parts side by side.
We have a list of hyperlinks, that link to another page. When you hover over them they change to blue.
There's also an About Me section with text.
Below that, there’s an experience section with a different color background.
Steps to Code the Project
To build our website, we’ll follow this order of steps. Watch the tutorial to see how Instructor Maya codes each part, and follow along with the explanations below.
Add the image header & the text that goes on it.
Create the list of links you’d like to share.
Create the About Me section.
Create the Experience section.
Step-by-Step Tutorial
Step 1: Add the image header & the text that goes on it.
Create a div with relative positioning to contain the image and text.
Create a div to contain the text, and use absolute positioning to place it on the image.
Use <h1> and <h3> to add the text.
Use CSS to modify the text font.
Use CSS to remove the extra margin & padding around the image.
Step 2: Create the list of links you’d like to share.
Create a div with relative positioning to contain the links and About Me section.
Add padding to the div.
Create a div with inline-block display to contain the links list.
Use <ul> to create a list.
Use <li> and <a> to create the links.
Use <i> and a font-awesome link to add icons.
Modify the CSS to make it look like the original.
NOTE:
Feel free to keep adding to this list if you'd like to include more links!
Step 3: Create the About Me section.
Create a div with inline-block display to contain the About Me section.
Use <h3> and <p> to add text.
Step 4: Create the Experience section.
Create a div with relative positioning to contain the Experience section.
Create a div for the first experience, and use <h4> and <p> to add text.
Add more experience divs!
Next steps
Great job! Now, feel free to add more sections to your website. Some ideas might include a section for projects that you’ve worked on or clubs that you’re in. You can also upload your new website to the web using Github and Github pages.
Webpage Creation Tools
As we mentioned earlier, there are several website creators out there. Most of the best website builders are made to streamline the process by providing you with templates, drag-and-drop interfaces, and any other functionalities that you need to create a free personal website.
Just because you have a basic understanding of web development doesn’t mean you should forget about these tools. They can help you host your new website, find a custom domain (the name and address of your website), and offer you templates, themes, and plugins that will speed up your web design process.
By taking care of the basics, these tools give you a chance to focus your newfound coding skills on customizing your website to perfection! Or — even if you want to build everything from scratch — these tools can give you some great ideas for what to build and how to build it.
Here's some of the most popular tools for webpage creation:
Wix is one of the easiest to use website builders out there. Their free plan is complete enough to make it a great option for a kid’s website builder, as long as you are okay with your URL being a subdomain of Wix (www.username.wixsite.com). They do have paid plans with reasonable pricing if you outgrow the free tier.
Although people know it as a free website builder, what WordPress really is a content management system (CMS). In a simple sense, the difference is that a website builder is easier to use, but a CMS offers more opportunities for customization. Although WordPress itself is free, you may have to pay for some themes and plugins or for hosting if you want your own domain name.
Weebly is a website builder, much like Wix. The primary difference is that Weebly offers much less customizability, making it a user-friendly option that is great for coding for kids, but less likely to grow with you as your website building skills improve. Keep on Learning: Web Development Classes for Kids Congratulations, you now have your own website! This is an exciting step for which you should feel incredibly proud. The learning doesn’t have to stop there, either.
This article originally appeared on junilearning.com.
I am recently working with a website design company and there i have learned a lot about off page marketing also. It's a good thing to work with professional developers.