Coder Social home page Coder Social logo

khawoat6 / hw-web-application Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 40.26 MB

Learning basic HTML and CSS by PacktWorkshops

Home Page: https://github.com/PacktWorkshops/The-HTML-and-CSS-Workshop

HTML 53.42% CSS 46.58%
html5 css3 html-document html-css css-grid css-flexbox documentation webpage webcomponents website

hw-web-application's Introduction

Chapter 1 : Introduction to HTML and CSS

HyperText Markup Language (HTML)

  • Syntax

    Getting Started

    <!-- HTML -->
<h1>HTML</h1>
<p>
  HyperText Markup Language (HTML) is a markup language used to describe the
  structure of a web page.
</p>
<p>
  We can use it to differentiate such content as:
</p>
<ul>
  <li>headings</li>
  <li>lists</li>
  <li>links</li>
  <li>images</li>
</ul>
<p>
  Want to
  <a href="https://www.packtpub.com/web-development"
    >learn more about web development?</a
  >
</p>

  • Content Types

    Metadata
Flow
Sectioning
Phrasing
Heading
Embedded
Interactive

  • The HTML Document

    <html>
  <head>
    <title>HTML Document structure</title>
  </head>
  <body>
    <div>
      <h1>Heading</h1>
      <p>First paragraph of text.</p>
      <p>Second paragraph of text.</p>
    </div>
  </body>
</html>

  • The HTML DOM

    <script>
  const anchorElement = document.createElement('a'); anchorElement.href = '#';
  anchorElement.textContent = 'Click me!'; const p =
  document.querySelector('.parent'); p.appendChild(anchorElement);
</script>

  • The Doctype Declaration

    <!DOCTYPE html>

Structuring an HTML Document

  • HTML

    <!DOCTYPE html>
<html lang="en"></html>

  • Head

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page Title</title>
  </head>
</html>

  • Body

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page Title</title>
  </head>
  <body></body>
</html>

  • Our First Web Page

  • Exercise 1.01: Creating a Web Page

    Getting Started

  • Metadata

    <base href="http://www.example.com" />
<link rel="stylesheet" href="/style.css" />

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

  • Exercise 1.02: Adding Metadata

    Getting Started

Mistakes in HTML

<p>
Learn about <a href="https://www.packtpub.com/web-development">web development</a>. Try out some of the <a href="https://www.packtpub.com/free-learning">Free learning on the Packt site.
</p> <p>
Lorem ipsum... </p>
<body>
  <main id="main1"><!-- main content here ... --></main>
  <main id="main2"><!-- more main content here ... --></main>
</body>
<body>
  <main id="main1"><!-- main content here ... --></main>
  <main id="main2" hidden><!-- more main content here ... --></main>
</body>

Validating HTML

https://validator.w3.org/
  • Exercise 1.03: Validation
  • Exercise 1.04: Validation Errors
  • Activity 1.01: Video Store Page Template

CSS

  • Syntax

    p {
  color: red;
  font-weight: bold;
  text-decoration: underline;
}

  • CSS Rule Set

    Getting Started

  • Adding Styles to a Web Page

  • Exercise 1.05: Adding Styles

    Getting Started

  • Exercise 1.06: Styles in an External Fils

CSSOM

CSS Selectors

h1::first-letter {
  font-size: 5rem;
}
p {
  color: white;
  background-color: black;
}
p:nth-of-type(odd) {
  color: black;
  background-color: white;
}

  • Element, #ID and .Class

    .class {
}
#id {
}
div {
}

  • The Universal Selectors (*)

    * {
}

  • Attribute Selectors

    [attribute]
[href]
[attribute=value]
[attribute^=value]
[attribute$=value]
[attribute*=valule]

  • Pseudo-classes (:)

    :link
:hover
:visited
:active
:first-child
:last-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
    a:link,
a:visited {
  color: deepskyblue;
  text-decoration: none;
}
a:hover,
a:active {
  color: hotpink;
  text-decoration: dashed underline;
}

  • Pseudo-elements (::)

    ::before
::after
::first-letter
::first-line
::selection
::backdrop

  • Combining Selectors

    .primary li.primary;

  • Exercise 1.07: Selecting Elements

    Getting Started

CSS Specificity

The Special Case of !important

/* CSS */
div.media {
  display: block;
  width: 100%;
  float: left;
}
.hide {
  display: none;
}
<!-- HTML -->
<div class="media hide">
  ...Some content
</div>
.hide {
  display: none !important;
}
  • Activity 1.02: Styling the Video Store Template Page

Dev Tools

  • The Top Bar

    Console
Elements ***
Sources
Network
Performance

  • The Element Tap

Chapter 2: Structure and Layout

Introduction

Structural Elements

<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

The header Tag

<header>
  ... heading, logo, nav goes here
  <header></header>
</header>

The footer Tag

<footer>
  ... copyright, list of links go here
  <footer></footer>
</footer>

The section Tag

<section>
  ... main content
</section>

The article Tag

<article>
  <section>
    ...primary blog content
  </section>
  <section>
    ...secondary blog content
  </section>
</article>

The nav Tag

<navigation> ... list of links go here </navigation>

The aside Tag

<aside>
  ... indirectly related content goes here
</aside>

The div Tag

<div class="sidebar">
  ... indirectly related content goes here
</div>
<div class="navigation">
  <div class="navigation-inner">... navigation links go here</div>
</div>

A News Article Web Page

https://theguardian.com
https://bbc.co.uk/news

Exercise 2.01: Marking up the Page

Getting Started

Wireframes

Activity 2.01: Video Store Home Page

