Web development is the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).
- Wikipedia
Web development has evolved over time. The tools are constantly evolving. Fortunately, the core technology has been consistent.
It is recommended to use a text editor like :
for the purpose of this session. Such text editors provide an easy workflow and hence are the industry standard tools.
You can find the source code of the website at each stage here.
- Ever since the commercialization of the internet, web development has been a growing industry with newer technologies always on the rise.
- This ever-growing set of tools and technologies have helped developers build more dynamic and interactive websites.
- Web developers now help to deliver applications as web services which were traditionally only available as applications on a desk-based computer.
- This has allowed for many opportunities to decentralize information and media distribution.
A website is just a special set of documents that is hosted on a server whose address is specified as a URL.
A host is just a server; a computer.
A website comprises of web pages
A web page is document present on the server, which can be displayed in a desired format by a browser
A web page is rendered by a browser based on 3 main components:
-
HTML
HyperText Markup Language defines the content of the page.
-
CSS
Cascading Style Sheets affect the styles of the content in the page.
-
JS
JavaScript allows for dynamic behaviors of a web page
All websites can be broken down into these 3 key components.
Create a new directory for the project
mkdir my-first-website && cd my-first-website
The Python standard library has a module that can host a web server. Run the following command to set it up.
python3 -m http.server
This starts a local web server on 0.0.0.0:8000
.
As mentioned previously, a web site contains web pages.
Whenever a browser requests for a website by its URL, the server sends a page by default. This page is the index
page.
Create index.html
and fill in the following content.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
</head>
<body>
Hello, World!
</body>
</html>
Navigate to the address of your local web server. You should see the web page rendered by your browser.
HTML has many tags that have different behavior.
html
is the root taghead
definesmetadata
andreferences
to other documentstitle
specifies the title of the pagebody
defines the content of the page
Within the body
tag, input the following content. You can edit the information inside the tags.
<h1 id="name">Your Name</h1>
<p>A short description about yourself. </p>
<ul>
<li>How old are you?</li>
<li>Where are you studying?</li>
<li>What do you like to do? </li>
</ul>
<p><img id="profile" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="Image of yourself" /></p>
The
h1
,h2
,h3
,h4
,h5
andh6
tags are meant for headings.
Try setting the contents of the h1
tag to your name. You can also try changing the tag from h1
to some other header tag.
<h1 id="name">Your Name</h1>
The
p
tag is used for paragraphs.
The
ul
andol
tags represent unordered and ordered lists. They can containli
tags, which are list items
The
img
tag represents videos. Thesrc
attribute holds the URL of the image to be rendered
If you want to put an image of your choice that is on your local system:
- Create a directory
assets/img
- Copy the image into the
assets/img
directory - Change the
src
attribute to the relative path of the image. If your image isimage.jpg
, changesrc
toassets/img/image.jpg
Let us create another page, contact.html
. Fill it with the following content.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contact</title>
</head>
<body>
<h1 id="contact">Contact</h1>
<ul>
<li>Phone : +971 52 123 4567</li>
<li>BITS Pilani, Dubai Campus, DIAC, Dubai, UAE</li>
</ul>
<h1 id="socials">Socials</h1>
<ul>
<li><a href="">Mail</a></li>
<li><a href="">Instagram</a></li>
<li><a href="">GitHub</a></li>
</ul>
</body>
</html>
You can view this page through the browser by navigating to 0.0.0.0:8000/contact.html
The
a
or anchor tag renders hyper text links. Thehref
attribute holds the URL of the resource to be linked. This could be anything. A file. A webpage. Anything.
You can list your contact information here.
Creating HTML pages from scratch can be very time consuming. These static-site generators create these pages from a template.
Try them out. If you plan on building static sites, choose one that uses a language you are familiar with.
Right now the site looks very bad. Let us add some styles.
To style the content of a web page, the browser uses CSS. There are a lot of frameworks that have CSS templates available. We will be using Bootstrap to style our content.
Add the following tag to the head
tags in all your files.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Lets put all the content in the body
tag into a div
.
To customize these styles:
-
Create a directory
assets/css
-
Create a file
style.css
with the following content:body { background: rgb(241, 248, 255); color: #333333; margin-top: 5rem; } h1, h2, h3, h4, h5, h6 { color: #333333; } p, li { color: #4C5454; } ul { margin: 0; } .bg-steel { background-color: #005796; } .site-header .navbar-nav .nav-link { color:rgb(241, 248, 255); } .site-header .navbar-nav .nav-link:hover { color:rgb(241, 248, 255); } .site-header .navbar-nav .nav-link.active { font-weight: 500; }
-
Add the following tag to the
head
tags in all HTML files.<link rel="stylesheet" type="text/css" href="assets/css/style.css">
To navigate between webpages, most websites have a navbar
. Bootstrap has some templates that we can try.
Add the following to the body
tags of all the HTML files
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Home</a>
<div class="navbar-nav">
<a class="nav-item nav-link" href="/contact.html">Contact</a>
</div>
</div>
</nav>
</header>
You can mess around with the styles till you are satisfied with your layout.
Now, your web pages should look similar to these:
-
index.html
:<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Kelvin DeCosta's Site</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> </head> <body> <header class="site-header"> <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top"> <div class="container"> <a class="navbar-brand mr-4" href="/">Home</a> <div class="navbar-nav"> <a class="nav-item nav-link" href="/contact.html">Contact</a> </div> </div> </nav> </header> <div class="container"> <h1 id="name">Kelvin DeCosta</h1> <p>Hello! I am who I am.</p> <ul> <li>I am 21 years old</li> <li>I am studying Computer Science at BITS Pilani, Dubai</li> <li>I like to help others code!</li> </ul> <p><img id="profile" class="img-fluid" src="https://avatars1.githubusercontent.com/u/38982451?s=460&v=4" alt="Image of yourself" /></p> </div> </body> </html>
-
contact.html
:<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Contact</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> </head> <body> <header class="site-header"> <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top"> <div class="container"> <a class="navbar-brand mr-4" href="/">Home</a> <div class="navbar-nav"> <a class="nav-item nav-link" href="/contact.html">Contact</a> </div> </div> </nav> </header> <div class="container"> <h1 id="contact">Contact</h1> <ul> <li>Phone : +971 52 123 4567</li> <li>BITS Pilani, Dubai Campus, DIAC, Dubai, UAE</li> </ul> <h1 id="socials">Socials</h1> <ul> <li><a href="mailto:[email protected]">Mail</a></li> <li><a href="https://instagram.com/kelvin_decosta">Instagram</a></li> <li><a href="https://github.com/kelvindecosta">GitHub</a></li> </ul> </div> </body> </html>
Sass is a derivative of CSS that has additional features.
We can make our static pages dynamic with some JavaScript.
Let us add some functionality that changes the image on click.
-
Create a directory
assets/js
-
Create a file
script.js
with the following content:var main = "https://avatars1.githubusercontent.com/u/38982451?s=460&v=4"; var other = "https://66.media.tumblr.com/35d3a02f4691f8c2c75fbc4ef3365988/tumblr_p1ja1iqXyS1wkxnj3o9_1280.png"; function changeImage() { if (document.getElementById("profile").src == other) { document.getElementById("profile").src = main; } else { document.getElementById("profile").src = other; } }
-
Link the script by adding the following to the
index.html
head
tag:<script type="text/javascript" src="assets/js/script.js" ></script>
-
Add a
onclick
attribute to the#profile
img
and set it tochangeImage()
Test it out.
Host your website on GitHub. It is free. It is easy.
-
Create a git repo.
git init
Commit everything on the working directory.
git add . git commit -m "Initial Commit"
-
Navigate to GitHub and create a new repository. Make sure to uncheck "Add a README". Copy the URL of this GitHub repo, so that we can link it with our local repo.
-
Link the GitHub repo with our local repo
git remote add origin https://github.com/username/githubrepo.git
Push everything to the GitHub repo
git push origin master
-
Navigate to the
Settings
tab on the GitHub repo.Under the
GitHub Pages
section, set theSource
tomaster branch
Wait for a few seconds.
Your site will be published on
https://username.github.io/githubrepo/
-
You can make changes to your local repository, commit them, push them to the GitHub repo and those changes will be reflected on this URL.
This session was meant to introduce you to the basic technologies behind websites. In practice, these solutions are very naive.
There are a lot of different frameworks that can build powerful and scalable websites. Although, these frameworks are out of the scope of this bootcamp, they provide better workflows once you get the hang of them.
Here are a few popular frameworks.
For a step by step guide on becoming a web developer, check out this video by Brad Traversy in which he showcases advance technologies that are the current industry standards.
We covered: