General Info

Before we start the lesson...

Be sure to download either Brackets, Atom, or Visual Studio Code.

Download a code editor and use it when coding, it makes your life easier.

Have a template HTML, CSS, and JS folder structure so you don’t have to start from scratch each time, I have included one here.

Keep all files in an organized folder structure, having a folder for different code languages, images, videos, pages, etc.

Be concise with your code! If you can do something in 1 line of code, don’t write 10.

Always name your homepage index.html if you try to put a site online without an 'index page', nothing will appear.
Following naming conventions for files, ids, & class names like lowercase or camelCase is suggested (camelCaseIsPuttingNoSpacesButCapitalizingEachWordLikeThis)
Name all files, ids, & class names in a way that makes sense. Other people will probably read your code so be sure to make it readable.

Ideally, you can have multiple CSS files, one per large section of a site (for example one for the nav, one for the footer, one for a specific page or section, etc.), that way you only import what you need per page.

Do not use a <style> tag to style everything on each page, it creates redundancies, and will make things hard to update.

General Info +

Just a little extra

Be sure to do a CSS reset to make your sites consistent across browsers:


* {
    margin: 0;
    padding: 0;
}

Sometimes you may want a full reset, in which case this open-source reset may be of use.

Be sure to have a 'Beautify' plug-in to format your code, so that it is easier to read.

Drag the entire folder into your code editor when working, it makes the workflow smoother, and in some cases allows for more accurate previews.

If code becomes complicated be sure to take notes!
Like this HTML note
Or this CSS note
Or even this JS note

Google, W3Schools, Stack Overflow, and Mozilla Docs are your 4 new besties, they will help you with virtually anything.

And if all else fails be sure to ask a friend, mentor, tutor, teacher, or whichever God or Deity you worship. Are you there Dwayne the Rock Johnson?🙏

Parents and Children

The birds 🐦 and the bees 🐝

Parents, children, and siblings are terminology people use to refer to a hierarchical code structure.

When you create any single element and it is empty it has no classification. When you add things around, inside of it, or outside of it, it becomes part of a family.

It’s important to remember that children follow the parents' rules and if the parent dies or is erased the children all die too.

Children can rarely affect a parent, and any styling done to a parent will be carried down to its child.


<ul> Parent to the list items

                <li>
                  First Child to ul, sibling to the other list items</li>

                <li>
                  Second Child to ul, sibling to the other list items</li>

                <li>
                  Last Child to ul, sibling to the other list items</li>

                </ul>

Who is HTML?

HyperText Markup Shufflebottom? No wait that’s HTMS

HTML (Hypertext Markup Language) is one of the primary ways in which information is displayed on the web.

HTML’s written structure is very unique, in that it is a “markup” language, meaning that it writes pre-formatted text into a structure. It can be read with relative ease because it is pretty much a document with formatting.

HTML works with other languages like CSS, Javascript, PHP, C#, .net, SVG, XML, and more to form together what we perceive to be a website

Generally, markup languages feature tags and have a distinct parent-child structure.

It’s usually best to group similar elements, keep parents and children in mind when creating containers with things in them.

HTML will almost always have an opening and closing tag and look like this:
<p>Lorem Ipsum</p>

Raw HTML looks like this

Let’s Learn Some Tags!

If someone calls me a <p> tag should I be offended?

<head> - The head is all of the content that is not shown physically on the website; it includes metadata, site descriptions, font links, etc.

<body> - The body is the main content that is displayed on the website; it contains text, videos, images, etc.

<div> - A div is a multipurpose container, It doesn't look like anything and won't do much unless you style it (it will break text though).

<span> - A span, like a div, is a multipurpose container, It also does not look like or do anything and will display inline with text.

<h1> - A heading tag is meant to hold header or title text in it, it will display it with specific header styling.

<p> - A paragraph tag is meant to hold any kind of text, it will display as default text.

<a> - An anchor tag, it is a link to another page or part of a page.

<img> - A image tag, will hold images and render them as solid blocks.

<br> - The break creates a line break.

<em> - The emphasis tag creates emphasis on words, and is usually italics.

<strong> - A strong tag creates heavy importance on words and is usually bold.

<ul> - An unordered list creates a list without number incrementation, and shows bullets or dashes.

<li> - A list item tag, is a single item in a list.

<form> - A form is a blank form container with some sort of action once it’s contents are submitted.

<input> - An input tag is an interactive form element that can change into a variety of different input types like a dropdown, a textbox, radio buttons, and more.

