SlideShare a Scribd company logo
1 of 13
[Day One]
Introduction to course
Course: Web Design and Develop
Date: 2017/05/10
Lecturer: Mohammad Rafi Haidari
Prerequisite Languages
These are a start point for any web developer.
What is HTML
Tim Berners-Lee 1990
HTML= Hyper Text Markup Language
Extension: .htm or .html
Editors: { }
What is CSS
Haakon Wium Lie 1996
CSS = Cascading Style Sheets
Extension: .css
Editors: { }
HTML vs. CSS
Versions of HTML & CSS
Hypertext Markup Language
 HTML 4.01
 XHTML 1.0
 HTML 5
Cascading Stylesheets
 CSS Level 1
 CSS Level 2
 CSS Level 3
Browser Rendering Engine
Inspect Element
It shows you the underlying code of the website, which is a
mix of HTML, CSS and Javascript.
Client-side vs. Server-side
Server Request
Client
Conclusion!
Question?
Thank you!

More Related Content

What's hot

Web-application I’ve always dreamt of (Kharkiv)
Web-application I’ve always dreamt of (Kharkiv)Web-application I’ve always dreamt of (Kharkiv)
Web-application I’ve always dreamt of (Kharkiv)Victor_Cr
 
DNN Summit: Robots.txt & Multi-Site DNN Instances
DNN Summit: Robots.txt & Multi-Site DNN InstancesDNN Summit: Robots.txt & Multi-Site DNN Instances
DNN Summit: Robots.txt & Multi-Site DNN InstancesWill Strohl
 
WooCommerce: Customization Definitions
WooCommerce: Customization DefinitionsWooCommerce: Customization Definitions
WooCommerce: Customization DefinitionsRodolfo Melogli
 
Ember JS - Why Ember Matches My Wavelength
Ember JS - Why Ember Matches My WavelengthEmber JS - Why Ember Matches My Wavelength
Ember JS - Why Ember Matches My WavelengthLohith Goudagere Nagaraj
 
Web application I have always dreamt of (Lviv)
Web application I have always dreamt of (Lviv)Web application I have always dreamt of (Lviv)
Web application I have always dreamt of (Lviv)Victor_Cr
 
Alex Frank, FCP euro, case study @ open commerce conference 2016
Alex Frank, FCP euro, case study @ open commerce conference 2016Alex Frank, FCP euro, case study @ open commerce conference 2016
Alex Frank, FCP euro, case study @ open commerce conference 2016Spark Solutions
 
Scale out magento 2 at aws
Scale out magento 2 at awsScale out magento 2 at aws
Scale out magento 2 at awsroot360 GmbH
 
Dedicated hosting vs shared hosting
Dedicated hosting vs shared hostingDedicated hosting vs shared hosting
Dedicated hosting vs shared hostingsandip543
 
Web Development Services - Web Development Bangalore
Web Development Services - Web Development BangaloreWeb Development Services - Web Development Bangalore
Web Development Services - Web Development Bangaloreakshata agarwal
 
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016Waldek Mastykarz
 
Litespeed hosting
Litespeed hostingLitespeed hosting
Litespeed hostingSean9568
 
Visual Studio Productivity tips
Visual Studio Productivity tipsVisual Studio Productivity tips
Visual Studio Productivity tipsAlex Thissen
 

What's hot (18)

Scaffolding in One Asp.Net
Scaffolding in One Asp.NetScaffolding in One Asp.Net
Scaffolding in One Asp.Net
 
Russia vps
Russia vpsRussia vps
Russia vps
 
Web-application I’ve always dreamt of (Kharkiv)
Web-application I’ve always dreamt of (Kharkiv)Web-application I’ve always dreamt of (Kharkiv)
Web-application I’ve always dreamt of (Kharkiv)
 
DNN Summit: Robots.txt & Multi-Site DNN Instances
DNN Summit: Robots.txt & Multi-Site DNN InstancesDNN Summit: Robots.txt & Multi-Site DNN Instances
DNN Summit: Robots.txt & Multi-Site DNN Instances
 
What are the Types of Websites?
What are the Types of Websites?What are the Types of Websites?
What are the Types of Websites?
 
