Web Development Tutorial
Creating a Static Website with HTML, Bootstrap, and JavaScript
A step-by-step guide with sample code to help users get started
--
Introduction
As users look to find ways to build their online brand, they are turning to personal/professional websites to display their projects and work experience [1].
According to Forbes, here are three reasons why users need to build their own websites [2]:
- Websites give users control over their image — Users can now decide which parts of their education, portfolio, or personal life experiences to emphasize.
- Building a reach now can help users later — The more extensive the website is, the higher the traffic will be. This means that users can have more connections, opportunities, and so forth.
- Websites allow users to stand out from the competition — Although websites can be similar to resumes, they have the potential to be much more extensive and engaging, which can help users differentiate themselves from others.
In this tutorial, I will cover the basic elements that users need in order to create their own custom static websites!
Basic Components
The simplest way to create a personal website is to use HTML for the basic text layout, Bootstrap for the overall design, and JavaScript for any additional functionality that is needed!
HTML
Hyper Text Markup Language — HTML— is the standard markup language for webpages and its elements are considered to be the building blocks of any website [3].
To start with, users need to create a base HTML template to which they can add their Bootstrap and JavaScript code.
As seen below, the base template will include the “html”, “head”, “body”, and “meta” tags, which will contain the bulk of the website’s source code:
Bootstrap
In order to specify the style with which the HTML elements will be displayed to make the website responsive and more elegant, users can incorporate Cascading Style Sheets — CSS [4].
Instead of adding separate CSS files that outline the website design, users can make this process simpler and instead use a popular CSS framework called Bootstrap to take advantage of pre-defined CSS design patterns that function well on desktops, tablets, and mobile devices [5].
In order to take advantage of Bootstrap, users need to add the following CSS dependencies in their HTML file:
JavaScript
JavaScript is a web programming language and can change both HTML and CSS elements while it calculates, manipulates, and validates data [6].
Along with the Bootstrap CSS dependencies, users also need to add the necessary JavaScript dependencies, so that Bootstrap can properly render the webpage.
As shown below, users can also add custom JavaScript code to implement any additional functionality on their websites. In my example, the “smooth_scrolling.js” file slows down the scrolling speed throughout the page whenever a link is clicked:
Building the Actual Website
Now that all the dependencies are included, the real fun can begin!
Although there are many different ways to build a website, users need to realize that some layouts are more effective than others for various use cases!
For example, users need to focus on factors such as usability and aesthetics when deciding on how best to design their websites [7].
For me, I wanted to have the following sections:
- Navigation bar at the top with quick links to different sections within my webpage.
- Picture carousel to include some photos of my accomplishments.
- Portfolio section where I can include links to my works on other platforms.
- Contact form for those interested in reaching out to me.
As a result, I ended up using the different various “div”, “list”, and “button” HTML elements to specify my website’s main content and focused most on the Bootstrap needed to make the overall website more responsive. I also added some custom JavaScript code to make the scrolling more user-friendly.
The GitHub repo that contains the source code for these four sections, including the code snippets used at the beginning of the tutorial, can be found here: https://github.com/deeptaanshu/personal-website
Once this website is hosted, here is how it looks:
Conclusion
Congratulations, you now have a working website!!!
As a recap, there are many ways to create static websites, but here are the three components that users can incorporate to develop websites quickly and easily:
- HTML — Users can specify the elements contained within the website using HTML tags.
- Bootstrap — Users can take advantage of pre-defined CSS design patterns build more elegant websites, such as those found at Startboostrap.
- JavaScript — Users can add custom JavaScript to implement website specific functions, such as smooth scrolling for when links are clicked on the website.
Once these components are defined, users can focus on using different design themes and creating different layouts to fit their specific use cases.
After successfully creating the website, the next step is to host it online so that others can see it as well.
In the next tutorial, I will go over how I hosted the website that I used for this tutorial on AWS S3 so that I could implement an affordable and scalable hosting solution on the Cloud.
Stay tuned!!!
References
[1]Top personal website examples: https://collegeinfogeek.com/personal-website-examples/
[2]Why you should create a personal website: https://www.forbes.com/sites/laurencebradford/2016/09/27/3-reasons-why-you-need-a-website/?sh=1fcd5de32460
[3]What is HTML: https://www.w3schools.com/whatis/whatis_html.asp
[4]What is CSS: https://www.w3schools.com/css/css_intro.asp
[5]What is Bootstrap: https://www.w3schools.com/whatis/whatis_bootstrap.asp
[6]What is JavaScript: https://www.w3schools.com/whatis/whatis_js.asp
[7]Things to consider when creating a website: https://www.mrnwebdesigns.com/designing-a-website-here-are-7-important-factors-to-consider/
