Scribd
Upload
15 views19 pages

Lecture 2

Web development lecture slides for CSS

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
15 views19 pages

Lecture 2

Web development lecture slides for CSS

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/ 19

FRONT-END

WEB By Qamar
Zahoor
DEVELOMENT
LECTURE # 2

Advanced Techniques in HTML & CSS


OUTLINES

• CSS for Styling ( Font, Colors, Units etc.)


• Enhancing Layouts with FlexBox
• Enhancing Layouts with Grid
• Responsive Web Design (using Media Queries)
• Overview of CSS Frameworks (Tailwind CSS, Bootstrap)
• Creating A Responsive Web Page Exercise
CSS FOR STYLING
(FONTS, COLORS, UNITS)
CSS STYLING
• To style the HTML elements , We use different CSS properties
• Properties of CSS
 Colors, BgColors
 Fonts(Units)
 Box Model ( Padding , Border, Margin)
 Height/Width
 Lists & Table Properties
 Display Properties (Block-level, Inline)
 Position Properties
 Form in HTML & CSS
 !Important Property
 Image Properties
 CSS Variables
ENHANCING LAYOUT WITH
FLEXBOX
FLEXBOX LAYOUT

• There is flex-container and then flex item in it.


• FlexBox Container Properties :
• Flex-direction, Flex-Wrap,Flex-Flow
• Justify-content, align-items,align-content

• FlexBox Item (Child Element) Properties :


• Order, Flex-grow, Flex-shrink
• Flex-basis, Flex, Align-Self
ENHANCING LAYOUT WITH
GRID
GRID LAYOUT

• There is Grid-container and then Grid-item in it.


• Grid-Container Properties :
• Grid, Inline-Grid, Grid-template-columns, Grid-template-rows
• Justify-content, align-content

• Grid-Item (Child Element) Properties :


• Grid-columns, Grid-rows, Grid-area,Gap
• Flex-basis, Flex, Align-self
RESPONSIVE WEB DESIGN
( USING MEDIA QUERIES )
RESPONSIVE WEB DESIGN

• It makes web page look good for all devices ( desktop,


tablet, mobile)
• It uses only HTML & CSS , NO Js Needed for this.
VIEWPORT SETTINGS

• The viewport is the user’s visible area of a web page.


• The viewport varies with device & will be smaller on
mobile screen than desktop

• Width=device-width : sets the width of page to follow


screen-width of device
• Initial-scale=1.0 : sets the initial zoom level when page
is first loaded by the browser
VIEWPORT META TAG IMPORTANCE
MEDIA QUERIES

• It is a CSS technique introduced in CSS3


• It uses the @media rule to include a block of CSS
properties only if certain condition is true.
• Different Break Points:
• @media (max-width : 479.98px) : Extra Small devices (phones)
• @media (min-width: 480px) and ( max-width : 575.98px) : Phones & Up
• @media (min-width: 576px) and ( max-width : 767.98px) : Tablets& Up
• @media (min-width: 768px) and ( max-width : 991.98px): Tablets & Up
• @media (min-width: 992px) and ( max-width : 1199.98px) : Desktops & Up
• @media (min-width: 1200px) : Extra large devices & Up
OVERVIEW OF CSS
FRAMEWORKS
(TAILWIND
CSS,BOOTSTARP)
CSS FRAMEWORKS

• Pre-prepared libraries that are designed to simplify the process of web


development by providing standardized styles and components.
• Offers a consistent structure and set of design rules.
• Help developers to build quickly responsive designs and reduce
development time.
• Different CSS Frameworks:
• Tailwind CSS: Extra Based on Utility Classes offer extensive customization
• Bootstrap: Based on comprehensive toolkit with responsive components
• Bulma: Based on flexbox with modern and clean code design
• Foundation: Based on Grid with different UI components
• Further Frameworks:
• Semantic UI, Pure CSS , Materialize
TAILWIND CSS

• Utility first CSS framework for building


rapid custom UI.
• Low-level CSS framework that give all
building blocks needed.
• It written as inline CSS with different
defined classes.
• ADD Tailwind CSS in HTML: we can
use CDN link in out HTML or we can
install all packages using npm
• Example:
PRACTICE EXERCISE
THANK YOU

You might also like