Introduction

to Web
Development
Absolute beginners guide to
getting started with Web Development
 Preface
“Most good programmers do programming not because they
expect to get paid or get adulation by the public, but because it
is fun to program.”

- Linus Torvalds
Creator of Linux Operating System
 Index
Section 1 - Introduction
Introduction to Software Development 3
What/Who is a Web Developer? 5
Why Web Development? 7

Section 2 - Front End Development

HTML- The Skeleton of a webpage 10
CSS- Beauty of a webpage 12
JAVASCRIPT- Behaviour of a webpage 13
User Interface Design/User Experience Design 14
Responsive Web Design 16

Section 3 - Back End Development

Programming Languages 18

Databases 20

Servers 21

API- Application Programming Interface 22

Section 4 - Essentials for every developer

Data Structures and Alogrithms 23
SEO 24
GIT 25

1
 Section- 1

Introduction
Introduction to Software Development
What/Who is a Web Developer?
Why Web Development?
Chapter 1
Introduction to Software Development

If you are a complete beginner, junior developer, or are curious about

this industry, this ebook is for you. If you are an established developer,
you may find some useful links in here as we list the best resources to
supercharge your skills.
Using online courses and mostlyhttps://hackr.io
free tutorials, you can gain a valuable
skill that will allow you to be employed in a great industry that is
rewarding and challenging.

Why coding?
Before we get into the steps you can take to become a developer, we
must first dive into why you would want to go down this path. Every
decision that will require significant time of your life should be justi-
fied. Time, after all, is the most important resource we have:

A. You want to be working in an industry where there is a high demand

for the skill and many possibilities to be in highly important roles at
the top of the food chain.
B. You love being location independent. You want a skill that allows
you to go anywhere in the world and still be able to find a job easily. If
you decide to move to Iceland tomorrow, you want to make sure that
you won’t have issues finding a job.
C. You’ve noticed the difference between 2003 and 2018 and how
much of a technological progress we have made in those short 15
years. You want to be at the forefront of an industry that is impacting
the world.

3
D. The biggest industry growth in the last couple of years has been in
the cryptocurrencyhttps://hackr.io/tutorials/learn-artificial-intelligence-ai
(Bitcoin), and artificial intelligence (Machine
Learning) space. We interact with technology on the daily basis, and
you want to not be left behind in the dust as these things take over
our future. You want to understand and be able to pick up these skills.
E. You think change is good, and learning should never stop. So why
not do something new?

"But I don’t have a computer science degree and I don’t

even know how the internet works!"

Don’t worry, we will use that to your advantage. Keep reading…

4
Chapter 2
What/Who is a Web Developer?

Here’s the simple answer to this question: “They build and maintain
websites.”
In other words, they literally create how you experience the web. And
for those websites who want users to enjoy their experience, they
need great web developers – and they’re usually willing to fork over
some serious cash to get these great web developers.

Responsibilities of a web developer:

Write web pages with a combination of markup languages.
Create quality mockups and prototypes.
Build a website from scratch.
Create quality mockups and prototypes.
Understand HTML and CMS/Databases, Severs, APIs etc
Understand UI and UX.
Develop functional and appealing websites and web-based
applications.
Provide website maintenance and enhancements.
These are the most common, but your responsibilities and tasks will
vary depending on the company you work for as well as your web de-
velopment specialty.

Speaking of web development specialties, there are 3 that you should

be aware of:
1- Frontend development: The “frontend” refers to “stuff” on a web-
site that you see and interact with, like menus, dropdowns, etc.

5
2- Backend development: The “backend” is like the portion of the
iceberg below the surface. Without it, the website can’t function.
The backend deals with things like servers, applications, and data-
bases.
3- Full-stack development: This is the combination of both backend
and frontend development.

6
Chapter 3
Why Web Development?

Web development is an industry that won’t die out anytime soon.

In fact, the US Bureau of Labor Statistics has predicted a 27% growth
https://www.bls.gov/ooh/computer-and-information-technolo-
in
gy/web-developers.htm
available web development jobs through 2024.
It was also rated as the #2 hottest job in 2016.
http://blog.udacity.com/2016/01/hottest-jobs-in-2016-2-web-developer.html

