Web design is a valuable tool for any small business owner.
A company website is essential for any business, no matter the size– it’s a place where potential clients, partners, or even passers-by who come across your ads will go first for more information. But starting up a website of your own can be expensive, especially if you go to a third-party provider to have it built for you. While this may be a viable solution for corporations with cash to burn, what about small businesses and startups on a budget?
With the right tools, knowledge and expertise, you can build a basic website of your very own. If you’ve never had experience with coding of any kind, building your own company website can seem like an intimidating task; but with just a simple coding or text program and some well-applied expertise, you can create your own HTML and CSS documents to get your website off the ground.
This easy introductory guide to HTML and CSS will walk you through the basics of building your own website. No prior experience required!
What is HTML?
An HTML (Hypertext Markup Language) file contains all the content on your webpage, as well as directions on how to organize and display it on your browser. If a website were a human body, you could think of the HTML files as its bones and nerves: rudimentary elements that serve to hold everything together and transmit important information.
Here’s a simple example of HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text on my website.</p>
</body>
</html>
Welcome to My Website!
This is a paragraph of text on my website.
What's Going On Here?
Let’s break it down:
- <!DOCTYPE html>: This tells the browser you’re writing an HTML5 document.
- <html>: This is the opening tag that starts your web page.
- <head>: Contains important information like your website’s title.
- <body>: This is where all the visible content goes.
- <h1>: A header tag, great for titles. The number tells the browser how important it is (h1 is the highest).
- <p>: A paragraph tag, perfect for regular text.
If you copy this code into a text editor and save it as a .html file, you can open it in a browser and see your very first webpage!
IMPORTANT: Remember to Save Your Work!
REMEMBER: For ease of navigation and maintenance, it’s important to organize your files in folders: one folder for each page, with the HTML file and any necessary content for that page included inside. The importance of a solid file organization system will become more important as we continue.
What is CSS?
While HTML handles the structure of your site, CSS (Cascading Style Sheets) bring your website to life with colors, fonts, and layout. Your CSS file serves as the style guide for your website: it tells the browser how everything should look, including color, fonts, and overall layout. If the HTML document is the nerves and brains of your website, you could think of CSS files as the flesh and organs that give it shape, function, and life.
Here’s a basic example of how CSS works:
<!DOCTYPE html>
<html>
<head>
<title>Styled Website</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
p {
color: #666666;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Website!</h1>
<p>This paragraph now has a different font, size, and color!</p>
</body>
</html>
Welcome to my Styled Website!
This paragraph now has a different font, size, and color!
What's Going On Here?
- background-color: Changes the background color of your page.
- font-family: Specifies the font for your text.
- color: Changes the color of your text.
- text-align: Centers the header text on the page.
- font-size: Adjusts the size of the text.
Adding these styles is a surefire way to make your website look more professional.
How Do HTML and CSS Work Together?
HTML and CSS work together to create a functional, polished website. HTML provides the structure and framework, while CSS adds visual elements to create an interesting webpage.
Let’s say you have an HTML element, like a heading:
<h1>My Business Website</h1>
My Business Website
Using CSS, you can style this heading to look exactly how you want:
h1 {
color: blue;
font-size: 32px;
text-align: left;
}
My Business Website
This changes the heading’s color to blue, makes it larger, and aligns it to the left. You can make all sorts of adjustments to your website’s CSS until you find a look that fits your brand.
How to Organize Your Files
As mentioned, properly organizing your files is the best way to ensure that your website runs smoothly. If you’re just starting out, the best way to organize your files is the nesting method: your entire website is contained within a single “root” folder, which contains folders and subfolders of its own that hold your HTML and CSS files. At the very least, each unique page on your website should have its own unique folder.
It’s important to note that, when navigating a website that uses nesting structure, users will need to specify any relevant folders and subfolders that pertain to the webpage file they want to access. The general format for an HTML URL looks something like this:
examplewebsite.com/folder/subfolder/…etc.
For instance, if you want to access the video marketing page on the iStudios Media website, you’ll have to direct the browser to access the page’s HTML file within the website’s root folder. The resulting URL would look something like this:
istudiosmedia.com/video-marketing/
When you’re designing your website, make sure to organize your files properly to help users get where they need to be.
What Comes Next?
Still not sure about getting started? No need to worry; there are tons of free resources and tools at your disposal to help you along the way. With apps like Visual Studio Code and Cyberduck, you can start building your website at any time, even if you’re on a budget. Platforms like W3Schools and Mozilla Developer Network (MDN) are great for learning HTML and CSS at your own pace. And if you ever get stuck, there’s a whole community of developers who are more than happy to help!
Building a website for your business is certainly a challenge, but it doesn’t have to be overwhelming. By mastering the basics of HTML and CSS, you’ll be well on your way to building a solid online presence for your very own business.
Good luck, and happy coding!
