Want to code your own website? Here's a step-by-step guide
When it comes to building your personal website, learning how to use tools such as HTML and CSS allow for unlimited customization and if you’ve ever considered a career in coding, this knowledge will give you a head start. The skills for building your own website is versatile and can be applied to other digital endeavors in the future.
Below is a step-by-step guide and video tutorial by Juni to help you start coding in no time.
Through this step-by-step guide to accompany the video, you'll receive tools you can use to further enhance your web development experience. This example project is for teaching purposes. Before starting, keep in mind that this tutorial is an example project for teaching purposes.
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 Juni’s project website's features.
You can also view Juni’s 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 your 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 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.
Want to learn more about coding? Check out the resources and tutorial at junilearning.com.
