L1.

Understanding the Internet and the World Wide Web

Internet Basics
- The first step in a thousand step journey.
- The Internet is a global computer network providing a variety of information and
communication facilities, consisting of interconnected networks.

A Network is a group of computer that are joined. It is called NET because the wires that join
the computers resembles like a net. Network lets you share work with other users at their
computers.
LAN / Local Area Network
- Network in a small area
WAN / Wide Area Network
- Network in a wide area
Internet
- Network spread Internationally

Uses of the Internet:

● Web Apps
● Email
● Social Networks
● Chat
● Blogs
● News Groups
● World Wide Web
● FIle Transfer Protocol

History of the Internet

- Listen to how it all started.
- The Internet started off as a military research project in the 1960’s. The internet was used to
help soldiers share information during the Cold war.
But there’s a problem…
When one Computer goes down…the rest goes down
The Goal was to make a network of Computers, so that if one computer was broken, Other
Computers could still share the information.
It eventually evolved to the internet we know today.

The internet has its history anchored on the project started by the United States Government
called DARPA (Defense Advanced Research Projects Agency) which is an agency of the US
department of Defense for the development of new technology for military use which was
established in 1958 formerly known as ARPA (Advanced Research Projects Agency) then
headed by J.C.R Licklider in 1962.

Robert Taylor as head of the information processing office in DARPA with Larry Roberts from
MIT initiated the project called ARPANET to build a working comput

ARPANET
- the pioneering technical contributor to what we know today as the Internet.
- The computers from different locations basically become hosts, operating as the server that
provides services and communication to other computers in the network.

“It’s been my goal to work as much as possible, and be as unknown as possible” –

Robert Taylor

WORLD WIDE WEB ( WWW )

- a group of webpages that are joined together to make a web of information joined together by
hyperlinks.
Every Hyperlink has a URL or Uniform Resource Locator.
Every URL begins with https. Or Hypertext transfer Protocol. This indicates that you want to
view a file on the internet.
After the site there’s a domain name.
Examples Domain Names
● .Com - Commercial
● .Gov - Government
● .edu - Education
● .org - Organization
● .net - Network
● .us or .ph - Country Name
- started in 1989 by English Physicist Sir Tim Berners-Lee.
- An organization called the World Wide Web Consortium (W3C) at Massachusetts Institute of
Technology founded and still headed by lee and participated in by several companies who are
willing to create standards and ways to improve the quality of the Web.
- W3C aims to provide access to the World Wide Web on the principle of no patent, no royalty
due, and easily adoptable by everyone. W3C has set the standards for HTML, XHTML, CSS,
and many other internet programming languages and application.
“The web does not just connect machines, it connects People.” –
Sir Tim Berners - Lee
ACCESSING THE WEB
- The most common means of accessing the internet is through the use of telephone lines.
- They existed before computer communications and are widely available worldwide.
- Other methods of internet connectivity have been introduced to complement the telephone
lines.
Accessing the Web:
● Dial up Connection
● Digital Subscriber Line (DSL)
● Fiber Internet
● Cable Internet
● Wireless internet
● Dedicated line

WEB BROWSERS
- A website must be tested and viewed using the browsers that are commonly used by users
worldwide to ensure its functionality.
- Each browser has its own set of default settings for fonts, backgrounds, and so on.
Web Browsers:
● Internet Explorer
● Microsoft Edge
● Mozilla Firefox
● Safari
● Google Chrome
● Opera

TYPES OF WEBSITES
1. Web 1.0 or Static Sites
- When the world wide web was invented, most web pages were static. Static (also known as a
flat page or stationary page) in the sense that the page is “as is” and cannot be manipulated by
the user.
- The content is also the same for all users. This is referred to as Web 1.0. However, the World
Wide Web is more than static pages, soon the Web 2.0 came to the picture.
2. Web 2.0 or Dynamic Sites
- Web 2.0 is the evolution of Web 1.0 by adding dynamic webpages, the user is able to see a
website differently from others. Examples of such websites includes social networking sites,
blogs, wikis, video sharing sites, hosted services, and web applications.
- Web 2.0 allows users to interact with the page, instead of just reading a page, the user may be
able to comment or create a user account.
3. Web 3.0 or Semantic Sites
- The aim of Web 3.0 is to have machines understand the user’s preferences to be able to
deliver web content specifically targeting the user.
- This is through studying personal preferences of an individual user and showing results based
on those preferences. The internet is able to predict the best possible answers to your
queries by “learning” from your choices.
L2. PLANNING AND DESIGNING A WEBSITE