Getting Started

CSS Page Layouts

float
flex
grid

Video Store Product Page

Float-Based Layout

  • The float Property

    float: right;
float: left;
float: none;

  • the width Property

    width: 100px;
width: 25%;

  • Claring Floated Element

    /* CSS */
section {
  overflow: hidden;
}
div {
  float: left;
  width: 25%;
}
    <!-- HTML -->
<section>
  <div>product 1</div>
  <div>product 2</div>
  <div>product 3</div>
  <div>product 4</div>
  <div>product 5</div>
  <div>product 6</div>
  <div>product 7</div>
  <div>product 8</div>
</section>

Flex-Based Layout

  • The flex Container

    display: flex;
    flex-wrap: wrap;

  • The flex Items css flex-basis: 25%;

    <!-- HTML -->
<section>
  <div>product 1</div>
  <div>product 2</div>
  <div>product 3</div>
  <div>product 4</div>
  <div>product 5</div>
  <div>product 6</div>
  <div>product 7</div>
  <div>product 8</div>
</section>
    /* CSS */
section {
  display: flex;
  flex-wrap: wrap;
}
div {
  flex-basis: 25%;
}

Grid-Based Layout

  • The grid Container

    display: grid;
    grid-template-columns: auto auto;

  • The grid Items

Exercise 2.02: A grid-Based Layout

Getting Started

The Box Model

margin
border
padding
content
width
height

Content Box

width: 200px;
height: 100px;

The padding Property

padding: 50px;
padding: 50px 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 200px;
height: 100px;
padding: 25px;

The border Property

border: 5px solid red;
border-top: 5px solid red;
border-right: 15px dotted green;
border-bottom: 10px dashed blue;
borber-left: 10px double pink;
width: 200px;
height: 100px;
padding: 25px;
border: 10px solid black;

The margin Property

margin: 50px;
margin: 50px 0;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 200px;
height: 100px;
padding: 25px;
border: 10px solid black;
margin: 25px;

Exercise 2.03: Experimenting with the Box Model

Getting Started

Putting It All Together

Exercise 2.04: Home Page Revisited

Getting Started

Exercise 2.05: Video Store Product Page Revisited

Getting Started

Activity 2.02: Online Clothes Store Home Page

Getting Started

Chapter 3: Text and Typography

Table of Contents

Text-Based Elements

Semantic Markup

Styling Text-Based Elements

Breadcrumbs

  • Exercise 3.03: Breadcrumb
  • Exercise 3.04: Page Heading and Introduction
  • Exercise 3.06: Putting It All Together

Text-Based Elements

- Headings
- Paragraphs
- Inline elements
- Lists

  • Headings

    <h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

  • Paragraphs

    <p>
  Sit down awhile, And let us once again assail your ears, That are so
  fortified against our story,
</p>

  • Inline Text Elements

    <p>I need to wake up <em>now</em>!</p>
    <p>
  Before leaving the house <strong>remember to lock the front door</strong>!
</p>

  • Lists

    <!-- Shopping list -->
<ul>
  <li>Ice Cream</li>
  <li>Cookies</li>
  <li>Salad</li>
  <li>Soap</li>
</ul>
    <!-- Cheese on toast recipe -->
<ol>
  <li>Place bread under grill until golden brown</li>
  <li>Flip the bread and place cheese slices</li>
  <li>Cook until cheese is golden brown</li>
  <li>Serve immediately</li>
</ol>
    <!-- Dictionary -->
<dl>
  <dt>HTML</dt>
  <dd>Hypertext markup language</dd>
  <dt>CSS</dt>
  <dd>Cascading style sheets</dd>
</dl>

  • Exercise 3.01: Combining Text-Based Elements

    Getting Started

Semantic Markup

<!-- Semantic markup -->
<h1>I am a top level page heading</h1>
<p>
  This is a paragraph which contains a word with
  <strong>strong</strong> significance
</p>
<!-- Non semantic markup -->
<div>I am a top level page heading</div>
<div>
  This is a paragraph which contains a word with
  <span>strong</span> significance
</div>

Styling Text-Based Elements

  • CSS Resets

    * {
  margin: 0;
  padding: 0;
}
    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

  • CSS Text Properties

    h1 {
  color: green;
}
p {
  color: #00ff00;
}
span {
  color: rgb(0, 255, 0);
}
p {
  text-align: center;
}
/* เธ‚เธตเธ”เน€เธชเน‰เธ™เนƒเธ•เน‰เธซเธ™เธฑเธ‡เธชเธทเธญ */
.underline {
  text-decoration: underline;
}
/* เน€เธชเน‰เธ™เธ—เธฑเธšเธ•เธฑเธงเธซเธ™เธฑเธ‡เธชเธทเธญ */
.line-through {
  text-decoration: line-through;
}
/* เธ•เธฑเธงเนƒเธซเธเนˆเธซเธกเธ” */
.uppercase {
  text-transform: uppercase;
}
/* เธ•เธฑเธงเน€เธฅเน‡เธเธซเธกเธ” */
.lowercase {
  text-transform: lowercase;
}
/* เธญเธฑเธเธฉเธฃเธ•เธฑเธงเนเธฃเธเนƒเธซเธเนˆ */
.capitalize {
  text-transform: capitalize;
}
/* เธ„เธงเธฒเธกเธŠเธดเธ”เธ‚เธญเธ‡เนเธ•เนˆเธฅเธฐเธšเธฃเธฃเธ—เธฑเธ” เธ™เน‰เธญเธข */
.small-line-height {
  line-height: 0.5;
}
/* เธ„เธงเธฒเธกเธŠเธดเธ”เธ‚เธญเธ‡เนเธ•เนˆเธฅเธฐเธšเธฃเธฃเธ—เธฑเธ” เธกเธฒเธ */
.large-line-height {
  line-height: 1.5;
}

  • CSS Font Properties

    body {
  font-family: "Times New Roman", Times, serif;
}
/* pixels */
h1 {
  font-size: 50px;
}
p {
  font-size: 16px;
}
/* ems */
h1 {
  font-size: 3.125em;
}
p {
  font-size: 1em;
}
span {
  font-weight: bold;
}

  • The display Properties

    div {
  display: inline;
}
span {
  display: block;
}

  • Video Store Product Page (Revisied)

  • Exercise 3.02: Navigation

    Getting Started

