1 of 42

Intro to Web development

SJU ACM STUDENT CHAPTER

2 of 42

Basics of Web development

3 of 42

What is web development ?

As defined by the website geeksforgeeks.org:

Web dev refers to the creating, building, and maintaining of websites.
It includes aspects such as web design, web publishing, web programming, and database management.
It is the creation of an application that works over the internet (I.e. Websites).

4 of 42

What is web development? (Cont.)

The description of a web developer as outlined by o*net is as follows:

“[Web developers] Develop and implement websites, web applications, application databases, and interactive web interfaces.
Evaluate code to ensure that it is properly structured, meets industry standards, and is compatible with browsers and devices.
Optimize website performance, scalability, and server-side code and processes…”

5 of 42

WEb Dev employment trends

per o*net:

median wages:

US:

$37.78/hour, $78,580/Year

New York

$33.87/hour, $70,450/year

Projected growth (2021-2031)

22% in NY, 30% in US
Much faster than average
Bright outlook for the future

6 of 42

types of web dev

7 of 42

front-end web dev

Involves the development of the graphical user interface (ui) of a website application, so that user can view and interact with that website.

“Client-side” of the app

necessary Skills & Tools:

Languages:

HTML, CSS, JavaScript

Frameworks/Libraries:

Bootstrap, Tailwind CSS
es6, TypeScript, angularjs, React

8 of 42

Back-end web dev

involves the development of the server-side of the website.
It is the part of the website that is invisible, non-interactive, does not come into direct contact with users.
necessary skills & tools:

languages:

php, java, python, ruby, C#

frameworks/libraries:

node.js, django, flask
mongodb, mysql, .net

9 of 42

full-stack web dev

involves developing both the Client-side and the server-side of the website.

full-stack = front-end + back-end

full-stack web devs typically use stacks to complete their projects.
Popular stacks:

LAMP

Linux, apache, mySQL, php

MEAN/Mern

mongodb, express.js, angular/React, node.js

10 of 42

Intro to htmL

11 of 42

What is HTML ?

HTML (AKA hypertext markup language) is the standard markup language for documents designed to be displayed in a web browser.

Defines the meaning and structure of web content

Fast Facts:

Development start: 1989
initial release: 1993
Latest version: HTML5, released in 2008
creators: Tim berners-lee, robert cailliau, others

12 of 42

Basics of HTML - Elements

elements:

basic components of an html document that tells the web browser how to structure & interpret parts of it.
Typically made up of an opening/closing tag, attributes, and content.

Tags: mark up the start of an element, usually enclosed in angle brackets.
Attributes: contain additional pieces of information.
Content: Stuff inside of the element.

13 of 42

Basics of HTML - Elements (CONT.)

Fun Facts:

there are about 100+ html tags that exist and that are useable.

htmlreference.io lists 113 html tags (varies from site to site)

Key things to remember:

The vast majority of tags must be opened and closed with content resting in between the tags.
When using multiple tags, they must be closed in the order in which they were opened.

14 of 42

basics of html - page construction

<!DocTYPe htMl>

This is a document type declaration, which specifies the language you will be writing in.

should always go on the very first line of code.

<html>

defines the Root element of html document.

all other elements must be contained within this element.

15 of 42

basics of html - page construction (COnt.)

<HEad>

defines a container for a web page’s metadata.

in other words, this is where all the metadata goes, so search engines & other programs can use them.

<body>

The container for the web page’s content.

Where elements like <P> , <h1>, and <title> reside.

16 of 42

basics of html - Other Important ELements

Headings (<h1> -<h6>)

Used to create headings, depending on level of importance. <h1> = Most important, <h6> = Least Important

Anchor (<a>)

creates a link to a url

able to target web pages, sections within a page,, email addresses, etc.

image (<img>)

used to insert images into a web page.

metadata ( <meta>)

Defines the metadata attached to a web page,

17 of 42

Intro to CSS

18 of 42

Live visual: HTML WITH/Without CSS

19 of 42

What is CSS?

cSS (aka cascading style sheets) is the style sheet language used to describe the presentation of web pages.
Fast Facts:

Proposed: 1994
Released: December 17th, 1996
Latest release: css3, Released in 1999
Creators: Hakon WIum lie, Bert bos, World wide web consortium (w3c)

20 of 42

Basics of css - what does it do?

Css is used to define styles for web pages:

