Scribd
Upload
11 views

Lecture 1

Web development lecture slides for HTML

Uploaded by

engrqamarzahoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Lecture 1

Web development lecture slides for HTML

Uploaded by

engrqamarzahoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

FRONT-END

WEB By Qamar
Zahoor
DEVELOMENT
COURSE OUTLINES

• Introduction to Web Development


• Fundamentals of Front-End Development
• Advanced Techniques in HTML5 and CSS3
• Introduction to JavaScript (JS)
• Essential Front End Tools and Best Practices
• Additional Topics to Consider
• Interactive Tasks to strengthen your skills
LECTURE # 1

Fundamentals of Front-end Development


OUTLINES

• Introduction to Web Development?


• Overview of Front-End Development?
• HTML Basics (Structure, Tags)
• CSS Basics ( Selectors, Box Model)
• Basic Layout Techniques
• Creating A Web Page Exercise
INTRODUCTION OF
WEB DEVELOPMENT
WEB DEVELOPMENT

• It actually refers to develop a website for Internet


• Also known as Web Programming
• Types of Web Development
 Front End Development (client-side)
 Back End Development (server-side)
 Full Stack Development (Both)

Examples: E-commerce Website, Social Media Sites, Portfolios


OVERVIEW OF
FRONT-END DEVELOPMENT
FRONT-END WEB DEVELOPMENT
(CLIENT-SIDE)

• It produces a Web Application which a user can see and


interact.
• It also refers to visual elements of website.
• Common Technologies used :
• HTML
• CSS
• JavaScript
HTML BASICS
(STRUCTURE, TAGS)
HTML

•It stands for Hyper Text Markup Language


•It was created by Tim Berners-Lee in 1989
•Hyper Text means Linked Text allowing
navigation
•Markup means tags that defines structure
of document
•HTML document is written with .html
extension
STRUCTURE
OF HTML
HTML TAGS

• HTML tags are used to structure and format content on web pages
• Types of Tags :
 Opening & Closing Tags
 Self-Closing Tags
 Container Tags
 Empty Tags
 Block-level Tags
 Semantic Tags
 Inline Tags
 Form Tags
 List Tags
 Table Tags
HTML TAGS
Types of Tags
 Opening & Closing Tags : <p>…</p> , <h1>…</h1>, <div>…</div>
 Self-Closing Tags : <img> , <br> ,<hr>
 Container Tags : <div>…</div>, <span>…</span>
 Empty Tags : <input>
 Block-level Tags : <h6>…</h6>,<p>…</p>,<ul>…</ul>
 Semantic Tags :
<header>…</header>,<footer>…</footer>,<section>…<section/>
 Inline Tags : <a>…</a>,<strong>…</strong>,<em>…</em>
 Form Tags : <form>…</form>,<input>,<button>…</button>,<label>…
</label>
 List Tags : <ul>…</ul>, <ol>…</ol>, <li>…</li>
 Table Tags : <table>…</table>, <tr>…</tr>,<th>…</th>,
<td>…</td>
CSS BASICS
( SELECTORS, BOX-MODEL)
CSS

•It stands for Cascading Style Sheet


•It was proposed by Hakun Wium Lie in 1996
•It manages the look and layout of web pages
•Cascading allows for layered and overriding
styles
•CSS document is written with .css extension
CSS SYNTAX AND PROPERTIES

How to Add CSS?


Three Ways to Add CSS:
• Internal CSS
• Inline CSS
• External CSS
CSS SELECTORS
• CSS selectors are patterns used to select and style HTML elements. They allow you to
apply styles to specific elements or groups of elements in an HTML document
• Types of Selectors:
 Universal Selector : ( * )
 Type Selector: ( p, h1 )
 Class Selector: ( . )
 ID Selector : ( # )
 Descendant Selector (space) : ( nav a)
 Child Selector : ( ul > li )
 Adjacent Sibling Selector : ( h1 + p)
 General Sibling Selector : ( h2 ~ p)
 Attribute Selector : ( [ attribute ] | input[type = “text” ] )
 Pseudo-class Selector : ( :pseudo-class | a:hover )
 Pseudo-element Selector : ( : : pseudo-element | p: :first-letter )
COMMENTS IN HTML & CSS

HTML
Single line Comments: < ! -- Single-line comment - -
>
Multi-lines Comments: < ! -- Multi-line comment - - >

CSS
Single line Comments: /* single-line */
Multi-line Comments: /* multi-line */
CSS BOX-MODEL
CSS BOX-MODEL

Content : The content of the box, where text and


images appear
Padding : Clears an area around the content. The
padding is transparent
Border : A border that goes around the padding
and content
Margin : Clears an area outside the border. The
margin is transparent
BASIC LAYOUT
TECHNIQUES
HTML
LAYOUT
HTML LAYOUT

<header> : Defines a header for a document or a section

<navbar> : Defines a set of navigation links

<section> : Defines a section in a document

<article> : Defines an independent, self-contained content

<aside> : Defines content aside from the content (like a sidebar)

<footer> : Defines a footer for a document or a section


HTML LAYOUT TECHNIQUES
There are 4 different techniques of HTML Layout

• CSS FramWork
• CSS FlexBox
• CSS Grid
• CSS Float Property
PRACTICE EXERCISE
THANK YOU

You might also like