Responsive Web Design With Html 5 & Css

Chapter 1: Why Responsive Web Design Is Important................................25

Device screen..............................................................26

What's meant by responsive web design??.......................................26

Text/Code editors...........................................................27

Browser support............................................................28

Chapter 2: HTML5 – Writing Markup..............................................29

Best way to start HTML pages.................................................32

The doctype...............................................................33

The html tag and lang attribute.................................................34

Charset or character encoding.................................................35

Is HTML5 markup case-sensitive...............................................36

Best approach to HTML markup................................................36

Widely used HTML tag...................................................38

The

The

The

The HTML5 outline algorithm..................................................45

h1-h6 elements.............................................................46

The div element............................................................47

The blockquote element......................................................48

The

HTML text-level semantics....................................................52

The element.........................................................53

The tag................................................................54

element...........................................................55

The tag..............................................................56

The tag................................................................56

Practice Time- let’s use the HTML tags..........................................57

How to embed media files in HTML5............................................61

Adding video and audio in HTML...............................................62

Providing alternate media sources..............................................64

Audio and video tags........................................................64

Responsive HTML5 video and iframes..........................................66

Chapter 3: Media Queries – Supporting...........................................72

Different  Viewports.........................................................72

The viewport meta tag.......................................................73

Media query syntax..........................................................75

Media queries in link tags.....................................................80

Media query on an @import at-rule.............................................81

Media queries in a CSS file...................................................82

Inverting media query logic....................................................83

Combining multiple media queries rules.........................................84

Shorter media queries.......................................................85

Essential list of media inquiries................................................86

Requests from the media to alter our design......................................87

Arranging several media queries...............................................91

Media Queries Level 5.......................................................93

Interaction media features....................................................94

The pointer media feature.....................................................95

Hovering over media.........................................................96

Chapter 4: Fluid Layout, Flexbox, and Responsive Images............................98

Converting a fixed pixel design to a fluid.........................................99

proportional layout..........................................................99

CSS Flexible Box Layout or Flexbox...........................................107

Flexbox versions...........................................................108

Prefixing the flexbox........................................................109

Automatic Autoprefixing.....................................................111

Flexbox vertically centered text...............................................112

Reverse the order of items...................................................117

Laid items vertically using flex-direction: column..................................119

Flexbox layouts together with media queries.....................................120

Flexbox alignment properties.................................................123

Align-items property........................................................125

The align-self property......................................................126

Possible alignment values...................................................128

Justify-content property.....................................................128

The flex property...........................................................133

Sticky footer..............................................................137

Flexbox Order.............................................................140

Wrapping with flex..........................................................149

Wrapping up Flexbox.......................................................153

Responsive images.........................................................154

Picture element............................................................155

New image formats.........................................................156

Chapter 5: Introduction CSS Grid...............................................158

What CSS Grid symbolizes..................................................159

CSS Grid syntax...........................................................160

CSS Grid syntax terminology.................................................161

Setting up a grid...........................................................162

Explicit and implicit.........................................................168

grid-auto-rows and grid-auto-columns..........................................169

Placing and sizing grid items.................................................171

grid-gap..................................................................174

repeat...................................................................175

repeat (4, 1fr).............................................................176

repeat(15, 250px)...........................................................177

Placing items in the grid.....................................................178

Span....................................................................180

dense....................................................................181

Named grid lines...........................................................182

grid-template-areas.........................................................186

auto-fit and auto-fill.........................................................189

The minmax().............................................................191

Shorthand syntax..........................................................192

grid-template shorthand.....................................................193

grid shorthand.............................................................194

grid shorthand value – first option.............................................195

grid shorthand value – second option..........................................196

grid shorthand value – third option.............................................197

Introduction: The Future of the Web

At the turn of the 21st century, information, including access to the Internet, became the basis for personal, economic and political progress. A popular name for the Internet is the information highway, and it became the place where one goes to find the latest financial news, to browse library catalogs, to exchange information with colleagues or to participate in a lively political debate. The Internet is the tool that will lead you, beyond telephones, faxes and isolated computers, to a rapidly growing network of information without borders.

The Internet complements the traditional tools you use to collect information, graphical data, view the news and connect with others. The Internet is shrinking the world; bringing information, skills and knowledge on almost all subjects imaginable directly to your computer.

The Internet is what we call a meta network, that is a network of networks that covers the entire world. It is impossible to give an exact number of the amount of networks or users that make up the Internet, but it easily exceeds several billion (4.57 billion Internet users in the first quarter of 2020 according to the site blogdumoderateur¹).

History

The Internet was first designed by the Department of Defense, as a means of protecting US government communications systems in the event of a military attack. The original network, baptized ARPANET (after the Advanced Research Projects

Agency that developed it), evolved into a communication channel between the entrepreneurs, military personnel and academic researchers who contribute to ARPA projects.

The 1960s: Cold War background

