Bootcamp - Web Development Session 2

Introduction to
Nico Abel Laia
Front End Web Developer
Html | Css | Javascript

Anatomy Website
Let’s find out

Code Editor
To Create a Website

Code Editors
To Create a Website
Visual Studio Code Atom Code Editor Notepad++

Visual Studio Code
Extensions
Very Usefull

www.codepen.io
Online Code Editor

What is HTML?
Introduction to HTML

What is HTML?
Definition
Hyper Text Markup Language, or HTML, is a Markup
language used to build web pages and web
applications.

Hypertext
Definition
Hypertext is "Text within Text". A text is a hypertext
if it contains a link. A hypertext is one that when you
click on it, takes you to a different webpage.
HyperText is a method of connecting two or more
web pages (HTML documents).

A markup language is a
computer language that is
used to apply layout and
formatting conventions to a
text document. Markup
language makes text more
interactive and dynamic. It can
turn text into images, tables,
links, etc.
Markup Language
Definition

Explanation
An HTML element is defined by a start tag, some
content, and an end tag. The HTML element is
everything from the start tag to the end tag
What is an HTML Element?

Definition
Nested elements are elements that have other
elements in them.
Example:
<p><strong>GDSC</strong> 2nd meeting</p>
>> GDSC 2nd meeting
Nesting Elements

Definition
Void Elements are elements that have no content in
them
<img
src=”https://res.cloudinary.com/startup-
grind/image/upload/dpr_2.0,fl_sanitize/v1
/gcs/platform-data-
dsc/contentbuilder/logo_dark_stacked_KzUu
rne.png”
alt=”GDSC Logo” />
Void Elements

Definition
● All HTML elements can have attributes
● Attributes provide additional information about
elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like:
name="value"
HTML Attributes

Common HTML Attributes
Attribute Description
alt Specifies an alternative text for an image
disabled Specifies that an input element should be disabled
href Specifies the URL (Web Address) for a link
id Specifies a unique id for an element
src Specifies the URL (Web Address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as tool tip)
value Specifies the values (text content) for an input element.

<!DOCTYPE html>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>This is how you define your header</h1>
<p>This is how you define your paragraph.</p>
</body>
</html>
This is how you define your
header
This is how you define your paragraph.
Simple Example of HTML

● The <!DOCTYPE html> declaration defines that this document is an HTML5
document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph
Example
Explanation

Headings
Heading elements allow you to specify that certain
parts of your content are headings — or
subheadings.
Marking up text

<h1>GDSC Matana</h1>
<h2>Study Jam 2</h2>
<h3>Intro to HTML, CSS, and Javascript</h3>
<h4>Nico Abel Laia</h4>
GDSC Matana
Study Jam 2
Intro to HTML, CSS, and Javascript
Nico Abel Laia
Headings

Paragraph
Paragraph elements are for containing paragraphs
of text; you'll use these frequently when marking up
regular text content.
Marking up text

<p>In this section we will discuss about
HTML.</p>
In this section we will discuss about
HTML.
Paragraph

Lists
Marking up lists always consists of at least 2 elements.
The most common list types are ordered and
unordered lists:
1.Unordered lists are for lists where the order of the
items doesn't matter, wrapped in a <ul> element.
2.Ordered lists are for lists where the order of the
items does matter, wrapped in an <ol> element.
Each item inside the lists is put inside an <li> (list
item) element.
Marking up text

<p>Below is our material for today:</p>
<ul>
<li>Website Anatomy</li>
<li>How browser manage resources</li>
<li>How browser request resources</li>
<li>What is developer tools</li>
<li>Code Editor Tools</li>
<li>Demo web page</li>
<li>What is HTML</li>
<li>What is CSS</li>
<li>What is Javascript</li>
</ul>
Below is our material for today:
● Website Anatomy
● How browser manage resources
● How browser request resources
● What is developer tools
● Code Editor Tools
● Demo web page
● What is HTML
● WHat is CSS
● What is Javascript
Lists

To add a link, we need to use a simple element — <a> — "a" being the short
form for "anchor". To make text within your paragraph into a link, follow
these steps:
1.Choose some text.
2.Wrap the text in an <a> element.
3.Give the <a> element an href attribute.
4.Fill in the value of this attribute with the web address that you want the
link to.
<a
href="https://www.instagram.com/p/Ck0dKe_BI5o/?utm_source=ig_web_copy_link">Study
Jam 2</a>
>>> Study Jam 2
Link
Explanation

If we combine all the pieces we
created earlier, our HTML web page
will look like this:
GDSC Intro to HTML
Conclusion
Intro to HTML

What is CSS?
Introduction to CSS

What is CSS?
Definition
CSS (Cascading Style Sheet) is a
markup language for managing the
appearance and beautification of
websites.

Definition
A style sheet contains one or
more styling rules (rules/rule-
sets). For example, the example
consists of two rules. The first rule
sets the color for <h1>, while the
second rule sets the color and
font size on <p>.
Styling

CSS Rule
CSS rules contain one or more selectors and one or
more declarations.
Styling

CSS Rule
Declaration Block contains some declarations on one
or more selectors.
Styling

Categories of Basic Selectors
There are five categories of Basic Selectors:
1. Type Selector
2. Class Selector
3. ID Selector
4. Attribute Selector
5. Universal Selector
Styling

Type Selector
Using the element’s
name as the selector.

Class Selector
Using the class
attribute name as a
selector.

ID Selector
Using id attribute
value as the
selector.

Attribute Selector
Using attribute element value as
selector. This selector can also be
added value so that it is more
specific.

Universal Selector
Apply rules to all existing elements
and can also be used more
specifically for an element that has a
different selector.