Put simply, if you can develop this skill, you won’t have a hard time
finding work for the foreseeable future.

Here are FIVE big advantages/benefits of being a web

developer:
You can work remotely. Ever wondered what it would be like to
work from anywhere in the world, on your own time? Well as a web
developer, you’ll have plenty of opportunities to work remotely.
Maybe you can finally fulfil that dream of travelling the world, all
while saving money at the same time.
You can use your skills to build your own websites and web applica-
tions. Want to build your own profitable website or application?
With this skill, you won’t have to pay a ton of money to get it built.
You can build it yourself for a fraction of the price.
You can work independently. You no longer have to work under
the umbrella of a boss if you don’t want to. You can freelance or
start your own business much easier when you know web develop-
ment.

Get into the profitable tech industry. Web development is basically

your ticket into the tech industry. Most tech startups have some
need for web developers, so this can be your way to get your foot
in the door.
7
 You can build awesome stuff! The fun part is that you can be as
creative as you want. Instead of looking at websites and thinking,
“Wow, that looks awesome. I wish I could create something like
that,” you will now be able to create your very own awesome-look-
ing website.

So, what do you think? Does all of this get you excited about the idea
of becoming a web developer? If so, you’re in the right place – be-
cause you’re about to learn the steps you need to take to become
one!

8
 Section- 2

FRONT END
DEVELOPMENT
HTML- The Skeleton of a webpage
CSS- Beauty of a webpage
JAVASCRIPT- Behaviour of a webpage
User Interface Design/User Experience Design
Responsive Web Design
Chapter 4
HTML- The Skeleton of a webpage

Learn the Basics of HTML, CSS, and Javascript

These are the nuts and bolts of all website development that you’ll
work with daily if you decide to build websites for a living.
HTML dictates the structure
CSS will make it look pretty
Javascript will make it function
Let’s discuss each one of these and how you can learn them.

HTML

HTML stands for Hypertext Markup Language. It’s one of the main
ingredients of any website and one of the so-called frontend
languages.

In short, it provides the basic skeleton of a website, and it does so

mainly through a series of tags.

<HTML>…</HTML> This tag shows up at the beginning and end

of an HTML document. It indicates that the document is written in
HTML5.

<title>…</title> The title tag is the title for the page. This is
useful both for search engines (when they scan and index pages) and
users (it shows up in a browser’s title bar) by explicitly stating the pri-
mary topic of each page.

10
 Sample HTML code with various html elements. 1. links 2. UI elements 3. list items 4. UI elements
Image source: https://www.wikitechy.com

<head>…</head> This contains information about the specific

page, including title tags, meta data, and links to scripts and style
sheets.

<body>…</body> This includes all content that will be shown to

users, including everything they’ll see and read.

Here are some resources for learning HTML:

https://hackr.io/tutorials/learn-html-5
Best HTML Tutorials
https://hackr.io/tutorial/html-beginner-tutorial
HTML Beginner’s Guide
https://hackr.io/tutorial/dive-into-html5-by-mark-pilgrim
Dive Into HTML5 by Mark Pilgrim

11
 Chapter 5
CSS- Beauty of a Webpage

CSS

CSS stands for Cascading Style Sheets.

It puts the style behind the HTML structure. Basically without CSS,
HTML would be boring and as a result the web page would be boring.

As you can see in the image above that with CSS you can change
font-size, background-color, padding, margin, height or width etc of
the webpage to make it look the way you want.

Here are some great resources for learning CSS

https://hackr.io/tutorial/learn-to-code-advanced-html-css-shay-howe
Learn to Code HTML & CSS - Shay Howe
https://hackr.io/tutorial/getting-started-with-css-mozilla-developer-network
Getting started with CSS- MDN
https://hackr.io/tutorial/visual-guide-to-the-most-popular-css-properties
Visual guide to the most popular CSS properties

12
 Chapter 6
JAVASCRIPT- Behaviour of a Webpage

Javascript

Javascript is a programming language that allows you to interact with

web pages. It allows you to add interactivity to your web pages by
implementing click events, hover events or events like drag and drop.
Any action you take on a web page has most probably some Javascript
functionality written behind it.