In 1957, the Advanced Research Project Agency (ARPA) was created in the United States to lead a small number of projects aimed at ensuring scientific and technical predominance over the Russians. Making up this organization was some of the United States’ most valued scientists.

In 1967, Lawrence G. Roberts, who had recently chaired the ARPA computer network project, presented these scenarios for the ARPANET (Advanced Research Projects Agency NETwork). Meanwhile, that same year, Donald Davies and Robert Scantlebury of the National Physical Laboratory (NPL) in the United Kingdom announced the design of a packet-switching network.

The 1970s and 1980s: birth of the TCP/IP protocol

In 1969, the ARPANET began to operate, initially linking up four universities. Using this connection, four facilities were able to transfer data and perform lengthy calculations, remotely, on multiple computers.

During the 1970s, research laboratories gradually linked up to the ARPANET.

In 1970, the Network Control Protocol (NCP) was used on ARPANET with the aim of linking heterogeneous devices (IBM, Unix, etc.).

In 1983, the NCP was definitively cast aside in favor of the Transmission Control Protocol/Internet Protocol (TCP/IP), which is still in use now and represents the main protocol of the Internet. The TCP is responsible for segmenting a message into packets and rearranging the packets after they are received, while the role of IP is to ensure that packets pass from one computer to another until they reach their destination.

––––––––

The 1980s, 1990s and 2000s: the Internet's development into the WWW

In 1977, the TCP/IP was effectively used to link several networks to the ARPANET. More than a hundred computers were connected, and from this point, the number would continue to increase year after year.

In March 1989, Tim Berners-Lee, a computer scientist at the CERN (European Council for Nuclear Research), advised putting documents on the CERN website that were linked by hyperlinks, with the aim of helping physicists searching for information. The origin of the Web dates back to this point in time.

In the early 1990s, the birth of the Internet as we know it today was announced: the Web was defined by a collection of HTML (HyperText Markup Language) pages combining text, images and links that can be reached via a URL (Uniform Resource Locator), based on HTTP (HyperText Transfer Protocol).

In 1991, in Geneva, Tim Berners-Lee developed the Internet interface known as the World Wide Web (WWW), allowing the network to be opened up to the general public by facilitating website consultation instructions.

In 1991, 300,000 computers were connected, with this figure reaching 1,000,000 by 1992.

In 1992, the first link (known as a hyperlink), enabling access to the CERN’s Internet site, was built on the Fermilab server in the United States: this was the beginning of the weaving of the WWW. The Net continued to expand at an exponential rate during the 1990s under the impetus of the Web.

The year 1993 saw the birth of the first web browser, designed by Netscape, which supported text and images. That same year, the National Science Foundation (NSF) founded a company to enable the registration of domain names.

In 1993, there were 600 sites, with this figure exceeding 15,000 by 1995. Today, the WWW has come to be the most valued service on the Internet.

As of 2008, there were 1.5 billion Internet users worldwide, 1.3 billion email users, 210 billion emails sent daily, 186.7 million websites and 133 million blogs.

E-commerce revenues exceeded $2,300 billion in 2017 and are expected to reach

$4,500 billion in 2021.

––––––––

phases of the Web's development

The World Wide Web, commonly known as the Web, and sometimes as the Net, presents a hypertext system running on the Internet. The Web is used to consult accessible pages on websites using a browser. The image of the spiderweb originates from the hyperlinks that interconnect web pages.

1991–1999: Web 1.0, static or passive?

Web 1.0 functioned in a strictly linear manner: a producer would offer content that was displayed on a website, and Internet users would consult this site. This generation of the Web favored product-oriented sites, which had little influence on user influx. This period was marked by the birth of the first e-commerce sites. Proprietary programs and software were extremely costly.

Figure 1.1. Web 1.0: diffusion

––––––––

2000–2010: Web 2.0, collaborative or social?

Web 2.0 offered a completely new outlook. It promoted the sharing and exchange of information and data (text, videos, images and more), and witnessed the upsurge of social media, blogs, wikis and smartphones. The Web was becoming more popular and stimulating. The customer’s opinion was constantly coveted and users developed a taste for this virtual collectivization. However, the reproduction of content of disproportionate quality led to an overabundance of information that was difficult to verify.

2010–2020: Web 3.0, semantic or smart?

Web 3.0 aimed to classify the vast mass of usable information according to the conditions and requirements of each user, according to their positioning, preferences, etc. Websites evolved (and continue to evolve) into online applications that can automatically analyze written and pictorial data, that are able to understand, interpret and classify them, and rediffuse them to new Internet users.

––––––––

Figure 1.3. Web 3.0: semantic

––––––––

Since 2020: Web 4.0, intelligent

It is very difficult to predict what the Web will become. Some believe that the future of Web 3.0 is Web 4.0, or the artificial intelligence-based Web. The purpose of this Web is to introduce people into a steadfastly remarkable environment (strong and robust). Nova Spivack², founder of Radar Networks, gives the definition of Web 4.0 as the ability to work with tools online only. Similarly, Joël de Rosnay³, consultant