Explore

Advanced Guide To Web Development

Session #1

Session #1 is essentially a review and foundations of HTML/CSS. We will be doing a kahoot quiz that will cover all content which is considered as prior knowledge. We will end this session off with a review project.

⁠

HTML/CSS Review Quiz Results

Post file here

⁠

Prior Knowledge

Here are all the content areas in web development that are considered prior knowledge.

Web development terminology

Define “syntax”

Define “semantics”

Anatomy of a webpage

What each line of code in the basic HTML template mean

HTML factual knowledge

What is HTML

What does HTML stand for

HTML tags

heading tags

list tags

<ol>

<ul>

<li>

inline text tags

<em>

link tags

<a>

internal links

external links

linking images

table tags

<table>

<thead>

<tbody>

<th>

<tr>

<td>

form tags

<form>

<input>

<label>

individual tag: <p>

individual tag: <img>

individual tag: <header>

individual tag: <footer>

individual tag: <nav>

individual tag: <code>

individual tag: <button>

individual tag: <marquee>

HTML tags and attributes

CSS factual knowledge

What is CSS

What does CSS stand for

CSS selectors

Selecting by tag name

Selecting by class name

Selecting by ID

Multiple classes

Descendant selector

CSS Pseudo classes

CSS styling properties

CSS position properties

position: relative

position: absolute

position: fixed

position: sticky

top

bottom

left

right

background color

coloring

font family

font size

border

text align

margin

background image

width

height

overflow

display

flex-direction

list-style-type

CSS layout and position

HTML/CSS grouping tags

CSS box model

Professional webpage styling

Multiple pages and files

Creating

Connecting

Organizing

Important skills

Inspect element

Using documentation libraries

Inline CSS styling

Using github

Using comments

HTML comments

CSS comments

Webpage planning diagrams

Flowchart

Wire frame

Specification table

UI diagram

⁠

Review Resources:

Here are some good review resources to refresh your memory on web development

⁠

⁠

ch03-css_excerpt.pdf

230.1 kB

⁠

CSS selectors cheatsheet.pdf

187.8 kB

⁠

css_pseudo_classes.pdf

93 kB

⁠

HtmlFormsNotesPacket.pdf

2.4 MB

⁠

HtmlLinksTextbook.pdf

1.2 MB

⁠

HtmlTablesPpt.pdf

1.1 MB

⁠

Session1-Notes.pdf

556.5 kB

⁠

Session1-LearnerNotes.pdf

3.5 MB

⁠

Session#2-LearnerNotes.pdf

504.5 kB

⁠

Coding Challenges

Here are some ways you can practice the skills you learned :)

Using everything covered relating to HTML/CSS in this session, create a personal blog featuring all about yourself. Use HTML for the main content and CSS to make it look stylish. Try to use comments to explain every aspect of your code.

⁠

Raw Code: My Blog Sample

Note ~ the following code is not indented correctly due to copy paste issues,

Paste code here

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.