Javascript really is everywhere today be it on the front end or the

server. Anything you can imagine can be made with javascript today.
https://hackr.io/tutorials/learn-angular
There are awesome front end and backhttps://hackr.io/tutorials/learn-node-js
end javascript frameworks
today that can help you build any digital product you can think of.

Here are some great Javascript tutorials for you to with:

https://hackr.io/tutorial/eloquent-javascript
Eloquent JavaScript
https://hackr.io/tutorial/mozilla-developer-network-javascript-guide
Mozilla Developer Network Javascript Guide
https://hackr.io/tutorial/build-30-things-in-30-days-with-30-tutorials
Build 30 things in 30 days with 30 tutorials

13
Chapter 7
User Interface Design/User Experience
Design

UI (User Interface) and UX (User Experience) are the basics of user

experience design.
Most developers aren’t design experts – these are two different
realms. So, you don’t need to be a design rockstar.
However, by learning the fundamentals of user experience design, you
can better understand how a website is supposed to work in order to
keep more users on the site, help them find what they’re looking for,
and ultimately spend more money on that site.

Image Source : https://dribbble.com/shots/2850451-CRM-Dashboard

14
To learn the building blocks of design skills, I recommend learning the
Adobe Creative Suite. Photoshop should be the first thing you dive
into, as it’s the go-to for most serious designers. If you don’t like
Adobe, you can also dive into Sketch, which is a rising star among
designers.
Here are some resources for understanding and learning UI and UX:
The Difference Between UX and UI Design-A Layman’s Guide
https://www.careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

Learn UI Design
http://design.instructy.io/tutorial/learn-ui-design
Fundamentals of UI Design- Invision
http://design.instructy.io/tutorial/fundamentals-of-ui-design

15
 Chapter 8
Make Sure Your Site is Responsive

When you’re creating your own website (which will be a good idea if
you want to get more clients) – you should make sure your site is
responsive.

Responsive means that the elements of the website adjust according

to the screen size. So, your website will look good whether the visitor
is on a laptop or mobile device.
Today responsive design is very crucial. All of your clients/employers
will expect it– So lead by example and make sure that your website is
responsive.

Here are some resources for understanding and learning Responsive

design:

Responsive Web Design W3Schools

https://www.w3schools.com/html/html_responsive.asp

Responsive Web Design - Introduction

https://www.w3schools.com/css/css_rwd_intro.asp
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Responsive Web Design – What It Is And How To Use It

16
 Section 3

BACK END
DEVELOPMENT
Programming Languages
Databases
Servers
API- Application Programming Interface
 Introduction
To understand the back end, or the “server side,” you have to know
the front end very well and how the two interact. The front end, also
called “client-side” programming, is what happens in the browser—ev-
erything the end users see and interact with. The back end, on the
other hand, happens on the server (on site, or in the cloud) and data-
bases. It’s the machinery that works behind the scenes—everything
the end user doesn’t see or directly interact with, but that powers
what’s happening.

The “traditional” back end is a mix of the server, databases, APIs, and
operating systems that power an app’s front end.

Here’s some more information about each of these components of

the backend.

Image source: https://www.cleveroad.com

17
Chapter 9
Programming Languages & Frameworks:
The Nuts & Bolts
Back-end developers can choose from a variety of languages and
frameworks depending on the type of application they’re building, its
specific processing requirements, and what other components already
exist on the back end.
Languages will differ in file size, performance, compatibility, how
many lines of code required, and the style of programming. Some
back-end scripting languages are object-oriented programming lan-
guages, a style of programming that bundles attributes and functions
within objects. Other languages may be compiled rather than inter-
preted, something that affects load time, readability, and processing
power required to run the application.

Image Source: http://www.cuelogic.com

A majority of sites are built on PHP, making it one of the most popular
back-end scripting languages. But there are plenty of others to
choose from. For instance, you may want to use the processing power
of Python for a data-driven site, or leverage the speed of lightweight
languages like Ruby for faster prototyping. It’s up to you and your
developers, and every language has its pros and ideal applications.
18
Take a look at a few of the other big hitters in back-end programming,
like:
https://hackr.io/tutorials/learn-java
Java
https://hackr.io/tutorials/learn-c-sharp
C# and C++
https://hackr.io/tutorials/learn-asp-net
.NET
https://hackr.io/tutorials/learn-perl
Perl
https://hackr.io/tutorials/learn-scala
Scala
https://hackr.io/tutorials/learn-node-js
Node.js (and JavaScript)

