Web Programming
Lecture 0

Introduction to Web Technologies

Josue Obregon

jobregon@seoultech.ac.kr

Seoul National University of Science and Technology
Information Technology Management
Lecture slides index

March 10, 2025

Agenda

Lecturer and students
Course logistics
Introduction to Web Technologies

Lecturer Presentation

BSC in Computer Engineering
- Universidad de San Carlos de Guatemala
MSc in Industrial & Management Systems Engineering
- Business Process Management Laboratory
- Process mining applied to SNS
PhD in Industrial & Management Systems Engineering
- Industrial Artificial Intelligence Laboratory
- Interpretable Machine Learning for tree ensembles

Prof. Josue Obregon

Tel: 02-970-7291
Office: Changhak Hall (3), Room 334-1
Office Hours: Monday 14:00 – 17:00 (but come anytime!)
Home-page: https://eis.seoultech.ac.kr/
Email: jobregon@seoultech.ac.kr
Publications: Google Scholar Profile

Students

Question for students:
- Which part of a website (design, interactivity, or data handling) are you most curious about and why?
- What’s one programming concept from Java that you think will help you in web development?
- Have you heard of or used any web tools (like HTML, CSS, or JavaScript) before? If so, which one interests you the most?

Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.

— Patrick Mackenzie, Software Engineer

Course objectives

By the end of this course, students will be able to:

Design and implement web applications using JavaScript, SQL, HTML, CSS, and React.
Apply best practices in application design, including scalability, security, and user experience optimization.
Write and utilize APIs, manipulate the DOM, and create dynamic, interactive user interfaces.
Test, containerize, and deploy web applications on the Internet using modern CI/CD workflows.

The end result? A better understanding of the web, important technologies, and a portfolio for you to show!

Methodology

Flipped Clasroom style
(1 ~ 1.5 hours) Watch online lectures and complete readings before class.
(1.5 ~ 2 hours) Offline activities (11:00 am)
- Initial Quiz: Formative assesement of basic concepts and syntax.
- Interactive Q&A: discussions and to clarify doubts.
- Programming Quizzes: Take regular quizzes to reinforce concepts.
- Hands-On Practice: Engage in coding exercises to apply what you’ve learned.

Teaching Philosophy

Class contents

Intro to Web Technologies + HTML
CSS
Introduction to JavaScript
DOM Manipulation with JavaScript
Asynchronous JavaScript, JSON and APIs
Introduction to Node.js
Node.js and Express
Midterm

Data Persistence in Node JS
User Authentication and Securing Web applications
Introduction to React
Deploying Web Applications - Testing and CI
Deploying Web Applications - CD, Containerization and more on Security
Project Presentation
Final examination

Evaluation

Point Distribution
Assesment	Points
Midterm	30%
Homework	15%
Term project	25%
Final exam	30%
Total	100%

Grading **guideliens**
SeoulTech Grades	Marks (100)	NU Grades
A+ (4.5) A0 (4.0)	above 70	First
B+ (3.5) B0 (3.0)	above 60	Upper Second
C+ (2.5) C0 (2.0)	above 50	Lower Second
D+ (1.5) D0 (1.0)	above 40	Third
F (0.0)	under 40	Fail

Resources

Class website (continuously updating)
eclass for homeworks, announcements, quizzes and attendance
Recomended books
- Learning JavaScript Design Patterns, 2nd Edition, Addy Osmani Published by O’Reilly Media, Inc.
- Node.js for Beginners, Ulises Gascon, Published by Packt Publishing

Web development tools

Chrome: a browser to view and debug web pages
VSCode: a text editor to write HTML/CSS/JS/SQL (with various helpful packages available)
Command Line with Git: to clone/push assignments repositories (GitHub Clasroom)

Introduction web technologies

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Web Programming ITM</title>
    </head>
    <body>
        Welcome to Spring Semester!
    </body>
</html>

Global overview

Why do we study Web Programming in ITM?
- In-demand skills
- Allows businesses to establish an online presence, welcoming traffic and converting it into leads
- It is fun to create websites (well, sort of…)
What are the tools and technologies developers are currently using and the ones they want to use.
- Stack Overflow Developer Survey 2024

What is a web page?

Content

Structure

Style

Behavior

A real web page?

What’s everything involved here?

It’s just this, right?

Decide on URL…
Type it in…
Hit enter…
Website loads!

But what happens between 3 and 4?

Behind the scenes

You don’t have Google.com on your computer. So, where does it come from?

Figure out where it is
Ask for it to be sent to us
Check and verify what we get
Show it

The text in the address bar

It indicates where to find the website
Uniform Resource Locator (URL): An identifier for the location of a document

https://itm.seoultech.ac.kr/about_itm/about_professor

https://jobregon1212.github.io/lecture-slides/webprog/

Note

Protocol

Host

Path

URL elements

https://itm.seoultech.ac.kr/about_itm/about_professor

We’ve handled the host to IP address (so we know who to ask for the web page) The “protocol” tells us how:

HTTP: HyperText Transfer Protocol
Gives us the instructions (protocols) for how to share (transfer) web content (“hypertext”)

And the rest tells us what:

From the itm.seoultech.ac.kr server (aka host)…
Now we specifically want about_itm/about_professor (aka path or resource)

Internet vs. The Web

Internet

Computers (servers) connected to each other via a series of networks

Physical: The cables between them
Data & Network: The packets of information
Transport (TCP/IP): Providing connections and reliability
Application: Tying everything together to be useful

The Web

Collection of pages of information
Text… but with some “Hyper” around it
Pages can link to each other
Pages have style and interactivity

Remember that URL? `https://google.com/`

Need to go out to the internet to get the webpage.

Internet is low-level: based on numbers (IP addresses), not names.

Domain Name System (DNS)

A Domain Name System translates human-readable names to IP addresses

Example: itm.seoultech.ac.kr → 203.246.83.174
Hostname of itm.seoultech.ac.kr (which we might put into the browser’s address bar) … has IP address of 203.246.83.174 (which will be used to contact the server via the internet)

Then we have a web page right?

Words + images

HTML

CSS

JavaScript

What’s in a web page?

Hypertext Markup Language (HTML): semantic markup for web page content
Cascading Style Sheets (CSS): styling web pages
Client-side JavaScript: adding programmable interactivity to web pages
Asynchronous Javascript, XML adn JSON: fetching data from web services using JavaScript fetch API

What are we going to learn?

Types of web developers: Frontend, backend and fullstack

Acknowledgements

Some contents of this lecture are partially adapted from:
- Harvard CS50’s Web Programming with Python and JavaScript, licensed under CC BY-NC-SA 4.0.
- Materials from University of Washington’s CSE 154 Web Programming (used with permission).
- The Odin Project (main website code under MIT license and curriculum licensed under a CC BY-NC-SA 4.0)
- The Fundamentals of Web Application Development (Web Edition) ©2025 Nicholas D. Freeman. All rights reserved. The content is provided for educational purposes only and is not an exhaustive treatment of the subjects.

Back to title slide Back to lecture slides index