There are three ways:
1. Embedded Styles : adding css code in the header section
2. Linked Styles : adding css code in different file, then link it to the HTML
file using <link>
3. Inline Styles : adding css code to each HTML tag without selector
Linking CSS with HTML
Definition

JavaScript
JavaScript and How it Works

Definition
JavaScript is a client side programming language,
because all the processes run on the client side and
used when it requires user interaction.
JavaScript

Definition
At first, JavaScript is designed to run on the web. But,
JavaScript can be used to created games, servers, IoT,
etc. The first name of JavaScript was Mocha. Later, it
changed to LiveScript, and now JavaScript.
JavaScript

Syntax
JavaScript syntax writes between the tags <script> and
</script>
Same as CSS, there are three methods to write
Javascript in HTML files.
1. Inline Script
2. Embedded Script
3. Linked Script
JavaScript

Inline Script
Inline script writes in the HTML tag inside the HTML files.
Example:

Embedded Script
Embedded script writes inside the <head> or <body> element in the HTML
files.
Example:

Linked Script
JavaScript with the method linked script writes in different files with the file
extensions is ‘.js’. Then the path will be writes in the <head> element.
Example in the <head> element:

How JavaScript Works
JavaScript Engine
A popular example of a JavaScript
Engine is Google’s V8 engine. The
V8 engine is used inside Chrome
and Node.js.

JavaScript Engine
Two main components of JavaScript
Engine:
a. Memory Heap — this is where the
memory allocation happens
b. Call Stack — this is where your stack
frames are as your code executes

JavaScript Engine
Parser: It checks for syntax and semantics.
Parser breaks code into tokens in order to
understand their meanings and these
tokens gets converted into Abstract Syntax
Tree (AST).

JavaScript Engine
Abstract Syntax Tree: It is a hierarchical
tree that allows interpreter to understand
the program.

JavaScript Engine
Interpreter: It lets the AST to get converted
into Byte code.

JavaScript Engine
Profiler: It will check for the repeating code
that can be optimized. As soon as, it gets
the repeating code, it basically moves the
code into compiler.

JavaScript Engine
Compiler: It spits out the most optimized
bytecode. In the above case, it will see the
repeating code and optimize the code by
replacing the multiply(4, 3) as 12

JavaScript The Call Stack
JavaScript is Single thread , meaning JavaScript can handle(executes) only
one function at a time. If we step into a function, we put it on the top of the
stack. If we return from a function, we pop off the top of the stack. That’s all
the stack can do. Each of the entry in the call stack is called stack frame.

JavaScript Call Stack

When client opens a website, the script will downloaded automatically and
running in the browser. So, the process is not done on the web server. If the
client’s browser does not support JavaScript, then the appearance and the
interactive function on the client’s device will different and can not run
properly.
Client Side

Server-Side JavaScript is the use of the JavaScript language on servers. You
know, those computers that are always on (and maybe online) running stuff,
doing all kinds of work. Nowadays many of them have software, web
servers, command-line applications, and other services that are written in
JavaScript.
Server Side

Resources
How browsers requests resources

Browser Requests Resources
When we input the web address into the browser,
browser will send the domain name to DNS server to
get the IP address of the domain name. It can be
analogized as we find the address of a shop.
After browser knows the IP address of the domain
name, browser will send the HTTP request to the
server to ask for the HTML files of the website. We can
think this as we order goods to the employee.

Browser Requests Resources
The HTML files of the website usually contain <link>
and <script> element. The <link> element referencing
to the external CSS stylesheet and <script> refers to
the external JavaScript scripts.
So, browser will parses the HTML files and recognized
<link> and <script> element. Then, browser will
request for the <link> and <script> to the server.

Client
DNS Server
Google Server
216.61.137.0
(Domain Address)
https://gdsc.community.dev/universitas-matana/
34.120.73.225:443
(IP of Server)
Request (HTTP Request)
GET/universitas-matana/
Response (HTTP Response)
HTML files
Request
<link> and <script>
Response

Developer Tools
Subtitle Goes Here

Definition
Developer Tools (DevTools) are tools that do a lot of
things, such as inspecting currently-loaded HTML, CSS,
and JavaScript.
Developer Tools

DevTools
How to Open
To access the DOM or CSS of one webpage:
● Right-click element on the page -> select Inspect
● Windows, Linux, Chrome OS : Ctrl+Shift+C/I
● Mac : Command+Option+C
● Internet Explorer/Edge : F12

Features
Some features DevTools (may be different in some browsers):
• Elements
• Console
• Sources
• Application
• Network
• Security
• Lighthouse
DevTools

Features
DevTools
“Elements” is used to debug
HTML and CSS code or
temporary change the HTML
and CSS code (just to see
how it will reflect on website)

Features
DevTools
“Console” is used to debug
JavaScript code, view the
logged message, run the
JavaScript code, show error
with the line number in
source code.

Features
DevTools
“Sources” shows where the
files used to make the
website are store, set
breakpoints, and watch the
value of variables.

Features
DevTools
“Application” is used to
manage the resources ( such
as cookies, local storage, SQL
databases, etc).

Features
DevTools
“Network” shows the details
of status, type, initiator, time,
and waterfall of one
webpage.

Features
DevTools
“Security” displays security
information on the currently
active web, to ensure the
HTTPS is implemented in the
webpage, and show the SSL
certificate.

Features
DevTools
“Lighthouse” identifies and
resolves the issues that
affect the website’s page load
performance, accessibility,
and user experience.

Bootcamp - Web Development Session 2

Recommended

Recommended

More Related Content

Similar to Bootcamp - Web Development Session 2

Similar to Bootcamp - Web Development Session 2 (20)

More from GDSCUniversitasMatan

More from GDSCUniversitasMatan (6)

Recently uploaded

Recently uploaded (20)

Bootcamp - Web Development Session 2