What is website development?
What is website development?
Website development refers to the work that goes into building a website. This could apply to anything from creating a single plain-text webpage to developing a complex web application or social network.
While web development typically refers to web markup and coding, it includes all related development tasks, such as:
- Client-side scripting (writing front-end code)
- Server-side scripting (writing back-end code)
- Server and network security configuration (setting up security for browsers and networks)
- E-commerce development (building e-commerce websites and online stores)
- Content management system development (writing and building websites)
Web Development Terms to Know
Before I dive into the web development process, let’s review a few web development terms you might see throughout this piece.
Website
Websites are files stored on servers, which are computers that host (fancy term for “store files for”) websites. These servers are connected to a giant network called the internet … or the World Wide Web (if we’re sticking with 90s terminology). We talk more about servers in the next section.
Browsers are computer programs that load the websites via your internet connection, such as Google Chrome or Internet Explorer. Your computer is also known as the client.
Internet Protocol (IP) Address
To access a website, you need to know its IP address. An IP address is a unique string of numbers. Each device has an IP address to distinguish itself from the billions of websites and devices connected via the internet.
The IP address for HubSpot is 104.16.249.5. You can find any website’s IP address using Command Prompt on Windows or Network Utility > Traceroute on MacBooks or by visiting a site like Site 24x7..
To find your device’s IP address, you can also type “what’s my IP address” into your search browser.
While you can access a website using its IP address, most internet users prefer to use domain names or by going through search engines.
HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol connects you and your website request to the remote server that houses all website data. It’s a set of rules (a protocol) that defines how messages should be sent over the internet. It allows you to jump between site pages and websites.
When you type a website into your web browser or search for something through a search engine, HTTP provides a framework so that the client (computer) and server can speak the same language when they make requests and responses to each other over the internet. It’s essentially the translator between you and the internet — it reads your website request, reads the code sent back from the server, and translates it for you in the form of a website.
Coding Language
Coding refers to writing code for servers and applications. It’s called a “language” because it’s comprised of vocabulary and grammatical rules for communicating with computers. They also include special commands, abbreviations, and punctuation that can only be read by devices and programs.
In a sense, developers are translators, too.
All software is written by at least one coding language, but they all vary based on platform, operating system, and style. There are many different types of coding languages … all of which fall into two categories (written by two different types of developers) — front-end and back-end.
Front-End
Front-end (or client-side) is the side of web development that you see and interact with as an internet user. When website information is transferred from a server to a browser, front-end coding languages allow the website to function without having to continually “communicate” with the internet.
Front-end code allows users like you and me to interact with a website and play videos, expand or minimize images, highlight text, and more. Web developers who work on front-end coding work on client-side development.
We’ll cover some front-end coding languages in the next section.
Back-End
Back-end (or server-side) is the side that you don’t see when you use the internet. It’s the digital infrastructure, and to non-developers, it looks like a bunch of numbers, letters, and symbols.
Back-end developers work in systems like servers, operating systems, APIs, and databases and manage the code for security, content, and site structure.
There are more back-end coding languages than front-end languages. That’s because of browsers — at the front-end — only understand JavaScript, but a server — at the back-end — can be configured to understand (pretty much) any language. We’ll cover some back-end coding languages in the next section.
Content Management System (CMS)
A content management system is a web application or a series of programs used to create and manage web content. (Note: CMSs aren’t the same as site builders, like Squarespace or Wix.)
While not required to build a website, using is CMS is certainly easier. It provides the building blocks (like plugins and add-ons) and lets you create the structure with your code. CMSs are typically used for e-commerce and blogging, but they’re useful for all types of websites.
Why Learn About Web Development?
You might be a business owner hiring a freelance developer to build your website, a marketer pitching a vision to your development team, or a student learning about development as a career. Regardless of who you are or why you’re reading this guide, understanding the basics of website development can be helpful in this technology-driven world.
The internet isn’t going away anytime soon. In fact, it’s become a portal and primary method of research, connection, education, and entertainment in the world.
As of 2018, there are 4.2 billion global internet users. That’s more than half the world’s population, and these folks are using the internet for a vast variety of reasons.
What’s the one thing those reasons have in common? They require a website, and each website requires a skilled web developer.
Web development is also a rapidly expanding industry. Between now and 2026, the employment of web developers is expected to grow by 15%. That’s much faster than most other technology careers.
Whether you’re looking to hire a web developer or become one, it’s good to know the career path offers high-demand, high-value positions. Continue reading to learn more about the web development process, and don’t forget to check out the resources for developers below.
Website Development Process
The process of creating a website isn’t as easy as 1-2-3. Each development path is different based on the type of website, coding languages, and resources.
The following section serves as a brief overview of the web development process and a short introduction into the most common languages and CMS options.
Planning Your Website and Creating a Sitemap
All websites start with a plan. Developers call this plan a wireframe or sitemap(not to be confused with sitemap.XML, which is a file that helps SERPs crawl and find your site). It doesn’t have to be an official document; it’s simply a vision for your site that’ll give both you and your developer(s) direction and a place to start. You can draw it on a whiteboard or use a tool like Invision, Slickplan, or Mindnode.
Just like a business plan gives a potential investor insight into your goals and deliverables, a sitemap gives a developer an idea of what you’re picturing and the information needed to meet your vision. You can create your sitemap on your own or work with your developer(s).
Here are a few questions to ask yourself when planning your site.
- What individual pages do you want? What content will be on those pages?
- How can you organize those pages into categories? (These categories might represent your homepage menu — if it helps to think about it like that.)
- What is the hierarchy of pages on your site?
- How will the pages link together?
- What pages and categories are essential to your site and user experience, and which ones could be removed or combined?
Writing Your Website Code
The next step in the web development process is writing the code.
Developers will use different coding languages for the front-end and back-end of websites, as well as for different functionalities of the site (such as design, interactivity, etc.) These different languages work together to build and run your site.
Let’s start with the most commonly-used languages. Almost every website uses these three together, and yours probably will, too.
HTML
HyperText Markup Language (HTML) has been used since the 1990s. It’s the foundation of all websites and represents the bare minimum of what’s needed to create a website. (Yes, you can create a website with only HTML. It wouldn’t look too pretty, though.)
Languages like CSS and JavaScript enhance and modify the basic site structure built by HTML. HTML5 is the most recent version and supports cross-platform browser functionality, making it popular in mobile application development.
CSS
Cascading Style Sheets (CSS) was developed in the late 1990s. It adds design elements like typography, colors, and layouts to websites; it’s the cosmetic code.
CSS allows developers to transform your website to match the aesthetic you envisioned for your site, and like HTML5, CSS is compatible with all browsers.
JavaScript
JavaScript is the cherry-on-top of coding languages. Created in the mid-90s, JavaScript is used to add functionality to websites. Developers use it to add animations, automate tasks within certain pages, and add interactive features that enhance user experience.
JavaScript is rapidly evolving. Once considered a “toy” language, JavaScript is now the most widely used coding language in the world. With the help of Node.Js, it’s now a back-end coding language. It’s the first language to be understood by browser, and some have even discussed applying machine learning to it, too.
HTML, CSS, JavaScript are the “big three” of web development. Almost every website uses them in some capacity. There are plenty of others, such as server-side languages like Java, C++, Python, and SQL, but understanding these three is foundational to your website development knowledge.
Building the Back-End of Your Website
Writing code might be one of the more complicated parts of web development, but it’s hardly the only component. You also have to build your back-end and front-end site structures and design.
Let’s start with the back-end.
The back-end handles the data that enables the functionality on the front-end. For example, Facebook's back-end stores my photos, so that the front-end can then allow others to look at them. It’s comprised of two major components:
- Databases, which is responsible for storing, organizing, and processing data so that it’s retrievable by server requests
- Servers, which is the hardware and software that make up your computer. Servers are responsible for sending, processing, and receiving data requests. They’re the intermediary between the database and the client/browser. The browser will, in effect, tell the server "I need this information", and the server will know how to get that information from the database and send it to the client.
These components work together to build the foundation for each website.
As for building your website, back-end developers will establish three things.
- Your logic code, which is essentially a set of rules for how your website will respond to certain requests and how objects of your website will interact.
- Your database management, which is how your website will organize, manage, and retrieve its data. Read more on SQL vs. NoSQL here.
- Your infrastructure, which is how your site will be hosted. Hosting your own site will give you greater control, but it’s much more expensive and requires you to maintain your own server health and security.
With these components and decisions in place, your website will be ready for front-end development.
Note: The back-end is slightly tangential to web development because you don't always need a back-end if you're not storing any data. “Data” in this context means any user-entered information that you need to save and persist. Think about logging in to a website. If they don't have a back-end, how could they remember your login information? Or what your profile settings are? To get this information, you need a back-end.
Facebook, as an example, needs to know what people are in your Friends list, what events you have joined, what posts you have created, and more. This is all "data" that lives in a database. If they didn't have a back-end with a database, none of that data would be accessible to them.
On the other hand, a website that’s purely informational and doesn’t require the users to enter any data wouldn’t need a back-end.
So, if you have no data, you don’t necessarily have a need for back-end development. But that’s not saying you shouldn’t learn the basics. You never know when you might need it.
Building the Front-End of Your Website
If you’ve ever dabbled in web design or toyed with a website in WordPress or Squarespace, you’ve touched front-end web development.
The front-end stuff is important — it’s what your visitors, customers, and users see and how they’ll use your website.
Front-end (or client-side) development includes a combination of JavaScript, HTML, and CSS. It also controls components such as typography, navigation, positioning, and browser compatibility and responsiveness. This part will reflect more of your initial site vision and what you included in your wireframe.
As technology and consumer preferences change, client-side coding tends to become outdated … a lot faster than back-end development does. This is where coding resources (like the ones we’ve included below) come in handy.
Working with a CMS
Why would someone choose a CMS over coding “by hand” or “from scratch?” Well, a CMS — like Wordpress or HubSpot — is easier to use (you have to write less code), and it often has tools around hosting the site. On the other hand, it’s less flexible and, therefore, gives you less control over your front-end.
CMS options also often include plugins that remove the need to write a backend. For example, there are WordPress plugins for e-commerce so that, instead of building a complicated back-end to charge customers’ credit cards, you can just use an existing plugin and avoid the need to deal with databases and server-side code at all.
Popular content management systems include HubSpot, Joomla, Magento, and WordPress — which has almost 60% market share. (In this case we’re talking about open source WordPress software, not the WordPress site builder.)
Acquiring a Domain Name
At this point, your website will have an IP address. It also needs a domain name that your visitors can use to find your site.
Perhaps you’ve heard of sites like GoDaddy and Hover. These services help you purchase a domain name and register with ICANN (Internet Corporation for Assigned Names and Numbers). Most domain registrations are good for a year before you’re required to renew.
Site builders and hosting services, like WordPress and Squarespace, also allow you to purchase a domain name.
Website Development Resources
Interested in learning more about development and coding? Outside of connecting and networking with other developers, there are plenty of resources you can tap into to further your understanding or web development.
Web Development Courses and Classes
Whether you want to explore back-end, front-end, or full-stack coding, here are a few online courses and classes recommended by our own HubSpot developers.
TutorialsPoint
All content and resources on TutorialsPoint are free. Between tutorials, ebooks, and videos, TutorialsPoint provides many different ways to learn.
egghead
According to their website, “egghead is a group of working web development professionals and open source contributors that provide you with concise, information-dense video courses on the best tools in the industry.” Users can take courses, listen to podcasts, or take lessons on a wide variety of web development topics.
Khan Academy
Khan Academy is a well-known free educational resource. Users can learn anything from macroeconomics to linear algebra to US history, as well as a handful of computing topics.
freeCodeCamp
freeCodeCamp is a non-profit organization (like Khan Academy) that helps people learn to code for free. With thousands of articles, videos, and interactive lessons, as well as worldwide study groups, freeCodeCamp helps thousands of developers and engineers learn about programming and land development jobs.
Treehouse
Team Treehouse is a subscription-based online learning program. Users pay a monthly fee and gain access to hundreds of courses on over 20 different topics. From JavaScript to Python to PHP, Treehouse can teach you all you need to know about web development.
Web Development Communities
Web developers are masters of the internet, so it makes sense that they’d hang out on there.
According to Code Condo, developers join these communities for:
- Up-to-date information and problem solving
- Insightful answers, new perspectives
- Tips and tricks for all-level programmers
- Links to resources, talks and research papers
- Meeting new friends, code buddies, and potential partners
Here are a few online communities recommended by our own HubSpot developers.
Stack Overflow
Stack Overflow was introduced ten years ago and has since become one of the most popular programming communities in the world. According to co-founder Jeff Atwood, “[Stack Overflow] is by programmers, for programmers, with the ultimate intent of collectively increasing the sum total of good programming knowledge in the world.”
Stack Overflow is a great place to go with questions because most of the time, other developers have asked and answered the same ones. The forums in Stack Overflow keep you connected to other developers while also keeping you informed.
Mozilla Development Network (MDN)
Mozilla Development Network is known to be more thorough and accurate than other online resources. It’s not as much a community as a comprehensive resource and library of documents for coding languages. It’s useful when learning how certain functions work and staying up-to-date on coding and development news.
Reddit is a forum-based community where developers of all levels gather to ask and answer questions. It’s incredibly interactive and includes people from all over the world. You can also join “subreddits” based on topic, such as web design, JavaScript, or freelancing
If you’re a beginner coder, this guide is for you!
Here is what this guide covers:
- An explanation of the basic areas in web development,
- An overview of programming languages and frameworks,
- And recommended resources to help you learn.
It’s geared for beginners, with helpful links and information to give you a head start into your own research.
Here’s what we’ll be going through…
Table of Contents
*Jump links included, so you can skip around if you want!
Part 1: We’ll start out with the basics:
- What web development is: explaining what’s actually happening when you load a website in your browser.
- HTML, CSS, and JavaScript: the foundation of every website.
- Helpful tools: using code editors and Git
- What’s front-end and back-end?
Part 2: Then we’ll get into more intermediate front-end skills:
- Responsive design: making sure your website looks good on computers, tablets, and phones.
- Grunt, Gulp, and WebPack: using build tools to do some work for you!
- An introduction to JavaScript front-end frameworks: React, Vue, and Angular
Part 3: Followed by back-end skills:
- An overview of the most commonly used back-end languages and how they stack up.
- A quick intro to databases and what database languages you should learn.
- The basics of setting up a website on a server.
Epilogue: Learning resources
- A short list of recommended online courses, tutorials, and books.
A note on affiliate linking— some of the links below are affiliate links, which means that if you purchase through them, I may get a commission from the company. As an Amazon Associate I earn from qualifying purchases. It’s a great way that you can support Coder Coder at no extra cost to yourself. You can read more on my disclaimer page.
Now, before we go through everything about websites… let’s start with you!
What’s your ultimate goal in learning to code?
In his book The 7 Habits of Highly Effective People, Stephen R. Covey asserts that in order to be successful, you have to “begin with the end in mind.”
Consider your own reasons for getting into coding… What end are you aiming for?
What is your ultimate goal?
Are you looking for a fun hobby, a career change, a flexible job where you can be closer to your family?
Your entire approach to web development should be centered around achieving this one dream.
You can even try writing down your goal, and putting it someplace where you will see it everyday, like your bathroom mirror or next to your computer.
As you go through this article, keep your goal in mind, and let that determine what decisions you make: which languages to learn, even how you choose to learn.
With that said, let’s get started with the basics!
Part 1: The basics
This might seem obvious, but I’m going to say it anyway:
At its core, web development is all about building websites.
A website may be a simple one page site, or it could be an incredibly complex web application.
If you can view it on the web in a browser, it has to do with web development.
Here is a simple explanation of how websites on the internet work:
- Websites are basically a bunch of files stored on computers called servers.
- Servers are computers that are used to host websites, meaning that they store the website files. These servers are connected to the giant network called the World Wide Web (to use 90’s lingo), or the Internet.
- Browsers are programs that you run on your computer. They load the website files via your internet connection. Your computer is also known as the client, which connects to the server.
Further reading
- How does the Internet work? — Mozilla Developer Network
- What is the difference between webpage, website, web server, and search engine? — Mozilla Developer Network
The 3 components that make up every website
As mentioned above, websites are made up of files, mainly HTML, CSS, and JavaScript files.
Let’s take a closer look at each of them:
HTML or HyperText Markup Language
HTML is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website.
You can actually make a very very basic website just using HTML and no other types of files.
It won’t look very interesting, but that’s the minimum that you need for a website to be a website.
(If you’re interested in the basics of HTML, you can check out a video/blog tutorial I have about that.)
CSS or Cascading Style Sheets
Without CSS, a website will look as aesthetically pleasing as a Word document.
With CSS, you can add colors of all kinds, compelling fonts, and layout the website in pretty much any way you please.
You can even add animations and draw shapes using more advanced CSS.
JavaScript
JavaScript is a programming language that allows you to interact with elements on the website and to manipulate them.
While CSS adds style to HTML, JavaScript adds interactivity and makes a website more dynamic.
For example, you can use JavaScript to scroll to the top of the page when you click a button, or to build a slideshow with buttons to navigate through the images.
To work with HTML, CSS and JavaScript files, you’ll need to use a program on your computer called a code editor.
Which brings us to the next point:
Which code editor should you use?
This is a very common question, especially if you’re just starting out.
The best code editor for you will be highly dependent on what kind of code you’re writing.
If you’re doing mainly HTML, CSS, and JavaScript, you could code in Windows Notepad or TextEdit for Macs if you wanted to.
But what would the fun be in that?
Code editor programs like Sublime or VS Code come with a lot of features that just make coding easier.
They allow you to indent multiple lines of text right or left, and can highlight the text in different ways depending on what language the file is in.
For back-end languages (we’ll get into those in a later section) you’ll need a more powerful code editor called an IDE (Integrated Development Environment). IDEs have features that allow you to debug and compile (process) your code.
Here are some popular code editors:
VS Code: This lightweight version of Visual Studio, Microsoft’s main IDE, is only a few years old but it’s gotten incredibly popular, due to its speed, ease of use, and powerful features. VS Code is my personal editor of choice, so I may be rather biased 🙂
Atom: Created by GitHub and advertised as a “hackable text editor,” Atom is a well-loved editor. One of its main strengths is its customizability. You can install packages and themes that will add features to the program.
Sublime: A hugely popular program that has been around for a while. Like Atom, you can install packages and themes, and it also has quick performance. Unlike the other two editors, a Sublime license costs $70 (but it is free to try).
I’d recommend trying some or all of these editors out, for comparison’s sake. Then pick one and stick to it, learning its features and shortcut keys.
Version control
Now you have your code editor, and you’re starting to write code. However what happens if you make a mistake in your code, and you have to undo all your code changes to before that mistake?
And pressing Ctrl-Z to undo a million times isn’t working for you. What do you do?
The answer, is version control!
Version control is like having save points for your code files.
If you think you might be about to make some code changes that could break everything, you can create a new save point (called a commit).
Then if you do break your website, you can revert your code back to the state it was in before.
It can be a lifesaver if you ever make a mistake that you desperately need to undo.
Version control sounds great! How does it work?
Using a version control system (VCS) involves storing your code files and the entire history of changes in what’s called a repository.
Usually you will use one repository per website or project.
Then you store your repository online in what’s known as a central repository, and also keep a version on your computer in a local repository.
As you make changes on your computer, you can create commits and then push them up to the central repository.
This process allows you to have multiple people working on the same set of code, even changing the same files.
Git is the most popular VCS right now
The main version control system nowadays is Git. Its main competitor is Subversion (SVN), an older system.
But the vast majority of coding bootcamps and tutorials will use Git, so that’s what I’d recommend that you learn.
Further reading
- Quick tutorial on the very basics of using Git
- In-depth guide to using GitHub
Now, as we move into explaining the actual languages and frameworks that are used, we’ll be using terms that you’ve probably come across already: front end and back end.
The front end is all about how the website looks, visually.
Sarah Maes via GIPHY
The front end (or client-side) refers to what is loaded by the user’s browser, also called the client.
This would be the HTML and CSS that we started out talking about. JavaScript was originally just a front-end language, but nowadays you can use JavaScript as your server-side, or back-end, language also.
Front-end work deals heavily with making the website look good.
In addition, it also involves making the site behave in a way that makes sense to the user (also called UX or user experience).
If you enjoy tweaking your CSS to make sure the site is pixel perfect, and adding subtle JavaScript animations that help the user along, then you will likely enjoy front-end development.
The back end is all about functionality and making sure everything works.
While the front end is about the appearance and visual behavior of the website, the back end is about getting everything to work behind the scenes.
If you’re working in back-end development, you’ll be doing tasks like handling requests to the server and database.
Some examples of back-end work would be saving the data when someone fills out a form on the contact page, or retrieving data to display blog posts in a specific category that the user has requested.
Back-end work also may involve setting up the website on a server, handling deployment, and setting up SQL databases.
If the idea of setting up all the functional parts of a website sounds fun to you, you may enjoy back-end work!
Putting both sides together
The names front-end and back-end came about because the front-end is what you can see in your browser.
And the back-end is the part that you can’t see, but it handles a lot of the heavy lifting and functionality that helps the front-end.
You can think about the front-end as the storefront of a business, the only part that most customers will see. The back-end is like the manufacturing, distribution, and operation centers that help the store run.
Both serve separate functions that are are equally important.
Front end, back end, or full stack?
In web development, you can focus on just the front end, or just the back end. Or you can deal in both, which is called full stack development.
What you choose to focus on should mainly depend on two things:
- Your personal preference: Not everyone likes both front and back end.
- Job availability: Browse your local job listings and get involved with local coding meetups to get a feel for what types of jobs there are.
It’s worth mentioning that if you enjoy both front and back end, being a full stack developer will make you more marketable.
It makes sense– the more technologies you can work with, the more tasks you will be able to perform.
Stack Overflow reported in their 2017 survey of users that 63.7% identified as full-stack, 24.4% as back-end, and 11.9% as front-end developers:
However again, this will be heavily dependent on the company. Some companies may utilize full stack developers, where others split the back and front ends.
Some also have their front-end developers spill over into design, where the developers will design and build the front end of the application.
Part 2: Making your front-end skills shine
Once you’ve gotten the basics of HTML, CSS, and JavaScript down, you can start getting into more advanced skills in the front-end.
This section will go through practices and tools that will help you build more marketable skills as a web developer.
Responsive design is a must in this mobile-friendly world
When websites were first around, there was only one way to view them– on your computer.
Smartphones and mobile data didn’t really exist yet. When making a website you only had to worry about how it looked on your computer.
Now, according to Statcounter.com, more people are using their phones than their desktop computers to browse the internet.
So we need to make sure that all our websites work and look good on everything from the biggest monitor to the smallest phone.
This practice is what’s known as responsive design. It’s called that because the design can “respond” to any device that is viewing it.
You can test how responsive a website is by manually changing the width of your browser window and seeing how the design looks at large and small widths.
Building a truly responsive website involves a lot of planning in the design phase to consider how everything will look on all devices.
And in the web development stage, it involves using media queries to control which CSS properties are being used at specific widths.
Frameworks can help you build a responsive website quickly
As you might imagine, coding all the CSS of a responsive website takes a lot of work.
If you can’t spare a lot of extra time, you might try using a responsive framework like Bootstrap or Zurb Foundation.
The beauty of these frameworks is that they come pre-packaged with custom CSS and JavaScript. They’ve done a lot of work for you by pre-styling elements like headlines and buttons.
They also come with JavaScript components (essentially little plugins) like modal pop-up windows and navigation bars.
Since you’re using something that’s already been tested, it will make building your website a lot easier.
The only caveat is that you shouldn’t become too dependent on frameworks.
There’s no substitute for knowing how to build a responsive website from scratch.
Further reading
- Examples of responsive design from Designmodo.com
- Responsive Web Design Basics from Google
- Bootstrap 4 tutorial from W3Schools
- Zurb Foundation Tutorials
Sass will save you time and headaches when writing CSS
Once you’ve gotten the basics of CSS down, I would start to learn Sass, because it is simply awesome.
It’s even in the name! Sass stands for “Syntactically Awesome Style Sheets.”
And it’s described on its website as “an extension of CSS.”
It makes writing your CSS styles much easier, more intuitive, and faster.
Don’t get me wrong, CSS is great. But as you get into it, you’ll realize that regular vanilla CSS can get quite tedious.
And, if you aren’t super organized in how you write your styles, your CSS styles can quickly become frustratingly tangled.
What Sass does is give you more power and control.
Here are a couple examples of how Sass will make your life easier:
- Mixins: Instead of copying and pasting the CSS code for certain elements a million times, you can use mixins. They allow you to write a set of styles for an element just once, and reuse as many times as you want.
- Nesting: Instead of writing all the parent classes of a specific style, you can nest all the children inside the parent’s styles. This also cuts down on a lot of duplicate work.
Here’s an example of using nesting in Sass:
.post {
In short, using Sass will save you time and annoyance. Well worth the effort it takes to learn it!
Further reading
- Getting started with Sass
- Sass Basics
One note: since the browser can’t read Sass files itself, you have to compile your Sass files into CSS.
In order to do this, you’ll have to use something called a build tool and run it on your computer.
Which brings us to the next section….
What are all these build tools about, anyway?
You’ve probably heard one or several of the following terms: npm, Webpack, Grunt, Gulp, Bower, Yarn… the list gets pretty long!
These tools are often described as build tools, task runners, task managers, or “NOW what do I have to install?!”
Some tools do your grunt work (pun intended!) for you
Build tools like Grunt, Gulp, and Webpack are commonly used to do some of the following tasks:
- Processing Sass files into CSS
- Concatenating (combining) multiple CSS files or multiple JavaScript files into one big CSS or JavaScript file.
- Minifying (compressing) CSS, JavaScript, and even image files
- Automatically refreshing your browser with the updated CSS or JavaScript code
Sure, many of these tasks you could do yourself by hand.
But having to do it over and over again every time you make a small CSS or JavaScript change gets tiring.
Which build tool should you use?
At the moment, Webpack is taking over the field, but Grunt and Gulp are still in use.
I would definitely learn Webpack, but it couldn’t hurt to learn either Grunt or Gulp (Gulp is faster and seems a bit easier to get up and running).
Other tools install packages (plugins) for you
In addition, in order to accomplish all those tasks, you generally need to download and install plugins or packages.
This is where a tool like npm (Node Package Manager), Bower, or Yarn come in handy. These are tools that allow you to quickly install packages to your computer by typing commands into your computer’s command line.
They’re tools to get you more tools, basically!
As npm is the dominant package manager right now, you should definitely learn how to use it.
Bower was one of the first package manager tools, but it’s officially obsolete– the creators of Bower.io now recommend using Yarn.
Yarn is a very npm-like tool created by Google, Facebook, and others that promises to fix some of the issues that npm has.
While Yarn is in the minority, I’d still recommend checking it out, as it seems to be gaining in popularity.
Further reading
- How to setup Webpack +2.0 from scratch
- Javascript Tooling – The Evolution and Future of JS & Front-end Build Tools
- NPM vs Yarn Cheat Sheet
Everyone loves JavaScript frameworks
You’ve probably noticed a lot of JavaScript frameworks, libraries, toolkits, etc. being thrown around… you know, those names that all end in “.JS?”
Let’s first take a step back and define just what a JavaScript framework is.
Depending on who you talk to, the terms framework, library, and/or toolkit may or may not be interchangeable. (It’s still under debate.)
But they’re all essentially tools that, surprise surprise, do some of the work for you.
A framework is a pre-built structure that you build upon.
Generally speaking, a framework is a system of working parts created by someone else.
To use the framework, you install it to your own website files. Then you work off of that existing structure, adding onto it to accomplish what you want to do.
Using a framework is like buying a bare bones house that comes with all the structural components (foundation, frame, roof), but isn’t totally complete.
You still need to go in and attach the water and electricity, as well as install cabinets, paint the walls, and decorate.
Some examples of JavaScript front-end frameworks are React, Vue, and Angular.
A library is a set of pre-made tools that you add to your own structure.
In comparison, a library is a collection of individual components that you can take and plug in to your own system.
This is the main difference between frameworks and libraries:While frameworks are pre-made structures, libraries aren’t a structure in themselves. They provide additional functionality for existing systems.
To continue the home building analogy, you can think of libraries like appliances that you choose to add to your house.
Machines like ovens, showers, and air conditioners all perform a distinct function, but you have to install them into an existing home in order for them to be useful.
One example of a library, using the above categorization, is jQuery.
jQuery is a JavaScript library that doesn’t have any kind of structure in itself, but has over 300 different functions that you can use.
Again, these definitions are not agreed upon by everyone.
React and jQuery categorize themselves as libraries, and Angular and Vue call themselves frameworks.
However for my own personal understanding, it helps to separate the tools into these two general buckets of frameworks (systems) and libraries (tools).
Which brings us to our next point…
The big three in JavaScript frameworks: Angular, React, and Vue
In the early 2010’s there was an explosion of frameworks ending in “.js,” almost a new one every month.
However as we approach 2020, the field has cleared and we’re left with the three big winners: Angular, React, and Vue.
JavaScript frameworks may have started out as a trend, but they’re definitely here to stay.
Angular, React, and Vue are all growing, and JavaScript itself is extremely popular right now– it’s the most used technology for the fifth year running in Stack Overflow’s annual survey.
In addition, Stack Overflow publishes trends of technologies based on how many questions are asked per month.
You can see that Angular has the most volume, and both Angular and React have had pretty steep growth over the past year.
The State of JavaScript survey shows that React leads in the number of developers who have used it and loved it, while Angular doesn’t seem to be quite as interesting or hold as much desire for reuse.
Vue has a lower amount of actual usage, but is leading the pack in terms of being a technology that developers want to try in the future.
So it’s feasible that Vue could become a bigger player in the next couple of years.
However I think all three are sticking around, at least for the next several years.
TL,DR: Which framework should I learn right now?
It depends– if you’re seeking to land a full-time web developer job, I would browse your local job listings to see which framework seems to get mentioned the most.
If you’re just learning right now without that specific end in mind, Vue is a good place to start for beginners. It’s lightweight and documented quite well.
However, I personally wouldn’t only learn Vue. It would be a good idea to eventually add either React or Angular to your toolbelt, depending on your liking.
Further reading
- Best JavaScript Frameworks, Libraries and Tools to use in 2017
- The Noob’s Guide to Choosing a JavaScript Framework
Part 3: Let’s get into the back-end
Which language should you learn first?
There are a ton of back-end languages. Many of them have been around for quite a while, some even before the internet existed!
This can make it difficult to choose which language to start out with. To narrow down your choices, I’d recommend applying the following principles to your decision:
- Choose a language that is learnable: it has a reasonable learning curve, is well-documented, and/or has a good online support system.
- Choose a language that is relevant to your eventual career goals.
- Choose a language that is enjoyable. Learning web development is hard enough– there’s no point in forcing yourself to learn a language that you really don’t like.
One important thing to keep in mind is that you don’t have to learn every language.In fact, if you’re a beginner I would strongly recommend that you focus on one language first.
All programming languages share some common principles. For example, you can write a “for” loop in JavaScript, PHP, C# and Python.
Once you’ve picked up the fundamental principles of programming in your first language, it will be easier to transfer those concepts into other languages.
I hope this takes off a little pressure from choosing your first back-end language to learn 🙂
Let’s take a look at some of the most popular back-end languages.
Java
Java is a stable language that is very widely used and has been around a long time. It has held the top spot on the TIOBE index since 2001. (TIOBE is a ranking of programming languages by number of searches.)
In addition, Java ranked third in Stack Overflow’s rankings of the most commonly used languages and has the second-highest tagged questions on Stack Overflow.
Many big tech companies use Java in their websites: Google, YouTube, Facebook, Amazon, and Twitter, among others.
One reason for this is that Java is fast, and can scale up to handle large websites. It’s also a consistent language that allows for easier maintenance for long-term projects.
Twitter was originally built with Ruby on Rails. But in 2015 they needed to be able to support their huge growth, so they switched to Scala, a language that runs on the Java Virtual Machine.
C# (C Sharp)
C# was created by Microsoft to be a competitor to Java. You can see that C# peaked on Stack Overflow’s Trends in 2009 and has been on the decline ever since.
But I wouldn’t count C# out just yet.
It’s a powerful, object-oriented language that has the third highest number of Stack Overflow tags. It also came in third in Stackify’s research into the most in-demand languages in Indeed job listings in December of 2017.
C# is used in a wide variety of applications, such as Windows desktop apps and Android programming.
It’s also used a lot in game development, through the Unity game engine. So if you’re interested in Android or game development, C# would be a great option to learn.
Node.js
As mentioned earlier, JavaScript has been the most commonly used language reported by Stack Overflow users for the past five years.
A lot of this has to do with Node.js, which topped their list of frameworks and libraries used the most in 2017.
Node.js, self-described as a “JavaScript runtime,” is basically JavaScript that runs on the back end.
It was originally meant to serve as a more efficient alternative to the Apache HTTP server.
Since its release in 2009, Node.js has steadily increased in usage, due to its fast, lightweight nature.
Node developers often use the Express framework when building web apps. Express.js is a “minimalist web framework” for Node.js.
By using Node and Express on the back end, and Angular or React on the front end, this means that you can be a full stack JavaScript developer.
This stack, or combination of technologies, is very popular at the moment, especially with startups.
Python
Python first came onto the scene in 1991 and is a frequent “first language” for many programming students.
Due to its readability and use of English keywords, it’s generally considered an easy language to learn.
There are a couple of Python frameworks that you can use:
- Django (pre-built features, more bells and whistles), and
- Flask (more minimal and flexible).
Python’s popularity has soared in recent years. As of this writing, it is ranked #4 on the TIOBE index. And in 2017 it was ranked second in the number of pull requests on GitHub, according to their 2017 Year in Review report.
Stack Overflow reported last September that data science, machine learning and academic research are largely the reason for this fast growth.
Even if you’re not a data scientist, being able to work with and manipulate data is becoming a useful skill.
As Alexus Strong of Code Academy writes:
“Python is appealing to those of us in non-technical fields because it puts data analysis […] within arm’s reach.”
If you’re curious about data science or machine learning, Python may be a very good bet for you, as these fields will likely expand in the coming years.
Ruby
Ruby was first released in 1995. It started getting a lot of attention in the early 2000s when the startup Basecamp invented the framework Ruby on Rails.
Combined with Ruby’s beginner-friendly syntax and readability, Rails made building web apps very quick and easy.
Ruby on Rails grew in popularity and became the framework of choice for startups. (Codepen.io, GitHub, and Shopify all use Ruby on Rails.)
However, Ruby was never one of the heavy hitters. Last year it came in tenth place both in Stack Overflow’s most commonly used language rankings, and the TIOBE index.
In addition, Ruby doesn’t scale very well, leading to those startups eventually switching to other languages when they get really big (like Twitter switching to Java, as we mentioned above).
It may not be topping the rankings, but Ruby could still be a good choice for your first language to learn.
If you’re interested in the startup world or your geographic area has a lot of Ruby jobs, I would consider learning Ruby and Ruby on Rails.
PHP
PHP is a language that a lot of people love to hate.
However, despite the number of Quora questions asking if PHP is dead, the fact remains that PHP is the most widely used back-end language today.
Research done by W3Techs.com shows that 83% of all websites use PHP. (The next highest language , ASP.NET, comprises only 14%.)
Content management systems (CMSs) are a major reason for the large market share of PHP. The top three CMSs— WordPress, Joomla, and Drupal — are all built with PHP.
WordPress itself has the lion’s share of the CMS market, making up 29.5% of all websites.
If you like working with it, WordPress development may be a good area of focus for customizing websites and building plugins or themes.
In addition to content management systems, PHP has some frameworks that make development easier and quicker. Laravel, a framework that came out in 2011, is currently the most popular one.
Further reading on back-end development
- A Beginner’s Guide to Back-End Development (Upwork.com)
- Server-side web frameworks (Mozilla Developer Network)
- What is the Best Programming Language for Me?
Working with data and databases
Databases can seem intimidating if you’re not familiar with them.
However, if you think about it, you’ve probably worked with and used data in your own life at some point.
If you’ve ever used Excel to organize data, or created a chart to track your goals, then you’ve done a similar (albeit much simpler) function that databases do.
What do I need to learn to use databases?
Fortunately, you don’t need to learn a ton of different languages. The main database language is SQL(pronounced sequel).
SQL (Structured Query Language) was created in the 1970s by IBM, and is used in relational databases.
The relational model is a way of structuring data into rows and columns (think like an Excel spreadsheet).
Each column is designated for a certain kind of data, and it may require that the data is formatted correctly. And each row, or record, contains a unique ID or key in addition to the column, or field, values.
You can see this below:
The records are then stored in multiple collections called tables. And a collection of tables (among other things) makes up the entire database schema, or structure.
The main types of SQL database systems are:
- MySQL (used for PHP and open source applications)
- Microsoft SQL Server (generally used for .NET applications)
- PostgreSQL (open source)
NoSQL
Even though SQL is the dominant type of database, there is another type: NoSQL (i.e. non-SQL). As the name implies, NoSQL databases are in some ways opposite of traditional SQL ones.
NoSQL is not relational, and doesn’t enforce the same type of structure that SQL does. Instead, you can store any kind of data in a freer, more flexible type of system.
This creates much faster processes and is much better at scaling up for large, complex applications. The downside is that you sacrifice data consistency.
As Craig Buckler of Sitepoint writes:
NoSQL is more flexible and forgiving, but being able to store any data anywhere can lead to consistency issues.
NoSQL rose in popularity in the 2000s due to large tech companies like Facebook and Amazon needing a fast way to manipulate and store data.
MongoDB is the most commonly used NoSQL system. The other top types are Cassandra, Elasticsearch, and Couchbase, according to Hackernoon.
SQL vs NoSQL?
You may run across discussions on whether NoSQL is replacing SQL, or which one is better.
The truth is that both types of databases have their strengths and weaknesses.
Like anything else, the right choice will change depending on the project, and the job.
Personally, I would recommend learning the basics of both SQL and NoSQL.
Further reading
- History of SQL — TheBalance.com
- SQLCourse.com — free online tutorial about SQL
- SQL vs NoSQL Difference — XplentyBlog
- NoSQL Explained — MongoDB
Creating websites on servers
As we mentioned at the beginning, servers are simply computers that store website files and other resources like databases.
In order to have a website be accessible publicly on the internet, it needs to be installed on a server.
Here are some of the things that you’ll have to work with in order to create a live website:
Domain name and SSL certificate
Domain names are the address of the website, like Google.com, Wikipedia.org or Dartmouth.edu.
In order to get one, you’ll have to choose one that is available, then purchase it from a domain name registrar like Namecheap.com or Google Domains.
These companies register the domains with ICANN (Internet Corporation for Assigned Names and Numbers).
ICANN is a centralized organization that oversees and manages the DNS (domain name system) and IP (internet protocol) areas of the global internet.
In addition to the domain name, you should also get an SSL (Secure Sockets Layer) certificate for your domain. SSL will encrypt the traffic on your website, which will help protect it from cyber attacks.
Web host server space
Once you have your domain name to AwesomeStupendousAmazingWebsite.com, you’ll need to purchase server space.
There are a few different levels of web hosting plans:
- Shared servers: The cheapest option, can range from a few dollars to $12-20 per month. Like it sounds, you share your server space with other website “neighbors.” Upside is the affordability, and downside is slower speeds and possible downtime if you exceed your usage for the month. Popular hosts are SiteGround, Bluehost, and WP Engine.
- Cloud servers: Cloud hosting is a relatively new option. It consists of a system of a large number of physical servers whose resources are all shared. Each individual “tenant” is then given a virtual server that pulls resources from the collective pool. This setup allows for more flexibility for bandwidth and can scale up very quickly. One company, Digital Ocean, deals exclusively with cloud servers. Pricing depends on your server specs, and can range from a few dollars a month all the way up to almost $1000.
- VPS (Virtual Private Servers): VPSs are similar to cloud hosting in that each tenant has their own virtual server, and all tenants share one physical server. It’s better than shared hosting because you are allocated your own slice of the server resources. This option is a bit more expensive, between $20-60 per month (according to BlueHost).
- Dedicated servers: These servers give you one complete physical server all to yourself. As you might imagine, this option is the most powerful but also the most expensive. They often also are managed servers, meaning the company will run maintenance and do other tasks for you. Dedicated hosting will generally run you a couple to a few hundred dollars per month, according to SiteGround pricing.
Server setup and maintenance
Once you have your domain name and server space, you’ll have to set up your site on the server.
This involves directing your domain name to your server’s unique IP address, setting up your website files and database (if necessary), and other configurations.
How much work you have to do will depend on type of server plan you purchased from your web host. The simplest shared plans often come with one-click features that will automatically install WordPress, Drupal, or other site for you.
Other servers, like Digital Ocean, are very minimal and require you to set everything up manually.
Deploying files to your server
You might be wondering how you get files from your own computer up to your server. You can accomplish this by using a protocol, which is basically a method of transporting files or other data to and from a server.
HTTP, the way that your browser loads websites, is also a protocol– HTTP stands for Hypertext Transfer Protocol.
The most simple way is by using a protocol called FTP (File Transfer Protocol). However it’s not recommended to use FTP anymore, because it is not secure (encrypted).
Nowadays most people use more secure protocols FTPS (FTP over SSL) or SFTP (Secure SHell FTP).
To get FTP/SFTP working, you need to create an account on your server. You’ll then connect to the server using the IP address of the server, and a username and password login for authentication.
In order to transfer files over FTP/SFTP you can use programs like Filezilla or CyberDuck. These have a GUI (graphical user interface) that makes it relatively easy to upload and download files to and from your computer and your server.
Deployment tools
As you might image, having to manually upload files to your server every time you make one little code change can get tedious.
In addition, things can get confusing if multiple people are working on the same file and uploading simultaneously.
Fortunately, you can set up deployments that link into your Git repository.
The deployment tool stores your FTP/SFTP settings, and when you push a change in Git to your master branch, for example, the tool will transfer the files for you. That way you don’t need to remember which files you changed, reducing the number of mistakes you make.
For more complex websites that have a team with several people, there are more advanced deployment tools and systems that you can use to make your deployments more structured.
These systems are beyond the scope of this article, but they include practices such as continuous integration.
Further reading
- Domain Name Registration process — WHOIS
- 8 Popular Types of Web Hosting Services — TheBalance.com
- 6 Best FTP Clients — WP Beginner
- Continuous integration vs. continuous delivery vs. continuous deployment — Atlassian
Congrats!!
You’ve made it through.
Now before we continue– please note that the following section contains some affiliate links. This means I will receive a small commission from the company if you purchase through the link.
It’s an easy way that you can support this site, at no extra cost to yourself. (I’ve also included non-affiliate links as well, if you’d prefer to use that.)
Epilogue: Recommended learning resources
As I’m sure you know, there are a ton of resources that you can use to learn code.
I’ve included some of the most popular and recommended online tutorials, books, and other resources here.
Complete web development courses
There are a few online courses that cover all or very close to all of the areas of web development.
If you don’t want to jump around and just want to focus on one place to learn everything, I’d recommend one or more of the following:
freeCodeCamp is a non-profit that offers completely free education for aspiring web developers.
Their curriculum is a comprehensive set of courses ranging from front to back end (using Node and Express) and more!
Many people have landed full-time jobs after taking freeCodeCamp. You can also contribute to open source projects via GitHub.
One of the main perks of freeCodeCamp is that it’s very community-centered, with message boards and Facebook groups, so you’re able to get a lot of support as you learn.
You can read some reviews of freeCodeCamp on Quora and Reddit.
Colt Steele’s Web Developer Bootcamp
Colt is a former coding bootcamp instructor who wanted to offer a complete bootcamp for a fraction of the price.
He ended up creating one of the most popular and well-rated web developer courses on Udemy, and with good reason.
His course takes you from the basics through full-stack development (using Node and Express as the back-end), with a lot of content and is updated frequently.
You can read reviews of his course on the Udemy page, as well as on a freeCodeCamp forum post.
Udacity offers both free courses and paid programs called Nanodegrees.
The Nanodegrees build off of the free courses– they are intensive (12 hrs/week) programs where you build portfolio projects and have more community interaction and support.
They’re not cheap, currently $199/mth and it may take you between 6 to 10 hours to complete one.
If you’re interested, here are some reviews of Udacity’s Nanodegree programs on Quora and Hacker News, and Quora answers about the difference between Udacity’s free courses vs Nanodegree.
Other resources
Team Treehouse is a very popular website for learning coding. They don’t have free content, but they use a subscription model.
Treehouse offers tiered monthly plans ($25 or $55/mth currently) and you can take unlimited courses.
You can even pause your membership if you want to take a break for a few months, and resume it later when you’re ready.
Aside from individual courses, they also have structured tracks like Java Web Development or Front End Web Development which guide you through a series of selected courses.
Udemy
Udemy is one of the largest online learning platforms, and has courses not only in coding, but other professional and hobbyist areas.
You pay for each course individually, and they have frequent sales where course are anywhere from $10-20 each.
Of course, due to the large number of courses and instructors, they vary in quality, so you should do research before buying.
I’d recommend checking ratings and reviews both on the Udemy course page and elsewhere online.
Wes Bos
Wes Bos is a web development instructor who has created quite a few very popular courses.
One course I’d definitely check out is JavaScript30. This is his free 30-day vanilla (meaning no frameworks or libraries) JavaScript coding challenge.
He also has premium courses on React, Node, and more advanced JavaScript on his website.
If you’re curious, here are some reviews of his courses on Reddit and the freeCodeCamp forum.
Microsoft Virtual Academy
Microsoft Virtual Academy (MVA) has a collection of free online courses ranging from C# and Python to SQL Server and other areas like game development.
Some of their popular courses are Introduction to Programming with Python, C# Fundamentals and SQL Database Fundamentals courses.
Here are a couple reviews of MVA courses on Reddit and LinkedIn.
SoloLearn
SoloLearn has a unique approach to learning coding– you can learn not only from their website, but on their free mobile apps.
Some of their most popular courses are Python, C++, and Java.
They also have a StackOverflow type of message board that is quite active with questions and discussions.
If you’re curious, you can check out some reviews of SoloLearn on Reddit and Quora.
Books
If you enjoy learning from books, or want some on hand as references, here is a short list of books that I thought would be good for beginners.
Some of them are free and available online for you to read, others are traditional paper books.
HTML and CSS by Jon Duckett
JavaScript and JQuery by Jon Duckett
Jon Duckett’s books are quite possibly the most popular books for beginner web developers.
They aren’t just plain textbooks, but are beautifully-designed books that use photos and illustrations to teach coding concepts.
The Front-End Developer Handbook by Cody Lindley
The Front-End Developer Handbook is a free online book from Frontend Masters and written by Cody Lindley.
It’s updated yearly and you can think of it as a “state of front-end web development” guide with new information, resources, trends, and tools related to the field.
Eloquent JavaScript by Marijn Haverbeke
Eloquent JavaScript is a beginner’s book about programming that focuses on JavaScript.
You can read it for free online on the website, which has a console tool where you can write and test the code as you read.
If you want a physical copy, the book is also available on Amazon.
Closing thoughts
Is it possible to teach yourself web development with online resources? I believe the answer is yes.
However it will not be easy at all. Learning and mastering anything is difficult, and learning to code is no different.
With that in mind, if you do want to go down that path, here is some advice:
Stay focused.
When you’re learning on your own, it can be very tempting to jump around from one tutorial to another. Especially when you start hitting roadblocks.
But this can result in learning very superficially, when you actually need to develop a deeper knowledge of skills.
Try to stick with the course/book that you’re working on, unless you really don’t like it.
Fighting through the roadblocks and seemingly impossible problems will help you develop a fuller understanding.
Any course is simply the first step in your learning journey.
Just taking a tutorial or course doesn’t mean that you’ll be a master by the time you finish.
You’ll have to learn and practice many times before you really truly “get” it.
Try going through a tutorial a second time, or even learning the same material with a different course or book.
You’ll see how different people explain the same concept, and it may help the knowledge to stick in your brain better.
And, of course, there is no substitute for practical experience.
As you learn, try to practice the skills you’re learning about on your own.
Build random projects, make a website for free for a friend or a non-profit. The more times you solve a problem, the more you will understand it.
No comments