https://hackr.io/tutorials/learn-django
Django (for Python)
https://hackr.io/tutorials/learn-java-spring-framework
Spring framework (for Java)
Node.js Frameworks like MeteorJS and ExpressJS
https://hackr.io/tutorials/learn-node-js
https://hackr.io/tutorials/learn-ruby-on-rails
Ruby on Rails
https://hackr.io/tutorials/learn-symfony
Symfony (for PHP)
JSF (Java Server Faces)
https://hackr.io/tutorials/learn-java
That covers the most basic concepts and tools of back-end develop-
ment, but there’s still more to learn.

19
Chapter 10
Servers: The Machinery

Of your back-end stack’s four components, whether it’s on-site or in

the cloud, the server acts as the lifeblood of the network. These
high-powered computers provide shared resources that networks
need to run, including file storage, security and encryption, databases,
email, and web services. Learn all about types of servers, what they
do, and how they play into the back-end stack with our Guide to
Server Technology.
Once you’ve gotten the basics down about on-site servers, expand
your knowledge with a look at virtualization, how servers get provi-
sioned to house multiple apps, and containerization, another way serv-
ers provision their operating systems out to house compartmentalized
applications.

Here are some resources for you to read more about servers:
Windows Server Administration Fundamentals
https://hackr.io/tutorial/windows-server-administration-fundamentals
Ubuntu Server Fundamentals
https://tutorials.ubuntu.com/tutorial/tutorial-install-ubuntu-server#0

20
Chapter 11
Databases: The Storage

Databases, in the context of a website, are the brains that make web-
sites dynamic. Any time you request something from a web-
site—whether you’re searching for a product in on online store or
searching for hotel locations within a specific state—the database is
responsible for accepting that query, fetching the data, and returning
it to the website. Databases can also accept new and edited data
when users of a website or application interact with them. The client
can change information in a database from the browser, whether a
user is posting articles to a CMS, uploading photos to a social media
profile, or updating their customer information.

Here are some resources for you to read more about databases:
Try SQL
https://hackr.io/tutorial/try-sql

SQL basics by Khan Academy

https://hackr.io/tutorial/sql-basics-by-khan-academy
SQL Tutorial by Tutorials Point
https://hackr.io/tutorial/sql-tutorial-by-tutorials-point

21
 Chapter 12
APIs: A Crucial tech in Back End
Programming

You can’t talk about the back-end portion of an application these days
without touching on APIs (application programming interfaces) and
how they connect software, applications, databases, and services
together seamlessly. APIs play an integral role in how most server-side
software architectures are built, oftentimes replacing more compli-
cated programming to allow software to communicate and data to be
transferred.

Here are some resources for you to read more about API’s:
https://www.upwork.com/hiring/development/intro-to-apis-what-is-an-api/
What is an API?
Public APIs vs. Private APIs: What’s the Difference?
https://www.upwork.com/hiring/development/public-apis-vs-private-apis-whats-the-difference/
SOAP vs. REST: Comparing Two API Architectures
https://www.upwork.com/hiring/development/soap-vs-rest-comparing-two-apis/

22
 Section 4

DEVELOPER
ESSENTIALS
Data Structures and Alogrithms
GIT
SEO
Chapter 13
Data Structures and Algorithms

Data Structures are the programmatic way of storing data so that

data can be used efficiently. Almost every enterprise application uses
various types of data structures in one or the other way.
Having a solid understanding of data structures will help you crack
complex logics behind problems as well as it will increase your prob-
lem solving capabilities. Below is a sample flow diagram of an algo-
rithm:

Sample Algorithm design

Here are some resources for you to read more about Data Structures
and algorithms:

https://hackr.io/tutorial/geeks-for-geeks
Fundamentals of Algorithms
Data Structures - Geeks for Geeks
https://hackr.io/tutorial/data-structures-geeks-for-geeks
Introduction to Algorithms - MIT OpenCourseWare
https://hackr.io/tutorial/introduction-to-algorithms

