Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
45 views

Basics of Web Development

This document outlines a 7 day basic web development bootcamp that will cover HTML, CSS, and JavaScript. It includes sections on the components of a website, how websites can be created in just 10 days, comparisons between HTML and JavaScript, HTML syntax and elements, CSS syntax and units, and using developer tools to explore web pages. Practice problem statements are provided to help students learn and apply concepts related to HTML, CSS, and basic web development.

Uploaded by

Rupam Karmakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Basics of Web Development

This document outlines a 7 day basic web development bootcamp that will cover HTML, CSS, and JavaScript. It includes sections on the components of a website, how websites can be created in just 10 days, comparisons between HTML and JavaScript, HTML syntax and elements, CSS syntax and units, and using developer tools to explore web pages. Practice problem statements are provided to help students learn and apply concepts related to HTML, CSS, and basic web development.

Uploaded by

Rupam Karmakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 73

7 DAYS LONG LIVE CLASSES

Basic Web Dev


Bootcamp
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

You might also like