Breadcrumbs

  • Exercise 3.03: Breadcrumb

    Getting Started

  • Exercise 3.04: Page Heading and Introduction

    Getting Started

  • Exercise 3.05: Product Cards

    Getting Started

  • Exercise 3.06: Putting It All Together

    Getting Started

  • Activity 3.01: Converting a Newspaper Article to a Web Page

Chapter 4 : Forms

Table Content

Form Elements

Styling Form Elements

Summary

Introduction

Form Elements

  • form
  • input
  • label
  • textarea
  • fieldset
  • select
  • button

  • The form Element

    form, action, method, get, post

    <form action="url_to_send_form_data" method="post">
  <!-- form elements go here -->
</form>

  • The input Element

    type, name, value, maxlength

    <!-- text input -->
<form action="url_to_send_form_data" method="post">
  <div>
    First name: <br />
    <input type="text" name="firstname" />
  </div>
  <div>
    Last name: <br />
    <input type="text" name="lastname" />
  </div>
</form>

    Getting Started

    <!-- maxlength -->
<input type="text" name="username" maxlength="20" />
    <!-- email input -->
<form action="url_to_send_form_data" method="post">
  <div>
    Email: <br />
    <input type="email" name="email" />
  </div>
</form>

    Getting Started

    <!-- password input -->
<form action="url_to_send_form_data" method="post">
  <div>
    Password: <br />
    <input type="password" name="password" />
  </div>
</form>

    Getting Started

    <!-- value -->
<!-- checkboxes -->
<form action="url_to_send_form_data" method="post">
  <div><input type="checkbox" name="color1" value="red" /> Red</div>
  <div><input type="checkbox" name="color2" value="green" /> Green</div>
  <div><input type="checkbox" name="color3" value="blue" /> Blue</div>
  ..
</form>

    Getting Started

    <!-- radio buttons -->
<form action="url_to_send_form_data" method="post">
  <div><input type="radio" name="color" value="red" /> Red</div>
  <div><input type="radio" name="color" value="green" /> Green</div>
  <div><input type="radio" name="color" value="blue" /> Blue</div>
</form>

    Getting Started

  • The label Element

    label, for, id

    <!-- text inputs with labels -->
<form action="url_to_send_form_data" method="post">
  <div>
    <label for="first_name">First name:</label><br />
    <input type="text" name="firstname" id="first_name" />
  </div>
  <div>
    <label for="last_name">Last name:</label><br />
    <input type="text" name="lastname" id="last_name" />
  </div>
</form>

    Getting Started

  • The textarea Element

    textarea, rows, cols

    <!-- textarea -->
<form action="url_to_send_form_data" method="post">
  <div>
    <label for="first_name">First name:</label><br />
    <input type="text" name="firstname" id="first_name" />
  </div>
  <div>
    <label for="last_name">Last name:</label><br />
    <input type="text" name="lastname" id="last_name" />
  </div>
  <div>
    <label for="message">Message:</label><br />
    <textarea id="last_name" rows="5" cols="20"></textarea>
  </div>
</form>

    Getting Started

  • The fieldset Element

    fieldset

    <!-- fieldset -->
<form action="url_to_send_form_data" method="post">
  <fieldset>
    <div>
      <label for="first_name">First name:</label><br />
      <input type="text" name="firstname" id="first_name" />
    </div>
    <div>
      <label for="last_name">Last name:</label><br />
      <input type="text" name="lastname" id="last_name" />
    </div>
    <div>
      <label for="message">Message:</label><br />
      <textarea id="last_name" rows="5" cols="20"></textarea>
    </div>
  </fieldset>
  <p>Do you like HTML?</p>
  <fieldset>
    <div>
      <input type="radio" id="yes" />
      <label for="yes">Yes</label>
    </div>
    <div>
      <input type="radio" id="no" />
      <label for="no">No</label>
    </div>
  </fieldset>
</form>

    Getting Started

  • The select Element

    select, option

    <!-- select -->
<form action="url_to_send_form_data" method="post">
  <fieldset>
    <label for="countries">Country:</label><br />
    <select id="countries">
      <option value="england">England</option>
      <option value="scotland">Scotland</option>
      <option value="ireland">Ireland</option>
      <option value="wales">Wales</option>
    </select>
  </fieldset>
</form>

    Getting Started

  • The button Element

    button, type, reset, submit

    <button type="submit">Submit</button>

  • Exercise 4.01: Creating a Simple Form

    Getting Started

Styling Form Elements

  • Textbox
  • Textarea
  • Label
  • Button
  • Select box
  • Validation styling

  • Label Textbox and Textarea

    label, textarea

    <!-- HTML -->
