10 Questions
What is the primary purpose of HTML5 Canvas?
To allow for dynamic, scriptable graphics
Which of the following is NOT a method of the 2D drawing context in HTML5 Canvas?
animate()
What is the purpose of the @keyframes rule in CSS3 Animations?
To define an animation
Which of the following is a popular CSS preprocessor?
Sass
What is the main advantage of using responsive design?
Websites that adapt to different screen sizes and devices
What is the primary difference between localStorage and sessionStorage in Web Storage?
The expiration date of the data
What is the purpose of the srcset attribute in responsive design?
To provide multiple image sources
What is the main advantage of using Web Storage over cookies?
All of the above
Which of the following is a technique used in responsive design?
All of the above
What is the purpose of a CSS preprocessor?
To convert CSS-like code into regular CSS
Study Notes
HTML5 Basics
-
New doctype:
<!DOCTYPE html> -
New semantic elements:
- Header elements:
<header>,<nav>,<footer> - Sectioning elements:
<section>,<article>,<aside>,<figure> - Grouping elements:
<div>(replaced by semantic elements)
- Header elements:
-
Multimedia:
-
<video>and<audio>elements for native media support -
<source>element for specifying media sources
-
-
Offline storage:
- Web Storage: store data locally on the client-side (explained below)
HTML5 Canvas
- 2D drawing context: allows for dynamic, scriptable graphics
- Uses JavaScript: to manipulate and draw on the canvas
-
Methods:
-
getContext(): returns a 2D drawing context -
fillRect(),strokeRect(),clearRect(): basic drawing operations -
drawImage(): draws an image on the canvas
-
CSS3 Basics
-
New selectors:
-
:nth-child(),:nth-last-child(),:first-child,:last-child -
:not(),:empty,:target
-
-
New properties:
-
border-radius,box-shadow,text-shadow -
background-size,background-origin -
transition,transform,animation
-
-
Gradients:
-
linear-gradient(),radial-gradient() -
repeating-linear-gradient(),repeating-radial-gradient()
-
CSS3 Animations
-
Keyframe animations:
-
@keyframesrule defines an animation -
animationproperty applies an animation to an element
-
-
Animation properties:
-
animation-name,animation-duration,animation-timing-function -
animation-delay,animation-iteration-count,animation-fill-mode
-
CSS Preprocessors
-
What is a preprocessor?:
- A program that converts CSS-like code into regular CSS
- Allows for more efficient and modular coding
-
Popular preprocessors:
- Sass (Syntactically Awesome StyleSheets)
- Less (Leaner Style Sheets)
Responsive Design
- Definition: designing websites that adapt to different screen sizes and devices
-
Techniques:
- Media queries: apply different styles based on device characteristics
-
Flexible grids: use relative units (e.g.,
%,em) instead of fixed units (e.g.,px) -
Responsive images: use
srcsetattribute to provide multiple image sources
Web Storage
- Definition: a way to store data locally on the client-side
-
Types:
- localStorage: stores data with no expiration date
- sessionStorage: stores data for a single session
-
Methods:
-
setItem(),getItem(),removeItem(),clear()
-
-
Advantages:
- Faster than cookies
- More secure than cookies
- Larger storage capacity than cookies
Test your knowledge of HTML5 features, CSS3 properties and selectors, CSS preprocessors, responsive design techniques, and web storage. Covers the fundamentals of modern web development.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