Web Development Process:

● Information Gathering
● Planning and Scoping
● Wireframe and site-mapping
● Content Development
● Visual Elements
● Testing
● Launching

1. Information Gathering
- In this initial stage, the designer needs to identify the end goal of the website design, usually in
close collaboration with the client or other stakeholders.
● Who is the site for?
● What do they expect to find or do there?
● Is this website’s primary aim to inform, to sell (ecommerce, anyone?), or to amuse?
● Does the website need to clearly convey a brand’s core message, or is it part of a wider
branding strategy with its own unique focus?
● What competitor sites, if any, exist, and how should this site be inspired by / different
than, those competitors?
2. Planning and Scoping
- One of the most common and difficult problems plaguing web design projects is scope creep.
- The client sets out with one goal in mind, but this gradually expands, evolves, or changes
altogether during the design process — and the next thing you know, you’re not only designing
and building a website, but also a web app, emails, and push notifications.

3. Wireframe and Site-mapping

- The sitemap provides the foundation for any well-designed website. It helps give web
designers a clear idea of the website’s information architecture and explains the relationships
between the various pages and content elements.
- The next step is to find some design inspiration and build a mockup of the wireframe.
- Wireframes provide a framework for storing the site’s visual design and content elements, and
can help identify potential challenges and gaps with the sitemap.
4. Content Development
- Once your website’s framework is in place, you can start with the most important aspect of the
site: the written content.
The Content of your Website serves two purposes.
Engagement and Action
Search Engine Optimization or SEO

● Engagement and Action

- Content engages readers and drives them to take the actions necessary to fulfill a site’s goals.
This is affected by both the content itself (the writing), and how it’s presented (the typography
and structural elements).
● Search Engine Optimization
- Content also boosts a site’s visibility for search engines. The practice of creation and
improving content to rank well in search is known as search engine optimization, or SEO.
5. Visual Elements
- This part of the design process will often be shaped by existing branding elements, color
choices, and logos, as stipulated by the client.
- But it’s also the stage of the web design process where a good web designer can really shine.
6. Testing
- Thoroughly test each page to make sure all links are working and that the website loads
properly on all devices and browsers.
- Errors may be the result of small coding mistakes, and while it is often a pain to find and
them, it’s better to do it now than present a broken site to the public.
7. Launching
- Now it’s time for everyone’s favorite part of the website design process: When everything has
been thoroughly tested, and you’re happy with the site, it’s time to launch.
- Don’t expect this to go perfectly. There may be still some elements that need fixing. Web
design is a fluid and ongoing process that requires constant maintenance.

Important Things to Consider

● Accessibility
- It is important for users to access a
website anywhere or even in the oddest
hour of the day.
● Convenience
- Make sure a website is developed to
ease things up.
● Credibility
A website is the most credible platform of a company.
● Navigation
Website navigation helps the client understand what a website is all about.
Creating Sitemaps and Wireframes
Wireframe
● A wireframe is a visual guide that represents the
skeletal framework of a website. It is the web
developer’s equivalent of a blueprint.
● A very well planned wireframe can reduce the
time in creating your website but also provide a
concrete visual representation of your site and
its goals.

Designing a Webpage
● To start your very own webpage, one should
start first with creating the website wireframes.
● Website wireframes are simple line drawing that
help you visualize the placement of elements on
your webpage

