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