<form action="url_to_send_form_data" method="post">
  <div>
    <label for="first_name">First name:</label><br />
    <input
      type="text"
      name="firstname"
      id="first_name"
      placeholder="Your first name"
    />
  </div>
  <div>
    <label for="last_name">Last name:</label><br />
    <input
      type="text"
      name="lastname"
      id="last_name"
      placeholder="Your last name"
    />
  </div>
  <div>
    <label for="message">Message:</label><br />
    <textarea
      id="last_name"
      rows="5"
      cols="20"
      placeholder="Your message"
    ></textarea>
  </div>
</form>
    /* CSS */
* {
  font-family: arial, sans-serif;
}
label {
  font-size: 20px;
}
div {
  margin-bottom: 30px;
}
input,
textarea {
  border: 0;
  border-bottom: 1px solid gray;
  padding: 10px 0;
  width: 200px;
}

    Getting Started

  • Buttons

    button, submit

    <!-- HTML -->
<button type="submit">Submit</button>
    /* CSS */
button {
  background: #999;
  border: 0;
  color: white;
  font-size: 12px;
  height: 50px;
  width: 200px;
  text-transform: uppercase;
}

    Getting Started

  • Select Boxes

    select

    <!-- HTML -->
<div class="select-wrapper">
  <select id="countries">
    <option value="england">England</option>
    <option value="scotland">Scotland</option>
    <option value="ireland">Ireland</option>
    <option value="wales">Wales</option>
  </select>
</div>
    /* CSS */
select {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid gray;
  box-shadow: none;
  color: #666;
  padding: 10px 0;
  width: 200px;
  -webkit-appearance: none;
}
.select-wrapper {
  position: relative;
  width: 200px;
}
.select-wrapper:after {
  content: "< >";
  color: #666;
  font-size: 14px;
  top: 8px;
  right: 0;
  transform: rotate(90deg);
  position: absolute;
  z-index: -1;
}

    Getting Started

  • Validation Styling

    required, :valid, :valid

  • Exercise 4.02: Creating a Form with Validation Styling

    Getting Started

  • Video Store Forms

  • Exercise 4.03: New Account Signup Form

    Getting Started

  • Exercise 4.04: Checkout Form

    Getting Started

  • Activity 4.01: Building an Online Property Portal Website Form

Summary

Chapter 5: Themes, Colors, and Polish

Table Content

Introduction

Summary

Introduction

The Markup

Getting Started

Inverting Colors

https://www.colortools.net/color_complementary.html

New HTML Elements in the Theme

  • pre (preformatted element)
  • abbr (abbreviation element)

New CSS Background Properties

  • background-image
  • background-repeat
    • repeat
    • space
    • round
    • no-repeat

Exercise 5.01: Creating a Dark Theme

Getting Started

Creating a Dark Theme with the HSL Function

The HSL function allows you to update the color value of a property by using one of three arguments: Hue, Saturation, or Lightness:

  • H represents the hue as an angle on the color wheel. You can specify this using degrees (or, programmatically, radians.) When provided as a unitless number, it is interpreted as degrees, with 0 as pure red, 120 as pure green, and 240 as pure blue.

  • S represents the saturation, with 100% saturation being completely saturated, while 0% is completely unsaturated (gray). 50% is a "normal" color.

  • L represents the saturation, with 100% saturation being completely saturated, while 0% is completely unsaturated (gray).

    Getting Started

Exercise 5.02: Creating a Dark Theme Using hsl

Getting Started

CSS Invert Filter

filter: invert().

Getting Started

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Invert Filter</title>
    <style type="text/css">
      .invert {
        filter: invert(100%);
      }
    </style>
  </head>
  <body>
    <p>
      <img
        src="./assets/react-2019-7.jpg"
        width="100%"
        alt="a mural by the author"
      />
    </p>
    <p>
      <img
        src="./assets/react-2019-7.jpg"
        width="100%"
        alt="a mural by the author"
        class="invert"
      />
    </p>
  </body>
</html>

Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter

Getting Started

CSS Hooks

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Using CSS hooks</title>
    <style type="text/css">
      .tag-css {
        background: #003366;
      }
      .tag-html {
        background: #006600;
      }
      .tag-javascript {
        background: #660000;
      }
    </style>
  </head>
  <body class="tag-css"></body>
</html>

Exercise 5.04: Customizing a Theme with CSS Hooks

Getting Started

Activity 5.01: Creating Your Own Theme Using a New Color Palette

Summary

Chapter 6: Responsive Web Design and Media Queries

Table Content

Mobile-First

Mobile-First

Responsive Web Design

Responsive Viewport

  • width

  • device-width

  • initial-scale

  • maximum-scale

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Responsive</title>
  </head>
  <body>
    <h1>HTML and CSS</h1>
    <p>How to create a modern, responsive website with HTML and CSS</p>
  </body>
</html>

Understanding Basic Media Queries

  • @media

  • @media only screen and (max-width: 768[x])

    Getting Started

    /* 0-768px is blue color */
@media only screen and (max-width: 768px) {
  p {
    color: blue;
  }
}

    Getting Started

    /* 769 up is a red color */
@media only screen and (min-width: 769px) {
  p {
    color: red;
  }
}

    Getting Started

    /* between 480-768 is a purple color */
@media only screen and (min-width: 480px) and (max-width: 768px) {
  p {
    color: purple;
  }
}

    Getting Started

    /* height 500 up background-color is pink */
@media only screen and (min-height: 500px) {
  body {
    background-color: pink;
  }
}

    Getting Started

Exercise 6.01: Using Media Queries to Change the Page Layout

Getting Started

