7 DAYS LONG LIVE CLASSES
Basic Web Dev
with Bootstrap
in Collaboration with:
DevTown| Shaurya Sinha
The original browser was once the
dominant browser in terms of usage
share, but as a result of the first
browser war, it lost virtually all of its
share to Internet Explorer.
Netscapewas discontinued and
support for all Netscape browsers and
client products was terminated on
March 1, 2008.
DevTown| Shaurya Sinha
COMPONENTS OF
A WEBSITE
What will be be learning
DevTown| Shaurya Sinha
DevTown| Shaurya Sinha
DevTown| Shaurya Sinha
DevTown| Shaurya Sinha
CREATED IN JUST 10
DAYS
DevTown| Shaurya Sinha
Vs
Javascript
DevTown| Shaurya Sinha
<p> This is a Paragraph. </p>
Paragraph
Content
09
DevTown| Shaurya Sinha
opening tag closing tag
<p> This is a Paragraph. </p>
Content
DevTown| Shaurya Sinha
element 1
->
->
of
pa
ild
re
nt
ch
to
->
->
element 2 element 3
<- siblings ->
DevTown| Shaurya Sinha
element 1
element 2 element 3
element 4 element 5
element 6 element 7
DevTown| Shaurya Sinha
<div> Content </div>
<div>
<h1> <p>
DevTown| Shaurya Sinha
<div> <h1> Title </h1> </div>
another element !
DevTown| Shaurya Sinha
<div>
<h1> Title </h1>
</div>
DevTown| Shaurya Sinha
<div> <div>
<h1> Title </h1>
<p> Paragraph. </p>
<h1> <p>
</div>
7 DAYS LONG LIVE CLASSES
Basic Web Dev
with Bootstrap
DevTown| Shaurya Sinha
HTML Syntax The purpose of this problem set
is to help you practice writing
Problem HTML. We want you to build
confidence and master basic
Statement 1 HTML syntax.
Discussion Points
DevTown| Shaurya Sinha
Helpful
Resources
if you get stuck there is no harm in going
back and watching any of these videos.
We encourage you to use outside
resources as well. You can always refer to
the MDN references or your favourite
search engine to get unstuck.
Books and Apps
DevTown| Shaurya Sinha
Make a Button !!!
For this problem statement you have to do is type
out the HTML to create a button element
DevTown| Shaurya Sinha
Check all the
Headings !!!
For this problem statement, you have to do is type out
the HTML to create all the different types of headings.
DevTown| Shaurya Sinha
Make a List !!!
For this problem statement, you have to do is type
out the HTML to create an unordered list.
This is an example of an unordered list
You have to make an unordered listof 3 web
languages
HTML, CSS and Js
DevTown| Shaurya Sinha
Tree to HTML !!!
Convert the following Tree to HTML code
<body>
<h1> <div>
Content
<p> <p>
Content Content
DevTown| Shaurya Sinha
Make a Hyperlink !!!
For this problem statement, you have to do is type out
the HTML to create a Hyperlink.
DevTown| Shaurya Sinha
Mockup to website !!!
For this problem statement, you have to do is type out
the HTML to create this following mockup.
DevTown | Shaurya Sinha
Ruleset
selector div {
text-align: right ; Declaration
Block
}
09
ShapeAI | Shaurya Sinha
H1 to green !!!
For this problem statement, you have to do is type out
the CSS to change Title to Green.
7 DAYS LONG LIVE CLASSES
Basic Web Dev
Bootcamp
DevTown | Shaurya Sinha
class attribute selector id attribute selector
.book-summary { #site-description {
text-align: right text-align: right
; ;
} }
DevTown | Shaurya Sinha
Developer
Tools
Lets explore the web page
miles
feet
LENGTH
centimeters meters
miles
feet
PIXEL/PERCENTAGE
centimeters meters
ABSOLUTE
8 meters
RELATIVE
2 cars wide
DevTown | Shaurya Sinha
Absolute Relative
.book-summary { .site-description {
width: 400px ; width: 40% ;
} }
DevTown | Shaurya Sinha
Absolute Relative
px %
m em
in m vw
cm vh
DevTown | Shaurya Sinha
em vw
CSS Relative to the font-size of the element
(2em means 2 times the size of the
current font)
Relative to 1% of the width of the
viewport*
Relative
Units vh %
Relative to 1% of the height of the Relative to the parent element
viewport*
10
DevTown | Shaurya Sinha
px in
CSS pixels (1px = 1/96th of 1in) Inches (1in = 96px = 2.54cm)
Absolute
Units cm mm
Centimetres Millimetre
10
ShapeAI | Shaurya Sinha
CSS Units !!!
For this problem statement, you have to do is type
out the CSS to change.
width to 100px
height to 200px
font-size to 4em
DevTown | Shaurya Sinha
CSS color
Discussion Points
7 DAYS LONG LIVE CLASSES
Basic Web Dev Bootcamp
X X
ShapeAI | Shaurya Sinha
Let's Style an Image
For this problem statement, you have to do is type out
the CSS to change.
add a border
cursor change
box shadow
04
ShapeAI | Shaurya Sinha
Let's Style a Font
For this problem statement, you have to do is type out
the CSS to change.
font-family to Helvetica or Arial or sans-serif
font-size to 60px
to uppercase
underline the text
change the color to RGB 19, 11, 230.
04
ShapeAI | Shaurya Sinha
Let's Style a Page
For this problem statement, you have to do is type out
the CSS to change.
04
ShapeAI | Shaurya Sinha
Let's Style a Page
For this problem statement, you have to do is type out
the CSS to change.
04
ShapeAI | Shaurya Sinha
Stylesheet
What if you wanted to use
the same CSS on more than
one webpage
13
7 DAYS LONG LIVE CLASSES
Basic Web Dev Bootcamp
X X
7 DAYS LONG LIVE CLASSES
Basic Web Dev Bootcamp
X X
ShapeAI | Shaurya Sinha
CODE
What are We
doing up till TEST
now?
REFINE
06
7 DAYS LONG LIVE CLASSES
Basic Web Dev Bootcamp
X X
