Topics covered so far:
At its core, it's a system to share resources over the internet and all built on HTTP.
- One of the main foundations of communicating on the www.
- the main protocol that allows us to share (request and receive resources!) information and data in the web.
- Our Web browsers send a HTTP request.
- It finds its way eventually to the appropriate server/s.
- Servers respond with a Web page.
- The server responds with instructions with code that my browser can understand.
- So the job of my browser is essentially to display or to render content for the user, for humans, for human eyes/ears.
- Boilerplate - template
- HTML root element
- paragraph elements
- HTML forms
- HTML Headings (h1, h2 etc)
- HTML Lists - ul/ol, nested lists
- Anchor Tags (and href attributes for added information- offers a path for link)
- HTML Images - self-closing
-HTML5-new version of the language, larger set of technologies
- Block and inline elements
- span/ div elements
< align="center">
</>
- sequences we can use inside of our HTML to show different characters (eg. copyright symbol)
- Resource for references
- Semantic- relating to meaning.
- The use of descriptive tags instead of using standard divs.
VSCode Emmet documentation
Tabular data nice clear way of displaying some data. Popular back in the 90s to layout websites.
A collection of HTML elements for users to input values. Forms are for information collecting. A simple search can be from a form- it fires across a HTTP request to a server to retrieve results for the search.
- the action attribute- specifies WHERE the form data should be sent.
- the method attribute specifies which HTTP method is being use eg GET method.
what happens behind the scenes
search inputted in form by user -> request sent to end point of server with query search term -> server sends back results
- varying types of inputs, using the type attribute to specify what type of input you'd like.
- time
- text
- password
- color
- number
Important for accessibility.
<label for="inputId"></label>
When there's a button inside a form, it submits the form - default behaviour.
Workaround to prevent default behaviour- add a type attribute:
<button type="button> Button! </button>
- built in browser validation on the frontend
Learning Objectives:
* {
color: black;
}
h1, h2, h3 {
color: black;
}
The whole idea behind the id selector is that it's singling out one thing. It's a unique identifier.
You add an I.D. to your markup and then you reference it using the name of the ID and the hash sign. You shouldn't have more than a handful on an application.
More common, and can be applied ot multiple elements. You're not going to have every single thing be completely different. You often will have groups of things or classes that you style similarly. USeful for repeated patterns.
Commonly used. The syntax involves applying a space between nested html elements (including classes and ids where applicable).
Not commonly used. Applying styling to elements one after another- NOT nested but ADJACENT to eachother.
Selecting elements that are direct descendents of an element.
Fairly uncommon to use. You can apply this rule to any attricute including classes.
Parts of an element.
Resource: https://specificity.keegan.st/
The most specific way to style (ideally should be avoided), and often not recommended.
The below is almost never used and isn't recommended. It ignores all other rules.
!important
Styles will be inherited by child elements fro mparent elements if they're not set on that element specifically.
Some elements don't inherit by default (submit on forms for example). There are workarounds for this but it's rare to use:
button, input { color: inherit }
The box model is basically just the idea that everything in excess is a box and those boxes have a couple of different properties.
They control the inner content box.
They're an important part of making, first of all, a nice looking website, but also they play an important role in making it clear what certain things do or bringing attention to certain elements.
We can change the border, for example, as I hover, and that makes it very clear that I'm doing something
Pixels are commonly used for borders because generally, borders are small. So pixels are a pretty good unit to use.
border: solid 2px black
So the next piece of the box model we need to cover is padding, padding is the space between the content, the actual content box and the border of an element.
It's the space between an element content area or content box and its own border, its internal spacing.
Margin is the space outside of an element's border between that element and something else, other elements.
So padding is the spacing on the inside of the border.
Margin is the spacing on the outside.
And just like padding, we have the four individual properties, margin left, margin, right, top
Syntax:
Shorthand:
Recap on inline and block elements:
We can change the behavious or block level elements (elements that take up the full width of the screen).
display: inline - on block level elements will reverse the block behaviour
display: block - on inline elements can reverse the behaviour
display: inline-block - for block level elements, behviour will be inline and height and width will work
But for the most part, what we've covered here are inline block and inline. Three different options for display.
It all has to do with how elements fit in with other elements and how they're affected by box model properties.
Concentration on relative units and are commonly used.
It has to do with the width of the height of the upper case letter M and typography.
EMS are relative units as our REM's, so they are relative to some other value.
And what's mildly confusing about them is that that other value changes depending on the property.
Why do we use ems?
- Proportional to parent size. Font sizes for example, grow or shrink depending on the one change- the font size we evaluated the parent to.
If we use pixels, we would have to tweak every one of these numbers. But if we use EMS, things scale as that font size changes.
There are limitiations with ems. Nested elements for example, can have a snowball affect due to ratios being based off parents.
This is where rems can be considered even better for scalability:
So REM's or root MS are similar, except rather than deriving the font size from the parent element, they derive the font size from the root HTML elements, font size.
//root element
html {
font-size: 30px
}
So it's relative to this one font size for the entire document. So if your root HTML element has a font size of 20 pixels, one room is always 20 pixels.
No matter where you are in the document, no matter what your nested inside of.
But ems do you have a place, for example, when you want to make a little component, ie a button. A little thing that's reusable and might scale up or down nicely based upon that font size, REM's is really how something looks relative to the rest of the document.
Objectives for this module:
A value from 0 to 1.
What's important to note here, is that the part the alpha channel, this this color is only going to affect the background color of the element or wherever I'm using this. That text itself wouldn't change and would remain the same colour.
Now opacity is a property we set on an element that will make it or it governs the entire elements transparency, including its contents and any descendants.
Opacity is a property that goes from zero to one, so zero is completely transparent and then one not at all transparent. An entire element, the entire div would be transparent versus with rgba.
MDN definition: position sets how an element is positioned in a document. It establishes how for other properties: top, right, bottom and left.
It determines how they work depending on how position is set.
- static: elements are naturally static
- relative: is going to keep the element in the normal flow of the document, but we can offset it relative to itself using top left, right and bottom. You can use top, bottom, left, and right to position the element. This offsets elements from its current position. It's positioned relative to where it would be if it was just normal, if I didn't offset it.
- absolute: The element is removed from the normal document flow and no space is created for the element. Relative to its clostest 'positioned' ancestor. Depends on the parents.
- fixed: when something is positioned fixed, it's going to stay there. Its position is relative to that containing block always. Similar to
absolute, except it has nothing to do with any parent elements. - sticky: It will scroll along with content until it hits the top and then it stays there.
So transitions allow us to animate the transition of one property value to another property value. Often used with hover effects.
trasition: 1s
Syntax with further options:
NB: transition-timing-functions- lots of options
To summarize how it works, there are four things that we can specify. A property that we want to animate, a duration that can be in seconds. It can also be in milliseconds.
We can specify a timing function, and then after that, a delay.
So Transform allows us to do a lot.
- We can rotate things and warp their perspective.
- We can scale them and stretch them and skew them.
- We can translate or move them across the page, up or down and all sorts of things we can do multiple at once.
We can rotate something and scale it.
The thing that ties all of this together is that we are transforming elements.
It will accept, let's see, angles we can specify as degrees, as radians.
- rotateX()
- rotateY()
- rotateZ()
Scale is another transform function that we can use that will change the size of an element. We can grow it or shrink it.
- scaleX()
- scaleY()
- scaleZ()
Translate allows us to take one element and move it around so we can move it to the right, move it up, move it down or do both at the same time.
- translateX()
- translateY()
There's a couple of different values, but it's either a length or some percentage and that length can be really any unit that we've seen. It could be ems, rems, px and percentages etc.
Last one up: skew is going to skew an element on a 2D plane.
- skewX()
- skewY()
It accepts angles, degrees or radians or turns or gradients.
Main takeaway from transform: Very important to understand about Transform: everything we do is going to apply to not only the parent element, but also its contents. This makes it super powerful.
We can do all sorts of animations and cool effects with transformations.
It's really useful for laying out elements and adding space or sharing space, distributing space to make a webpage.
Flexbox is a newer part of CSS, so it has not been around for very long at all. It's really only become pretty standardized across browsers in the last maybe two years, maybe three years.
It's a tool or it's really a series of properties that we use to layout items on our page in a box of content.
We have some container and we want to distribute space inside of that container.
When we designate a some box or some container, a flex box, we set display to flex in that box.
In that box/container, there are two axes. X is the main axis in the cross axis. And these are very important for the other properties we're going to cover.
By default, the main axis goes from left to right.
- row, row-reverse
- column, column-reverse
It depends on flex direction. The way that it behaves depends on the main axis and that main axis can change.
This property determines how the actual elements, how the content is distributed across the main axis.
Default is going to be justify-content: flex-start.
- flex-end (takes the content and move it to the end of the main axis.)
- center
- space-between
- space-around
- space-evenly
Determines whether our elements are going to rap along the main axis onto a new line if it's horizontal or a new column if it's a vertical main axis.
- wrap
- nowrap
- wrap reverse
So justify content is along the main axis.
- baseline
- flex-end
We use align-content to control or distribute space along the cross axis, but only when we have multiple rows or columns, depending on if we're in a row or column based layouts.
Basically, if we are in columns like we have here, a line content controls the space between those columns.
If we're in rows, the main axis is left to right, right to left. Now, if we only have one column or one row, we don't have flex wrap turned on a line. Content does nothing for us at all.
It just doesn't mean anything. It's only works when we have rap or rap-reverse for flex-wrap.
Aligned self is very similar to line items, except it's actually a property we add to a single element or it doesn't have to be one but two individual items in the flex container.
So it's the first property we've seen that we don't actually apply to the flex container itself, but to individual elements, and we can change the alignment along the cross axis for a single element using it.
These are three related properties that have to do with individual items in a flex container and how they grow or shrink when there's available space or when there is too little space.
-
Flex basis is just the initial size that an element should be added into our box and it might be with a height depending on the main axis direction.
-
Flex Grow is going to control the amount of space that an element takes up if there is available space.
-
Flex shrink is kind of the same concept. It governs the rate that elements shrink when there is not enough space in the container.
So we use these properties so frequently that flex was created. It allows us to set all three in one go.
There are a couple of different options you can pass in three different values. And the order here:
-
if there are three values, is flex, grow, flex, shrink and then flex basis.
-
if we have two values, it's just flex, grow and flex shrink.
The term responsive design refers to basically making a website that is able to respond to the device that it's on, whether that means the screen size, if it's on a small device like a mobile phone or a super large monitor or the orientation of the device.
It refers to creating a single website or application that is able to respond to different screen sizes or different features on the screen or on a device in the way that we actually do.
This is where media queries are used!
Media queries are the main mechanism that we can use to make a responsive website to restyle things or remove things, show and hide, change their sizes, go from a row to a column.
Bootstrap is a third party tool. It's CSS that multiple people have written to incorporate in our code.
Similar tools include Bulma, Semantic UI, Material UI which all accomplish the same goals.
How to include Bootstrap in your documentation in html document:
- bootstrap CDN
- own style sheets to avoid bootsrap overriding your styling
- container
- buttons
- Bootstrap Typography & Utilities
Classes for Headings:
- display-1, 2, 3, 4
Class for naming sources:
- blockquote
The grid system helps us lay out our content on a Web page when we're using bootstrap and it helps us actually create responsive layouts where the division of space might change depending on a screen size.
- there's got to be a container class any time we want to use the grid.
- then
row: Every row in Bootstrap has 12 units of space to divvy up, so 12 units. - create columns in our row.
col-sizeupto12orcolfor auto resizing of columns (refer to documentation)
The most important or most exciting part, which is how we can create responsive layouts and shift content around based upon the screen size.
So the way that we do this hinges upon the built in breakpoints, in bootstrap. There are different sizes that have been predefined.
So we have small is from five hundred and seventy six pixels up to 768. Anything below five. Seventy six is considered extra small. Then we have medium, we have large and we have extra large, anything greater than 200 pixels wide.
So these are different sizes that are predefined and we can reference them at any point using the grid system.
Bootstrap is built ontop of flexbox and include break points to apply these rules.