Device Orientation Media Queries

  • @media (orientation: landscape)

  • @media (orientation: portrait)

    <!-- Example 6.01 -->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      p.warning {
        display: none;
        background: yellow;
        padding: 10px;
        font-size: 25px;
        margin: 0;
      }

      @media (orientation: landscape) {
        p.warning {
          display: block;
        }
      }
      img {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <p class="warning">
      Your device is in landscape orientation, this webpage is best viewed in
      portrait mode.
    </p>
    <img src="http://placehold.it/768x1024" alt="" />
  </body>
</html>
    @media (orientation: landscape) and (min-width: 400px) and (max-width: 768px);

    Getting Started

    Orientation warning demo on a tablet and mobile device

    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      p.warning {
        display: none;
        background: yellow;
        padding: 10px;
        font-size: 25px;
        margin: 0;
      }

      @media (orientation: landscape) and (min-width: 400px) and (max-width: 768px) {
        p.warning {
          display: block;
        }
      }
      img {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <p class="warning">
      Your device is in landscape orientation, this webpage is best viewed in
      portrait mode.
    </p>
    <img src="http://placehold.it/768x1024" alt="" />
  </body>
</html>

Exercise 6.02: Using Media Queries to Detect Device Orientation

Getting Started

Combining Multiple Media Queries

/*
    width: 0-319 is pink color
    width: 320-480 is red color
    width: 481-1279 is pink color
    width: 1280 up is red color
*/
@media screen and (max-width: 480) and (min-width: 320), (min-width: 1280px) {
  body {
    background: red;
  }
}

Getting Started

Print Stylesheets

  • <link />

  • @media

    <link rel="stylesheet" media="print" href="print.css" />

Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries

Getting Started

Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page

Chapter 7 : Media - Audio Video and Canvas

Introduction Audio

The video Element

Limitations

The track Element

Images

Gradients

  • Exercise 7.06: Gradients

Animating a Canvas

  • Exercise 7.07: Animated canvas
  • Activity 7.01: Media Page

Summary

Introduction

Audio

audio, src, source

<audio controls src="media/track1.mp3">
  It looks like your browser does not support <code>audio</code>.
</audio>

Getting Started

  • Exercise 7.01: Adding Audio to a Web Page

    Getting Started

  • Attributes

    The following attributes can be used to modify the audio element

    • autoplay
    • preload
    • loop
    • controls

  • The Autoplay Attribute

    • controls

  • The preload Attribute

    • none The audio will not be preloaded.
    • metadata The browser will load audio metadata but not the whole file.
    • auto This is the same as an empty string; that is, preload="" โ€“ the whole audio file will be downloaded.

  • The loop Attribute

    • loop

  • The controls Attribute

    The controls attribute adds the default media controls for the browser. This allows a user to control the playback of audio. While the browser's media playback UI shares many common features (volume, mute toggle, and scrub bar, to name a few)

  • Styling Audio Controls

    The default controls provide a lot of functionality for free. They may well be all that you need. However, as you've seen, the styles are different for each browser and may not fit with your own design or requirements. The best option for customizing the controls is to not set the controls attribute and to create your own custom controls with HTML, CSS, and a little bit of JavaScript.

  • Exercise 7.02: Styling Controls

    Getting Started

  • Multiple Sources

    You can learn more about media formats and browser compatibility from MDN at https://packt.live/33s2I6V

    <audio controls>
  <source src="media/track1.webm" type="audio/webm" />
  <source src="media/track1.mp3" type="audio/mpeg" />
  <source src="media/track1.ogg" type="audio/ogg" />
  It looks like your browser does not support <code>audio</code>.
</audio>

The video Element

  • Attributes

    • height

    • width

    • poster

    • The width and height Attributes

      The width and height attributes set the width and height of the video display area, respectively. Both values are measured in absolute pixel values โ€“ in other words, the values must be non-negative integers and they cannot be percentages.

    • The poster Attribute

      The poster attribute allows you to provide the source for an image that will be shown while the video is being downloaded. If we do not set the poster attribute, a blank square will appear until the first frame of the video has been downloaded, and then the first frame of the video will show in place of the poster image.

  • Exercise 7.03: Adding Video to a Web Page

    Getting Started

Limitations

You can learn more about various restrictions and policies from the browser vendors from a variety of sources. For example, good information about Safari and iOS can be found here: https://packt.live/2CivkDQ. Information on autoplay in Chrome can be found here: https://packt.live/2qrGTWH.

The track Element

track, media, source

The following attributes let you modify a track element

  • scrThe location of the external file with the text track.

  • default One track element per media element can be set as the default track. This attribute acts as an indication and it may be overridden by user settings (such as language).

  • kind Specifies how the text track is supposed to be used. There are several options, including

    • subtitles
    • captions
    • descriptions
    • chapters
    • metadata
    • The default value is subtitles

  • srclang The language of the track text; for instance

    • en for English
    • fr for French. If the track is a subtitle track, then srclang is required.

  • label A human-readable title that's used to differentiate between captions and subtitles.

<track src="media/track1-en.vtt" kind="subtitles" label="English subtitles" />
<track src="media/track1-sparse.vtt" kind="captions" label="Sparse captions" />
<track src="media/track1-full.vtt" kind="captions" label="Full captions" />

Getting Started

  • Adding Subtitles

    Web Video Text Tracks Format (WebVTT), --> string

    <!-- WEBVTT -->

00:00:01.000 --> 00:00:05.000 First subtitle text <br />
00:00:10.000 --> 00:00:25.000 Second subtitle text

  • Exercise 7.04: Adding Subtitles

    Getting Started

Images

The approaches we will look at for embedding images in a web page are

  • img

  • picture

  • Programmable graphics

  • The img Element

    img, alt

    <img src="media/poster.png" alt="HTML and CSS poster" />

  • The picture Element

    picture, type, mime

    <!-- width: 0-639px show poster-small but 800up show poster-large -->
<picture>
  <source srcset="media/poster-small.png" media="(max-width: 639px)" />
  <source srcset="media/poster-large.png" media="(min-width: 800px)" />
  <img src="media/poster.png" alt="HTML and CSS poster" />
</picture>

  • Programmable Graphics

    As well as loading and embedding rasterized image files, such as .jpeg, .gif, .png, and .webp, on a web page, there are some options for creating graphics programmatically

    • Scalable vector graphics (SVG) is an XML-based format for creating vector graphics on web pages.
    • The canvas element gives you access to a JavaScript drawing API that you can use to create rasterized graphics on a web page.

  • The svg Element

    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="48" fill="#4717F6" />
<path d="M 85,50 25,75 25,25 z" fill="white" /> </svg>

    Getting Started

  • The canvas Element

    • Checking for canvas Support
      <canvas id="canvasArea" width="320" height="240">
  Your browser does not support the <code>canvas</code> element.
</canvas>
      const canvasElement = document.getElementById('canvasArea'); if (canvasElement.getContext) {
const context = canvasElement.getContext('2d'); // we have a context so we can draw something
} </script>
    • Drawing in canvas
    • The canvas Grid

      canvas, width, height

      Getting Started

      canvas coordinate system

    • Drawing a Rectangle

      fillRect, fillStyle, strokeStyle, lineWidth, StrokeRect, fill, stroke

      context.fillStyle = "red";
context.fillRect(50, 50, 150, 100);

      Getting Started

      fillRect used to draw a red rectangle on the canvas 320x240 pixels

      context.strokeStyle = "red";
context.lineWidth = 4;
context.strokeRect(50, 50, 150, 100);

      Getting Started

      strokeRect used to draw a rectangle with a border on the canvas

      context.fillStyle = "blue";
context.strokeStyle = "orange";
context.lineWidth = 4;
context.rect(50, 50, 150, 100);
context.fill();
context.stroke();

      Getting Started

      Fill and stroke used to draw a rectangle with a border and fill on the canvas

    • Drawing a Circle

      arc, true, false

      context.fillStyle = "red";
context.arc(50, 50, 25, 0, Math.PI * 2, false);
context.fill();

      Getting Started

      Fill used to draw a red circle on the canvas

    • Clearing the canvas

      clearRect, canvas, canvasElement

      context.clearRect(0, 0, canvasElement.width, canvasElement.height);

  • Exercise 7.05: Drawing Shapes

    Getting Started

  • Drawing Other Shapes

    • moveTo

    • lineTo

    • beginPath

      context.fillStyle = "yellow";
context.beginPath();
context.moveTo(160, 60);
context.lineTo(220, 120);
context.lineTo(100, 120);
context.lineTo(160, 60);
context.fill();
context.beginPath();
context.moveTo(160, 140);
context.lineTo(220, 80);
context.lineTo(100, 80);
context.lineTo(160, 140);
context.fill();

      Getting Started

      A star shape created on the canvas with the moveTo and lineTo commands

Gradients

We can create two types of gradients

  • Linear

  • Radial

  • createLinearGradient

  • createRadialGradient

    const gradient = context.createLinearGradient(0, 0, 0, canvasElement.height);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
    context.fillStyle = gradient;
context.fillRect(0, 0, canvasElement.width, canvasElement.height);

    Getting Started

    A top to bottom linear gradient from white to black

    const gradient = context.createLinearGradient(0, 0, canvasElement.width, 0);

    Getting Started

    A left to right linear gradient from white to black

    const gradient = context.createRadialGradient(
  canvasElement.width * 0.5,
  canvasElement.height * 0.5,
  1,
  canvasElement.width * 0.5,
  canvasElement.height * 0.5,
  canvasElement.width * 0.5
);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");

    Getting Started

    A radial gradient from white to black

  • Exercise 7.06: Gradients

    Getting Started

Animating a Canvas

  • clearRect

  • width

  • height

  • canvas

  • canvasArea

  • setInterval

  • setTimer

  • requestAnimationFrame

    Getting Started

    const canvasElement = document.getElementById('canvasArea');
const context = canvasElement.getContext('2d);
context.clearRect(0, 0, canvasElement.width, canvasElement.height);
    function drawFrame(context) {
  // first, we clear the canvas
  context.clearRect(0, 0, canvasElement.width, canvasElement.height); // ...draw something in our canvas
  // finally, request the next frame
  requestAnimationFrame(function () {
    drawFrame(context);
  });
}
drawFrame(context);

  • Exercise 7.07: Animated canvas

    Getting Started

  • Activity 7.01: Media Page

Summary

Chapter 8: Animations

Table Contents

CSS Transitions

Exercise 8.05: Animating a Website Menu

Transition Duration Sweet Spot

Slowing Animations Down

Animation Acceleration and Deceleration

Keyframe Animations in CSS

Using the CSS Animation Property

Exercise 8.06: CSS Preloader Using Keyframes

More CSS Tips and Tricks

  • Activity 8.01: Animating Our Video Store Home Page

Summary

CSS Transitions

  • transition-duration

  • transition-property

  • transition-delay

    p {
  transition: 250ms;
}
p:hover {
  background-color: darkolivegreen;
  color: white;
}
    <p>This is a very simple example of a transition</p>

    Getting Started

  • Exercise 8.01: Implementing Our First Simple Animation

    Getting Started

  • Exercise 8.02: Enhanced Control in CSS Transitions

    Getting Started

  • Exercise 8.03: CSS Transition Performance

    Getting Started

  • Exercise 8.04: CSS Transition with Multiple Values

    Getting Started

  • Advanced CSS for Animations

    • CSS Positioning

      • position
      • top
      • left
      • bottom
      • right
      • position: relative
      • position: absolute

      Getting Started

    • Overflow

      overflow: hidden;
overflow: visible;

      Getting Started

    • Opacity

      opacity: 1;
opacity: 0.5;
opacity: 0;

      Getting Started

    • Blur

      filter: blur(5px);

      Getting Started

    • Inserting Content with attr

      • :before
      • :after
      • attr()
      <a class="selector" title="Content Here Will Appear In :before"
  >Selector Text</a
>
      .select:before {
  content: attr(title);
}

Exercise 8.05: Animating a Website Menu

Getting Started

Transition Duration Sweet Spot

Slowing Animations Down

In Chrome, follow these steps to get to the interface that allows you to slow down the animations:

  1. Click the triple vertical dots that you can find at the far top right of the Chrome browser.
  2. Select More tools.
  3. Select Developer tools.
  4. Find the three vertical dots in the developer tools and click on it.
  5. Select More tools.
  6. Select Animations.

A better way to do this is to remember the shortcut and press CTRL + SHIFT + i on Windows, or ALT + CMD + i on a Mac.

Animation Acceleration and Deceleration

  • transition-timing-function: ease

    .top-navigation-link:before,
.top-navigation-link:after {
  transition-timing-function: ease;
}

  • cubic-bezier

    transition-timing-function: cubic-bezier(0.93, 0.45, 0.73, 1.3);

Keyframe Animations in CSS

  • @keyframes

  • animationName

    @keyframes animationName {keyframes-selector {css-styles}}
    @keyframes showHide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Using the CSS Animation Property

  • ease-in-out

  • push-ease-off

  • steps()

    animation: name duration timing-function delay iteration-count direction
  fill-mode;
    animation: rotateBall 3s infinite;

Exercise 8.06: CSS Preloader Using Keyframes

Getting Started

More CSS Tips and Tricks

  • text-align: center

  • scale

  • scaleY

  • scaleX

  • scaleZ

  • scale3d

    margin: 0 auto;
    transform: scale3d(1.1, 1.1, 1.1);
    animation-timing-function: cubic-bezier(0.2, 0.61, 0.35, 1);
    animation-play-state: paused;
    animation-play-state: running;

    Getting Started

  • Activity 8.01: Animating Our Video Store Home Page

Summary

Chapter 9: Accessibility

Table Content

What Is Accessibility?

Accessible Images

  • Exercise 9.01: Accessible Ratings

Semantic HTML

Accessible Forms

  • Exercise 9.02: Accessible Signup Form

Keyboard Accessibility

Accessible Motion

Accessibility Tools

  • Axe Tool
  • Exercise 9.03: Using Axe
  • Activity 9.01: Making a Page Accessible

Summary

What Is Accessibility?

Accessibility is a very important subject for the web and web developers, but it is one that isn't always that well understood. By learning about the accessibility improvements we will look at in this chapter, we can help a lot of users. We can remove barriers for the following

  • Those with visual impairments who cannot get information from images that do not have a text alternative

  • People who have hearing impairments and cannot get information from media (audio or video)

  • Those with physical impairments that prevent them from using a mouse

Accessible Images

<img
  src="bar-chart.png"
  alt="Bar graph of profits for 2019 (THB40,000), which are up THB20,000 on profits for 2018 (THB20,000)"
/>
<div class="rating">
  <img src="images/full-star.png" alt="Rated 3 and a half out of 5 stars" />
  <img src="images/full-star.png" alt="" />
  <img src="images/full-star.png" alt="" />
  <img src="images/half-star.png" alt="" />
  <img src="images/empty-star.png" alt="" />
</div>

  • Exercise 9.01: Accessible Ratings

    Getting Started

Semantic HTML

  • section
  • header
  • footer
  • main
  • aside
  • nav

Accessible Forms

The techniques we will look at here are as follows

  • Labels and input fields

  • Fieldset

  • label + input

    <label for="first-name">First name</label>
<input type="text" id="first-name" />
    <label>First name: <input type="text" /></label>
    <form>
  <fieldset>
    <legend>Provide your address:</legend>
    <label for="house">House</label> <input type="text" id="house" />
    <br />
    <label for="street">Street</label>
    <input type="text" id="street" />
    <br />
    <label for="zipcode">ZIP code</label>
    <input type="text" id="zipcode" />
  </fieldset>
  <fieldset>
    <legend>Choose a favorite color:</legend>
    <input type="radio" value="red" id="red" name="color" />
    <label for="red">Red</label>
    <input type="radio" value="green" id="green" name="color" />
    <label for="green">Green</label>
    <input type="radio" value="blue" id="blue" name="color" />
    <label for="blue">Blue</label>
  </fieldset>
</form>

    Getting Started

  • Exercise 9.02: Accessible Signup Form

    Getting Started

Keyboard Accessibility

We can navigate through a web page using the following keys on the keyboard

  • Tab
  • Shift + Tab
  • Enter

Accessible Motion

<div class="animation">animated box</div>
.animation {
  position: absolute;
  top: 150px;
  left: 150px;
}
@media (prefers-reduced-motion: no-preference) {
  .animation {
    animation: moveAround 1s 0.3s linear infinite both;
  }
}
@keyframes moveAround {
  from {
    transform: translate(-50px, -50px);
  }
  to {
    transform: translate(50px, 100px);
  }
}

Accessibility Tools

  • Axe Tool

    To install the Axe extension, we can go to the Chrome web store at https://packt.live/2WSY7Iz

  • Exercise 9.03: Using Axe

    Getting Started

  • Activity 9.01: Making a Page Accessible

    Getting Started

Summary

Chapter 10: Preprocessors and Tooling

Introduction to CSS Preprocessors

Getting Started with Nodejs npm and SASS

SCSS Introduction

  • Exercise 10.01: Using SCSS Variables

Nesting in SCSS

  • Exercise 10.02: Rewriting Existing CSS with Nested SCSS

Import Control Directives and Mixins in SCSS

  • Exercise 10.03: Using SCSS Mixins and Control Directives

Loops in SCSS

  • Exercise 10.04: Loops in SCSS
  • Activity 10.01: Converting the Video Store Home Page into SCSS

Introduction to CSS Preprocessors

  • Syntactically Awesome Style Sheets (SASS)
  • Leaner Style Sheets (LESS)

Getting Started with Nodejs npm and SASS

SCSS Introduction

  • package.json

  • "scss": "node-sass --watch scss -o css --output-style expanded"

    // SCSS
$color-black: #000;
p {
  color: $color-black;
}
    /* CSS */
h1 {
  color: #000;
}
    // SCSS
$color-black: #000;
p {
  color: $color-black;
}
    /* CSS */
p {
  color: #000;
}

    Getting Starting

  • Exercise 10.01: Using SCSS Variables

    Getting Starting

Nesting in SCSS

  • package.json

  • "scss": "node-sass --watch scss -o css --output-style nested"

    // SCSS
article {
  background: #ccc;
  p {
    color: red;
  }
}
    /* CSS */
article {
  background: #ccc;
}
article p {
  color: red;
}
    // SCSS
article {
  background: #ccc;
  p {
    color: red;
    a {
      color: blue;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
    /* CSS */
article {
  background: #ccc;
}
article p {
  color: red;
}
article p a {
  color: blue;
}
article p a:hover {
  text-decoration: underline;
}

    Getting Starting

    Getting Starting

    Getting Starting

  • Exercise 10.02: Rewriting Existing CSS with Nested SCSS

    Getting Starting

Import Control Directives and Mixins in SCSS

The syntax for importing another SCSS file (for example, '_filename.scss') into your main file is @import 'filename';. To see this in an example, look at the following code

  • _reset.scss

    * {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}

  • build.scss

    @import "reset";
header {
  background: #ccc;
  a {
    color: #000;
    &:hover {
      text-decoration: underline;
    }
  }
}

  • This would output with the _reset.scss file already compiled and merged into build.css as a single file outputted:

    * {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
header {
  background: #ccc;
}
header a {
  color: #000;
}
header a:hover {
  text-decoration: underline;
}

  • debug

    $debug = true; @if ($debug) {
  div {
      border: 1px dashed red;
} }

  • else if and else

    $env: "test";
div {
  @if ($env == "dev") {
    border: 1px dotted red;
  } @else if ($env == "test") {
    border: 1px dotted yellow;
  } @else if ($env == "live") {
    border: 1px dotted black;
  } @else {
    border: none;
  }
}

  • mixin

    @mixin columns($count) {
  -webkit-column-count: $count;
  -moz-column-count: $count;
  column-count: $count;
}
article {
  @include columns(2);
}

    Getting Starting

  • Exercise 10.03: Using SCSS Mixins and Control Directives

    Getting Starting

Loops in SCSS

  • for : @for $variable from X to Y {}

    // SCSS
@for $num from 1 through 4 {
  .col-#{$num} {
    column-count: $num;
  }
}
    /* CSS */
.col-1 {
  column-count: 1;
}
.col-2 {
  column-count: 2;
}
.col-3 {
  column-count: 3;
}
.col-4 {
  column-count: 4;
}

  • each : @each $item in $list {}

    // SCSS
$fruits: apple pear orange kiwi pineapple melon strawberry;

@each $fruit in $fruits {
  .image-#{$fruit} {
    background: url("images/#{$fruit}.png") no-repeat;
  }
}
    /* CSS */
.image-apple {
  background: url("images/apple.png") no-repeat;
}
.image-pear {
  background: url("images/pear.png") no-repeat;
}
.image-orange {
  background: url("images/orange.png") no-repeat;
}
.image-kiwi {
  background: url("images/kiwi.png") no-repeat;
}
.image-pineapple {
  background: url("images/pineapple.png") no-repeat;
}
.image-melon {
  background: url("images/melon.png") no-repeat;
}
.image-strawberry {
  background: url("images/strawberry.png") no-repeat;
}

  • while : @while $variable condition value {}

    // SCSS
$box: 25;
@while $box > 0 {
  .box-#{$box} {
    width: $box + px;
  }
  $box: $box - 5;
}
    /* CSS */
.box-25 {
  width: 25px;
}
.box-20 {
  width: 20px;
}
.box-15 {
  width: 15px;
}
.box-10 {
  width: 10px;
}
.box-5 {
  width: 5px;
}

  • Exercise 10.04: Loops in SCSS

    Getting Starting

  • Activity 10.01: Converting the Video Store Home Page into SCSS

    Getting Staring

Contact

Oat Phattaraphon - @phattaraphon_c

hw-web-application's People

Contributors

khawoat6 avatar

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.