Full stack course

13. HTML Heading elements

• Tag = <h1>
• Element = whole thing = <h1> Hello </>
• When creating headings gradually go down in size have 1 h1 heading
etc.
15. Self closing tags
• Void element = Element with no content (self closing tag)
• <hr/> = horizontal rule tag creates a line to separate text
• <br/> = break tags used to start new line
18. Lists
• <ul> = unordered list = just bullet points
• <ol> = ordered list = gives you numbers
 20. Anchor elements
• <a href=“www.hhgjknk”> Click here </a>

Anchor
element Attribute

• <a draggable=true> Drag me </a> = This attribute allows you to drag it

Start= 5 starts the list count from 5
21. Image elements

You can add size

like this to image

Always use alt

attribute for blind
people
25. Computer file paths
Relative path = more relative, if you are in the
Absolute path is where you go step by step index html file and want cat png go
through the path images/cat png
When using relative path (shorter and better)
Double dot and slash ../ ,means to go up a folder.
./ means to access something in current folder
 27. HTML boiler plate
HTML tag is the root that everything will go in
and has language required for screen readers
Doctype shows browser what version to have right accent
of HTML
Meta tag includes the character type (charset)
The header is not for the user to see
this lets the browser know what characters we
except title. Title appears in website
use, some character types don’t allow emojis.
tab
UTF-8 is the most common

Body is where the content goes

This line not required used to be for internet
explorer to show it is compatible
This line tells the browser how to display
your website in terms of size
33. How to add css External is
most common
3 ways to Rel stands for
add css relationship
and shows the
relationship

Inline rarely
used only Internal use in style tag and
for one only use to style a section
element and only if you have a one
maybe page websit. No good for
multipage websites
Examples
34. Selectors
• Difference between Class and id
• Id should only be added to one element in a html file but class can be
used as much as you want. For example, you can have an id of color:
red just for h2 elements but you can’t then add a generic color-red
{color:red} id like this and use it everywhere.
Attribute selectors: You can select elements
to style based on their attributes
Universal selector = Selects everything
39. Font properties – recommended to use
rem as it is more consistent
Sans serif and serif are back up fonts
here on mac you might have font u can’t
have on windows.
If you have spacing in font name add
quotes
39. Font properties
• To add fonts from google: add the link in the head and the css in the
css file. Here I added the sixty four font from google
While in inspector tools, go to 3 dots -> More tools -> CSS over
view here you can find out the colours and fonts of a website
41. Box modell
 Position: The lower down the

43. The cascade file the higher importance,

here blue would be applied

Specificity: Order of
importance: element,
class, attribute and id. ID
is most specific and is
prioritised
 Type: Here is the level of
prioritisation for types
of ways of adding CSS

You can use !important to overrule

Cascade order of importance of CSS
44. CSS selectors- Use child selector to target
a 1 level down child element
Descendant selector: usually used instead of
child selector
Here I select a div with
the .box class and select it’s
ul ancestor and make it
blue
Chaining selectors to bee super specific
Element should always go first eg. H1#blue not #blueH1
Combining combiners
45.CSS positioning
Static – Don’t even have to write static as it is default. Th left and
top do nothing as it is static
Relative positioning: It has been pushed from the left 5- px
and 50px from the top. Relative to it’s original position
Absolute positioning: Because the green boxes nearest ancestor wasn’t
set to relative it started in the top left corner by default. Absolute
positioned things go out of original flow so they can be placed on top of
things
Fixed positioning means it stays in the same position in the
browser, so if I scroll down the green div will follow
48. CSS Display
Display inline
puts them on the
same line. Most
elements are
default
display:block
You can set the height and width of block and
inline-Block elements but not inline elements

Spans are inline elements

49.CSS Float and clear. Float is bad for layout.
Use it just for wrapping text around an image

Here we got I’ll image to float to the

left and the text wraps around it.

If you don’t want an element

to wrap around the float
element then use the clear
to clear it from the float.
50. Responsive websites
 Opposite to max width so
51. Media queries anything above 600px the h1
should be 15px
Combining max and min width

You can also add media queries when someone wants to

print. Don’t need to add screen as that is default but add
print if your website needs to be printed
 55. Flex direction
Flex basis controls height and width of flex items dependent on
the main axis.

If flex direction is column it will control height if it is row it will

control width

Main axis =
red
Display: inline flex makes the elements only
take up the space they need

Select all direct children like so

Need to set height of container for align items
to work, you can then control where they go in 56. Layout
the container. Set this on parent container
Used on parent element

Flex wrap: By default is set to nowrap, so items get

Order property pushed off the page and user can’t see them if
there are too many. So set it to wrap so the items
continue below. Set this on parent element.
You can use align self on the item to align it separately
from other items
 57. Flex sizing Flex grow makes items grow to max out the
available space. Opposite for shrink untill you
This is the flexbox algorithm. Min-width/max is of highest reach minimum width
importance. Usually use flex-basis to set width on items
60. Display grid Pixels and rem don’t make grid
responsive to screen change

Instead of writing columns and rows you can just do

this
Auto size
When you try and use auto on
a row it will try to fit the
content but if you use it on a
column it will try and use 100%
of the column space
Fractional size

Use repeat so you don’t have to

write out 1 fr a billion times
 Minmax size

Minmax allows you to set a limit here we set the

width of the 2nd column to be a min of 400 and a
max of 800
Grid-auto-rows
Use this if you have a game maybe where you add squares via js. You can set the height of the
rows or width of the columns using grid-auto to make sure the rows added look good.
Recap
 62. Grid placement You can also choose where you want the item to
span from using grid-column-start and end. You
can also specify the end with – numbers which
You can get grid items to span over columns you can see at the bottom of the grid, this helps
and rows when working with big grids
You can use order to switch items around, the highest number always goes to
the end, default everything is 0.
You can specify where you want an item with end
and start but the grid-area is a shorthand for this
You can also overlap items in grid
64. What is Bootstrap
When using bootstrap and an external css file you have
to place the external css file beneath the bootstrap link.
65. Boot strap layout
BS container is responsive
Container and container fluid are
most often used as the container
gives some nice space to the
side of your website and the
fluid makes it take up 100% on
all screens
Works same as tailwind, if you don’t define a number they will auto
distribute. Breakpoints work up so here the first row style will apply to
small devices and above When the overall width is less than 576 it will
automatically go to column and each item will
take up 100%
66 BT components
Add bootstrap JS code above
the closing body tag
Add spacing
using their
utility classes.
For example if
you add: pt-2
that is padding
top
You can also add dark mode if you go to customise -> color
modes -> dark mode enable and you can add a tag to the html
Boot strap template websites
• https://www.w3schools.com/bootstrap/bootstrap_templates.asp
•
• Bootstrap also has it’s own templates in the themes section but paid
for.
• If you google bootstrap templates free you can find more
Understanding colour theory
70. Fonts – Max 2 fonts per website

Think about this

when choosing
2 fonts

Look for this when

Searching for legible fonts
71. Manage attention with UI design

White space
72. UX design