0% found this document useful (0 votes)

26 views

Course Slides

This document provides an overview of an 8-part course on building a web application. It will cover the basics of HTML, CSS, JavaScript, and React to build the app skeleton and make it interactive. While not a complete web development course, it will help understand the fundamentals of web technologies and if a career in web development may be a good fit. Questions can be posted in the video Q&A for help.

Uploaded by

josep

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

26 views

Course Slides

Uploaded by

josep

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 55

WELCOME, WELCOME,

WELCOME!
1 Set up your code editor

2 Basics of the web and web development

3 Start the project by writing HTML code

4 Styling and creating layouts with CSS

5 Online database and API with Supabase

6 Use JavaScript to load app data

7 Build the final app with the React library

8 Deploy the final project to a web server!

✅ A different approach 🚫 Not a “complete” web developer course

✅ Try out HTML, CSS, JavaScript, React 🚫 Will not make a web developer

✅ Understand if web development is a 🚫 You will not master web technologies

good career choice
🚫 Don’t expect to build complex apps
✅ You will learn important fundamentals

✅ Know what technologies are used in

the real-world industry
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
SECTION
WELCOME, WELCOME, WELCOME!

LECTURE
A HIGH LEVEL OVERVIEW OF WEB
DEVELOPMENT
-
AN OVERVIEW OF THE WEB AND WEB DEVELOPMENT

Can get and process data

from database, create files,
📄 index.html 📄 style.css
https://udemy.com and send things to browser
[{id:1,name:’Jonas’},
📄 script.js
{id:2,name:’Colt’}, 📄 image.jpg
{id:3,name:’Max’}]

APP
REQUEST WEB ⚙
BROWSER
SERVER
👩💻 🌐 DB
RESPONSE
🗄
The 3 languages that etc...
browsers understand

Writing front-end code with Writing back-end

HTML, CSS, and JS is front-end applications is called
web development 👩💻 FRONT END 🌐 BACK END back-end development
-
-
THE 3 LANGUAGES BROWSERS UNDERSTAND FRONT END

CONTENT

PROGRAMMING
PRESENTATION
LANGUAGE DYNAMIC
STYLING AND
EFFECTS AND WEB
LAYOUT
APPLICATIONS
:
:
(
-
)
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
HTML BUILDING THE
APP SKELETON
–
SECTION
HTML BUILDING THE APP
SKELETON

LECTURE
WHAT IS HTML?
–
WHAT IS HTML?

HTML

👉 HyperText Markup Language

👉 HTML is a markup language that web developers use to structure

and describe the content of a webpage (not a programming
language)

👉 HTML consists of elements that describe different types of content:

paragraphs, links, headings, images, video, etc.

👉 Web browsers understand HTML and render HTML code as

webpages
ANATOMY OF AN HTML ELEMENT

👉 Element

<p>HTML is a markup language</p>

👉 Opening tag: Name 👉 Content: Content of the element, in 👉 Closing tag: Same as
of the element, this example text. But it might be opening tag, but with
wrapped in < and > another element (child element). Some a /. When element has
elements have no content (e.g. <img>) no content, it’s omitted
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
CSS STYLING THE
APP
–
SECTION
CSS STYLING THE APP

LECTURE
WHAT IS CSS?
–
WHAT IS CSS?

CSS

👉 Cascading Style Sheets

👉 CSS describes the visual style and presentation of the content

written in HTML

👉 CSS consists of countless properties that developers use to format

the content: properties about font, text, spacing, layout, etc.

No need to need
to know all the
properties
HOW WE SELECT AND STYLE ELEMENTS

A CSS RULE
Selector Declaration block

h1 {
color: blue;
text-align: center;
font-size: 20px; Declaration / Style
}

Property Value
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
SECTION
CSS STYLING THE APP

LECTURE
THE CSS BOX MODEL
–
THE CSS BOX MODEL
Visible part of element on the page

margin 👉 Box model: Defines how elements are

displayed. Each element on a page is
a rectangular box
padding

👉 Content: Text, images, etc.

width 👉 Border: A line around the element, still
inside of the element
height
CONTENT 👉 Padding: Empty space around the
content, inside of the element

border 👉 Width and height: Dimensions of the

element, including padding and border

👉 Margin: Empty space outside of the

element. For space between elements
When used with box-sizing: border-box;
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
SUPABASE STORING
THE APP DATA
–
SECTION
SUPABASE STORING THE APP
DATA

LECTURE
WHAT IS SUPABASE?
–
WHAT IS SUPABASE?

SUPABASE 🌐 BACK END

👉 Service that allows developers to easily create a

back-end with a database

👉 No back-end development needed 🥳

👉 Automatically creates a database and API so we

can easily request and receive data from the server
WITH SUPABASE, WE DON’T NEED
TO DO ANY OF THIS MANUALLY!
👉 API Application Programming Interface. In this
IT’S ALL INCLUDED 🥳
case, an API is a program that receives requests
for data and then sends that data back as JSON

Common data format,

similar to JS objects
:
-
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
JAVASCRIPT
MAKING THE APP
INTERACTIVE
–
SECTION
JAVASCRIPT MAKING THE APP
INTERACTIVE

LECTURE
WHAT IS JAVASCRIPT?
–
WHAT IS JAVASCRIPT?

JAVASCRIPT

👉 JavaScript is the programming language that browsers understand

👉 Web developers use JavaScript to implement dynamic effects:

respond to click events, load external data, change the HTML page
content, play video, animate charts, etc.

👉 JavaScript makes webpages come to life: we can transform a

normal webpage into a fully-fledged web application that feels just
like a mobile application 🤯
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
SECTION
JAVASCRIPT MAKING THE APP
INTERACTIVE

LECTURE
WHAT IS THE DOM?
–
WHAT IS THE DOM?

DOM

👉 Document Object Model

👉 Tree-like representation of the HTML document

👉 Each HTML element is represented as a

JavaScript object, which allows JavaScript to
access HTML elements

👉 DOM objects contain methods and properties to

manipulate them: change text and HTML
attributes, insert new HTML elements, etc.
Generated by browser
on HTML load
DOM manipulation
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
REACT BUILDING
THE FINAL APP
–
SECTION
REACT BUILDING THE FINAL APP

LECTURE
WHAT IS REACT?
–
WHAT IS REACT?

Code written and shared by

other developers. Makes Webpage that’s
development easier and faster REACT currently on the screen
(current HTML

👉 “JavaScript library for building user interfaces UI ”

1 Component-based: A component is a JavaScript function that

contains a piece of the UI (both its content and functionality). We
build complex UIs by combining multiple components

2 Declarative: We only describe what the UI should look like, using a WE’RE STILL
syntax called JSX. Developers never manipulate the DOM directly! USING

3 Driven by state: State is the data that the UI is based on. When we
change the state in a component, React automatically updates the
DOM. This always keeps the UI synchronized with the data
)
(
)
WHY DO WE NEED A FRONT END LIBRARY?

Keeping a user interface synchronized with 👉 Trying to keep data (showForm?)

1 data is really hard and a lot of work in big synchronized with UI (form visibility +
applications. Front-end libraries solve this button text)
problem and take hard work away from
developers 🎉

DATA UI

Libraries enforce a “right” way of structuring

2 and writing application code (less bugs 🐛)

Code we wrote in the

previous section
Most used in the web industry
-
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
SECTION
REACT BUILDING THE FINAL APP

LECTURE
DIVIDING OUR INTERFACE INTO
COMPONENTS
–
App
THE END!
SECTION
THE END!

LECTURE
WHERE TO GO FROM HERE
WHERE TO GO FROM HERE?

🥳 Well done!