<iframe> - An iframe is an empty window that holds other entire sites within it.

Attributes...

What’s an alt tag?

id - An id is a unique indicator, there only ever be one single id for something, and you can directly style that one thing at a time.

class - A class is a generic indicator, something can have multiple classes, and multiple elements can share class names.

href - The href is a reference to another location, it can be a link, a file, folder, phone number, email, and much more.

src - The source is a reference to a specific location where linked files are located.

name - A name gives an element a unique indicator for form submissions and occasionally screen readers.

alt - An alt tag can be written on images to give extra information in case the image does not load, or for people with screen readers.

title - A title tag creates the page title or gives elements a hover tooltip.

Styling With CSS

Now we stylin’ 💅

CSS (Cascading Style Sheets) is a style sheet language created to work with HTML to style and layout pages on the web.

It works by stating what you want to style (be it a tag, id, class, etc) followed by the style parameters that you want that element to have and a semi-colon to end each line.

CSS generally works top to bottom (aka. cascading), and takes priority on id’s, classes, and tags in that order.

Any time something is repeated in CSS, it will go with whatever is more important in terms of the cascade.

Be sure to use classes when something is going to be repeated like text styling, and save ids for specific single-use styling.

The structure generally looks like this:


#lit {
  color: red;
}

Basic CSS

She’s padded for the gods! Slay that display!

display: block | inline | flex | grid | ...
Sets the fundamental way in which the element acts.

position: static | fixed | absolute | ...
Sets how where the element is on the page, and how it acts.

height/width: [value]{px, em, vw/vh, %} | auto | ...
Height or Width sets the height and width of an element, respectively.

margin: [top, right, bottom, & left values]
Creates an invisible margin around an element, pushing other elements away.

padding: [top, right, bottom, & left values]
Creates a solid space around an element or in an element, pushing other elements away or compressing itself.

color: [color-value]
Sets the font colour of an element.

background: url() | [color-value] | ...
Gives an element a background; it can be all sorts of things.

border: [value] [type] [color-value]
Creates a visible border around an element.

box-shadow: [values] [color-value]
Creates a drop shadow on an element (the syntax is a bit long so just look it up).

border-radius: [value]{px, em, vw/vh, %}
Creates a rounded edge on an element.

z-index: [value]
Positions the element on a "z layer" so that things that have a higher z-index go over things with lower z-index.

font-family: 'font-name' | [font-value]
Sets the typeface to be used on an element.

font-weight: [value]
Sets the font weight of text in the element.

text-align: left | center | right | ...
Sets the text alignment of an elements' text relative to the element.

Help & Troubleshooting

HELP! EVERYTHING IS #0000FF!

Check that everything is spelled correctly & that your stylesheets and external files are linked correctly.

Check it again!Trust me check your code again to be sure you didn't miss anything.

Use the Developer Tools Inspector generally by right-clicking and selecting inspect.

Be sure you're using the correct syntax, HTML Reference & CSS Reference are two great resources to check any HTML tag or CSS property.

Be sure that your CSS is applying properly, and check the styles that are applying, as well as the "box model" in the inspector that shows margin, padding, and more.

Try Google-ing the problem.

Ask a prof, peer, mentor, or me!

If none of that solved your problem.. Honestly just cry and give up at that point.

Common HTML & CSS Errors

My thing doesn't look like the thing

Be sure to check the following:

Spelling of Ids and Classes is consistent and correct with . for classes and # for id in CSS

CSS properties are written correctly with American spelling and dashes like background-color

Look for missing semicolons ;, apostrophes ' ' " ", opening or closing tags <div> </div>, squiggly brackets { }

File names are written correctly and use the correct path ./ is the current directory, ../ to go up a folder

Tips

For all you cool kids 😎

Get a feel for your shortcuts like copy c, cut x, paste v, save s etc.

Take advantage of the multi-line typing Hold cmd, ctrl, or alt and click or highlight multiple places

Take advantage of formatting in your code editor to keep your code organized, or download a Beautify plugin.

Use selectors in CSS for more advanced property selection and editability.

Use emmet to create lots of code incredibly quickly!

Look into JS, PHP, or other languages or libraries to expand the functionality of your site.

Use Google Fonts for free and beautiful typefaces that can be imported directly into your code.

Checkout Codepen for quick code snippets that can be referenced when making your own things.

Look into Font Awesome for amazing and quick icons that can be used directly in your code

That's all for now!

Be sure to contact me if you have any questions or concerns

Let’s Play <Tag> with Html And Style It