What is website development?
Website development is the process of designing, building, and maintaining a website.
Web design is the process of creating a website from start to finish. This includes coming up
with the idea for the website, designing the website's layout and graphics, developing the website's
content, and ensuring that the website is accessible and user-friendly.
Web Development Basics
To get started in web development, you need to understand some basic concepts. Start by learning
about HTML, CSS, and JavaScript.
What is HTML?
HTML is the foundation of all websites. It's a simple markup language that allows you to style your
website's content and structure. You can use HTML to create pages with text, photos, videos,
and embedded objects (like ads).
What is CSS?
CSS is a powerful tool for styling your website's text , images , and video . You can use CSS to
change the color, size, and layout of your website's elements.
JavaScript is a programming language that you can use to create interactivity in your websites. You
can use JavaScript to add buttons, menus, pop-ups, and other features to your website.
Types of Web Development
There are three main types of web development: front-end development, back-end development,
and full stack development.
Front-end development
Front-end development is the process of designing, building, and testing the visual part of a web
or mobile application. Front-end developers create interfaces that are used by users to
interact with a system. They work with both visual and functional design, as well as user
experience and accessibility.
Front-end development can involve a variety of programming languages, design tools, and testing
frameworks. Some common front-end development tasks include the following:
1. Designing and developing graphical user interfaces (GUIs).
2. Developing and testing web pages using HTML, CSS, and JavaScript.
3. Developing responsive designs for varying screen sizes.
4. Building custom animations and 3D effects for websites or applications.
5. Conducting usability tests to evaluate the effectiveness of a website or application's user
interface.
Back-end development
Back-end development is the process of designing, coding, and testing the functionality of a web
application's back-end - the part of the system that handles requests from users and interacts
with databases. This includes everything from developing the system's architecture to writing
code to support user authentication and data storage.
Back-end developers work in close collaboration with front-end developers, who design and create
the user interface for a website or app. Together, they form the entire front-end/back-end
development pipeline.
If you want to become a back-end developer, you will need to have strong programming skills
and knowledge of web technologies such as HTML, CSS, JavaScript, and PHP. You will also need
to be comfortable working in a collaborative environment and be able to work independently as
well as adhere to deadlines.
Full-stack development
Full-stack development is the process of developing a web application from start to finish, including
the design, development, testing and deployment of all the necessary components. This includes
everything from the back-end to the front-end, and can be done using a variety of languages and
frameworks. Full-stack development is becoming more and more common in today's world, as it
offers developers the ability to build applications in a more holistic way that allows for greater
flexibility and efficiency.
The Website Development Process
Website development can be broken down into four main steps: Research, Design, Development,
and Testing.
1. Research - Once you've determined what you want your website to look like and what features
you need, it's time to do some research. This includes reading online articles, visiting different
websites, and talking to friends and family about what they think would be a good website for your
business.
2. Design - After you've gathered your research material, it's time to start designing your website.
This phase involves creating a layout, developing graphics and logos, and creating content. It's
important to remember that the design of your website should be consistent with the look and feel
of your brand.
3. Development - Once the design is finalized, it's time to start coding! This phase involves creating
the actual website codebase and working on features such as pages, menus, widgets, etc. Make sure
to test your website frequently in order to ensure that everything is working as intended.
4. Testing - Once development is complete, it's time to test the site by loading it with users and
checking for any possible errors. Make sure to correct any problems before you release the site to
the public
What are the skills required to become a web developer?
As a web developer, you will need to be able to understand the basics of HTML, CSS, and JavaScript.
Additionally, you will need to be familiar with a variety of front-end development frameworks such
as Bootstrap or Foundation. Finally, you will need to be skilled in managing and deploying web
applications.
What is 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 consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is
a link", etc.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display
them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: The content inside the <body> section will be displayed in a browser. The content inside the
<title> element will be shown in the browser's title bar or in the page's tab.
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="[Link] is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="[Link] is a link</a>
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src="[Link]" alt="[Link]" width="104" height="142">
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="[Link]" alt="[Link]" width="104" height="142">
</body>
</html>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="[Link] W3Schools</a>
</body>
</html>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the
image to be displayed:
Example
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="[Link]
Notes: External images might be under copyright. If you do not get permission to use it, you may be
in violation of copyright laws. In addition, you cannot control external images; it can suddenly be
removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include
the domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height
of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for
some reason cannot be displayed. This can be due to a slow connection, or an error in
the src attribute, or if the user uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
Example
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>
Chapter Summary
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal
rule.
The <hr> tag is an empty tag, which means that it has no end tag.
The <hr> element is used to separate content (or define a change) in an HTML page:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
The <br> tag is an empty tag, which means that it has no end tag.
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
The Poem Problem
This poem will display on a single line:
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves
both spaces and line breaks:
Example
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.
Background Color
The CSS background-color property defines the background color for an HTML element.
Example
Set the background color for a page to powderblue:
Example
Set background color for two different elements:
Text Color
The CSS color property defines the text color for an HTML element:
Example
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
Chapter Summary
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP",
"ATM".
Marking abbreviations can give useful information to browsers, translation systems and search-
engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you
mouse over the element.
Example