Class:01

Whats We will learn in this class:

What is a website?
History of website.
What is web design and development?
Code editor
❖ What is a website?
➢ Definition: A group of World Wide Web pages usually containing hyperlinks to
each other and made available online by an individual, company, educational
institution, government, or organisation.
➢ Types of website:
■ Static website: Static web pages are made of “fixed code,” and unless
the site developer makes changes, nothing will change on the page.
■ Dynamic website : a website containing data that can be mutable or
changeable.

Tim Berners-Lee. Computer scientist

❖ History of website.
➢ Launch:
■ August 6, 1991,
➢ Who:
■ Tim Berners-Lee. Computer scientist
■ The European Organization for Nuclear Research
➢ Why:
 ■ Data share
➢ First website: http://info.cern.ch/hypertext/WWW/TheProject.html
❖ What is web design and development?
➢ Web design:
■ Definition :the design of websites
■ that are displayed on the internet
■ Parts of web design
● UI: user interface
● UX: User experience
➢ Web development
■ Definition: developing a website for the Internet.
■ Parts of Web Development
● Front-end Development:
◆ Client side: everything in a web application that is displayed
or takes place on the client.
◆ Requirement: HTML, CSS, JS
● Backend development
◆ Server side: everything that happens on the server, instead
of on the client
◆ Any programming language, Such as PHP, python etc.
❖ Code editor setup:
➢ Visual studio code : we will use this.
➢ Notepad++
➢ Atom
➢ Sublime
Class:02

Whats We will learn in this class:

● What is HTML?
● History of HTML.
● What is HTML tag?
● What tags we will learn today?

❖ What is a HTML?
➢ HTML stands for Hyper Text Markup Language.
➢ HTML is the standard markup language for creating Web pages.
➢ HTML describes the structure of a Web page.
➢ HTML elements tell the browser how to display the content.
Tim Berners-Lee. Computer scientist

❖ History of HTML.
➢ Launch:
■ 1993,
➢ Who:
■ Tim Berners-Lee. Computer scientist
■ The European Organization for Nuclear Research
➢ Why:
■ Data share
➢ First website: http://info.cern.ch/hypertext/WWW/TheProject.html
 ❖ What is HTML tag?
➢ HTML:
■ Definition :An HTML tag is a piece of markup language used to indicate the
beginning and end of an HTML element in an HTML document.
■ Example: <h1> Hello world</h1>
❖ What tags we will learn today?
HTML File Creation.
➢ Heading, ⇒ <h1>------<h6>
➢ Paragraph ⇒<p>
➢ Anchor ⇒<a>
➢ Superscript⇒ <sup>
➢ Subscript <sub>
➢ Bold<b>
➢ Italic <i>
➢ Underline <u>
➢ Mark <mark>
➢ Table
■ table tr,
■ td,
■ rowspan,
■ colspan
➢ Form (Input type)
■ Text
■ Number
■ Email
■ Password
■ Reset
■ submit
Class:03

Whats We will learn in this class:

● What is CSS?
● History of CSS.
● Types of CSS
● Important Property of CSS
❖ What is a HTML?
➢ CSS is represented by Cascading Style Sheets that help us to design HTML
elements.
 Hakon Wium Lie

❖ History of CSS.
➢ Launch:
■ 1994 ⇒ proposed the idea of CSS.
■ 1996 ⇒ The first version of CSS was invented.
■ 1998 ⇒ CSS 2 was released and work on CSS 3 began.
■ 1999 ⇒ CSS3 was released
➢ Who:
■ Hakon Wium Lie
■ YesLogic
➢ Why:
■ To style html Structure
➢ Website of wium lie: https://www.wiumlie.no/en.html
❖ Types of CSS
➢ Internal CSS
■ Which is write on HTML file into head tag.
➢ External CSS
■ Which is write on another CSS file and link up with HTMl file.
❖ Important Part for wbsite
➢ Section
➢ Div
➢ Selector
■ Id
■ Class
■ Nested
■ Tag selector
➢ image
 ❖ Important Property of CSS
➢ Color
➢ Font size
➢ Text align
➢ Height
➢ width
➢ Background
■ Background image
■ Gradient background
■ Background overlay
➢ Padding
■ Padding top
■ Padding bottom
■ Padding left
■ Padding right
➢ Margin
■ Margin top
■ Margin bottom
■ Margin left
■ Margin right
➢ Box shadow
■ H V blur color
➢ Hover
➢ Border
■ Border
■ Border radius Class:04
Whats We will learn in this class:
● What is Bootstrap?
● History of Bootstrap.
● Bootstrap container ,row , column
● Planning of website
❖ What is Bootstrap?
➢ Bootstrap is the most popular CSS Framework for developing responsive and
mobile-first websites.
➢ Framework of CSS
■ Bootstrap. ...
■ Tailwind CSS. ...
■ Foundation. ...
■ Bulma. ...
■ Skeleton.
❖ History of CSS.
➢ Launch:
■ 2010 ⇒ Created Bootstrap.
➢ Who:
■ Mark Otto
■ Jacob Thornton
➢ Why:
■ to improve the uniformity of tools used on the site and reduce maintenance
costs for the site.
➢ Bootstrap website link: https://getbootstrap.com/
—----------------break—--------------
➢ Html5 then press enter
❖ Bootstrap container ,row , column
➢ Container
➢ Row
➢ Column
❖ Follow these sequence:
➢ Section > container > row > column
❖ Planning of website: https://websitedemos.net/agency-02/
➢ Colors
■ #6878d5
■ #242a56
■ #393a56
■ #eef1fe
■ #eff2fe
■ #242a56
■ Color picker:
https://quick-html-color-picker.en.uptodown.com/windows/download
➢ Fonts
■ whatfont:
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaab
lpmlmfcogm?hl=en
■ Google font: https://fonts.google.com/
■ Poppins
■ Open sans
➢ Icons
■ Font awesome: https://fontawesome.com/
■ CDN:https://cdnjs.com/libraries/font-awesome
■ Edit
■ Group
■ Paper plane
■ Lightbilb
■ Credit card
■ User circle
■ social
➢ Images
■ CSS peeper:
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnai
dhjhoofhpehk?hl=en
■ done
➢ Sections
■ Banner #Service #Portfolio #Testimonial #Team #Call to action $Footer