Fun Websites Development

Description:

Web development is one of the most in-demand skills in the tech world due to its versatility. This course will allow you to be able to develop production-ready websites using industry-standard technologies such as expressJS and MongoDB.

Objective:

By the end of this course, students should be able to:

- Have a full understanding of webpage markup using HTML

- Create custom style sheets for web usage

- Write ES6 javascript code to add functionality to web pages

- Create web servers using expressJS

- Create and manage databases

- Have the critical thinking ability to master new technologies on their own

Outline:

- How does the internet work?

- IP addresses and web protocols

- Introduction to http/ https

- Anatomy of a website (HTML, CSS, JS)

- Environment setup

- VS code install and setup

- Introduction to HTML

- How do HTML tags work

- Boilerplate

- Basic HTML tags

- Headers, paragraphs, anchors, images, etc.

- HTML attributes

- HTML nesting and structuring

- Forms, headers, etc.

- Introduction to CSS

- What is CSS

- Methods of writing CSS (inline, internal, external)

- CSS Syntax and best practices/ conventions

- How does CSS interact with HTML? (priorities, identifiers and selectors, the box

model, etc.)

- Basic CSS styling (colors, backgrounds, display, states (highlighted, visited,

hover, etc.), sizing, etc.)

- Project: creating simple static pages

- Create a static web page such as a simple personal portfolio

- The missing piece: functionality via JS

- Methods of writing JS(inline, internal, external)

- Variables (const, let, var)

- Arithmetic

- Primitive data types

- Functions

- Events and listeners (Onclick function)

- Arrays

- Conditional statements

- Loops

- Nesting conditionals and loops

- Objects

- Methods

- Type conversion

- Scope

- Relevance to web development:

- The DOM

- Adding basic functionality to websites (Creating increment/ decrement

website, creating a BMI calculator, creating a notes app)

- Running JS outside the browser (Backend development)

- NodeJS installation

- Introduction to node and the CLI

- Basic javascript outside the browser

- Node modules: installing express

- Setting up a basic express server

- Creating a basic project with express

- Databases

- Introduction to databases

- Introduction to ORMs/ ODMs

- Downloading mongoDB and mongoose

- Basics of mongoose

- Creating a simple project using frontend, backend and database to apply skills to see

how all components of a webapp interact (habit tracker)

- Creating a more advanced / complex website with all the skills learned so far following

industry standards and best practices

// The order in which the information is delivered can be easily changed to adapt to the students’ level of understanding