WooCommerce: Customization Definitions
WooCommerce: Customization DefinitionsWooCommerce: Customization Definitions
WooCommerce: Customization Definitions
 
Ember JS - Why Ember Matches My Wavelength
Ember JS - Why Ember Matches My WavelengthEmber JS - Why Ember Matches My Wavelength
Ember JS - Why Ember Matches My Wavelength
 
Web application I have always dreamt of (Lviv)
Web application I have always dreamt of (Lviv)Web application I have always dreamt of (Lviv)
Web application I have always dreamt of (Lviv)
 
Alex Frank, FCP euro, case study @ open commerce conference 2016
Alex Frank, FCP euro, case study @ open commerce conference 2016Alex Frank, FCP euro, case study @ open commerce conference 2016
Alex Frank, FCP euro, case study @ open commerce conference 2016
 
Html5
Html5Html5
Html5
 
Scale out magento 2 at aws
Scale out magento 2 at awsScale out magento 2 at aws
Scale out magento 2 at aws
 
Dedicated hosting vs shared hosting
Dedicated hosting vs shared hostingDedicated hosting vs shared hosting
Dedicated hosting vs shared hosting
 
Web Development Services - Web Development Bangalore
Web Development Services - Web Development BangaloreWeb Development Services - Web Development Bangalore
Web Development Services - Web Development Bangalore
 
HTML5
HTML5HTML5
HTML5
 
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
 
Litespeed hosting
Litespeed hostingLitespeed hosting
Litespeed hosting
 
Visual Studio Productivity tips
Visual Studio Productivity tipsVisual Studio Productivity tips
Visual Studio Productivity tips
 
WebMatrix
WebMatrixWebMatrix
WebMatrix
 

More from Rafi Haidari

Lecture9 web design and development
Lecture9 web design and developmentLecture9 web design and development
Lecture9 web design and developmentRafi Haidari
 
Lecture8 web design and development
Lecture8 web design and developmentLecture8 web design and development
Lecture8 web design and developmentRafi Haidari
 
Lecture7 web design and development
Lecture7 web design and developmentLecture7 web design and development
Lecture7 web design and developmentRafi Haidari
 
Lecture6 web design and development
Lecture6 web design and developmentLecture6 web design and development
Lecture6 web design and developmentRafi Haidari
 
Lecture5 web design and development
Lecture5 web design and developmentLecture5 web design and development
Lecture5 web design and developmentRafi Haidari
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and developmentRafi Haidari
 
Lecture3 web design and development
Lecture3 web design and developmentLecture3 web design and development
Lecture3 web design and developmentRafi Haidari
 
Lecture2 web design and development
Lecture2 web design and developmentLecture2 web design and development
Lecture2 web design and developmentRafi Haidari
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)Rafi Haidari
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)Rafi Haidari
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)Rafi Haidari
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Rafi Haidari
 
Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)Rafi Haidari
 
HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)Rafi Haidari
 

More from Rafi Haidari (17)

Lecture9 web design and development
Lecture9 web design and developmentLecture9 web design and development
Lecture9 web design and development
 
Lecture8 web design and development
Lecture8 web design and developmentLecture8 web design and development
Lecture8 web design and development
 
Lecture7 web design and development
Lecture7 web design and developmentLecture7 web design and development
Lecture7 web design and development
 
Lecture6 web design and development
Lecture6 web design and developmentLecture6 web design and development
Lecture6 web design and development
 
Lecture5 web design and development
Lecture5 web design and developmentLecture5 web design and development
Lecture5 web design and development
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and development
 
Lecture3 web design and development
Lecture3 web design and developmentLecture3 web design and development
Lecture3 web design and development
 
Lecture2 web design and development
Lecture2 web design and developmentLecture2 web design and development
Lecture2 web design and development
 
Bootstrap day3
Bootstrap day3Bootstrap day3
Bootstrap day3
 
Bootstrap day2
Bootstrap day2Bootstrap day2
Bootstrap day2
 
Bootstrap day1
Bootstrap day1Bootstrap day1
Bootstrap day1
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)
 
Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)
 
HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)
 

Recently uploaded

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsHyundai Motor Group
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 

Recently uploaded (20)

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 

Lecture1 Web Design and Development