Intro Info Flashcards
What is the internet?
It’s a wire that connects servers to client devices and transfers data upon request from the client side devices via the https protocol.
Someone who writes code that enables a server to listen to requests and generate responses?
Back-end developer
Someone who writes code that runs on client side devices?
Front-end developer
Someone who writes both front and back-end code?
Full stack web developer
What is Separation of Concerns?
Keeping HTML, CSS and JS separate to be organized, and easier to use and update
What is HTML?
Hyper Text Markup Language
What does HTML handle?
Content/Structure
What does CSS handle?
Style
What does JS handle?
Behavior / Interaction
What is Progressive Enhancement?
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.
Where does our CSS go? Inline, in the head or a separate file?
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).
What’s above the fold?
The part you can see on a page when it renders, before you have to start scrolling.
How do you connect the CSS to the HTML?
You can add a link tag inside the HTML head: <link></link>
How do you display CSS syntax (spelling and grammar rules)?
Selector, Property, Property Value and colons and semi-colons
What is CSS declaration?
The Property and the Property Value make up the Declaration
What order is CSS written in?
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.
What does CSS stand for?
Cascading Style Sheet
Why do we link to a separate CSS file?
Organization, separation of concerns
What color values can we use in CSS?
Word, Hex, RGBa, HSLa
HSLa?
Hue Saturation Lightness
RGBa?
Red Green Blue alpha (which handles transparency)
How do you use fonts in CSS?
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.
Why does linking to the font come before linking to the CSS file?
Because we need access to the font before we can use it to display on the page.
Why do we use multiple fonts?
They are fallbacks in case that font doesn’t load
Why shouldn’t we use all different weights?
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.
What is the direct parent-child relationship designation?
> (carrot)
How are IDs used?
IDs are unique and can only target one element at a time, designated using a # and a descriptive name.
How are Classes used?
Classes are used to target multiple elements at the same time. It’s designated using a dot and then the descriptive class name.
How many Classes does your selector need to override an ID?
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.
What do we mean by keep your code DRY?
Don’t Repeat Yourself.
What does !important (bang important) mean?
!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.
