When I was a kid, my father had a program on his computer called “Dreamweaver.” Given the great choice of name, and the fact that I was probably under 10 years old, I found myself interested, wondering what secrets the application might hold. I opened it up, and… had no idea what I was staring at. Certainly I did not see my dreams springing to life in front of me. Instead, I saw some boxes, some seemingly random icons, and was prompted about whether I wanted to start a new website project. I closed the program. I moved on with my life. Still, my curiosity at that age was piqued. A few months later, when I found out my father was building his own website, I sat at his side and watched him work. He explained he was “coding.” 10+ years later, probably completely unrelated to those experiences, I became a full time web developer. And do I now see my dreams sprung to life before me on my computer? Well, maybe not. But at least now I know what I’m looking at.
Web design may seem a daunting task, but the only way to learn is to start. With that philosophy in mind, lets jump head first into the basics of building your very own website.
The Structure
First, a foundation. Web content is broken down into two coexisting structures: a server, and a client. A server stores content, and a client accesses and displays that content. At a fundamental level, I have just described all of the internet. When you open up a web browser, like Google Chrome, Safari, Firefox, or Microsoft Edge, you are opening a web client. When you navigate to a website, your client is communicating with a server, retrieving information, and displaying it for you. Additionally, when you input some information into a website, your client is communicating this new data to the server, which is processing it, storing it, or editing it and sending it back to the client. That’s it. That’s the internet. For the sake of this article, we will focus very little on the server side of things. I’ll get into why later.
Now that we have a server and a client, we need to find out what the server will actually give the client. Websites are almost always built on three “languages” that provide you with almost all the content you view in your browser window. These three languages are: HTML, CSS, and Javascript. Your client (Chrome, for example), retrieves a list of HTML, CSS, and Javascript files from a server, and then renders those files on your screen.
This article on PageCloud goes into more detail on servers, clients, and other terms that are good to learn when learning web development.
The Building Blocks
HTML is a bit like the foundation of a house. It’s the bare wooden frame, the structure, the skeleton. You use HTML to layout your content at the most fundamental level. A site with nothing but HTML will look like it was straight out of the 90’s, so if your goal is a really authentic retro vibe, read no further.
CSS is like the dry wall and paint and cosmetics on the house. It makes a website look pretty. It describes the colors, the size of different components, and how those components sit next to each other. And your web browser reads it like a set of rules to be applied to the HTML. Then your browser goes in and takes each HTML component and changes it based on the instructions in the CSS.
Finally, Javascript is like the plumbing, electrical wiring, and other assorted functionality in your house. Javascript is the fridge, the bathtub, the Alexa sitting in your kitchen. Unlike HTML and CSS, which are called “scripting languages,” Javascript is a more powerful, more robust, “programming language.” It lets you write all sorts of complicated rules for your site, like dynamic animations, or content displayed in special circumstances. Ever been to a site that locked its content behind a paywall? That annoying feature is accomplished with Javascript. There are endless annoying things you can do with Javascript. If you’ve ever heard the terms Web Design and Web Development, they both mean working with these three languages to create web systems. Design is often more focused on the visuals and the client experience; what you see when you load up and use a site. Development may focus on this as well, but can also include programming more of the “backend” of a web system (the stuff you never see or think about), which might include more complex server-side functionality.
When you view a website, files containing these three languages are downloaded from a server and interpreted by your web client. These three languages represent the client side of the internet. Curious to peak behind the curtain? If you have Google Chrome, right click on a web page and select “Inspect.” You will be greeted, as I was in dreamweaver, by a complicated set of tools and displays. This is your window into the backend of the internet. A peak behind the curtain. It’s all much less “Dream Weaving” and more “Metal Plumbing.”
But I digress. Now that we have our languages to display websites, and a server and a client, we need to implement the rules and build something. Well, we’ll need server space. As said before, a server stores the information, and serves it to the client. Luckily, these days, there’s no need to set up a complex rack of computers and build a server yourself. The servers have been built by other, smarter people! You just need to buy some space on one. Where to get affordable, high quality server space is a topic for another article (maybe look somewhere other than GoDaddy), but it’s not difficult to find a range of web hosting options. Many services make it very easy for a non-developer to set up their own site.
Now what? Well, your site is ready to be built! Just don’t forget about an SSL, Security, Server Caching, Image Compression, CSS and Javascript Minification and Deferment, a CMS, Modern Design Best Practices, and… Okay, well, there’s more that goes into building a site. A lot more. Even for me, after many years building websites professionally, there is always much more to learn. Still, all of these things are learnable. Let’s take a look at one final aspect of modern web development before wrapping up.
For more information on the basics of HTML, CSS, and Javascript, see this article on HubSpot.
The Tools
The Content Management System (CMS) is your new technological web development best friend. Content Management Systems are designed to streamline the process of publishing content to the web. The most popular CMS on the web today is WordPress. WordPress is like an Ikea, an architect, a construction crew, and an interior designer all in one. It’s an application that runs on your server, and provides you with a framework to develop and implement a fully functional website. Along with being incredibly powerful and diverse in functionality, WordPress is open source, which means you can open it up and make any changes you want, ranging from adding a little CSS to rewriting or adding any piece of code you desire. Additionally, WordPress has an absolutely massive library of prebuilt plugins written by community members and web development companies, which means many tasks can be accomplished with the use of the correct plugin (plugins range from free to rather expensive).
If you plan on building a website, then WordPress may be a great place to start, because it handles a lot of the server side logic for you. Server-side programming is much more complicated and time consuming than front-end web design, so if you have no experience, I’d definitely recommend starting with WordPress and maybe taking some local computer programming classes in your off-time.
So that’s it! A very concise, very basic beginners guide to the world of web development. If anything, this may act as a jumping off point for your education in scripting languages, in content management, and in getting a website online. And, as a final thought, whether you code the site up from scratch, use WordPress, or even go with a very simple, pre-built website template, you probably don’t need to open Dreamweaver (but it still has a great name).
If you’re interested in learning more about WordPress, this article from iThemes is a great place to start!
