BASICS OF WEB DEVELOPMENT WITH

HTML, CSS AND JAVASCRIPT

 FUNDAMENTALS OF WEB DEVELOPMENT WITH HTML

Topics to be covered:
• HTML Layout Elements and Techniques
• HTML class and ID Attribute
• HTML Forms
• HTML Media
• HTML Graphics
 HTML LAYOUT ELEMENTS AND TECHNIQUES
HTML Layout Elements:
1. <header> - Defines a header for a document or a section
2. <nav> - Defines a set of navigation links
3. <section> - Defines a section in a document
4. <article> - Defines an independent, self-contained content
5. <aside> - Defines content aside from the content (like a sidebar)
6. <footer> - Defines a footer for a document or a section
7. <details> - Defines additional details that the user can open and close on demand
8. <summary> - Defines a heading for the <details> element
 HTML LAYOUT TECHNIQUES
There are four different techniques to create multicolumn layouts. Each technique has its pros and
cons:
1. CSS framework: If you want to create your layout fast, you can use a CSS framework, like
Bootstrap, Material UI etc.
2. CSS float property: It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear properties work.
3. CSS flexbox: Use of flexbox ensures that elements behave predictably when the page layout
must accommodate different screen sizes and different display devices.
4. CSS grid: The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and positioning.
CLASS
ASSIGNMENT
1
 HTML CLASS AND ID ATTRIBUTE

• The HTML class attribute is used to specify a class for an HTML element.
• Multiple HTML elements can share the same class.
• The HTML id attribute is used to specify a unique id for an HTML element.
• You cannot have more than one element with the same id in an HTML document.

Switch to vs code
 HTML FORMS

• An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on the type attribute.
• The action attribute defines the action to be performed when the form is submitted.
 <input <input <input <input
type="button"> type="checkbox"> type="color"> type="date">

<input
<input <input
type="datetime- <input type="file">
type="email"> type="hidden">
local">

HTML INPUT <input

type="image">
<input
type="month">
<input
type="number">
<input
type="password">

TYPES
<input <input <input <input
type="radio"> type="range"> type="reset"> type="search">

<input <input <input

<input type="tel">
type="submit"> type="text"> type="time">

<input
<input type="url">
type="week">
 BASICS OF WEB DEVELOPMENT WITH CSS

Topics to be covered:
• The CSS Box Model
• CSS Website Layout - Position Property, z-index Property, Overflow, float and clear
• CSS Navigation Bar
• CSS Pseudo-classes
• CSS Transitions and Animations
THE CSS BOX MODEL

• In CSS, the term "box model" is

used when talking about design and
layout.

• The CSS box model is essentially a

box that wraps around every HTML
element. It consists of margins,
borders, padding, and the actual
content. The image below illustrates
the box model:
 CSS WEBSITE LAYOUT - POSITION PROPERTY, Z-INDEX
PROPERTY, OVERFLOW, FLOAT AND CLEAR
• https://www.w3schools.com/css/css_positioning.asp
• https://www.w3schools.com/css/css_z-index.asp
• https://www.w3schools.com/css/css_overflow.asp
• https://www.w3schools.com/css/css_float.asp
 CSS NAVIGATION BAR

• Vs code
 CSS PSEUDO-CLASSES
/* unvisited link */
a:link {
color: #FF0000;
• A pseudo-class is used to define a special state of an element. }

For example, it can be used to: /* visited link */

a:visited {
• Style an element when a user mouses over it color: #00FF00;
}
• Style visited and unvisited links differently
• Style an element when it gets focus /* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
 CSS TRANSITIONS AND ANIMATIONS

• CSS transitions allows you to change property values smoothly, over a given duration.
• Properties:
1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function
 CSS ANIMATIONS
• CSS allows animation of HTML elements without using JavaScript or Flash!
• Properties:
1. @keyframes
2. animation-name
3. animation-duration
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
8. animation-fill-mode
9. animation
 BASICS OF WEB DEVELOPMENT WITH JAVASCRIPT

Topics to be covered:
• JavaScript Variables - Using var, Using let, Using const
• JavaScript Functions, JavaScript Objects
• JavaScript Events
• JavaScript Array Methods
• JavaScript Regular Expressions
• DOM Manipulation
• JavaScript Best Practices
 JAVASCRIPT VARIABLES - USING VAR, USING LET, USING CONST

• Most of the time, a JavaScript application needs to work with information. Here are two
examples:
1. An online shop – the information might include goods being sold and a shopping cart.
2. A chat application – the information might include users, messages, and much more.
A variable is a “named storage” for data. We can use variables to store goodies, visitors, and other
data.
 VAR
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

Variables are containers for

<p>In this example, x, y, and z are variables.</p>
storing data (storing data
values). <p id="demo"></p>

<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
In this example, x, y, and z, are
</script>
variables, declared with the var
keyword: </body>
</html>
vscode: Var.html
 LET

To create a variable in JavaScript, use the let keyword.

Variables defined with let cannot be Redeclared.

Variables defined with let must be Declared before use.

Variables defined with let have Block Scope.

 BLOCK SCOPE

Before ES6 (2015), JavaScript had only Global Scope and

Function Scope.

ES6 introduced two important new JavaScript keywords: let

and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from

outside the block:
 REDECLARING VARIABLES

Redeclaring a variable using the var keyword can

impose problems.

Redeclaring a variable inside a block will also

redeclare the variable outside the block.
 JAVASCRIPT CONST

Variables defined with const cannot be

Redeclared.

Variables defined with const cannot be

Reassigned.

Variables defined with const have Block

Scope.
 CANNOT BE REASSIGNED AND MUST BE ASSIGNED
A const variable cannot be reassigned:

JavaScript const variables must be assigned a value when they are declared:
 CONSTANT OBJECTS AND ARRAYS
• It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
• Reassign a constant value
• Reassign a constant array
• Reassign a constant object

But you CAN:

• Change the elements of constant array
• Change the properties of constant object
 CONSTANT ARRAYS AND CONSTANT OBJECTS
• You can change the elements of a constant array/object, but you can NOT reassign the array/object:
 JAVASCRIPT FUNCTIONS, JAVASCRIPT OBJECTS

• A JavaScript function is a block of code designed to perform a particular task.

• A JavaScript function is executed when "something" invokes it (calls it).

function name(parameter1, parameter2, parameter3) {

// code to be executed
}
 JAVASCRIPT OBJECTS

• In real life, a car is an object.

• A car has properties like weight and color, and methods like start and stop:
 JAVASCRIPT EVENTS

• In html, there are various events which represents that some activity is performed by the user
or by the browser.
• When JavaScript code is included in HTML, js react over these events and allow the execution.
This process of reacting over the events is called Event Handling. Thus, js handles the HTML
events via Event Handlers.
• For example, when a user clicks over the browser, add js code, which will execute the task to be
performed on the event.
 JAVASCRIPT ARRAY METHODS

• https://www.programiz.com/javascript/library/array
• https://javascript.info/array-methods
 JAVASCRIPT REGEXP

• A regular expression is a pattern of characters.

• The pattern is used to do pattern-matching "search-and-replace" functions on text.
• In JavaScript, a RegExp Object is a pattern with Properties and Methods.
• Syntax: /pattern/modifier(s);
• https://www.programiz.com/javascript/regex