WEB DESIGN AND

DEVELOPMENT
Agenda 1 What is Website and Webpage?

2 About HTML and CSS

3 How to install VS code

4 About HTML Elements and Tags

5 About CSS Property

Webpage Collection
About us webpage of MIT App
Inventor Website
 o T y p e s o f W e b s i
T w t e
Static Website Dynamic Website
stable content Dynamic Content
Faster to load Slower than static website
Not uses the content Webpage content can be changed
management Database is easier
No interaction in the database Costs more
Lower Development costs
 Static Website

Dynamic Website
 Blog
E-commerce Educational

Social Networking
Business websites
News Website

Entertainment
Job Boards
Hyper Text Markup Language HTML
HTML consists of a series of elements such as heading, paragraph, links, images and etc.
 CSS
Why use CSS?

What is CSS?
Cascading Style Sheets
CSS is the language we
use to style an HTML
document.
VISUAL STUDIO CODE
HOW TO INSTALL VS STEP ONE
Click open the [Link]
which is the official Visual Studio Code website.

STEP TWO
The download button from where you can download
CODE

VSCode for macOS, Windows, Linux, and other platforms.

STEP THREE
Install Prettier and Live Sever in VS
code from Add Extension.
 HTML Elements
An HTML element is defined by a start tag, some content, and an end tag:
Format: <tag name>
Content goes here...
</tag name> Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph </p>

<br> None None

 T M L A t t r i b u t e s
H
Attributes provide additional information about elements.

Attributes are always specified in the start tag.

Attributes usually come in name/value pairs like: name="value"

E.g.
<img src="img_girl.jpg" width="500" height="600">
 HTML must–know Tags
Headings
Paragraphs
HTML headings are defined with <h1> to HTML paragraphs are defined with the <p>
<h6> tags. tag.
e.g. <h1>This is heading 1</h1> e.g. <p>This is a paragraph.</p>
<h2>This is heading 2</h2>

Links Images
HTML links are defined with the <a> HTML images are defined with the <img> tag.
tag. The source file (src), alternative text (alt), width,
e.g. and height are provided as attributes.
<ahref="[Link] e.g.
[Link]"> link to Open Courses <img src="[Link]" alt="[Link]"
Myanmar</a> width="104" height="142">
 a t t i n g t a g s i n h
o r m t m l
F
<b></b>
<del></del>
<i></i>

 <u></u>

 <mark></mark>

<center></center>
 Order List
<div>........</div> <ol></ol>,<li></li>
Type (1 ,a ,A , i ,I)
<span> ......</span>
Unordered List
<ul></ul>,<li></li>
THREE WAYS TO INSERT CSS
Format
selector {
property: value;
}
 CSS TYPES OF SELECTOR
HTML HTML

Element Type Selector

CSS
CSS
CSS

Class Selector
Universal Selector
Id Selector
 CSS BOX MODEL
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
 CSS MARGIN
margin properties are used to create space around elements, outside of any defined borders.
specifying the margin for each side of an element:
margin-top
margin-right margin and padding values units
margin-bottom • auto - the browser calculates the margin
margin-left
• length - specifies a margin in px, etc.
• % - specifies a margin in % of the width of the
containing element
CSS background properties CSS Text and Font
Text Color -> color: name/rgb/hex;
background-color
Text Alignment -> text-align: left/right/center;
background-image
Text Decoration -> text-decoration:
background-repeat
none/overline/line-through/underline;
background-size
line-height -> line-height: 1.8;
Positioning Property
position: relative / absolute; font-size: 40px/2em;

display: inline/flex/block; font-weight: normal/bold;

font-family :"Times New Roman", Times, serif;
 What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript.

 VIEWPORT
The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a
computer screen.
 MEDIA QUERY
Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.
Media queries can be used to check many things, such as:
[Link] and height of the viewport
[Link] and height of the elements (max-width, min-width, max-height,
min-height)
3. orientation of the viewport (landscape or portrait)
4. resolution
 MEDIA QUERY SYNTAX
@media media type and (media feature) and (media feature) {
CSS-Code;
}

For example:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
MEDIATYPE MEDIAFEATURE
width
all
height
print
orientation
screen
scan
tv
color
projection
hover
pointer
 TYPICAL DEVICE BREAKPOINTS
/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {...}