- Project Local Folder:
/Users/tflande/My Drive/Projects/Udemy - The Web Developer Bootcamp 2024/udemy_the_web_developer_bootcamp_2024
- GitHub Markdown Syntax
- Trello Board for Course (Colored coded by difficulty)
- Mozilla Documentation
- Github Code Course Repository
- Install Visual Studio Code from Microsoft (Billy Gates)
- VS Studio Colts' Recommended Extensions https://www.youtube.com/watch?v=rH1RTwaAeGc&t=1s
- Emmet installed by default
<li*5
- Material Theme: Paleknight high constrast
- Live Server
- Emmet installed by default
- Code
- Sample text https://en.wikipedia.org/wiki/Chicken
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <!-- Content goes here --> </body> </html>
- VS User Settings:
cmd + ,
- HTML boilerplate:
!
tab key<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
- Command Palette:
cmd + shift + p
- Format code:
option + shift + f
- You can also auto enable auto formatting by searching VS user settings for "format", and also "format html" to turn it on for just html.
- Duplicate lines
shift + option + down arrow
orshift + option + up arrow
- Comment in html:
cmd + /
- Holding
option
and "clicking in multiple areas" creates multiple cursors if you want to add the same text to the same lines
- Lists
- Unordered List
<ul></ul>
- Ordered List
<ol></ol>
- List item
<li></li>
- Unordered List
- Images have no closing bracket
<img src="filename.jpg" alt="alternate text if picture isn't found or a screenreader is used">
- Block content to format with CSS
<div></div>
- Inline content to format with CSS
<span>some text</span>
- Unline block its used to format things inline on same line versus creating a block lik
<div>
- Unline block its used to format things inline on same line versus creating a block lik
- Line break, no ending /br
<br>
- A line, not ending /hr
<hr>
- Superscript put text above line for reference call outs
<sup></sup>
Sasquatch[2] - Subscript put text below line scientific formulas
<sub></sub>
H2O or H8H10N4O2- Together Superscipt and Subscript can make fractions
<sup>1</sup>/<sub>2</sub> + <sup>1</sup>/<sub>2</sub> = 1
1/2 + 1/2 = 1
- Together Superscipt and Subscript can make fractions
- HTML Entities are like copyright symbols, degrees symbols
- Start with
&
and end with;
- Examples:
- less than <
<
- greater than >
>
- Ampersand &
&
- Heart ♥
♥
- Spade ♠
♠
- less than <
- Start with
Newer way to group content versus just using divs, helps crawlers to identify what are "navs", "main" page content, "footers" etc. Categories your page content for better SEO, accessible.
- Bad example: medium.com
- Good example: stripe.com
- Navigation
<nav>
- Main page content not navigation or search
<main>
- Section is a generic place holder
<section>
- Article for reusable code like a widget, has heading
<article>
- Aside is a side note
<aside>
- Header
<header>
used above things in page, its not the head - Footer of page, you can have more than one per page
<footer>
- Time
<time datetime="2024-03-05">July 7</time>
July 7 - Figure is a pic with a caption or could use a div
-
<figure> <img src ="somefile" alt="wolf"> <figcaption>A wolf in the wild</figcaption> </figure>
-
- And many more
<data>
- Navigation
- On Mac
cmd + F5
- Code
- Make your html coding fast ffs! Emmet is built into VS Code
- Cheat sheet
- Create new page
!
tab key<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
- Create "nested" html
main>section>h1
tab key<main> <section> <h1></h1> </section> </main>
- Create "sibling" html
h1+h2+h3
tab key<h1></h1> <h2></h2> <h3></h3>
- Create 5 of the same li
<li*5
<li></li> <li></li> <li></li> <li></li> <li></li>
- Create nested and multiples
nav>ul>li*3>a
<nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav>
- Use
$
and [href=] to auto enumerate withnav>ul>li*3>a[href=www.$.net]
<nav> <ul> <li><a href="www.1.net"></a></li> <li><a href="www.2.net"></a></li> <li><a href="www.3.net"></a></li> </ul> </nav>
- Use
{}
for adding in textnav>ul>li*3>a[href=www.$.net]{Click me}
<nav> <ul> <li><a href="www.1.net">Click me</a></li> <li><a href="www.2.net">Click me</a></li> <li><a href="www.3.net">Click me</a></li> </ul> </nav>
- Bad Examples of using tables in the 1900's
- Bird Species
- Table standard syntax
<table> <thead> <!-- Head of table --> <tr> <th>heading 1</th> <!-- Headings of table --> <th>heading 2</th> <th>heading 3</th> </tr> </thead> <tbody> <!-- Body of table -- > <tr> <!-- Table row 1 --> <td>test here</td> <!-- Table text --> <td>test here</td> <td>test here</td> </tr> <tr> <!-- Table row 2 --> <td>test here</td> <td>test here</td> <td>test here</td> </tr> </tbody> <tfoot> <!-- Footer of table --> </tfoot> </table>
- For more complicated table formations use
<tr colspan="1">
and<tr rowspan="2">
- Table standard syntax
- Code
- Form syntax
<form action="/search/"> <label for="cheese">Do you like cheese?</label> <input type="checkbox" name="cheese" id="cheese"> <input type="text" placeholder="enter some text"> </form>
- Inputs
<input type="text">
don't have a closing tag- Placeholder
<input type="text" placeholder="enter a username">
helps tell users what to enter inside input field
- Placeholder
- Labels help identify ids submitted, like checkboxes, ids should be unique
- They also make it so if you click on form text it will highlight the correct form field
- Use
<label for="somename">
to reference "input" field id<input type="text" id="username" name="username">
- The
name="username"
attribute is what gets sent during form submission/search?username=tflande&password=yikes&color=%23d04949&num=4&time=13%3A29
- Buttons in forms submit them
<button></button>
- Button
<button>Send</button>
and<button type="submit">Send</button>
are the same inside a form - Button inside a form that wont submit
<button type="button">Send</button>
- Different way to do button as an input
<input type="button" value="Send it">
value is used to name the button, otherwise its call Submit by default - Buttons aren't required, user hits enter and form submits
- Button
- Check boxes
checked
checks the box by default<form action="birds"> <input type="checkbox" name="agree_tos" id="agree" checked> <label for="agree">I agree to everything!</label> <button>Send</button> </form>
- Radio buttons
- Using the same
name
attribute makes a list of radio buttons in a group where only one can be selected, this is where theid
attribute is important<!-- value attribute is needed --> <label for="xs">XS:</label> <input type="radio" name="size" id="xs" value="xs"> <label for="s">S</label> <input type="radio" name="size" id="s" value="s"> <label for="m">M</label> <input type="radio" name="size" id="m" value="m">
- The value attribute is used to signal what radio button was selected once form has been submitted
birds?agree_tos=on&size=s
- Using the same
- Dropdown menus aka selects
<label for="meal">Please select an entree</label> <select name="meal" id="meal"> <option value="fish">Fish</option> <option value="veg">Vegetarian</option> <option value="steak" selected>Steak</option> <!-- default menu item--> </select>
- Range sliders
<label for="cheese">Amount of Cheese</label> <input type="range" id="cheese" name="cheese" min="1" max="100" step="2" value="75"> <!-- min max required>
- Code
- MDN CSS Documentation
- CSS Online Coding, Book Store UI example
- Color Picker
- Color Names
- List on most common fonts found on Windows and/or Mac
- Code
- Selectors
p {}
,a{}
,h1 {}
,h2, h3 {}
etc. - id selector
#mybutton {}
: used to target html withid="mybutton"
- Not commonly used
- class selector
.cool_button {}
: used to select html withclass="cool_button"
- most used
- Descendant selectors
- Direct selectors
h1 > p {}
: selects h1 one level down to paragraph - Adjacent selectors (combinator)
h1 + p {}
: Used to select paragraphs immediately followed by h1
- Direct selectors
- Attribute selector
input[type="text"] { width: 300px; color: yellow; }
used to select all attributes of said type "text"- Examples:
- Another option
section[class="post"] { color: red; }
is the same as sayingclass="post"
in html and css readssection.post { color:red; }
*
Select all links with work google in them using*=
showna[href*=google] { color: pink; }
$
Select all link ending in .orga[href$=".org"] { color: purple; }
~
Select all classes with word logoa[class~="logo"] { padding: 2px; }
- Another option
- Examples:
- Pseudo classes :class
:active
,:hover
,:checked
,:first
,:not
,:nth-of-type
, and more etc:hover
Select all post class buttons:.post button:hover { color: orange; }
nth-of-type(x)
Select every other post class.post:nth-of-type(2n) { background-color: grey; }
- Psuedo Elements
::after
,::before
,::first-lettter
,::first-line
,::selection
, and more::first-letter
Make all h2 first letter bigger:h2::first-letter { font-size: 50px; }
::first-line
Make all paragraph first lines purplep::first-line { color: purple; }
::selection
Make all text selection orange:::selection { color: orange; }
- Order matters! Last set wins
- Last selector wins
- Last css file specified in header wins
- CSS Specificity, which rules to apply when there is a conflict?
- Order of precendence if used in css style sheet
- ID
#mybutton
- Class
.classname
- Elements
p, a
- ID
- Element vs Class - The more specific wins!
button:hover { color: red; }
loses over.post button:hover { color: orange; }
- Order precedence overall
- Don't use: Override inline styling of html
!important
is used in a css stylesheetbutton { color:firebrick !important; }
override the below - Don't use: Inline styling set inside html
<button style="color:red">Submit</button>
- #ID
- .Class
- Elements
- Don't use: Override inline styling of html
- Order of precendence if used in css style sheet
- Specificity Calculator
- Code
- Box borders require 3 parameters
border-style
,border-color
,border-width
to show up andbox-sizing
to remain within specified width constraints#box1 { width: 100px; background-color: black; border-style: solid; border-color: black; border-width: 10px; box-sizing: border-box; }
- Border short hand
border: medium dashed green
- Syntax: border: width | style | color
- Border short hand
- Display Inline or Block
- width and height are not ignored with regular block elements, but they are for normally inline elements
- You can change from inline to block, but the above still applies
display: inline;
to convert block level elements like h1, h2 to inlinedisplay: block;
to converrt normally inline like span to blockdisplay: none;
hides from browser view but html is still in page
- CSS sizes
- px is pixels
- em or m
- 1em is 1x the size of parent size
- 2em is 2x the size of parent size
- 0.5 is half the size of the parent size
- rems
- scale better than em's
- using pages default root size verus parent, 1rem will always be same as root or default
- Resources
- Alpha Color
- Works only on background, background-color: rgba(255,255,255, 0.5) 4th channel 0 transparent to 1 not transparent
- Opacity
- Works on text, opacity: 0.3; 0 to 1 being not transparent
- Position Property
- position:
static
is default - position:
relative
keeps item in place relative its place in html location- top: 100px; push down 100px;
- left: 100px; pushes to the right
- position:
absoulute
- position:
fixed
good for navs - position:
sticky
- position:
- Transistions
- They are cool animations
- Help with smooothing movement of items
- Transforms
- Good for 3D animations movement
- Rotate, resize, translate move positions, skew slants
- Transforms doc
- Use transforms instead of margins to move items -CSS Button Hover
- box-shadow syntax
- Background
- Fonts
- Free fonts we can use Google Fonts
Resources
- Bootstrap
- Deck
- Code
- Uses grids, nav bars, responsive web site framework
- Installation basics
- Add bootstrap cdn css before your custom css or you can download it
- Add js scripts at bottom of page just before closing
</body>
- First bootstrap component is class container
- Larger margins
- Containers can be nested inside each other
- Buttons
- Typography
- Use display-1 throught -4 for sizing headers. Not dynamically sized by default.
- Rows have 12 units that can be divided with columns
- Columns are inside rows
- col are auto sized columns
- col-3 specified use 3 units of the total 12, leaving 9 left.