HTML/CSS

border properties

(shorthand): border: thickness style color; width & height controls content size border-color border-width border-style border-left-style (etc for more granular control) border-radius: abs/relative values, percentage (50% gives you a circle) box-sizing: values of: content-box (default value, width & height incl content but does not incl padding, border or margin) & border-box (width & height incl content, padding & border but not margin)

What is the universal selector?

* (not commonly used)

Class vs id?

1) Classes should be used for elements that will appear more than once 2) id should be used for unique elements, only appearing once

What is the button element?

<button></button> represents a clickable button, used to submit forms or for other button functionality. When nested inside a form, default behavior is to submit the form (type attribute value is "submit") "type" attribute can be updated - "button" says it's just a button, does not submit form

What is HTTP?

Hypertext Transfer Protocol, a set of rules/protocol for how a form of communication should work

alpha channel vs opacity

alpha channel is the last value of an rgba value that sets the transparency of a color (you can also use for hex color adding in 2 values from 00 (fully transparent) to ff (opaque). opacity is the degree to which content behind an element is hidden, opposite of transparency

inheritance rule

child elements will inherit parent properties with some exceptions, if the property is inheritable (can check MDN for inheritable: yes or no) - for example, nested form elements/attr like placeholder and button will not automatically inherit, but if you select button and set color: inherit, it will

What is a span element?

generic inline container to hold things/group things together, allows you to style a group of elements all at once - similar to div except it's an inline element

How to connect an external CSS to your html file?

in the head section, you'll use the link element with attribute rel="stylesheet" and href attribute with value of location of .css file

inline vs block elements

inline elements fit in alongside other elements; ex: anchor tags block elements take up a whole block of space; ex: heading, paragraph elements

fonts for your webpage

not everyone has the same fonts installed, so to get around that you can link in your HTML file to a free resource such as Google Fonts so that whoever accesses your webpage can view it in your intended font (header section > link element w/ href attribute using embed info on Google Fonts), will need to specify using font-family property in CSS file

padding property

padding is the inside spacing from text to border; padding/margin shorthand property, you can set all 4 sides without needing padding-left etc. 1 value: applies to all 4 sides 2 values: vert | horiz 3 values: top | horiz | bottom 4 values: (clockwise) top | right | bottom | left

CSS syntax follows a basic pattern; what is it?

selector { property: value; }

Article element?

"Defines a part of an HTML document that consists of a "self-contained composition" that is independent from the rest of the content in the document."

Tags for: 1) horizontal rule element 2) line break element 3) superscript/subscript elements

1) <hr> 2) <br> - useful for writing a poem or an address where division of lines is significant 3)  & 

Descendent vs. adjacent (combinator) vs direct child/descendent (combinator) selectors

1) Descendent selector will select a nested element; to use, input outside element, space, inside element 2) adjacent selector selects elements directly after (but not a child of) another element; to use, input the first element, plus sign, element immediately after first element - to be clear, these are still element selectors but you're using combinators to change the behavior 3) direct child/descendent will select the direct child element of a parent element; to use, input parent element, > , child element ; to be clear, these are still element selectors but you're using combinators to change the behavior

What are the common table elements/attributes?

1) Table Data Cell element: <td></td> defines a cell of a table that contains data 2) Table Row Element: <tr></tr> defines a row of cells in a table 3) Table Header element: <th></th> defines a cell as header of a group of table cells 4) Table Head element: <thead></thead> defines a set of rows defining the head of the columns of the table (<th> elems should be wrapped by <thead> elem(s) (semantic markup) 5) Table Body element: <tbody></tbody> encapsulates set of tr elements to indicate they are the body of the table (semantic markup) 6) colspan/rowspan attributes: ability to adjust table cells to span across mult rows/columns

Common CSS text properties

1) color : text color 2) background-color/background: color of bg of element 3) text-align: alignment of text w/in element 4) font-weight: thickness of font weight, if font supports weight otherwise browser will pick closest value 5) text-decoration: underline/overline, color and style can be all in one line etc 6) line-height: adjusts the line height (value of 2 = double-spaced) 7) font-size: using absolute (ex: px) or relative (ex: em) values, adjust size of font 8) font-family: specific font name, often with several as a "font stack" to deal with varying user font support 9) letter-spacing: adjusts spacing btw letters

Figure element?

<figure></figure> represents self-contained content, with an optional caption (specified using <figcaption></figcaption> element). Usually an illustration, diagram, something you want to call attention to and may often have a caption alongside it

What is the form element?

<form></form> represents a document section containing interactive controls for submitting info "action" attribute specifies where the form data should be sent - so you can have value be where data is stored, or if you want to do an text input and search google, use their Url and update input's name attribute to whatever Google, Reddit etc. use, ie <form action = "https://www.google.com/search">, <input name = "q"> "method" attribute specifies which HTTP method should be used - "get" & "post" are the 2 values

