Intro to Web Development

What is Web Development?

● Web development is a type of software development that focuses on building

apps that people access in a web browser.

● Web apps usually have two parts:

1. Front end: Code that runs in the user’s browser (Chrome, Edge, Firefox,

etc)

2. Back end: Code that runs on a server (a special type of computer)

● This course focuses on front-end development.

● A later course will focus on back-end development

Front End vs. Back End Development

● Each type of code uses different concepts, languages, and tools

● Therefore, in real life web developers are divided front end developers and

back end developers

Front End vs. Back End Development

● Therefore, in real life web developers are divided front end developers and

back end developers

What is the difference?

● Front end and back end development solve different problems.

● Front end: Writing code that the user sees and interacts with

● Back end: Writing code that makes the app work “behind the scenes” (storing

data, implementing rules, decisions, and business logic)

Example: Blackboard Web App - Back End

● Back end code retrieves the specific courses the currently logged in student is taking:

○ Student 1 is taking Foundations of AI and Intro to Technical Writing

○ Student 2 is taking Data Structures, Design Patterns, and Web Programming

Example: Blackboard Web App - Front End

Front end code describes what the courses page looks like:

● Each course has an image

● Each course is displayed inside a square box

● Courses are shown in a row

● User can interact with webpage to change how they want their courses to

appear:

○ No images next to each course

○ Each course is enclosed in a rectangle with a unique color for the left border

○ Courses are shown in a column

Example: Blackboard Web App - Front End

Comparing Front End and Back End Task:

More examples of how the front end code differs from back end:

Example Web

Feature

What does front end do? What does back end do?

User login Displays username and password fields and a

Log In button

Checks whether the login information is correct

Online store Displays products and an Add to Cart button Stores product information, checks inventory, and creates

the order

Social media post Displays a text box and Post button Saves the post and makes it available to other users

Course portal Displays courses, assignments, and grades Stores student information and retrieves the correct

grades

Restaurant

reservation

Displays available dates and times Checks availability and saves the reservation

Search Displays a search field and search results Searches stored information and sends matching results

to the browser

● This course focuses on front-end development.

● A later course will focus on back-end development

This course versus other courses

Front End Development

Front End Development

● This course focuses on front end development

● Remember: front-end development focuses on:

○ WHAT the user sees in the browser

○ HOW they interact with the page

● Front end development is also called: writing client side code

What languages are used to create web apps?

● There are 3 core languages used to build the front end of a web app

1. HTML

2. CSS

3. Javascript

→ hypertext markup language

→ cascading style sheets

● HTML tells the browser what content exists.

● CSS tells the browser how that content should look and be arranged.

● Javascript tells the browser how the page should react to user actions or

changing information.

What languages are used to create web apps?

● A typical front-end web project will contain HTML, CSS, and Javascript files

You need to be familiar with all 3 languages!

What is HTML?

● HTML stands for HyperText Markup Language

● HTML is used to describe the content and structure of a webpage

● Content refers to things like:

○ Headings

○ Paragraphs

○ Images

○ Video

○ Links

○ Lists

○ Buttons

○ Forms

○ Tables

○ Navigation areas (menus, etc)

● Structure refers to how content is organized into sections and how those

sections relate to each other.

Example: Website Structure

A page may have a header at the top, a navigation menu, a main content section,

and a footer at the bottom.

├── Header

│ ├── Text containing the website name

│ └── Navigation menu

│

├── Main content

│ ├── Heading

│ ├── Paragraphs

│ └── Image

│

└── Footer

└── Copyright information

Example of HTML code

This is an example of what HTML code looks like:

<!

DOCTYPE

html>

<html

lang=

"en">

<head>

<meta

charset=

<meta

"utf-8">

name=

"viewport"

content=

"width=device-width, initial-scale=1.0">

<ti

tle>

Parcel Vanilla App

</

<link

rel=

title>

"stylesheet"

href=

"style.css">

</head>

<body>

<h1>

Parcel Vanilla App - Hello world

<p>

