Whether it be to play music, find local restaurants, order a new shirt, or apply for a job, we use websites for nearly everything! While websites play a huge role in shaping and facilitating our day-to-day lives, the ability to access them so often and for so many different things has made us accustomed to viewing websites solely from the perspective of a consumer. It usually doesn’t cross our minds to think about how exactly they work and are even made in the first place!
It’s great to enjoy the services and opportunities provided by the websites out there, but you could also benefit from having a website! Maybe you could post online about a topic you’re passionate about, create a shop for art or jewelry you make, host a site for your business, or even just have a page to introduce yourself to potential employers!
But how would you even go about setting up a website for these things? Where do you start? What do you need? Will it cost a small fortune?
This manual will give an introduction to basic knowledge needed to start the website development process, discussing topics such as how websites work behind the scenes, the different options available for building a website, the logistics of getting a website running, and cost estimates for a final product.
What exactly is a website?
You’ve probably accessed thousands of websites over the course of your life, but what exactly goes on behind the scenes that allowed you to do such?
Simplifying it down, a website is just a collection of content that can be shared with other people. Similar to presenting a printed poster to a group of people, websites are a way to display images, words, ideas, and more for others to see.
Servers
However, unlike a printed poster, websites are accessible by people all across the world. This is made possible by servers. Servers are programs run on a computer that communicate with other devices using the internet. They can transmit information, which we’ll call content, to other computers, servers, phones, etc who would like to access this content.
Content
So servers are communicating this content to other devices, but what specifically is “content”? In the context of this manual, content is all of the text, media, data, and other items which a website houses. It could be an article written about current events, a video recording of a lecture, an image of a city, or anything else that could be communicated to others. Once the desired content for a website has been gathered, it can then be implemented into a website using the basic website building blocks of HTML, CSS, and JavaScript.
HTML, CSS, and JavaScript are coding languages which are used to set up a webpage. Essentially, these coding languages can be used to write out instructions which a computer will use to put together the website for yourself and others to see. We’ll dive a little deeper into them later on in this manual.
Domain Names and IP Addresses
After a website has been built and its content is implemented, it is organized on the internet using domain names and IP addresses.
There is a domain name, such as www.Google.com, assigned to each website on the internet in order to allow for people to access the specific website they are looking for. You can think of it like an address to a house: if you are looking for a specific house, the house’s address allows you to find it!
IP addresses, such as 192.168.1.0, also work this same way. The one large difference between a domain name and an IP address is that IP addresses are what computers and servers use to locate a website. In the analogy above, IP addresses are similar to geographic coordinates on a map. They are a long string of numbers that let you find a specific location (such as a house), but are much harder to remember in your head than a normal house address.
Since IP addresses are more difficult to remember, domain names act as the human-friendly version of finding websites, while IP addresses are reserved for use by computers and servers. They both accomplish the same goal, they differ just in who uses them!
Domain Name Servers (DNS)
Domain name servers (DNS) function as a directory of all the internet’s websites. Domain name servers know which domain names are associated with which websites, and thus act as a middle man for helping people find the specific website they are looking for!
After a person types a domain name into their web browser, a request is sent from their device to a DNS letting the DNS know which website the person would like to access.
The DNS then uses this domain name the person entered to locate the specific website content which is associated with that domain name, which it accomplishes by passing along this request to the corresponding website host for the domain name.
The website host receives this request that someone would like to access their website content, and responds by sending their content over to the DNS. The DNS receives this content, and then passes it along back to the person who initially made the request. The person then can access the correct website content, giving them the website appearance we see whenever we go to a website!
As the name suggests, a Domain Name Server (DNS) is another example of a server! Recall that servers are computers that can communicate all types of information to other computers.
This graphic depicts the general way that domain name servers function!
This concept can be quite confusing when first looking at it. Luckily, you don’t have to be an expert on the process in order to make a website! This is simply a glimpse at what’s going on behind the scenes for those who are interested.
If you would like to learn more about how this process works, you can check out this great comic series that dives deeper into the inner workings of websites, domain names, IP addresses, and domain name servers: https://howdns.works/.
How and Why to Make Your Own Website
Now that we’ve discussed how websites work, let’s talk about how and why to make one! Websites can be used for an endless list of things, whether it be to accomplish a professional goal (selling a product, supporting an activist cause, providing a service) or a more personal reason (housing your resume/CV, displaying a portfolio, writing blog posts, introducing yourself). Although we usually interact most often with websites that are related to businesses, there are many great reasons why you might want a personal website as well!
How can we build our own websites? There are generally three options to do so: website builders, content management systems, and hand-coding. All are great ways to get the job done, but each comes with their own pros and cons!
Website Builders
Website builders are likely the method which you are most familiar with. Companies like Wix, Squarespace, and Weebly all offer website building services and do a fair amount of advertising which you may have seen before.
These companies provide pre-built, structured formats for creating your own website through their platform. Essentially, you are creating your website through their website. When creating a website using their services, you can select a general theme/layout for your site and then drag-and-drop their pre-built building blocks (such as an image section, text paragraph, or link button) onto your page.
This method makes website creation very simple and easy, and can be used without a significant background knowledge of computers or websites. However, this ease of use comes at a tradeoff for customizability since you are limited to only being able to use the building blocks they provide for you. Though, for the majority of more simple websites, the building blocks typically cover all the necessary bases! As a result, website builders are generally best for the creation of smaller or more basic sites.
Content Management Systems (CMS)
Content management systems and website builders often appear functionally similar to each other and are often implemented together, making the line between the two a little blurry. However, we’re going to discuss them as separate methods.
Content management systems are comparable to website builders, but provide more customization options and a wider range of use. Unlike website builders, you do not need to use a CMS directly on the company’s website; content management systems can be installed onto nearly any platform you want to use to make your website! Examples of content management systems include WordPress, Drupal, and Joomla!
A CMS provides a combination of the pre-built building blocks that website builders feature, but allows you to expand beyond the limitations of these templates through the ability to custom edit many of the features. You can also install plugins into the CMS. You can think of plugins as “add-ons” which introduce additional features to the content management system, letting you utilize more advanced tools to make your site.
Because of the increased editability of a content management system’s building blocks and having the capacity to install plugins, a CMS allows you to much better tailor your website to your specific vision of how you’d like the site to look and operate. You can create a design that closely fits to the one you envision in your head, you can implement more advanced features onto your website, and use website creation tools that website builders may not offer. However, this increase in customizability of a CMS usually comes with the cost of being more difficult to use than website builders.
Hand-Coding
The last option for web development is hand-coding, which both provides the most optionality for website design and is the most time consuming to utilize.
With hand-coding, code is written out line-by-line to build the website from the ground-up. Every piece of the site must be written out in code, which as you can imagine may take a significant amount of time to accomplish. As mentioned earlier, the basic building blocks for any website are coded in HTML, CSS, and JavaScript. Whether it be reshaping the size of an image, altering the color of text, making a specific portion of the page take up a certain width of a visitor’s device, or creating animations for when visitors click on a button on the webpage, everything must be explicitly implemented in the code. However, this methodology also provides (nearly) complete control over specifying exactly how the website ends up appearing, giving you the ability to design your pages exactly as you’d like.
Hand-coding requires a larger investment of time in order to both learn the coding languages required to write the code and to physically write out the code itself. This makes it a good option for those with prior background in computer science or those who are willing to invest time in order to gain the customizability that comes along with hand-coding. We will dive a little deeper into hand-coding in the next section.
With those three options in mind, here is a graphic that summarizes the differences between them!
Hand-Coding
Front-End vs. Back-End Development
As a whole, coding involves a wide variety of coding languages that can be used for many different purposes. You can think of coding languages as sets of pre-made commands that you can use to accomplish specific goals with computers.
Coding for websites is generally split into two different categories: front-end development and back-end development. Front-end development focuses on creating the visuals that visitors view when accessing the webpage, such as creating the design of a website’s home page. When you access a webpage, the majority of things you see were created by front-end development! On the other hand, back-end development focuses on creating the website processes that work behind-the-scenes, such as creating the process to store the website’s customer information in a database.
Since it is used to create the foundation and most of the basic features of websites, we will focus on front-end development in this manual. For front-end website development, three coding languages are primarily used: HTML, CSS, and JavaScript. Each language serves its own unique role in creating the final product of a website.
HTML, CSS, and JavaScript
The analogy of a “body” can be used to show the different functions of each language. HTML resembles the skeleton, CSS the skin, and JavaScript the muscles.
First up, we can view HTML as the “skeleton” of the body. HTML is used to set up the essential pieces of web pages: adding text, images, links, and other elements. Like a skeleton for the body, HTML provides the basic structure to a website. Without a skeleton, the body would not function properly, making it the first portion of the website that is usually coded. Being the most basic of the coding languages, HTML is also the easiest to learn and implement. However, like a skeleton, HTML alone typically appears visually bland.
The “skin”, or CSS, is then needed to make a website more aesthetically pleasing. Like how skin is placed upon the skeleton of a body, CSS code is applied to HTML code to alter the appearance of the web page. CSS primarily serves to reshape website layouts and change visual components (such as text color, font, and size), resulting in it usually being the second coding language implemented in the web development process following HTML.
Lastly, the “muscles” of the body, or JavaScript (JS), can add movement and interactivity to websites. Like muscles, JavaScript code provides the ability for pieces of the website to move and change in response to the visitor. For example, while HTML and CSS could create a website which gives the visual appearance of a calculator, JavaScript could then turn the website into an actual functional calculator for visitors to use. As you can imagine, this would require a lot of complex code in order to pull off, but JavaScript has the ability to do it! However, with this ability to create more advanced features, JavaScript is also the most difficult language to learn and implement. Additionally, while it definitely can add flair to a website, JavaScript is by no means necessary to create an effective website. If you are unable to accomplish your website goals with HTML and CSS alone, learning and implementing JavaScript may help if you are up for the challenge!
Exercise: Website Inspecting
Did you know that you can view the HTML, CSS, and JavaScript code of the websites you visit? In this exercise, we will check out the code behind Google’s search page!
Step 2: Right-click (or click with the right side of a laptop trackpad) on the Google logo to bring up additional options. Then, select the “Inspect” option.
This will bring up a panel allowing us to view the code behind Google’s search page! Looking at the panel which opened, we can see some of the page’s code: HTML at the top and CSS below. Note that your exact view may differ from the one depicted here.
Step 3: Hover your cursor over different sections of the HTML code. Notice how doing so will highlight the portion of the webpage (also known as an “element”) which corresponds to that code!
Step 4: Let’s edit some of the code! Using the same method as before, inspect the code for the link (blue text) below the “Google Search” and “I’m Feeling Lucky” buttons. Looking at the HTML for this link, locate the string of text which matches the link’s text on the webpage (for the image below, it would be: “See what the world is searching for: Explore the new Google Trends”).
Step 5: Quickly double-click (click twice) on that portion of the HTML code, allowing you to edit the HTML text. Type in any text you would like, hit “Enter” on your keyboard, and watch the text on the webpage change! (Keep in mind that this code change does not actually get submitted to Google’s web host, it simply changes YOUR view of the webpage until you exit the page)
Step 6: Now, let’s change the color of the link! Switching from the HTML code section to the CSS code section, find the “color” line of code and click on the light blue circle next to it. This will open up the color selection panel!
Step 7: In the color selector panel, click on the color you would like to change the link to!
Step 8: We have looked at both HTML and CSS, now let’s view the JavaScript code for the web page. Since we will find the JavaScript code for this Google page within the HTML section, look back at the HTML code section. Several lines below the HTML code we changed earlier, you will see a line of code which starts with
“script nonce=”
After you find this line, click on the button with
“...”
inside of it; this will expand the JavaScript code for us to view!
Step 9: Take a look at the JavaScript! JavaScript is much more complex than either HTML or CSS, so we will not be editing any JavaScript code in this manual.
How to Learn to Hand-Code
You can learn to hand-code either through self-teaching or through teacher-based learning methods. Both are effective ways to learn to code, but may be better suited for different types of people. For example, self-teaching might be a better route for someone who is highly motivated and wants more flexibility, while teacher-based may be better for those looking for a more structured experience. However, at the end of the day both methods can definitely work for everyone.
Self-Teaching
There are many ways to self-teach, with a few popular methods including code-learning websites, YouTube videos, LinkedIn Learning, and code documentation websites.
Code-learning websites, such as Codecademy, are websites designed specifically to help you learn how to code. Typically requiring a paid subscription to access all the features, these websites often provide both educational lessons on coding and interactive practice problems. They are a great choice for people looking to have more guidance on their self-teaching journey.
YouTube videos are another great way to learn, as there are countless playlists out there which can walk you through the basic, intermediate, and advanced levels of each coding language.
LinkedIn Learning is an excellent collection of training materials that you receive free access to as a student at UW-Madison. There are deep dives into the main web programming languages, as well as general design training and much more. For example, here is a great introduction to HTML coding. Note: you will have to sign in with your Wisc account to access these videos.
Lastly, code documentation websites, such as MDN Web Docs or W3Schools, are useful tools to supplement your learning. While probably not an efficient way to learn to code on their own, they provide a list of commands for each language and examples for how to use them which synergizes well with the other learning platforms.
Teacher-Based
The teacher-based learning routes involve having an instructor to help guide you through your learning journey. College courses, coding bootcamps, and Software Training for Students (us!) are all wonderful ways to learn to code with a guided curriculum.
Both college courses and coding bootcamps are often hosted by college campuses like UW-Madison and led by a professor or instructor. While college courses are for-credit classes which cover specific coding languages and objectives, coding bootcamps are typically paid, several week long courses which take place over summer or winter break (although not always!).
Software Training for Students provides free hour-long workshops, text manuals, and 1-on-1 help which are a great way to kickstart and or get help with your learning journey!
Improving Your Coding Skills
When you’re learning to code, don’t worry about memorizing each and every aspect of a coding language. Although it may initially be frustrating to constantly need to refresh yourself on the commands you’re using, you will become proficient with the portions that you use the most often, and the more obscure things can be found with a quick google search. Ask any coder or programmer: their job involves a lot of Googling!
Working on and completing actual projects is the best way to develop your skills as a web development coder. Gaining knowledge on how to code is important for giving you a baseline understanding of how things work, but testing yourself and practicing is how you’ll solidify your knowledge and make the largest improvements in your skills.
Work on projects that excite you! If you’re excited about the project you’re working on, you’ll be much more likely to stay consistent and committed to the learning process!
Web Development Logistics
We covered helpful terminology and resources relating to websites in the previous sections! This section will now focus on the logistics you should consider when developing your own site.
Which Development Route is Best for Me?
The answer to this question entirely depends on what you are trying to do!
Website builders, content management systems, and hand-coding can all be used to successfully create a quality website. However, each avenue has its strengths which make it better tailored to the specific needs of the person and project.
Website builders are a good fit for individuals without a significant background in tech and for more basic and straightforward website projects. They can be easily used by everyone and reduce the time and effort required to publish a website.
Content management systems are a good fit for those looking to implement more detailed features on their site and for medium-sized sites. They have a larger learning curve and require more time than website builders, but provide more customization options for shaping your website how you’d like and for having all the website features you’d like to have.
Hand-coding is a good fit for individuals seeking to have full control over the development process, who want to create a more advanced website, and/or who have a background in computer science. While requiring the most time and learning of all the options, hand-coding allows you to craft your website from the ground-up to tailor your site to your exact needs, which may be necessary if you are looking to implement advanced features into your website. Hand-coding is also a great option if you’re someone who already has experience with coding!
Hosting Your Website
As was mentioned in the first section of this manual, all websites require a web host to host your website and make it accessible to internet users. Although you can host your own website, it’s a more complicated process which we will not cover in this manual. It’s usually best to pay a web hosting service, a company which specializes in hosting websites, to handle that process. There are many web host options out there, with some popular hosts including: Bluehost, DreamHost, GoDaddy, Domain, and countless more.
For a monthly or yearly fee, these companies will take your website content (your images, videos, HTML, CSS, JavaScript, etc.), publish it to the internet, and link your website to a domain name. As you may have caught from that last sentence, a web host needs to be given website content to publish. If you’re using a website builder (and potentially a content management system), this process of providing the content to the web host is usually done behind the scenes without requiring action on your part. However, if you’re going down the hand-coding route or are in a circumstance where you do need to provide content to the web host, you will need to upload the content to the web host yourself. Keep in mind that some web hosts may also charge based on the bandwidth your website uses. If this is the case, then monthly web host costs may increase as your website gets more traffic.
Website Files
Website files are computer files which contain website content such as images, HTML, CSS, JavaScript, and videos. If the method of web development you’re using requires you to upload your content to the web host, you will need to upload files like these in order to have your website published online.
Website File Organization
Although there is not a mandatory way in which these website files need to be organized, there ways of organizing them which are generally considered to be best-practice by the web development community.
To start, you want to create a folder which will house all of your website files. Within that folder, it may be a good idea to follow this general format for organization:
Index.html file: in this file, you’ll write the HTML code for your webpage. The “.html” tag signifies to the computer that the file contains HTML code.
CSS folder: this folder will contain all your CSS files. Although multiple CSS files are not required, it may help with separating different style sets you would like to use. The primary CSS file within this folder is often titled “style.css”, with the “.css” tag signifying to the computer that the file contains CSS code.
JS folder: similar to the CSS folder, this folder will contain all your JavaScript files. Although multiple JavaScript files are not required, it may help with separating different style sets you would like to use. The primary JavaScript file within this folder is often titled “script.js”, with the “.js” tag signifying to the computer that the file contains JavaScript code.
Images folder: this folder will contain all the images you wish to display on your website.
Here is an example of how website files might be organized (from the view inside a code editor). On the left-hand side you can see a "CSS" folder with the file "style.css", an "images" folder, a "js" folder for JavaScript, and an "index.html" file which houses the HTML code.
Keep in mind that websites vary in whether they have a single or multiple HTML/CSS/JS files, and they may have additional folders containing other media or coding tools.
Website File Creation
To create HTML, CSS, and JavaScript files, you can use your computer’s default text editor (NotePad for Windows and TextEdit for Mac).
This will create a text file on your computer. To change the text file to an HTML file, open the file and select “Save As”. Then, type in your desired file name followed by the “.html” tag (ex. index.html). Lastly, under the “Save as type:” dropdown box, select “All files (*.*)”, and save your file. It will now be an HTML file! For CSS and JavaScript files, use the “.css” and “.js” tags respectively!
Editing Website Files: Code Editors
There are a variety of ways you can write HTML, CSS, and JS code! The default text editors on Windows (Notepad) and Macs (TextEdit) can both be used to write code. However, downloading an editor specifically created for coding can make the process of writing code a much better experience!
The images below depict the same HTML code, but opened in a code editor (top) and the default text editing software (bottom).
Similarly, the images below depict the same CSS code, but opened in a code editor (top) and the default text editing software (bottom).
As mentioned, a code editor is not required to write code, but does make the experience much more enjoyable! Most code editors provide visual enhancements like those shown above, as well as the ability to install plugins that expand your coding capabilities (such as running a server from the code editor). Many of the code editors offer relatively similar features, so try a few out and find one that you like the best! Two popular code editors are Visual Studio Code and Brackets.
Linking Website Files Together
One final thing to keep in mind when creating website files is that the files will need to be linked together to allow them to communicate with each other and reference each other’s content. For example, using the human body analogy discussed earlier, HTML provides us with the “skeleton” of the body. In order to allow the HTML “skeleton” to work with the CSS “skin”, we need to bridge the gap between the two. This is accomplished by writing lines of code in each of our files instructing them that we would like them to reference the other files.
For example, look at the red box on the top of this HTML file. This line instructs the HTML file to reference the file “canvas.css” as the CSS stylesheet which should be used to add aesthetic changes to our HTML. By adding this line, our basic HTML can then be transformed into stylized HTML using the CSS file!
Domain Names
Now that we’ve discussed the process of uploading website files to a web host when applicable, let’s name our website with a domain name! Remember that domain names are the human-readable “address” assigned to each website which allows us to locate specific websites (such as www.Google.com). In order to make our website easily accessible to other people on the internet, we will need to purchase a domain name from a domain name provider (ex. Google Domains). Some web hosts also offer both web hosting and domain purchasing services on their site (ex. Domain.com), making the process more streamlined!
After purchasing a domain, you receive full rights to using the domain for a set period of time, typically one year. Think of it as “renting” the domain. You usually have the option to renew the domain prior to it expiring, allowing you to keep the rights. If you do not renew it and the expiry date arrives, the domain becomes available for others to purchase.
Once you have obtained a domain, you need to provide the domain details to the web host so that they can establish the link between your domain and content and make it available for others to access.
Shop Platforms
If you’re looking to sell a product or service, you may want to consider using a shop service like Shopify to facilitate the process of listing items, collecting payments, and managing sales. For a monthly/yearly fee, shop services can be added to your website to provide a pre-built, professional method of selling your products without having to create the system yourself. There are several popular shop services out there, so do some research and find the one that seems best tailored to your needs!
Some website builder packages may come with a shop service platform included! When shop services are not included, or if you are hand-coding a website, you have the option to add one in if desired.
A rough estimate for the costs of each portion of the web development process is shown below. Note that these are just estimates and can vary depending on the scope of your project and the company you are purchasing services from.
We have not yet talked about two of the bullet points: paying someone to code your website and SSL certificates!
We discussed three methods by which you can build a website yourself, but keep in mind that you can always pay someone to create a website for you if your budget allows such.
Additionally, while listed under the “optional” tab due to them not being fully necessary to create and publish a website, SSL certificates may help visitors feel more secure when visiting your webpage. In a nutshell, SSL certificates provide websites with the small lock icon to the left of the URL bar if you’re using the Chrome browser (or the little shield icon to the left of the URL bar if on Firefox), signifying that the website has a secure connection!
Useful Resources
Web Dev Resources
As we have covered, there are many avenues to creating your own website. Here are some resources that may be helpful during your web development journey:
YouTube video series for design principles and web design on channels like DesignCourse
Starter Projects
Remember that, technical knowledge aside, practice is the best way to improve your web dev skills with methods like WordPress and hand-coding! There are many starter projects which can help you practice, such as a personal introduction webpage, an educational webpage for a topic you're interested in, or an interactive ad-libs story maker!