What is the input element?

<input> (self-closing) Used to create a variety of different form controls "type" attribute specifies type of input (20+ possibilities), for example text, color, checkbox, radio. For radio buttons to work properly, they must all have the same name value "range" & "number" type has attributes of min, max, step (each incr/decr is by value of step), value (default/start value) "placeholder" attribute is placeholder/default text before user inputs into element "name" attribute is like the 'key' of a kv pair "value" attribute is like the "value" of a kv pair "required" attribute - self-explanatory

What is the label element?

<label></label> represents a caption for an item - associating label w/ input element visually associates w/ its corresponding input, and good for accessibility Use the "for" attribute to link to an input element - "for" value of label element and "id" value of input element must match

What is the main element?

<main></main> represents the dominant content of the <body> of a document. Content of main should be unique to the document, and should exclude repeated content such as sidebars, nav links, copyright info, site logos and search forms (unless search form is main function of page)

Nav element?

<nav></nav>Defines a block of navigation links. The nav element is useful for creating a set of navigation links as your document's primary navigation, a table of contents, bread-crumbs in a footer, or Previous-Home-Next links.

Section element?

<section></section>defines a section in a document, such as a chapter, parts of a thesis, or parts of a Web page whose content is distinct from each other

What is the select element?

<select></select> represents a control that provides menu of options - works w/ the option element <option></option> "value" attribute (when submitted, the value that's sent over) and "selected" attribute (default value)

What is an HTML table?

<table></table> element represents tabular data - info presented in a 2D table w/ rows & columns of cells containing data. In early days of web, tables were commonly used to create page layouts. Today, you should only use the table element when you are creating an actual table. To create a table, you'll use 5-10 different elements!

What is the text area element?

<textarea></textarea> represents a multi-line plain-text editing control (freeform paragraph textbox)

Markup language

A language that provides text and graphics formatting through the use of tags. Examples of markup languages include HTML, XML, and SGML.

Aside element?

An HTML structural element that marks extra or side content on the Web page. Represents content only indirectly related to document's main content

What is the div element?

Content Division element: generic container to hold things/group things together (block level element); allows you to style a group of elements all at once

HTML Boilerplate

HTML skeleton: doc type flag, html element, head element (contains metadata like the title element which sets the page title in browser but doesn't show on webpage itself), body element which contains all of the content of the page.

Header element? Footer element?

Header: An HTML structural element that marks the introduction or header of the Web page. Can have more than 1 header on a page Footer: represents the footer content - both header and footer will often incl links & navigations that're nested

What is HTML5? Is it an update to download?

Not something you upgrade to/download. HTML5 term refers to 2 different concepts: the latest evolution of the standard that defines HTML w/ new elements, attributes and behaviors & a larger set of technologies that allows bldg of more diverse & powerful websites and applications - HTML5 and friends, shortened to HTML5. The HTML standard is a document that describes how HTML should work (there's a literal document html.spec.whatwg.org) - this is what browsers use to render pages/implement HTML

CSS Units - Percentages

Percentages: relative to some other value; sometimes it's a value from the parent and other times it's a value from the element itself. Ex: width: 50% = half width of parent; line-height: 50% = half font-size of element itself

HTML whitespaces and inline elements

Quirk of HTML - when you put <span> & <img> elements on their own line (instead of <img></img><img></img>) the browser will add a whitespace between them, which will throw off your margins because you calculated margins w/o accounting for the added whitespace - this is all fixed and not a problem when you use flexbox but keep in mind

CSS units - rem

Root ems : relative to root html element's font-size, often easier to work w/ than em but professionally ppl will mix and match rem/em depending on what they want to achieve

What is the web?

Short for World Wide Web, contains billions of documents called Web pages. the set of documents residing on the internet that are formatted in hypertext. Documents are transferred via HTTP.

display property

The CSS property that specifies how browsers should display an element. Common values can be: 1) inline : width & height are ignored. Margin & padding push elements away horizontally but not vertically. 2) block : pushes next element to another line; width, height, margin & padding are respected. 3) inline-block : behaves like an inline element except width, height, margin & padding are respected 4) none : element is there but does not show

HTML elements are?

The building blocks of HTML pages - standard/common elements are the <p> or paragraph element, header elements, image elements, form elements etc.

What is the internet?

The internet is the physical network of computers all over the world. The infrastructure that carries things like, email, the web, file sharing, online gaming, streaming services, etc. Communicate via TCP/IP

Front End / Back End

The user lives on the front end with her browser, the server serves data from the back end. Server-side/back-end refers to code that has to run on the server itself to figure out what to respond with when it receives an HTTP request. HTML, CSS, JSS are all front-end code, back-end code is langs like Python, C, Java, JS is also used server-side

HTML tags are?

We define HTML elements using tags - most often we need opening & closing tags, although some elements use self-closing tags.