Why is it Important?
● Instigate Layout and structure
● Create an informational hierarchy
● Focus on User Experience
● Clarifying Features
● Save time
Layout and Structure
- Working on responsive web design wireframes enables the designer and the client to work on
a single platform for creating a solid page structure before full implementation of the design.
Informational Hierarchy
- Responsive web design wireframes also helps the companies to focus on the crucial elements
of navigation and information.
The creators can ask themselves what they want their users to do when they visit their website.
User Experience
- With the elimination of imagery, colors, and other details a designer becomes much enabled
to think on the functionality of each of the element used.
This allows the designer to focus on developing the best user experience.
Clarifying Features
- Wireframes in website design help you in determining which features are wanted on a website
and which elements are needed in the early stages of development.
Sometimes you may choose to remove a feature as soon as it has been wireframed. As you can
see that it simply doesn’t help towards the goals of your website
Saving Time
- One of the benefits of wireframing is that it saves time.
While it may seem like more effort to dedicate a few days to produce a full set of wireframes as
it actually saves time throughout the project’s lifecycle.
L3. WEBSITE DESIGN PRINCIPLES

Basic Design Principles

- There are lots of articles and books available online about web design principles. This
principles help designers how to put on elements on the website in an effective manner.
● Balance
● Contrast
● Emphasis
● Rhythm
● Unity
● Proximity
● White spaces
● Alignment
Balance
- Refers to the distribution of elements across the design. This is achieved through the layout.
- It is said that the position of elements on the page is a factor in determining how balanced a
webpage appears.
- A common way of balancing a layout symmetrically is to put the element on the center of a
webpage.
Contrast
- Refers to the accentuation of the differences between elements in a design - not only in colors
but also to font sizes and other design elements.
- Applying different sized images and elements also achieves contrast. Perhaps, for example,
you have a block of text that is the main focus of a page, the tip is to make the section for that
larger and all the surrounding elements and images small.
Emphasis
- Refers to distinguishing important elements in web design.
- Using semantic markups such as <h1> through <h6>, <p>, list elements <ol> and
<ul>, etc will provide some emphasis even with no styles
Rhythm
- Also known as repetition. Develop an internal consistency that makes it easier for users to
understand the web design.
Unity
- Related elements are close to one another while elements that are farther apart are less
related.
- To achieve unity, you must place your content into logical groups where users can easily
navigate through your design
- Placement of elements in your layout plays a big factor in applying unity in your web design.
Proximity
- This is the placement of elements with logical relationship close to each other.
- Proper arrangement of related elements would facilitate user interaction and understanding of
the web site. Proximity helps avoid clutter on a web page.
White Spaces
- These are the blank spaces which are placed around web page elements which allow
readability of important texts and draw attention to images on the web site.
- White spaces also help organize the site to emphasize major topics over details and
encourage site navigation.
Alignment
- The proper arrangement and positioning of the elements of the web site.
- Proper alignment of the web page elements will facilitate viewing, reading and navigating on
the web site.

Essential Elements of Web Contents

● Accuracy
● Readability
● Understandable
● Concise
● Ethical and Legal

Accuracy
- Ensures the readability of the information you publish on the web site. Obsolete information
may indicate a perception of inaccuracy of the site and will discourage return of the audience.
- Spelling and grammar checking should be done on a web site because any error in grammar
of spelling can diminish the credibility as well.
Readability
- Designing and composing the content of the web pages making them easily accessible and
readable by the web audience.
- Use headings, subheadings, tables, lists and emphasized words so that a web audience will
be able to read the message with clarity.
Understandable
- This is presenting the contents of the web page in a way the web viewer will easily
comprehend.
Concise
- Use the least amount of words to convey a message on the internet.
- Using bulleted and numbered lists will shorten information rather than presenting them in a
paragraph form.
Ethical and Legal
- Publishing a website that will not get you in any legal trouble. Use content that you have
licensed or created yourselves.
- Likewise, protect your work by placing a copyright and your name on it.
IMPORTANCE OF A GOOD WEB DESIGN
● When users visit a website, the first thing that they see and notice is the design.
● Large percentage of internet users leave a website quickly if it is not appealing, outdated
or takes too long to load.
● A website beads to be designed in a way that makes it user-friendly.
● Good navigation is key, as it will not only keep people on a website, but will also help
them find what they seek and keep them coming back.
● The website needs to be modern and up to date in order to captivate users. It is
recommended to redesign and update a website every 2 to 5 years.

I want to build my own website:

● Before, developing a website seem to be a very complicated and impossible task
especially to those who are not really into coding. It also involves plenty of planning and
collaboration between teams.
● Luckily, in the modern era, there are lots of tools that aspiring designers and developers
can use in creating a working and good looking website.