-
<!-- 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>
-
Metadata Flow Sectioning Phrasing Heading Embedded Interactive
-
<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>
-
<script> const anchorElement = document.createElement('a'); anchorElement.href = '#'; anchorElement.textContent = 'Click me!'; const p = document.querySelector('.parent'); p.appendChild(anchorElement); </script>
-
<!DOCTYPE html>
-
<!DOCTYPE html> <html lang="en"></html>
-
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> </head> </html>
-
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> </head> <body></body> </html>
-
<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" />
<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>
https://validator.w3.org/
- Exercise 1.03: Validation
- Exercise 1.04: Validation Errors
- Activity 1.01: Video Store Page Template
-
Syntax
p { color: red; font-weight: bold; text-decoration: underline; }
-
CSS Rule Set
-
Adding Styles to a Web Page
-
Exercise 1.05: Adding Styles
-
Exercise 1.06: Styles in an External Fils
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
/* 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
-
The Top Bar
Console Elements *** Sources Network Performance
-
The Element Tap
<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
<header>
... heading, logo, nav goes here
<header></header>
</header>
<footer>
... copyright, list of links go here
<footer></footer>
</footer>
<section>
... main content
</section>
<article>
<section>
...primary blog content
</section>
<section>
...secondary blog content
</section>
</article>
<navigation> ... list of links go here </navigation>
<aside>
... indirectly related content goes here
</aside>
<div class="sidebar">
... indirectly related content goes here
</div>
<div class="navigation">
<div class="navigation-inner">... navigation links go here</div>
</div>
https://theguardian.com
https://bbc.co.uk/news
float
flex
grid
-
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>
-
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%; }
-
The grid Container
display: grid;
grid-template-columns: auto auto;
-
The grid Items
margin
border
padding
content
width
height
width: 200px;
height: 100px;
padding: 50px;
padding: 50px 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 200px;
height: 100px;
padding: 25px;
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;
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;
- Headings
- Paragraphs
- Inline Text Elements
- Lists
- Exercise 3.01: Combining Text-Based Elements
- CSS Resets
- CSS Text Properties
- CSS Font Properties
- The display Properties
- Video Store Product Page (Revisied)
- Exercise 3.02: Navigation
- Exercise 3.03: Breadcrumb
- Exercise 3.04: Page Heading and Introduction
- Exercise 3.06: Putting It All Together
- Headings
- Paragraphs
- Inline elements
- Lists
-
<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>
-
<p> Sit down awhile, And let us once again assail your ears, That are so fortified against our story, </p>
-
<p>I need to wake up <em>now</em>!</p>
<p> Before leaving the house <strong>remember to lock the front door</strong>! </p>
-
<!-- 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>
<!-- 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>
-
* { 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; }
-
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; }
-
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; }
-
div { display: inline; } span { display: block; }
- The form Element
- The input Element
- The label Element
- The textarea Element
- The fieldset Element
- The select Element
- The button Element
- Exercise 4.01: Creating a Simple Form
- Label, Textbox, and Textarea
- Buttons
- Select Boxes
- Validation Styling
- Exercise 4.02: Creating a Form with Validation Styling
- Video Store Forms
- Exercise 4.03: New Account Signup Form
- Exercise 4.04: Checkout Form
- Activity 4.01: Building an Online Property Portal Website Form
form
input
label
textarea
fieldset
select
button
-
form
,action
,method
,get
,post
<form action="url_to_send_form_data" method="post"> <!-- form elements go here --> </form>
-
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>
<!-- 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>
<!-- password input --> <form action="url_to_send_form_data" method="post"> <div> Password: <br /> <input type="password" name="password" /> </div> </form>
<!-- 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>
<!-- 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>
-
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>
-
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>
-
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>
-
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>
-
button
,type
,reset
,submit
<button type="submit">Submit</button>
Textbox
Textarea
Label
Button
Select box
Validation styling
-
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; }
-
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; }
-
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; }
-
required
,:valid
,:valid
- The Markup
- Inverting Colors
- New HTML Elements in the Theme
- New CSS Background Properties
- Exercise 5.01: Creating a Dark Theme
- Creating a Dark Theme with the HSL Function
- Exercise 5.02: Creating a Dark Theme Using hsl
- CSS Invert Filter
- Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter
- CSS Hooks
- Exercise 5.04: Customizing a Theme with CSS Hooks
- Activity 5.01: Creating Your Own Theme Using a New Color Palette
https://www.colortools.net/color_complementary.html
pre
(preformatted element)abbr
(abbreviation element)
background-image
background-repeat
repeat
space
round
no-repeat
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).
filter: invert().
<!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>
<!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>
- Responsive Web Design
- Responsive Viewport
- Understanding Basic Media Queries
- Exercise 6.01: Using Media Queries to Change the Page Layout
- Device Orientation Media Queries
- Exercise 6.02: Using Media Queries to Detect Device Orientation
- Combining Multiple Media Queries
- Print Stylesheets
- Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries
- Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
-
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>
-
@media
-
@media only screen and (max-width: 768[x])
/* 0-768px is blue color */ @media only screen and (max-width: 768px) { p { color: blue; } }
/* 769 up is a red color */ @media only screen and (min-width: 769px) { p { color: red; } }
/* between 480-768 is a purple color */ @media only screen and (min-width: 480px) and (max-width: 768px) { p { color: purple; } }
/* height 500 up background-color is pink */ @media only screen and (min-height: 500px) { body { background-color: pink; } }
-
@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);
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>
/*
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;
}
}
-
<link />
-
@media
<link rel="stylesheet" media="print" href="print.css" />
- Exercise 7.01: Adding Audio to a Web Page
- Attributes
- Styling Audio Controls
- Exercise 7.02: Styling Controls
- Multiple Sources
- Attributes
- Exercise 7.03: Adding Video to a Web Page
- Adding Subtitles
- Exercise 7.04: Adding Subtitles
- The img Element
- The picture Element
- Programmable Graphics
- Exercise 7.05: Drawing Shapes
- Drawing Other Shapes
- Exercise 7.06: Gradients
- Exercise 7.07: Animated canvas
- Activity 7.01: Media Page
audio
, src
, source
<audio controls src="media/track1.mp3">
It looks like your browser does not support <code>audio</code>.
</audio>
-
The following attributes can be used to modify the
audio
elementautoplay
preload
loop
controls
-
controls
-
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.
-
loop
-
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) -
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. -
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>
-
-
height
-
width
-
poster
-
The
width
andheight
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 allows you to provide the source for an image that will be shown while the video is being downloaded. If we do not set theposter
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.
-
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.
track
, media
, source
The following attributes let you modify a track element
-
scr
The location of the external file with the text track. -
default
Onetrack
element permedia
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, includingsubtitles
captions
descriptions
chapters
metadata
- The default value is
subtitles
-
srclang
The language of the track text; for instanceen
for Englishfr
for French. If the track is a subtitle track, thensrclang
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" />
-
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
The approaches we will look at for embedding images in a web page are
-
img
-
picture
-
Programmable graphics
-
img
,alt
<img src="media/poster.png" alt="HTML and CSS poster" />
-
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>
-
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 programmaticallyScalable vector graphics (SVG)
is anXML-based
format for creating vector graphics on web pages.- The
canvas
element gives you access to aJavaScript
drawing API that you can use to create rasterized graphics on a web page.
-
<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>
-
-
<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>
-
canvas
,width
,height
canvas coordinate system
-
fillRect
,fillStyle
,strokeStyle
,lineWidth
,StrokeRect
,fill
,stroke
context.fillStyle = "red"; context.fillRect(50, 50, 150, 100);
fillRect used to draw a red rectangle on the canvas 320x240 pixels
context.strokeStyle = "red"; context.lineWidth = 4; context.strokeRect(50, 50, 150, 100);
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();
Fill and stroke used to draw a rectangle with a border and fill on the canvas
-
arc
,true
,false
context.fillStyle = "red"; context.arc(50, 50, 25, 0, Math.PI * 2, false); context.fill();
Fill used to draw a red circle on the canvas
-
clearRect
,canvas
,canvasElement
context.clearRect(0, 0, canvasElement.width, canvasElement.height);
-
-
-
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();
A star shape created on the canvas with the moveTo and lineTo commands
-
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);
A top to bottom linear gradient from white to black
const gradient = context.createLinearGradient(0, 0, canvasElement.width, 0);
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");
A radial gradient from white to black
-
clearRect
-
width
-
height
-
canvas
-
canvasArea
-
setInterval
-
setTimer
-
requestAnimationFrame
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 8.01: Implementing Our First Simple Animation
-
Exercise 8.02: Enhanced Control in CSS Transitions
-
Exercise 8.03: CSS Transition Performance
-
Exercise 8.04: CSS Transition with Multiple Values
Exercise 8.05: Animating a Website Menu
Transition Duration Sweet Spot
Animation Acceleration and Deceleration
Using the CSS Animation Property
Exercise 8.06: CSS Preloader Using Keyframes
- Activity 8.01: Animating Our Video Store Home Page
-
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>
-
-
position
top
left
bottom
right
position: relative
position: absolute
-
overflow: hidden; overflow: visible;
-
opacity: 1; opacity: 0.5; opacity: 0;
-
filter: blur(5px);
-
:before
:after
attr()
<a class="selector" title="Content Here Will Appear In :before" >Selector Text</a >
.select:before { content: attr(title); }
-
In Chrome, follow these steps to get to the interface that allows you to slow down the animations:
- Click the triple vertical dots that you can find at the far top right of the Chrome browser.
- Select More tools.
- Select Developer tools.
- Find the three vertical dots in the developer tools and click on it.
- Select More tools.
- 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.
-
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);
-
@keyframes
-
animationName
@keyframes animationName {keyframes-selector {css-styles}}
@keyframes showHide { 0% { opacity: 0; } 100% { opacity: 1; } }
-
ease-in-out
-
push-ease-off
-
steps()
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: rotateBall 3s infinite;
-
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;
- Exercise 9.01: Accessible Ratings
- Exercise 9.02: Accessible Signup Form
- Axe Tool
- Exercise 9.03: Using Axe
- Activity 9.01: Making a Page Accessible
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
<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>
section
header
footer
main
aside
nav
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>
We can navigate through a web page using the following keys on the keyboard
Tab
Shift + Tab
Enter
<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);
}
}
-
To install the Axe extension, we can go to the Chrome web store at https://packt.live/2WSY7Iz
Introduction to CSS Preprocessors
Getting Started with Nodejs npm and SASS
- Exercise 10.01: Using SCSS Variables
- 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
- Exercise 10.04: Loops in SCSS
- Activity 10.01: Converting the Video Store Home Page into SCSS
Syntactically Awesome Style Sheets (SASS)
Leaner Style Sheets (LESS)
-
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; }
-
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; }
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 intobuild.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
andelse
$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); }
-
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; }
Oat Phattaraphon - @phattaraphon_c