Click <a

href=

</h1>

"src/index.html">

src/index.html

</a>

to get started!

<img

src=

"photo.png"

/>

</body>

</html>

</p>

What is CSS?

● CSS stands for Cascading Style Sheets.

● CSS controls the appearance and layout of the page content.

● Appearance is the visual look and feel of the content:

○ Colors

○ Fonts

○ Spacing

○ Borders

● Layout is the position of the content on the page

○ Example: Where is the image on the page?

■ To the left of some text?

■ Underneath a video?

■ In a grid of other images?

■ In the bottom right corner of the page?

Example of CSS Code

Here is an example of what CSS looks like:

body {

background-color:

#f4f7fb;

color:

#1f2937;

font-family:

Arial,

font-size:

18px;

}

h1 {

color:

#2563eb;

font-size:

36px;

}

.card {

width:

320px;

padding:

24px;

border: 1

sans-serif;

px so

lid

#cbd5e1;

}

What is Javascript?

● Javascript is a general purpose programming language

○ Meaning: Javascript can be used to build many kinds of software, not just web

apps.

● In web applications, Javascript is make web pages interactive and dynamic.

● Here are typical things that you would implement using Javascript:

○ Detect when a user clicks on a button, and respond with some logic

○ Show or hide content

○ Validate form input

○ Update page content without a full refresh

○ Retrieve data from a server

○ Build interactive games, dashboards, maps, and user interfaces

Example of Javascript Code

● Here is an example of Javascript:

const greeting = "Welcome to our website!";

function showGreeting() {

alert(greeting)

}

const greetingButton = document.querySelector("#greeting-button")

greetingButton.addEventListener("click", showGreeting)

Running Web Code

What happens after you finish writing your code?

Server addresses

http://localhost:5173/

https://netflix-trending.vercel.app/

How code becomes a webpage

● After a developer finishes writing their code, they move the code files to a

computer called a server.

○ A server is a computer that is connected to the internet

○ Other computers can connect to the server and make requests to it

● When a user visits a website, their browser communicates with the server to

get the code.

Server addresses

● A domain name (url) is an address that you associate with a server computer

● URL can be private or public

1. Private address: only your computer can access it

Example:

http://localhost:5173/

2. Public address: any computer, anywhere, can access it

Example:

http://www.youtube.com

http://www.instagram.com

https://netflix-trending.vercel.app/

How code becomes a webpage

How code becomes a webpage

Specifically:

1. Every server computer is associated with a web address (URL)

Example: www.youtube.com

2. The user enters the URL into their browser.

3. The browser sends a request to the server associated with that URL

4. In the request, the browser asks the server for the website’s code.

5. The server receives request and sends back files containing the code

(HTML files, CSS files, Javascript files, image files, etc)

6. After the browser receives the files, the browser reads the code and renders

(outputs) the result on the screen

Visualizing the Code

1. Go to any website

2. Right click anywhere on the page

3. In the menu, select “Inspect”

Visualizing the Code

● A panel will appear

● This panel is called the browser’s Inspect tool (or Developer tools)

Visualizing the Code

The panel has different tools you can use to see the “technical details” of the

website.

Examples:

● View the browser requesting files from the server

● View the HTML, CSS or Javascript code for the app

● Debugging tools for Javascript code

● Evaluating the memory usage and performance of the website code

Visualizing the Code

If you cannot see all the tools, use the >> button

A list of other tools will appear:

The Elements tab - HTML

● The “Elements” tab shows the HTML code used to display the current

webpage

The Elements tab - HTML

● Click on a snippet of code (or an element on the page) to see the

corresponding code

Example websites

Try it out on these simple websites:

HTML only:

● https://info.cern.ch/hypertext/WWW/TheProject.html

HTML and images:

● https://www

.spacejam.com/1996/cmp/sitemap.html

HTML and CSS:

● https://news.ycombinator

.com/

The Network Tab - Web site files

● The “Network” tab shows the files the server sends to the browser

● These files contain the code and other assets needed to display the website