We use the Internet for various purposes like Banking, Shopping, Ticket Booking, Music/Entertainment, and Social Media, but do you know how the web works? Here I introduce the technology that makes the web run, the terminology involved, and how it all comes together to power the websites we know and love. Will cover various terms/technologies involved like (HTML, CSS, JavaScript, URL, DNS, HTTP), and explains what separates the front end (what we see) from the back end (what we don't) on the web, databases, servers and the technology that makes the web work.
- Course introduction
- Introduction to web world
- Introduction to Front-End technology
- Introduction to Back-End technology
- Other supporting technologies
- What's the next Step?
Hi All, I'm Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to Web Design Development Foundation-Web Technology Fundamentals. This content is designed to introduce the fundamental concepts, surrounding terminology, technology, techniques, terms that are used to create and run the web. For anyone new to the web the vast number of terms, abbreviations, and processes involved can be a little bit overwhelming, disturbing. It's my goal to explain in the core, basic terms how the web works, Client, Servers, Browsers, Front End, Back End, and various terminology involved, also how the technology all fits together.
This course contents roadmap to becoming a Web Designer/Developer.
This course is for every Web/Internet User, fresher as well as an experienced Web Designer/Developer who wants to learn-brush up-cover up various terms/techniques/acronyms/abbreviations used in Web/Internet Design/Development world.
Massive networks of millions of computers all over the world that use to share and transmit information through the following protocols/mediums:
- Sms messaging
- Application data
- World Wide Web
- Runs over the Internet
- Transfer data using HTTP (HyperText Transfer Protocol)
Communication/series of interactions between Clients & Servers
Devices that request and render web content. Some of the popular clients are Browsers, Mobile Apps, Screen Reader Devices, etc
Applications that deliver Web Contents, Services to Clients
- The browser is Software/application that helps to visit, view, accessing information, and make/take the best use of websites/web pages
- Popular browsers are:
- Google Chrome
- Mozilla Firefox
- Internet Explorer
- Safari
- Opera
  Â
Syntax & Example:
1. User Type in 'URL (Uniform Resource Locator)' like 'http://www.yahoo.com' ->
2. URL passed to 'DNS (Domain Name Server)' ->
3. DNS translates URL into 'IP (Internet Protocol)' address ('172.16.0.0') ->
4. Browser use DNS to locate host server and send request of content (in the form of HTML page, Images, CSS, JavaScript)
  Â
Simply shows content (which is not change frequently) requested by the client without any additional processing (Static sites pages usually consists of Front end technologies like HTML, CSS, JavaScript)
First Business Logic execute by Web Applications like ASP, PHP, Ruby on Rails, etc. than browser shows content (latest/updated) requested by the client (Dynamic sites pages usually consists of Front end technologies like HTML, CSS, JavaScript, in combination with some Back end technology like ASP, PHP, Ruby on Rails, etc.)
- Every site have unique
IP (Internet Protocol)address used to identify location(http://www.google.com = 169.20.127.243) - DNS (Domain Name Server) is like
Internets phone bookwhich stores unique website and its IP (Internet Protocol) address for each and every website - IP Address == Domain Name Server (172.16.0.0 == domain name http://www.yahoo.com or so)
- Protocols are simple languages/standards/set of rules through which computers share the information which each other
- Internet wouldn't work at all without Protocols
- Different/multiple layers of protocols
- Application Layer (creation & sharing of data over the web)
- HTTP (Hyper Text Transfer Protocol)
- FTP (File Transfer Protocol)
- SMTP (Simple Mail Transfer Protocol)
- DNS (Domain Name Server)
- RIP (Routing Information Protocol)
- SNMP (Simple Network Management Protocol)
- Transport Layer (communication)
- TCP (Transmission Control Protocol and Internet Protocol created in 1973)
- UDP (User Datagram Protocol)
- Internet Layer (address and routing structure of data)
- IPv4 (Internet Protocol Version 4)
- IPv6 (Internet Protocol Version 6)
- Application Layer (creation & sharing of data over the web)
- Standard protocol for
transferring data/resources over the Web - In the case of HTTP, Browsers are HTTP Clients, send HTTP requests and Servers are HTTP Servers, send the HTTP response to transfer data with a standardized format
- HTTP is a one-way
stateless protocol, it simply means that once the REQUEST is SEND & RECEIVED then that state is forgotten ie discarded by the browser and web server, which makes HTTP very much simple and efficient - Due to its one-way stateless nature it's difficult to send and receive OR upload and download large files with HTTP.
- FTP (File Transfer Protocol)
Typically used to
transfer large filesand its ideal for uploading or downloading files to your site - SMTP (Simple Mail Transfer Protocol)
The Standard web protocol for
sending emailacross the web. Most email clients use SMTP for sending and receiving emails - POP (Post Office Protocol)
POP is typically used to
receive emails - RTP (Real-Time Transfer Protocol)
Standard protocol for
delivering/serving audio or videoover the web. Its commonly used in voice-over and chat applications - RTMP (Real Time Messaging Protocol)
Developed by Macromedia (Adobe Corp.) for
streaming audio-video and dataover the Internet, between a Flash player and a server - HTTPS (Hypertext Transfer Protocol Secure) HTTP layered with a security protocol. Usually used for e-commerce or other secure transactions, payment gateways
URL Uniform Resource Locator OR (Universal Resource Locator) specifies its location on a computer network (web address, web path, web site name).
URL = http://www.yahoo.com
URL = https://www.yahoo.com
| URL Parts | Meaning/Description |
|---|---|
| http/HTTP / https/HTTPS | protocol |
| //www.yahoo.com:8080 | resource name |
| www | sub-domain (Most cases sub-domain is not required ie you can type http://yahoo.com or https://yahoo.com) |
| yahoo | domain name |
| com | top-level domain |
http://www.yahoo.com/products/product1.html or https://www.yahoo.com/products/product1.html
http://www.yahoo.com:80 (80 = port number (80 is default port))
- .com
- .net
- .org
- .info
The browser uses HTTP to communicate with the Web Server and request pages, content. Browsers rendering engine translates/renders pages and displays the contents as per support.
- Browsers developed independently of each other
- Multiple rendering engines drive page layout
- DOM (Document Object Model) support varies
- Browsers use independent JavaScript engines
| Engine | Browser |
|---|---|
| Trident | Internet Explorer, (AOL - America Online), Windows Mobile |
| Presto | Opera |
| Gecko | Mozilla FF, Camino |
| Webkit | Safari, Google Chrome, WebOS |
| Blink | Google Chrome, Opera 14+ |
W3C (World Wide Web Consortium)is the main International Standards Organization for the World Wide Web help in developing protocols and guidelines that ensure long-term growth for the Web- W3C (World Wide Web Consortium) started in the year 1994 to issue recommendations for web technologies
- Check web standards for consistent design (The Web Standard Project): https://www.webstandards.org/
- W3C website: https://www.w3.org/
Websites are hosted/uploaded on a Web Server. A web server is nothing more than a normal computer installed with specialized software and components for a specific use. Web stacks are groups of software that work with each other to build and process websites (static & Dynamic websites).
Web stacks consist of:
- OS (Operating System)
- Web Server
- Database Server
- Programming Language
| Web Stack | Full Form (Technologies) |
|---|---|
| LAMP | Linux Apache MySql Php / Linux Apache MySql Perl/Python |
| MAMP | Macintosh Apache MySql Php |
| WAMP | Windows Apache MySql Php |
| WISA | Windows IIS MS SQL .NET |
| MARS | MySql Apache Ruby Solaris |
Front End (Client-Side) Design refers to:
- The
visual part/User Interface layer (what we see)of websites/applications - Front End Design is typically the
UI, Layout, typography/fonts, imagesand many other visual elements/aspects shown on the web page and their styling - One can also refer to it as usability and user experience design as well
- HTML (HyperText Markup Language) - Markup language, Essential Page Structure/Content, Readable and convey structure to the user, Text Layout Model, page Mark-up, Text, Tags, Data, details for pages, Images, Tables, Anchor Links, Forms
- CSS (Cascading Style Sheet) - Style Sheet language, Page Design / Presentation / Layouts / Styling / Formattings, look and feel, Creative part of Web Pages
- JavaScript (JS) - Scripting language, Dynamic Page Behaviour, Logics, Conditions, and Validations, Events, Interactivity with User, Dynamic updates in a Web Page
Web Design is creating and designing web pages, designing for all user interfaces/experiences like browsers, screen readers, mobiles, printers
- The visual part of web design
- Planning
- Structuring content/data/pages
- User Interface designing / Client-side designing
- Interactivity
- Includes visual part of web designing
- Creating mockups and developing visual standards
- UI designing, typography, page layout
- Structuring semantic content/data/pages
- Mainly works with HTML, CSS, Photoshop
- Can act and do the part of Front End Designer
- Planning for Dynamic Content
- Logical/Conditional Interactivity
- Fetch Data from Servers with APIs
- Mainly works with JavaScript and other JS frameworks, HTML, CSS
- Determine web site/clients/Audience goals
- Clearly Define contest - navigation / content organization
- WireFraming / Architecting the site - proper navigation / content organization
- Generate Mockups - post-it, illustrator / Photoshop / Fireworks
- Build it - HTML CSS JS Flash
- Test it - Multiple Browsers / Devices, consistent output
- The creation and integration of feature-rich interfaces
- Organize content and flow properly
- Plan navigation
- Use Video and blended media
Script executed in the browser environment (JavaScript)
- HyperText Markup Language
- The Standard/foundation/gateway language used for creating/structuring content on the web
- We can create a static website by HTML only
- NO HTML = NO WEB PAGE :)
| Year | History |
|---|---|
| 1990 | Specification Drafted in Mid 90s by Tim Berners Lee |
| 1991 | Tim Berners Lee published document called "HTML Tags" |
| 1995 | HTML 2.0 ('standard' HTML) |
| 1997 | HTML 3.2 (proprietary browser companies developed many features) |
| 1999 | HTML 4.0 W3C Web standards support |
| 2000 | XHTML 1.0 (HTML move towards XML)-Extensible Markup Language |
| 2001 | 2009 - XHTML 2.0 |
| 2004 | WHATWG formed (Web HyperText Application Technology Working Group, they continued with development of HTML 5.0) |
| 2007 | 2008 - W3C adopts WHATWG's HTML5 Web Application 1.0 specification and drafts |
| 2009 | XHTML 2.0 drops/stops |
| 2014 | W3C Recommendation: HTML5 |
- HTML Syntax is very simple easy to learn
- HTML page consists of
DTD & TAGSfor different visual aspects
Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML</title>
</head>
<body>
<p>This is Basic HTML page </p>
</body>
</html>- Usually the first line of an HTML page, its an instruction to the web browser about what version of HTML the page is written and rules to parse/render.
| HTML Version | DTD |
|---|---|
| HTML5 | Document Type Declaration (<!DOCTYPE html> |
| XHTML | Document Type Definition (.DTD file) <!DOC TYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| HTML4 | Document Type Definition (.DTD file) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
- Tags are html commands/set of instructions to create web page with specific UI element
- Tags are used to identify content like
<h1> = heading 1,<p> = paragraphetc. - HTML contains tags which are used to identify elements and structure pages example
<header>,<table>,<li>,<img> <head>tag consists of non visual elements, meta tags, links to external .css, .js files and libraries<body>tag contents all visual elements which appears on web page
- Text Editor/HTML Editor like
NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaveretc. - To view output of .html pages we need Browsers like -
Google Chrome, Mozilla Firefox, Internet Explorer, Safarietc.
- CSS is presentational, styling, formatting language developed to control look and feel of HTML files
- Presentational markup tags like
<font> <b> <i> <u>etc discouraged or deprecated as style-sheet language like CSS developed to control the presentation of HTML documents - Styles can be written in 3 different ways:
- external style:
style.css(separation of concern) - embedded/internal styles:
<style> </style>(written inside style tag) - inline styles:
<p style="color:red; font-size:18px;">This is an inline style </p>(one can write in each markup line with style attribute )
- external style:
Syntax & Example:
p {
color: red;
font-size: 18px;
}Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>external style</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This is an external style </p>
</body>
</html>Syntax & Example:
p {
color: red;
font-size: 18px;
}Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>embedded/internal styles</title>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is an embedded/internal styles </p>
</body>
</html>Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>inline style</title>
</head>
<body>
<p style="color:red; font-size:18px;">This is an inline style </p>
</body>
</html>
- Created and introduced by
Brendan Eich (Netscape) in 1995to increase and expand the capabilities of the native browser - A client-side scripting language used to add interactivity and functionality to websites
- JavaScript has nothing to do with Java ...!!! NOT AT ALL RELATED to JAVA)
- Build interactive elements, Rollover, Button clicks, Menus
- Create Dynamic Menus-Logics
- Open new browser windows
- Update data within the page/browser
- Client-side form validation
- Manipulate page elements
Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML JavaScript</title>
<script>
// write javascript code here
</script>
</head>
<body>
<p>This is Basic HTML JavaScript page </p>
</body>
</html>- external script:
script.js(separation of concern) - embedded/internal script (under HEAD or BODY tag):
<script> </script>
Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML JavaScript</title>
<script src="script.js"></script>
</head>
<body>
<p>This is Basic HTML JavaScript page </p>
</body>
</html>Syntax & Example:
// write javascript code here
alert('external javascript code executed.');Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML JavaScript</title>
<script>
// write javascript code here
alert('embedded/internal javascript code executed.');
</script>
</head>
<body>
<p>This is Basic HTML JavaScript page </p>
<script>
// write javascript code here
alert('embedded/internal javascript code executed.');
</script>
</body>
</html>- already have the various codes and common utilities ready
- collection of javascript methods and functions that make it easier to perform targeted tasks
- jQuery
- Angular
- React
- Vue
- Prototype
- Ember
- D3
There are many formats of photos/pictures/images/Web Graphics used on the web:
- BMP
- GIF
- JPEG / JPG
- PNG
- SVG
Creating images for the web often requires the designer to find a balance between keeping the file sizes small while maintaining acceptable image quality with resolution.
JPEG / JPG, GIF and PNG files type are the standard image formats for web graphics.
- Introduced in 1987 by CompuServe
- It is the most popular image format type on the web
- Limited to 256 colors support only
- Typically used for logos or icons
- GIFs support transparency and limited animation
Image compression standard established in 1992 and widely used for areas such as the web and digital photography, often shortened to the file extension "JPG"
- Supports millions of colors
- Used in all types of image High Resolutions Scenery
- Uses "lossy" compression to reduce the file size
- JPGs are compressed each time they saved
Created in 1995 to improve over JPEG and replace the GIF by open source community over copyright disputes/license issues with GIF
- Like GIFs Support transparency
- Uses lossless compression
- Like JPEG supports millions of colors
- Older browser support is lacking
- SVG is a vector graphics format
- Can be scaled independently of the resolution
- Graphics are written in SVG markup which makes them editable through the code
- Since they are markup they can be further styled through CSS
- SVG is now widely supported among the latest devices and browsers
- Adobe Photoshop
- Adobe illustrator
- Adobe Fireworks
- CorelDraw
- GIMP
An exposed set of functions that allow other applications to access features and functionality without giving direct access to source code.
- Using Google Maps
- Weather reports
- Youtube videos
- Facebook feeds
- Amazons latest offers
- Latest sports scores
- Latest Newsfeeds
- HTML is used to create web pages/websites with simple standard elements
- HTML5 introduced the following advanced APIs to avoid third-party plug-in support/dependency
- Media API - Audio/Video control
- Geo-Location API - Access current location of users
- Drag and Drop API - Drag and Drop functionality
- App Cache API - Storing data offline/caching for future use
- Canvas API - Draw directly in the browser
- Earlier we use to use fonts available and installed on user machines like Arial, Verdana, Times, Sherif, etc.
- Web Fonts technology allows the downloading and temporary installation of fonts within the browser
@font-faceCSS technique is used to request any engaging and latest fonts/typography from the web server- New font formats developed
- EOT - Embedded OpenType
- WOFF - Web Open Font Format
- Famous third-party font hosting server
- Google Fonts
- Adobe Typekit
Any programming/scripting that runs on the web server is referred to as Server-Side scripting. It may be:
- Processing Form data
- Managing users
- Booking a Movie Tickets, Travel, Hotel
- Online purchase
- CGI (Common Gateway Interface)
- Perl
- ASP (Active Server Pages)
- Java
- JSP (Java Server Pages)
- PHP (HyperText PreProcessor / Personal Home Page)
- .NET
- Cold Fusion CFML
- NodeJS
- In the year
1994 Rasmus Lerdorfhas written a set of CGI scripts to track a visitor to his online resume. He opens sources the scripts and named it Personal Home Page (PHP). - In 1997 developers named
Andi Gutmans and Zeev Suraskirewrote the existing parser and released PHP 3.0, renaming it HyperText PreProcessor. - As PHP was free and open-source it attracted a wide community of developers
- PHP paired with other open-source tools like Linux, Apache, and MySQL
- PHP was very easy to learn so it became one of the most important and widely used back end/server-side scripting languages to build robust/dynamic sites
- PHP is embedded within HTML but .php, .asp, .cfm pages must process/render on the server before it displays in browser
- Note - .php, .asp, .cfm or any other server-side scripting files will not run locally, you just need some software like MAMP, WAMP, XAMPP to set/create a server environment on local
- JSP (Java Server Pages)
- Part of the larger Java framework and used by Java programmers
- Scripts are combinations of XML and Java scriptlets
- Used in enterprise-level sites but can be used for any sized sites or applications
- .NET
- VB .NET is referred to as .NET but its part of the larger .NET framework
- Used in enterprise-level sites or applications
- ColdFusion (Adobe ColdFusion)
- ColdFusion is added to the page through its own markup language called CFML much like HTML
- Python
- Powerful open-source multi-purpose development language
- Ruby
- General-purpose development language
- It is popular due to the Ruby-on-Rails web framework
- Data used in websites/applications must store in Database for future uses and retrievals like User Name, Password, Authentication details, Profile, Product list, Pricing, and so on
- At the client-side ie in the browser due to security purposes, we can store a very less and limited amount of data
- DBMS (Database Management System)
- Store data in tables
- RDBMS (Relational Database Management System)
- Store data in tables that relate to each other
- Allows complex sorting and filtering of data
- MySQL, Sybase, Oracle, SQLite
- Non-Relational Database (No SQL database)
- NoSQL database stores data in object driven datasets
- Faster to index and scale easier than relational databases
- MongoDB, Cassandra, CouchDB, SimpleDB, HBase
- The Standard Query Language for managing and retrieving information from databases.
- SQL syntax is simple and logical, easy to learn
- select, insert, update, delete such simple keyword-based syntax statements used to manipulate data
- An application to control creation, management, publishing, and archiving sites content
- A good CMS can speed up creation, updating of content faster, manage user groups, controls content as per roles
- Web-based CMS assist in the creation, publishing, and archiving of site content, also provides advanced control over site functionality such as blogging, community boards, and e-commerce.
- Understand site goals and future needs
- Match site focus to CMS focus
- Look for quality plug-ins
- Look for robust support
- Compare budget to CMS needs
- Make sure site admin is simple
- Does the CMS allow custom layouts
WordPress, Jhoomla, Drupal, Expression Engine, Radiant- www.expressionengine.com
- www.madebyfrog.com
- www.drupal.org
- www.joomla.org
- www.movabletype.org
- www.radiantcms.org
- www.wordpress.org
- A system for delivering content over a distributed network of servers
- As a developer no need to download all libraries locally and do development, use the CDN path to include required libraries, it will be cached and downloaded faster
- CDNs are largely used to serve static resources such as JavaScript/CSS libraries, videos, or other site dependencies
- Google CDN
- Microsoft CDN
Usually refers to distributed processes over the internet
- dropbox (store and share files, projects)
- youtube
- google cloud storage
- amazon web services
- Microsoft cloud services
- Rackspace
- Heroku
- Github is built around Git an open-source version control system
- GitHub is an online distribution service that allows users to store repositories online that can be version controlled and shared with other users
- Allows to manage the project, publish files and store revisions, sharing and collaborating
- Collection of pre-written methods/functions features that make development faster and easier
- Extends the functionality of native JavaScript, maybe focused sets like date.js, moment.js to jQuery a broader task-oriented library
- jQuery
- Angular
- React
- Vue
- Prototype
- Ember
- D3
Collection of prebuilt HTML, CSS and JavaScript files designed to speed up, make the development of sites easier.
- HTML - (readymade templates, semantic structure)
- CSS - (ready typography, layouts, Browser resets)
- JavaScript - (enhanced features modal windows, tooltips, menus, readymade functions and utilities)
- Examples -
Bootstrap, Angular, HTML Shiv Shim
- A set of templates build around a specific starting point or goal
- Provide a starting point for building sites or apps (latest features need to work/support in older browsers)
- A collection of assets designed to help build sites or applications faster, easier
- Includes CSS grids, javascript libraries or helpful scripts and HTML templates
- CSS is a static stylesheet language, CSS PreProcessors help to write CSS more efficiently, semantically with programming features like variables, functions, maths operations, conditionals, etc.
- The scripting language that extends the functionality of CSS and must be compiled into native CSS code before publishing
| CSS PreProcessors | Source created in | File conversion |
|---|---|---|
| SASS | (Written in Ruby) | .scss / .sass -> .css |
| Less | (Written in JavaScript) | .less -> .css |
| Stylus | (Written in JavaScript) | .styl -> .css |
A semantic markup language containing rules for defining document structure and data and transfer globally (customized tags) and widely used to share data between multiple applications.
Syntax & Example:
<?xml version="1.0" ?>
<studentDetails>
<name>Test</name>
<rollNumber>001</rollNumber>
<studentDetails>- RSS feeds - online contents
- AJAX Applications - store or write data
- Flash/XML
- External APIs
- XSL & XSLT
- XPath
- Not a new technology
- Not a scripting or programming language
- It isn't anyone thing at all...!!!
- AJAX is a new technique for creating better, faster, and more Interactive interfaces or web applications with the help of XML, HTML, CSS, and JavaScript Document Object Model (DOM)
- Think of AJAX as a new specific approach to web development that focuses on building interactive and engaging web experiences
- RSS uses a family of standard web feed formats to publish frequently updated information like blog entries, news headlines, audio, video
- An RSS document (called "feed", "web feed", or "channel") includes full or summarised text, and metadata, like publishing date and author's name
- RSS is a standardized XML base format
Congratulations! You have completed the Web Design Development Foundation-Web Technology Fundamentals lesson. Thank You for looking into Web Fundamentals. Now you have a good idea of how the web works and the technologies behind the web. Your next step could be Mastering HTML/HTML5 - the Markup language. Let's begin your web design-development journey with Learning HTML5 Essentials. Best of Luck! Happy Learning!