23
Chapter 14
GIT: Version Control

Well, in a nutshell, it’s an open source version control system that was
created to help people collaborate with code. Of course it’s more
complicated than that, but that describes the basics.

What is version control?

It’s a convenient and powerful way to safely make changes to some-
thing (with Git, this something is most commonly code of some kind)
without worrying that you, or someone else working with you, might
break something.
For example, let’s say you’re editing a bunch of documents with
others. Version control allows you to do that safely, without fear of
your changes overwriting someone else’s. In addition, it offers you a
history (and backups) of those changes, just in case you need to
restore back to an earlier state.

How can you collaborate with Git?

Git can be used as a simple single-player version control system, but
it’s most powerful when used with others. Through concepts like
“forking” and “branching” you, and your collaborators, will be able to
work on the same project, even in the same file, without any fear of
writing over each other’s work.

Here are some resources for you to read more about GIT:
Pro Git Book by Scott Chacon and Ben Straub
https://hackr.io/tutorial/pro-git-book-by-scott-chacon-and-ben-straub

Git Guru Guide by Atlassian

https://hackr.io/tutorial/git-guru-guide-by-atlassian
Git Immersion
https://hackr.io/tutorial/git-immersion

24
Chapter 15
SEO: Search Engine Optimization

SEO stands for Search Engine Optimisation. This refers to the process
of improving a website’s rankings within a search engine like Google.
It’s one of the most important skills in online business.
But you may be thinking, “If I’m a developer, why do I need to worry
about how well a site ranks in the search engines? Isn’t that the job of
the bloggers and content creators?”
Well yes, a large part of a website’s SEO has to do with the content.
But the actual structure and code of the website plays a role as well.
For example, heading tags (HTML) are extremely important for SEO.
They tell search engines what’s really important on a website.
Now, do you need to be an SEO expert? Absolutely not. But you
should definitely learn the basics of SEO, and keep SEO in mind while
you’re creating each website. In doing so, you’ll give the website a
much greater chance of success, and make your web development
client that much happier.
Here are some resources for learning the basics of SEO:
The Beginner’s Guide to SEO
https://hackr.io/tutorial/the-beginners-guide-to-seo

The
https://hackr.io/tutorial/the-web-developers-seo-cheat-sheet-20
Web Developer's SEO Cheat Sheet 2.0
https://hackr.io/tutorial/link-building-the-definitive-guide
Link Building: The Definitive Guide

25
 It’s not over yet!

Here we have provided you with an overview of the most essential

technologies and requirements of the development cycle. There is
still a lot left to learn that goes on in software development, but the
information given here will set some strong foundations for you to
build upon.

We hope this ebook helped you understand Web Development Better.

If you have any queries, questions of you just want to talk to us, Please
drop us an email at: saurabh@hackr.io

This ebook is brought to you by hackr.io. Hackr.io is a platform to

find and share best online tutorials of any programming language or
technologies.
Visit us at: https://hackr.io

26
 Acknowledgements

Some of the resources that helped us whle creating this ebook.

Front End and Programming Intro: Medium

[Learn to code in 2018, get hired, and have fun along the way](https://hacker-

noon.com/learn-to-code-in-2018-get-hired-and-have-fun-along-the-way-b338247eed6a)

Back End Intro: Upwork

[A Beginner’s Guide to Back-end Development](https://www.upwork.com/hiring/development/a-be-

ginners-guide-to-back-end-development/)

Back End Explanation: thinkapps.com

[Back-End Development: A Guide to the Basics](http://thinkapps.com/blog/development/ba-

sics-back-end-development/)

Git basics-1

[Learn to love Git. Part one: The basics. – Designing Atlassian – Medium](https://medium.com/designing-atlas-

sian/learn-to-love-git-part-one-the-basics-90429f456ace

HTTP:

[An overview of HTTP - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

SSH:

https://semaphoreci.com/community/tutorials/getting-started-with-ssh

SEO

[SEO Made Simple: A Step-by-Step Guide](https://neilpatel.com/what-is-seo/)