Web Engineering and Develoment Course

Welcome to the Web Engineering and Development Course.

The course & Instructor

This course introduces the basics of Web development and engineering. It will be offered by Dr. Omar Hammad in King Fahd University of Petroleum and Minerals for ICS/SWE junior students in Fall 2023.

Contents of the repository

This repostory contains all of the supporting material that the instructor refer to in the course lectures. They include:

• Exercise files
• Links to articles
• PDF Handouts
• Lecture videos (links)

References

The following resources are used to prepare the lectures

Books

• Internet & World Wide Web How to Program
• Fundamentals of Web Development
• HTML & CSS: Design & Build websites

Websites

• MDN Web Docs
• W3Schools
• CodeCademy

Questions?

send them to omarjh@kfupm.edu.sa

Lectures Contents

Lecture 1: Introduction

Motivating the learner and Introduing some course policies.

Links

• Midjourney: The tool I use to show off
• Can ChatGPT Teach Me How To Code Better Than Courses?

Class Activities

• Group discussion
• Live poll
• Read & Ask

Lecture 2: Internet Basics for Web Dev

History and concepts about the web & internet

Reading Material

• Chapter 1 of Internet & World Wide Web

Links

• The story of Tim
• Knighted in 2004
• CERN
• XML came after HTML
• What is a markup language
• Hypertext history
• The proposal
• Pow research
• the first website
• History of the internet

Class Activities

• Setup Github
• Research & Present

Lecture 3: HTML (Part 1)

Basics of HTML

Reading Material

• Chapter 2 of Internet & World Wide Web

Links

• Moziila Developer
• Basics of git & github
• Using Git with VSCode

Class Activities

• Build your own website
• Push it to github

Lecture 4: HTML (Part 2)

Advanced HTML

Reading Material

• Chapter 3 of Internet & World Wide Web

Links

• Designing WEb Forms UX

Class Activities

• Building a table
• Building a form
• Refactor to Semantic Web

Lecture 5: CSS (Part 1)

Overview of CSS

Reading Material

• Chapter 4 of Internet & World Wide Web

Links

• 1 html, many css

Class Activities

• Make your website dark

Lecture 6: CSS (Part 2)

• CSS Selectors, Colors & Box Model.

Reading Material & Refs

• Chapter 4 of Internet & World Wide Web
• CSS Selectorshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
• Box modelhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model
• CSS colorshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors

Links

• Adobe colors

Class Activities

• Make your moodboard
• Apply CSS to your website

Lecture 7: CSS (Part 3)

• CSS Typography & Animation.

Lecture Video Link

• CSS Animation

Reading Material & Refs

• Chapter 5 of Internet & World Wide Web
• MDN > Shorthand Props
• MDN > values and units

Links

• figma.com
• airbnb
• thmaniyah
• Google Fonts
• Awwwards
• Animation
• Understanding Motion

Lecture 8: CSS (Part 4)

• CSS Layout, responsiveness and frameworks

Reading Material & Refs

• Chapter 5 of Internet & World Wide Web
• MDN > Flexboxhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• MDN > Position
• MDN > Float

Links

• Web Traffic in SAhttps://www.statista.com/statistics/1393363/saudi-arabia-mobile-s-share-of-web-traffic/
• FroggyBox
• Viewport
• wappalyzer.com
• Top CSS Frameworks
• Sass

Class Activities

• Ideas exploration
• Experience mobi
• le layout without viewport

Lecture 9: JS (Part 1)

• JS Intro, variables, conditions, loops, arrays

Reading Material & Refs

• Chapter 6,7,8 & 10 of Internet & World Wide Web
• MDN > JS First Steps
• MDN > Making decisions in your code
• MDN > Looping

Links

• codepen.io
• https://codepen.io/MysticReborn/full/rygqao
• https://codepen.io/slyka85/pen/LbXYKQ
• https://codepen.io/ste-vg/full/GRooLza
• https://codepen.io/jshawl/pen/GRPQwRB

Class Activities

• Building a Game
• Exploring Codepen.com

Lecture 10: JS (Part 2)

• APIs, DOM, Events

Reading Material & Refs