What is an HTTP Request?

When we input an http address, we are sending a request to a server for information

Request/response cycle: explain the role of server/client and browser when you navigate to a web page

Your browser sends an HTTP request to the appropriate server, the server responds with instructions/code (HTML, CSS, JS), that your browser then renders into the webpage you see

How to specify a class and an id in CSS?

class: preceded by a ' . ' id: preceded by a ' # '

Attribute selector

element[ attr here="something"] { } : often used to select type attribute for example on input type to adjust behavior on CSS; can also use to select with classes/ids (also are attr), less specifically using *= (contains), $= (ends in) etc. ex: input[type="password"] { etc } a[href*="google"]{ etc }

CSS Units - ems

em : relative units, depending on the property it will differ; ex: font-size, 1em equals font-size of parent. 2em equals 2x font-size of parent etc. ; w/ other properties, 1em is = computed font-size of element itself. this is useful when you want to scale something relative to its parent element w/o having to tweak ea property like you would if you were using absolute values like px (ex: buttons where parent property font-size changes, but you want to maintain its shape and size relative to its font as it changes, you can use em values to do so). issue: it can grow/shrink exponentially in unexpected ways when for example you're using nested lists. Something to keep in mind, professionally ppl will mix & match rem/em depending on what they want to achieve, but easier to work with 'rem'

What is 'specificity' in CSS?

it is how the browser decides which rules apply when mult rules could apply to same elem. the more specific selector "wins" inline style (not rec) > id > class > element to assign a "score" of specificity: 3 digits from left to right: id selectors; class, attribute & pseudo-class selectors; element & pseudo-element selectors. ex: #submit {} score of 100; nav a:active {} score of 012 or score of twelve

!important rule

it overrides all other conflicts, sidesteps specificity - tells browser this styling is the most important, apply it. Also not recommended

pseudo elements

keyword added to a selector that lets you style a particular part of selected element; denoted by ' :: ' ex: h2::first-letter { styling } (applies styling to 1st letter of h2 elements ) ex: ::selection { styling } (applies styling to entire page when selecting something) - can also precede :: to apply styling to more specific elem

margin property

margin is the outside spacing from element to other element; padding/margin shorthand property, you can set all 4 sides without needing padding-left etc. 1 value: applies to all 4 sides 2 values: vert | horiz 3 values: top | horiz | bottom 4 values: (clockwise) top | right | bottom | left

What is semantic markup?

meaningful markup or markup that relates or pertains to the meaning of the content of that element; more modern implementation of HTML/CSS - for example, instead of using all divs, modern markup would use <main>, <section> <nav> elements - they do the same thing as divs, but they tell us what they do, are more meaningful. These elements are newer, adds meaning for code readability to yourself/other developers, helps page crawlers - makes your code more crawlable, essential for SEO, more friendly, as well as more accessible for people who use screen readers

What does 'cascade' refer to in CSS?

order matters, essentially - the styles are applied in cascading order, so if you have conflicting styling, whatever comes last (top to bottom order) will be applied. Same goes if you have mult CSS files - if the order in your header has 2 CSS files with conflicting styling, it will apply the last CSS's style, overriding the first CSS file's styling in event of conflict

transform property in CSS

powerful , several different values like rotate, scale, translateX or Y, skew

pseudo classes

preceded by a ' : ', allows you to select an element in a particular state and apply styling to it; commonly used with :hover ex: .post a:hover { something } (all anchor tags within a class of "post" will have something applied to it when hover'd over :nth-of-type(num or numn) { something } is another common one, to apply styling to the nth of type (odd: 2n+1, even: 2n)

position property in CSS

sets how an element is positioned in a document ; can have values of relative (relative to itself, offsetting where it would be if static), absolute, fixed (fixed in a position regardless of scrolling) or sticky (will be not fixed and then after a certain threshold will stay there); and works with top, right bottom and left properties to determine final location of positioned elements

What are entity codes/HTML entities

starts with an ampersand '&' and ends w/ semicolon ';' | used to display reserved characters like '<' and similar - need to use entity code (vscode will be confused, but browser will probably get past it and display correctly, but it could cause problems as it's a reserved character)

background property in CSS

there is the shorthand, "background: " (order doesn't matter except when using background-size property in which case must be preceded by background-position & '/' ; ex: center/cover; and also specific background-image (specify a url/location of an image, can also set value to be a gradient), background-size (cover, = will fit as best as it can w/o skewing or cropping; contain = fit image w/o cropping, will repeat by default), background-position (top = starts image from the top; bottom = starts image from the bottom)

transition property in CSS

transition: property-name duration timing-function delay. Best practices: specify the property-name always instead of all (esp as you scale), use seconds instead of ms for duration/timing value for ease of use (more of a pref). You set transition property on starting state (ex: set transition property on section div, if you want transition to start on section:hover div