Web Development Tutorial
A step-by-step guide with sample code to help users get started
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 .
According to Forbes, here are three reasons why users need to build their own websites :
- 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!
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 .
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:
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 .
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 .
In order to take advantage of Bootstrap, users need to add the following CSS dependencies in their HTML file:
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 .
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.
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:
Welcome to my website! Please take a look at my work and feel free to contact me!
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.
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.
Top personal website examples: https://collegeinfogeek.com/personal-website-examples/
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
What is HTML: https://www.w3schools.com/whatis/whatis_html.asp
What is CSS: https://www.w3schools.com/css/css_intro.asp
What is Bootstrap: https://www.w3schools.com/whatis/whatis_bootstrap.asp
Things to consider when creating a website: https://www.mrnwebdesigns.com/designing-a-website-here-are-7-important-factors-to-consider/