Web Development in a Nutshell – A 24 Hour Primer

Topics: Web, Digital


Reading Time: 7 minutes


Quick confession to the reader before we get started: this article isn’t going to teach you fluent web development that quickly, so I’m sorry about misleading you, but learning development is very much like learning a foreign language.


There is structure made up of subjects, verbs and adjectives and a syntax that must be followed to properly communicate these things. It isn’t a language meant to be understood by people, and so it comes with a mysticism that seems to exaggerate developers into circuitry wizards and techno gods.


While appreciated, this status and title may be somewhat of a misnomer. I’m not saying that developers aren’t smart, talented and hard working individuals. I’m also not claiming that web development is at all easy. I am saying that it is high time to dispel the idea of web development as a sort of dark magic set aside for nerds and tech gurus.


The truth is, the web is integrating more and more into our everyday lives, and it’s a good idea for everyone to have some general knowledge as to how it works.


I’m glad we got that out of the way. It feels as if a great weight has been lifted off of my chest. Now, my goal with this article is to provide a high-level overview of how websites work and provide the reader with a few web terms that will be useful for keeping up in web-related conversation. This will be especially useful for those that are thinking about having their website updated or embarking on some different web-related quest.




This may seem like an odd place to start, but humor me for a second. Essentially, a server is the exact same thing as the computer you are on right now. If you’re more technical, you’re probably lighting a torch and grabbing a pitchfork right now, but I’m purposely being vague for the sake of taking baby steps. The key difference between a server and your computer is how they are configured to operate. While your computer has applications installed that are designed for a variety of everyday uses, a server’s software is designed to hold and deliver files when requested, like a storage shed mixed with a vending machine.


The Internet


The Internet is millions of servers connected together that other computers can connect to and retrieve information from.


World Wide Web


Believe it or not, this is technically different from the Internet. The Internet is just where the data is held. The World Wide Web is the way we access that data.




A browser is an application designed to retrieve and render web pages from The World Wide Web, Google Chrome, Internet Explorer, etc. Simply put, a web browser is a translator that retrieves web files, reads them and then translates them into what we see on the screen.


This next part is very important. Not all web browsers operate the same way. A browser works similarly to the way an author would when translating a foreign novel. Each author will interpret the subtle nuances of the language they are translating a little differently, and so, while several authors may be able to get the same general story across, the devil is in the details. It is the same with web browsers. While most web browsers will render the same page, certain browsers will end up displaying things a little differently, which is why planning for cross-browser compatibility is so important in the development process, and why choosing the best browser is so important in the browsing process.


As far as which browser is the best for browsing, this topic is highly sensitive, and so I must tell you to prescribe to the ideology that there are no losers in the browser world, and that each is special in its own way, like a snowflake. 🙂 But seriously, we’re all looking at you Internet Explorer!


HTML (Hypertext Markup Language) & CSS (Cascading Style Sheet)


In a language, there are nouns and adjectives. Nouns are things and adjectives describe them. HTML and CSS fill these positions in the web world. HTML is made up of elements, and CSS is the thing that describes them and gives them their characteristics. For example, a paragraph is an HTML element, and the browser recognizes this as a long string of text data. Without css, that would be all that it is, but say you want a special paragraph where the text is red, the font size is larger and the font itself is cursive. These characteristics would be assigned to the HTML object using CSS.


Front End & Backend Development


There are two types of web development, front end and backend.

Front end development deals with the visual look and interactive feel of the website. This is everything from the colors, to the layout, to the subtle animations that take place (mouse hover effects, loading wheels, etc).


Backend development deals with all the things that happen in the background, which sounds very ambiguous, I know. This could involve how data is transferred and retrieved on the website, the structure of where the data is stored, the configuration of the server that delivers the web pages, site security and so on.




A database is a series of related tables containing fields of data. Why is this important? Because this is where information on a website is often stored. Say someone is browsing a website and enters in their email for a subscription. That email will be stored in a field of a database table. Or if someone creates a username and password registering for a user account, all that information is captured and stored within a database.


Server Side Languages


These languages act as a medium between the front end of the site and the server. Some of these languages include: PHP, Node JS and Ruby.


Before a website is rendered by a browser, the requested website file is first passed through the server to process any tasks that need to happen to allow the website to be rendered. This sounds complicated, but many of us witness it everyday when we log in to our social media accounts. Before Facebook, or any other social media account, can render the HTML and CSS that make up the web page the browser displays, it must first insert all the data (profile info, friends posts, notifications, etc) into the HTML file, which then finally is spit out by the browser into the lovely social media feeds we are used to seeing.




There are many different types of hosting, and this topic alone could be an entire blog post of it’s own, so I am going to keep this very basic. Hosting is either the physical space on the server, or the server itself if you own your own server, where your website files and databases are stored.


There are many hosting providers and the one you choose depends largely on your websites needs. If you are working with a web developer to create your website, you should confer with them before making a final choice.


Domain Names


A domain name, also known as a URL, is that thing you type into the browser to bring up a specific website. I heard it explained this way once, and I liked it. If you picture your hosting as a house, the domain name would be the specific address of that home.


Remember, you don’t have to buy your hosting from the same place you buy your domain name, but many places where you buy a domain name may also try to sell you a hosting package, so be sure to check your cart before checking out. Again, please confer with your web developer before making decisions with hosting. I really can’t say this enough. It’s easier to wait on that decision than it is to get out of a hosting contract.


Dynamic & Static Websites


I’ve often heard the term “dynamic” misused to describe a website that looks right on all device sizes, but in actuality, that isn’t what it means. Also, the correct term for a website that looks good on all devices is Responsive, which we will talk about in a minute. Anyways, the term dynamic actually refers to a kind of website that populates the content (words, images and data) into a template made up of HTML, CSS and server side code via user input.

That sounds like a mouthful, but it’s actually fairly simple. Most websites these days have a dashboard that the user can log in to for website management. That user can change the content on a site using the dashboard without ever actually interacting with the real website code. A website that has the ability to do this is dynamic.


The term “static” describes a website that is only made up of HTML and CSS and can’t be edited without interacting with the code directly.

Responsive Websites


A responsive website is one that looks good on any screen size. This doesn’t mean that your site is visible in a smaller version on phones and tablets, but actually means that the code has been purposefully manipulated to optimize the content and layout of the website to the screen size of the device the user is using.


Content Management Systems (CMS)


Content management systems make it easier to manage your website’s content long term. Some popular CMS are WordPress (not necessarily built for it out of the box, but often configured that way), Joomla and Drupal. These systems were created to allow users to manage content on a website via a user interface (dashboard) without having to manipulate the code.


Web Design & Web Development


Though these sound similar, these are actually entirely different fields, and while most designers or developers have experience in both, this isn’t expected to be typical. Web design deals solely with how the website will look and behave, while development is the translation of that look and behavior into actual code.


The Dark Web (also known as the deep web)


This is the place where web developers gather to utter dark javascript incantations and cast HTML spells to nefariously manipulate the world at large. Not really, this entire section was just for laughs, but the dark web is so real.  


Congratulations, you have now armed yourself with some good starter web terminology! You can now feel prepared for that meeting with your web team or for the extra interesting conversations you may encounter at bars or restaurants.


Did you know that The Abbi Agency offers award-winning web development services? Get in touch with us to learn about how we can establish, design or upgrade your digital presence today.

Want to see more awesome posts like this?

Sign up to receive updates and be one of the first to know when we have fresh content!

  • This field is for validation purposes and should be left unchanged.