Intro Info

Question 1

What is the internet?

Answer 1

It’s a wire that connects servers to client devices and transfers data upon request from the client side devices via the https protocol.

Question 2

Someone who writes code that enables a server to listen to requests and generate responses?

Answer 2

Back-end developer

Question 3

Someone who writes code that runs on client side devices?

Answer 3

Front-end developer

Question 4

Someone who writes both front and back-end code?

Answer 4

Full stack web developer

Question 5

What is Separation of Concerns?

Answer 5

Keeping HTML, CSS and JS separate to be organized, and easier to use and update

Question 6

What is HTML?

Answer 6

Hyper Text Markup Language

Question 7

What does HTML handle?

Answer 7

Content/Structure

Question 8

What does CSS handle?

Answer 8

Style

Question 9

What does JS handle?

Answer 9

Behavior / Interaction

Question 10

What is Progressive Enhancement?

Answer 10

The idea that the core of the site, the most important part of the site is the HTML content, then we wrap that content with a layer of CSS for the presentation and then apply a thin layer of candy coating as the client-side scripting/ Javascript. Content is king - it helps with accessibility and folks with low-speed internet access so it loads more easily.

Question 11

Where does our CSS go? Inline, in the head or a separate file?

Answer 11

Duh, a separate file - for separation of concerns. But there is a time when you can use inline CSS - in emails only because they don’t have access to external stylesheets yet. You can do styling in the head ONLY when you work at amazon lol so their pages load quicker - critical path CSS that loads above the fold for a slight increase in performance (otherwise they lose millions if the page doesn’t load).

Question 12

What’s above the fold?

Answer 12

The part you can see on a page when it renders, before you have to start scrolling.

Question 13

How do you connect the CSS to the HTML?

Answer 13

You can add a link tag inside the HTML head: <link></link>

Question 14

How do you display CSS syntax (spelling and grammar rules)?

Answer 14

Selector, Property, Property Value and colons and semi-colons

Question 15

What is CSS declaration?

Answer 15

The Property and the Property Value make up the Declaration

Question 16

What order is CSS written in?

Answer 16

CSS is read top to bottom, so what is above can be overwritten by what’s below if there are any duplicates. What’s at the bottom will be overwrite what’s on the top. But points of specificity can affect that.

Question 17

What does CSS stand for?

Answer 17

Cascading Style Sheet

Question 18

Why do we link to a separate CSS file?

Answer 18

Organization, separation of concerns

Question 19

What color values can we use in CSS?

Answer 19

Word, Hex, RGBa, HSLa

Question 20

HSLa?

Answer 20

Hue Saturation Lightness

Question 21

RGBa?

Answer 21

Red Green Blue alpha (which handles transparency)

Question 22

How do you use fonts in CSS?

Answer 22

Fonts are files – The browser needs the file to know how to render the file. You can use Google fonts as they host it on their cdn - content delivery network) or buy your own. (Or create like what I’ll be doing soon!!!!!) If you want a font, link to it in your head. THEN link to your css file. Use backup or fallback fonts if we cannot get the chosen font.

Question 23

Why does linking to the font come before linking to the CSS file?

Answer 23

Because we need access to the font before we can use it to display on the page.

Question 24

Why do we use multiple fonts?

Answer 24

They are fallbacks in case that font doesn’t load

Question 25

Why shouldn’t we use all different weights?

Answer 25

Speed – it will take longer for the site to load because it’s more files to download so just select the size you will be using.

Question 26

What is the direct parent-child relationship designation?

Answer 26

> (carrot)

Question 27

How are IDs used?

Answer 27

IDs are unique and can only target one element at a time, designated using a # and a descriptive name.

Question 28

How are Classes used?

Answer 28

Classes are used to target multiple elements at the same time. It’s designated using a dot and then the descriptive class name.

Question 29

How many Classes does your selector need to override an ID?

Answer 29

10 classes - because classes are worth 10 points and IDs are worth 100. Some developers don’t use IDs at all, just classes so that the CSS doesn’t break.

Question 30

What do we mean by keep your code DRY?

Answer 30

Don’t Repeat Yourself.

Question 31

What does !important (bang important) mean?

Answer 31

!important adds a 1000 points of specificity so you really won’t be able to override it with anything else. You can use this when you do not have enough time to figure out specificity.