Introductory Guide To Web Development (2)

Explore

Introductory Guide To Web Development

Session #10

In session #10 we talked about planning webpages, using github, and some final resources before we close our series off. We also said are final goodbyes since its the last session.

⁠

Planning Webpages Notes

⁠

⁠

⁠

⁠

⁠

⁠

Introduction to Github

Github is a free software which allows users to store and share code with each other, there are a lot of cool functions you can do with Github

⁠

Github Home Page⁠

⁠

Github Intro Video⁠

⁠

How To Use Github Video⁠

⁠

Publishing Webpages In Real World

Please watch the video linked below to see how to publish webpages in real world. Note that it will cost real money so be wise for when you want to publish

⁠

Video Link⁠

⁠

All Covered Content 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

⁠

Extra Web Development Resources

⁠

HTML Validator⁠

(Checks your HTML/CSS/JS code to see if there are any minor or major errors or flaws)

⁠

JS Bins⁠

(A good programming environment or IDE for web development)

⁠

W3 Schools⁠

(A good educational site which allows everyone to learn any programming language for free)

⁠

101 Computing⁠

(Ever want web development coding challenges, here you can find all sorts of those)

⁠

A final thank you for joining all my sessions for this series, stay tuned for my Advanced Web Development series coming soon. This

coda.io⁠

page will stay for the next two months, so download or save anything u need

⁠

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.