Getting Started With Web Development
Arturo Lopez
June 4, 2024
Who This Article is For
If you are feeling overwhelmed and not sure where to start with web development, this article is for you. In 2024, there are many different ways you can build and launch a website. There's lots of options for design, hosting, CMS, etc. It can get confusing as to where you should start.
There are two groups of people who ask the question: how to build a website?
The first group is business owners/marketers/managers who are doing it for their own business but don't have any interest in becoming web developers.
The second type of person is someone who is interested in becoming a web designer or web developer. This person may be wanting to learn a skill to earn income by providing this type of service.
In this post, we will primarily be speaking to the person who falls into the second category. If you fall into the first (business owner/manager/etc.) and you are considering launching your own website, skip to the bottom of the article to read over "How To Launch A Website Without Coding".
We will focus on the following key concepts:
HTML, CSS, JavaScript
Programming Language
Static vs Dynamic sites
API and Database
A website without coding
What This Article Isn't
I will not go into coding an example or project. To get experience, it's best to practice the ideas and concepts covered. For hands on work, I'd recommend visiting any of the resources highlighted in the end or following a YouTube series.
My Advice on Development
If you want to get into Software Development, start with learning the fundamentals of the languages. For example, it's better to understand what CSS is used for, how it's used and see a few examples then quickly jump into using it. I wouldn't recommend trying to master the theoretical part of it for 6 months. This type of work is best learned through practice so the quicker you jump into it, the better. Learn the basic syntax, but don't get hung up on trying to master it. You can look that up as you go. It's more important to focus on the key concepts and the functionalities of the language you are working with. Now, let's dive into it.
HTML & CSS
HTML stands for Hypertext Markup Language and with it, you define the elements of your site. It is like the structure and foundation of a home. In it’s bare form, it works but it doesn’t look good. If all websites only had HTML, they would look the similar and you would just see text, and disproportionate images.
Here is an example of what HTML code looks like (on a webpage this will display a header with the words "This is a Heading" and paragraph text with the words "This is a paragraph"):
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
For more of a deep dive, see W3 Schools - HTML Tutorial.
To add some color and styling to your site, you will need CSS. With it, you can transform your site to make it look aesthetically pleasing by defining the font, size, width, padding, color, spacing, shadow, and much more.
Here is an example of CSS code looks like (this code is applying a blue background to the whole body section of the page, and making the header white and center, and applying a font type to the paragraph text while increasing it's font size to 20px):
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
For more of a deep dive, see W3 Schools - CSS Tutorial.
HTML and CSS can take you pretty far. But your site will be limited as a static website.
A Programming Language
Up until know, we have not talked about a programming language - one which you can implement logic statements and define functions. With a programming language, you can define classes, objects, functions, loops, data structures, and create algorithms. With this logic, you could do things in the background, and program to update something on the screen. In Frontend Development, a programming language is used to change the way something is displayed or shown to the user. In Backend Development, it is used to write server logic, and connect to APIs and databases.
In web development there are many languages you can use, but the top two are JavaScript and PHP. Most websites are built on PHP, including those built on WordPress. But JavaScript has become a popular choice for many developers looking for performance on modern web apps. I personally prefer JavaScript, but if you are debating as to which to consider I think you couldn't go wrong with either one. Here are some helpful links to consider.
Static vs Dynamic
Static means that your site has fixed content that it and will display the same information to all users. It’s a good place to host information, content, and links to other pages. For a lot of sites, this is all you need. But as soon you need to handle transactions and do more than just display content on the screen, then your site will need to be dynamic. For example, if your website needs to have users login, create an account, or purchase something, then you will need a dynamic site. This is where programming languages, such as JavaScript and PHP, come in.
API's are very useful if you want to connect your site to other applications, like MailChimp or EventBrite for example. If you're in need of a database, you'll need to decide between SQL and NoSQL. Because this article is an introduction to your first coding of a website, I won't go into the details of APIs and Databases. If you're ready to learn more about them, the links below can help break them down. What's an API, and difference between SQL and NoSQL.
How To Launch A Site Without Coding
Modern web builders have drag-and-drop features that allow you to build a site without having to do a single line of code. Among the most popular options:
WordPress
Wix
Squarespace
Shopify
BigCommerce
Shopify and BigCommerce are the best when it comes to E-commerce sites. If you are looking to kickstart your new E-commerce brand, check out this free ebook: Launch An Online Shop In 5 Easy Steps. If you don't need to sell product on your store, you can opt for one of the other website builders.
Even it's accessible, many business owners may not have the time, energy, expertise or resources to embark on the journey of creating their own store. If that's the case, give us a call or drop us an email and we can provide a free estimate on building your site.
Final Comments
Just to recap, you could use HTML and CSS to generate a static website. To add more functionality, you will need a programming language like JavaScript. With it, you could do Full Stack Development (Frontend and Backend). You could also use it to connect your site to an API or Database.
To get started, you can learn and practice for free on W3 schools, Free Code Camp, and Khan Academy. For a paid option, I recommend Zero To Mastery by Andrei. He has really good programming courses that can take you from beginner to advanced.