Controls the layout, typography, colors, and other visual aspects
Creates responsible and scalable layouts that look good on any device
adds visual effects such as animations, transitions, and other visual effects

Css saves time and effort:

Can control the layout of multiple web pages all at once

css solved big problems:

inconsistency, scalability, accessibility, etc.

21 of 42

basics of css - syntax

Selector:

points to the html element that you are trying to style

Property:

characteristic of an html element that can be styled using css. color is an example of a property.

Property value

a value that is assigned to a css property. for instance, if you assign “blue” to the color property, the text in a given element will turn blue.

22 of 42

basics of css - How to add to html

There are three ways to insert css into an html Doc:

external css

Typically in a separate file, can be used to control the style of entire websites
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

internal css

can be used to control individual html pages if they have a unique style

The internal style is defined inside the <style> element, inside the head section.

inline css

can be used to control the style of individual elements .
add the style attribute to the relevant element. The style attribute can contain any CSS property.

23 of 42

basics of css - How to add to html cont.

external css example:

internal css example:

24 of 42

basics of css - How to add to html cont.

Inline css example:

25 of 42

Basics of css - Selectors

css selectors are used to find/select the html elements you want to style.
Five Categories of selectors:

Simple selectors

Select based on name, id , class

Combinator selectors

select based on specific relationships

pseudo-class selectors

select based on a certain state

pseudo-elements selectors

select & style part of an element

Attribute Selectors

select based on attribute & value

26 of 42

Basics of css - Selector examples

Simple selectors:

combinator selectors:

Pseudo-class selectors:

27 of 42

Basics of css - Selector examples cont.

pseudo-elements selectors:

Attribute selectors:

28 of 42

Basics of css - important properties

Here are some important properties and the potential values that can be assigned to them:

29 of 42

Basics of css - Color property

colors are specified in two different ways:

Predefined color names

html/css both support 140 color names (tomato, orange, dodgerblue, etc.)

RGB/RGBA, HEX, and HSL/HSLA values

Rbg: (red, green, blue)
RGBA: (Red, green, blue, alpha)
Hex: Hexadecimal value (#ffffff)
HSL: (hue, saturation, lightness)
Hsla: (Hue, saturation, lightness, alpha)

30 of 42

Basics of css - height/width/margin/padding

These properties are typically used to change the environment around an html element.

Height/Width:

set height/width of an element.

margin:

creates space around elements, outside of any defined borders.

padding:

creates space around an element's content, inside of any defined borders.

31 of 42

Brief overview of js

32 of 42

What is JS?

Javascript (aka Js) is a high-level programming language that is one of the core technologies of the world wide web, along with html/css.
Fast Facts:

Released: December 4th, 1995
Creator: Brendan eich
conforms to ECMAScript standard.
Latest release: ecmascript 2023, june 2023
javaScript != Java

33 of 42

Basics of js - What does it do?

Js, with html/css, can:

change html content
change html attribute values
change css styles
show/hide html elements

Js can also:

Add interactivity to websites
create animations and visual effects
validate forms
communicate with servers

34 of 42

Basics of js - How to add to html/css?

To insert js into html:

Use the <script> tag
use js html methods such as getelementid()

JS scripts can be inserted into the either the<head> or <body> elements, or both.

JS functions can also be inserted in here
However, it might be more advantageous to place scripts in external files

35 of 42

Basics of js - Syntax

js defines two types of values:

fixed/literal & variables

Fixed/literal:

numbers = written with/without decimals
strings = text, written in single/double quotes

variables:

Used to store data values
keywords: var, let, & const (all lowercase)

js is also case-sensitive, because all identifiers are case sensitive
js comments = java comments
don’t forget your semicolon!

36 of 42

Basics of js - Output/Display

JS can display data in four ways:

writing into html element
writing into html output
writing into an alert box
writing into console

37 of 42

DEMO Time!

38 of 42

DEMO overview

We will be looking at a demo website that i created using html/css:
45.33.85.242

39 of 42

Resources

web dev resources:

O*net:

Geeks for geeks:

https://www.geeksforgeeks.org/web-development/

Udacity:

https://www.udacity.com/blog/2020/12/front-end-vs-back-end-vs-full-stack-web-developers.html

40 of 42

Resources

HTML:

Css:

41 of 42

Resources

Javascript:

42 of 42

Thank you!