Scribd
Upload
8 views

Lecture 2

Web development lecture slides for CSS

Uploaded by

engrqamarzahoor
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Lecture 2

Web development lecture slides for CSS

Uploaded by

engrqamarzahoor
Copyright
© © All Rights Reserved
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