Flash Cards
Name all screen readers and their OS
Windows - Narrator, Apple - VoiceOver, Android - TALKBACK,
JAWS, and NVDA
Name 4 Disability Categories?
Visual, Auditory, Motor, Cognitive(most common)
Why is it important to know accessibility?
Accessibility is the law
Name 2 ways to test for accessibility?
Accessibility Tree and wave.webaim.org
How to start Windows Narrator, move to next item, and stop it?
WIN+CTRL+ENTER to start, TAB to move to next item, and CTRL to stop it.
What is the meaning of Semantic?
Meaning
What are Semantic tags?
used to generally determine content or what the parts of the page are about.
Also known as Outliners
What is NodeJS?
NodeJS provides a new server called express and it is growing in the do-it-yourself tech industry.
What are the 5 Basic Semantic Outliner Tags we learned?
<header> <main> <nav> <article> <footer>
</footer></article></nav></main></header>
What should Semantic tags have?
Semantic Tags should have heading tags (h1, h2, h3, etc) applied so that outliners are descriptive.Hide the heading tag with the display : none; style
Name 5 Semantic tags besides the basic ones
<section> <figure> <figcaption> <aside> <time><details> <summary> <mark>
</mark></summary></details></time></aside></figcaption></figure></section>
Most common server?
Apache which runs on Linux
What does FTP stand for, and what does it do?
File Transfer Protocol: programs like FileZilla, which upload to the server and download from the server to our local files. Local files are on the left side, and Server files on the right
What are some file permissions on the server? and who can we set permissions for?
We can set the permissions on the files on the server to read, write and execute for older scripts like perl. We can set permissions for the owner, a group and other (public).
What do we use as placeholder text? and why?
Lorem ipsum, and it’s used so people know it’s placeholder text
What is the leading application for hosting a page?
CPanel
What does SFTP stand for?
Secure File Transfer Protocol
Explain the Responsive and Adaptive designs?
Responsive: When the site scales or wraps to fit the screen size. (ZimJS is responsive)
Adaptive: When the site changes layout depending on screen size or orientation. Perhaps content is removed or a there is a change from a link bar to a pulldown menu. This can be done with media queries or JavaScript.
How do you scale with Responsive?
use % or vw
What does Media Queries do?
It tests how big the screen is
Name of the game used to practice flexbox?
Flexbox Froggy
Reproduce a basic flexbox and basic gride, and also media queries.
FlexBox:
view-source:http://imm.sheridanc.on.ca/webdevelopment/lesson11/flexbox.html
Grid:
view-source:http://imm.sheridanc.on.ca/webdevelopment/lesson11/grid.html
Media Queries: http://imm.sheridanc.on.ca/webdevelopment/lesson11/mediaqueries.html
What is the website with documentation on using flexbox and grid?
css-tricks.com
Make a basic HTML page with Semantic Tags, and hidden titles. (Do This in VS Code)
<html>
<head>
<header> <h1> Header for site</h1>
</header>
</head>
<body>
<nav> <h1>nav for site</h1>
</nav>
<main><h1>main for site</h1>
<article><h1>article for site</h1>
</article>
</main>
</body>
<footer><h1>footer for site</h1>
</footer>
</html>
How has the internet benefited people with disabilities?
sites/pages can be structured to make meaning easier to understand.
screen readers can read content aloud
What do screen readers read?
Content and whatever is in the alt parameter of images
Definitions for:
Header
Footer
Main
Nav
Article
Header: The top part of a page or section.
Footer: the bottom part
Main: The main content area
Nav: The place for interfaces like menus
Article: An article that makes sense on its own.
Definitions for:
section
aside
figure
figcaption
section: A chapter, etc. of an article or the main content.
aside: Supporting content or related information.
figure: Diagrams, pictures, illustrations, etc.
figcaption: Text to describe a figure.
Definitions for:
details
summary
mark
time
details: Extra information that can be viewed.
summary: A summary title for the detail tag only.
mark: For highlighted parts of text.
time: Show a date and time.
What does the code below do?:
repeat(auto-fill, minmax(200px, 1fr))
Fill page with elements that have a minimum width, and will make them the same size
On a separate piece of paper
Write a basic media queries for mobile(max 640px) and desktop(min641px)
@media all and (max-width: 640px){
#mobile {display:inline-block;}
#desktop {display:none;}
}
@media all and (min-width: 641px){
#mobile {display:none;}
#desktop {display:inline-block;}
}
On a separate piece of paper
Write a basic flexbox
.outer {
display:flex;
flex-flow:row wrap;
gap:20px;
justify-content: space-around;
}
.outer div {
max-width:300px;
padding:20px;
background-color:blue;
border-radius:20px;
}
On a separate piece of paper
Write a basic grid
.grid {
display:grid;
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
gap: 20px;
}
.grid div {
padding:20px;
background-color:blue;
border-radius:20px;
}