• Chapter 12, 13 of Internet & World Wide Web
• MDN > Intro to Events
• MDN > Intro to Web APIs
• MDN > Manuplating Docs

Links

• MDN > Web APIs
• github.com/public-apis
• MDN > Document
• MDN > Event

Class Activities

• Explore Public APIs
• Explore Browser APIs
• Generate DOM Dynamically
• Make game playable with KB

Lecture 11: JS (Part 3)

• Fetch, Canvas

Reading Material & Refs

• Chapter 14 of Internet & World Wide Web
• MDN > Fetch Data From the Server
• MDN > Drawing Graphics

Links

• MDN > 3rd party APIs
• Three.js

Class Activities

• Demo Fetch
• Demo 2d
• Demo 3d

Lecture 12: JS (Part 4)

• Objects, Functions

Reading Material & Refs

• Chapter 9 & 11 of Internet & World Wide Web
• MDN > Introduction to Objects in JS
• MDN > Functions — reusable blocks of code

Links

• Build you function
• JSON

Lecture 13: JS (Part 5)

• RegEx, Frameworks

Reading Material & Refs

• MDN regular Expressions
• MDN > Understanding client-side JavaScript frameworks

Links

• Regex Game

Lecture 14: Web Engineering (Part 1)

• What, Why, The Process, Arch.

Reading Material & Refs

• Lectures > WebE > Reading Material

Lecture 15: Web Engineering (Part 2)

• Web Apps Modeling

Reading Material & Refs

• Lectures > WebE > Reading Material

Lecture 16: Back-End (Part 1)

• Servers, Http, URLs

Reading Material & Refs

• MDN > Intro to Server side
• MDN > Server Side
• Server-side website programming first steps
• Client-Server
• Server side frameworks

Lecture 17: Back-End (Part 2)

• Node.js

Reading Material & Refs

• Node.JS & Express.JS Full Course 0-3:40
• W3Scool Node.js
• Learn Node.js from nodejs.com
• Node.js Reference

Lecture 18: Back-End (Part 3)

• Express JS

Reading Material & Refs

• Node.JS & Express.JS Full Course 3:40-End
• Express.js Website Getting Started, Guide & API Reference
• Express.js Website Guide
• MDN > Express web framework (Until Tutorial Part 7)

Lecture 19: Back-End (Part 4)

• Databases, MongoDB

Reading Material & Refs

• Exercises > BE 4 Exercises
• MongoDB Website Guide & Reference
• Mongoose Webiste Quick Start, Guides & Reference

Class Activities

• Do BE 04 Exercises in class

Lec 20: Socket.io

• WebSocket, SocketIO

Reading Material & Refs

• Exercises > BE 05 Exericises
• MDN > WebSockets
• MDN > Writing WebSocket Servers
• Socket.io
• WebSockets vs HTTP - Ably
• WebSockets vs HTTP - Oxylabs
• How Are HTTP and WebSocket Different - Wallarm
• WebSocket - Wikipedia
• What is WebSocket - KnowledgeHut
• WebSockets - Ably
• How WebSocket Works - Socket.IO
• Getting Started with WebSocket - DEV Community

Class Activities

• Do BE 05 Exercises in the class

Lec 21: Deployment

Delivering apps to the web

Reading Material & Refs

• Exercices > Dep 01 Exericises
• Web Apps deployment
• [Web deployment process] https://www.wgu.edu/blog/breaking-down-web-application-deployment- process2311.html
• [Deploying web apps] https://adamosoft.com/blog/website-development/deploy-web-applications/

Class Activities

• Do DEP 01 Exercises in class

Let 22: Security (Part 1)

Security Principles, Authentication

Reading Material & Refs

• Ch16 (16.1 - 16.2) of Fundamental of Web Dev Book (See Exercises > 08 SEC)
• Basic Auth in Node

Class Activities

• Reading book chapter and answer the quiz

Let 22: Security (Part 2)

Cryptography, HTTPS, Best Practices, Common Threat Vectors

Reading Material & Refs

• Ch16 (16.3 - 16.7) of Fundamental of Web Dev Book (See Exercises > 08 SEC)

Class Activities

• Reading book chapter and answer the quiz