Web development is a rising field, with thousands of new developers finding their start each year. However, with all the learning content out there, it can be hard to know where to start.
Today, we will take you through a complete guide to your web development journey.
The Basics of Web Development🥱
Learn the basics of how websites work, front-end vs back-end, and using a code editor
Learn tools: package managers, build tools, version control
Learn back-end basics: servers and databases, programming languages
What skills do you need as a web developer?👀
Anyone can become a web developer. You don’t need a fancy degree in computer science to master the skills, but before you can start looking for jobs in the field, there are a few things you will need to learn.
The basics of how the Internet and websites work
Libraries and frameworks, like jQuery, React.js, tailwindCss and Bootstrap
Other programming languages, like Python and Ruby (for back-end web devs only)
Git and GitHub
Don’t let this overwhelm you. All of these skills naturally build off of each other, so it’s important to learn slowly and take it step-by-step as you develop a solid foundation.
Alright, now you know what’s ahead of you. Let’s start learning!
The Internet is comprised of three, interacting features.
Websites: a collection of files and information that we access through a computer and a server
Servers: the computers that store all the data of websites in a massive network
Browsers: the programs that load and display content on your computer
Every website is comprised of the frontend (client side) and the backend (server side). The frontend includes everything that the user will directly see and experience when they visit a website. The backend is behind the behind-the-scenes where information is stored, sent, and received.
These are the most foundational tools that you need as a web developer. They are the languages you use to create your web pages.
So, let’s learn what they do!
What is HTML?🤷♂️
HTML (HyperText Markup Language) is the basic programming language for web development. It provides the basic structure of a site such as words, titles, and paragraphs.
HTML consists of a bunch of established tags, which represent different functions that then “translate” into readable information on the screen. These tags are written between angle brackets.
For example, the text surrounded by the
</b>will be bold. The tag
</h6>will make your text the smallest header size.
What is CSS?
CSS (Cascading Style Sheets) is a style sheet that essentially describes how HTML elements will appear on a webpage. You use CSS to control the presentation, style, and formatting of your site, like RGB values, border colors, background images, and more.
CSS files declare a set of rules, that define a set of properties and their values.
<h4 style="color:Tomato;">Tomato Red</h4>
determines that the text “Tomato Red” should look like this:
For example, this chunk of code dictates that when the button “Click here” is pressed, the word “Bigger Font” changes to size 35px.
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click here</button>
So, what are frameworks and libraries, and why do we need them? While you can technically make a webpage without these tools, you won’t make it very far as a web developer without them.
What are frameworks?🤔
Say you wanted to build a car. Instead of starting entirely from scratch, you can buy a vehicle frame to save time and guarantee you’ll build something that will drive. A framework in web development is similar. It offers built-in programs, plug-ins, and tools that you install into your website files. Frameworks speed up your development process, and they are made by other developers, so you know the code is pre-tested and effective.
There are backend and frontend frameworks that use different programming languages. Let’s look at a few notable ones to get you started.
Angular: good for Single-Page applications; not SEO friendly; based in TypeScript
Express JS: used by IBM and Uber; minimalist design; harder for beginners
Django: used by Google, Instagram; tons of built-in features; based on Python
Spring Boot: easy to use; good for large scale cloud projects; based on Java
Ruby on Rails: used by SoundCloud; good for small projects; based on Ruby
Flask: used by Lyft; easy to set up; based on Python
What are libraries?🤔
A library is a collection of specific tools and features that you can add to your website for functionality. Unlike a framework, a library does not offer any structure but rather implements different behaviors and actions on your webpage.
Let’s return to our car analogy. If the framework is the frame of the car, the libraries are the features and parts you add to the car to tailor it to your needs, like the tires, air conditioner, or steering wheel.
There are tons of different libraries that each have diverse purposes.
Let’s take a look at a few to get a sense of what they can do.
jQuery: for manipulating HTML, DOM, and CSS
React.js: for creating interactive UIs
Wow.js: for showing animations as you scroll
Scrolline.js: for showing how far you’ve scrolled on a page
jQuery and React.js are the most important libraries for you to learn at this time. They are very popular and have hundreds of unique features to make some really cool stuff.
What is Node.js?🤔
Node.js is a popular open-source, server-side tool for full-stack and back-end developers.
Node.js is becoming more standardized even at enterprise-level organizations, so it’s a valuable tool to master.
What other tools do I need to become a web developer?
This is where you will test your code. A good web developer should be comfortable using many different kinds of browsers, but as you’re getting started, it’s fine to stick with one until you feel more comfortable.
The most common browsers used by web developers are outlined below.
This list is not exhaustive, so you will see several others as you research and learn
This is where you will write your code. There are many different options for text editors. Your computer likely comes with a built-in one, but we recommend a more robust option.
The most commonly used text editors by web developers are:
\>* Atom: open-source, cross-platform, created by GitHub, known for its speed (free) >* Sublime Text: cross-platform, known for its plugins and shortcuts ($70) >* VS Code: open-source, created by Microsoft, interactive debugger (free) >* Brackets: open-source, made by Adobe, live preview feature (free)
Unlike browsers, most web developers stick with the same text editor. Explore your different options to see which one is most comfortable for you. The more you use it, the more muscle memory you will build.
Content Management System (CMS)😧
A Content Management System is software used to facilitate editing, creating, and publishing your work.
A CMS gives you control over your content by integrating all of the features of your site into an accessible platform. Many of these help with content management, marketing, and content delivery.
A CMS typically uses a database (such as MySQL and MariaDB), which stores a collection of programs and tools in a particular programming language. That way, you can edit and manage your website without needing to return to the minute details of your code.
Choosing a CMS depends on a lot of different factors, like your users, the size of your team, and the ease of the interface. A good CMS for beginners is WordPress.
It’s a free, open-source hosting service for building and publishing websites. It’s very popular for bloggers and has a low entry barrier for beginners. With a huge community of support, you’re likely to find answers to your questions as they come up.
Some other notable CMS software are Drupal, Typo3, and Joomla!
Where can I learn more about web dev?
Starting your web dev career is scary but exciting. Luckily, there are tons of resources available to you where you can keep learning and seek advice.
mdn: Mozilla official website where you can learn basic concepts of web development from 'beginner' to 'intermediate' level.
GeeksforGeeks: Here you will find a detailed roadmap and articles for web development each article is covered with examples and it is for both the 'beginner' and 'intermediate' levels.
freecodecamp: This beginner's roadmap lays out all the basics for web development. We're going to go through each step–from figuring out what code editor.
Where you can find me for more? 👇👇
🍺 Support free education...
I just started Blogging and I'm also in the learning phase in Writing blogs/articles but I'll post daily blogs/articles related to learning new concepts in Development, Programming and in any tech stack that help in your learning journey. so do support me😁😁.