Web Development Course

Topic Covered:

• (a) Learn the anatomy of HTML syntax to structure your websites.
• (b) Understand the HTML boilerplate and HTML doctypes.
• (c) Understand indentation and nesting in HTML code.
• (d) Learn to use HTML tags to structure headings, paragraphs.
• (e) How to structure HTML lists to create unordered and ordered lists.
• (f) How to insert images using HTML
• (g) How to create hyperlinks using anchor tags.
• (h) Create multi-page websites.
• (i) Learn HTML best practices.

Topic Covered:

• (a) Understand what are cascading style sheets and how you can use it to style your website.
• (b) How to use CSS selectors and properties.
• (c) Learn about how to use inline, internal and external CSS.
• (d) Understand CSS coding best practices.
• (e) Learn about CSS specificity and inheritance.
• (f) Learn and understand the CSS Box Model.
• (g) Learn to use developer tools to inspect and diagnose CSS.
• (h) Learn about CSS positioning and display properties.
• (i) Learn about font styling using CSS and web safe fonts.
• (j) Implement responsiveness using CSS media queries.
• (k) How to use CSS float and clear properties.
• (l) How combine CSS selectors and understand selector priority.

Topic Covered:

• (a) Learn about why flexbox was introduced to CSS.
• (b) Understand what happens when display is set as flex.
• (c) Understand flex direction and how it affects layout.
• (d) Learn to use align and justify for layout of child items
• (e) Understand how child items are sized and distributed in a flexbox and use the flex shorthand property.

Topic Covered:

• (a) Learn about how grid is different to flexbox and their strengths and weaknesses.
• (b) Understand what happens when display is set as grid.
• (c) Learn how grid sizing is done and how to create and arrange a grid.
• (d) Learn to use grid in combination with flexbox to create complex layout using native CSS.

Topic Covered:

• (a) Understand the difference between native CSS tooling and external frameworks.
• (b) Learn to install the Bootstrap framework into your website.
• (c) Understand the Bootstrap 12 column layout system.
• (d) Learn to use Bootstrap components such as buttons, carousels, cards and navigation bars.
• (e) Accessing and incorporating designer icons from Bootstrap.
• (f) Find and use bootstrap code snippets, examples and pre-built templates to quickly created beautiful mobile-first websites.

Topic Covered:

• Learn the fundamental principles of web design, UI and UX.
• (a) Understand colour theory and how to choose and use modern colour palettes to make your website look professional.
• (b) Understand modern typography and choose free-for- commercial use typefaces to make your website user friendly and stylish.
• (c) Learn to manage user attention using the key principles of User Interface (UI) design.
• (d) Learn to design user friendly websites by understanding User Experience (UX) design.

Topic Covered:

• (a) Learn the tree structure of HTML based websites.
• (b) Traverse through the document using object notation.
• (c) Separation of concerns and coding best practices.
• (d) Manipulate and change the HTML elements using your understanding of the DOM.

Topic Covered:

• (a) Compare programming languages like JS with scripting and markup/stylesheet languages.
• (b) Overview of JavaScript and its uses.
• (c) Understand how to work with a code editor and IDEs.
• (d) Basic syntax and data types in JavaScript, including:
• (e) Variables and their scope (let, const)
• (f) Data types (string, number, boolean, null, undefined, symbol)
• (g) Operators and expressions, including arithmetic, comparison, and logical operators
• (h) Control structures like if/else statements and loops, including:
• (i) The for loop and while loop
• (j) The for...of loop to iterate over arrays
• (k) The for...in loop to iterate over object properties
• (l) Functions and their importance in JavaScript, including:
• (m) Function declaration and expression
• (n) Function scope and closures
• (o) Arrow functions and their syntax
• (p) Higher-order functions, including:
• (q) Passing functions as arguments to other functions
• (r) Returning functions from other functions
• (s) The map, filter, and reduce methods on arrays and their use with higher-order functions
• (t) Arrays and their methods, including:
• (u) Creating and accessing arrays
• (v) Adding and removing elements from arrays
• (w) The slice method for slicing arrays
• (x) The concat method for concatenating arrays
• (y) The indexOf and lastIndexOf methods for finding elements in arrays
• (z) The map, filter, and reduce methods for manipulating arrays
• (aa) The spread syntax ... to spread the elements of an array into a new array or function call
• (ab) Object-oriented programming in JavaScript, including:
• (ac) Creating objects with object literals
• (ad) Creating objects with constructor functions and the new keyword
• (ae) Creating objects with classes and the class keyword
• (af) Adding and accessing properties and methods on objects
• (ag) The this keyword and how it works in object methods
• (ah) The super keyword for accessing parent class methods and properties
• (ai) Manipulating objects and arrays using methods and iteration, including:
• (aj) The Object.keys and Object.values methods for getting the keys and values of an object as arrays
• (ak) The for...in loop for iterating over object properties
• (al) The Object.assign method for copying properties from one object to another

Topic Covered:

• (a) Learn front-end development with React.
• (b) Understand when and how to use React Components.
• (c) Learn to pass Props and work with them.
• (d) Learn to write JSX and understand JSX syntax.
• (e) Learn about the React DOM.
• (f) Learn State Management in React.
• (g) Learn about React Hooks.
• (h) Learn about conditional rendering in React.
• (i) Understand the difference between class and functional components.

Topic Covered:

• (a) Explore the components of back-end development, working with an MVC framework.
• (b) Apply concepts like data types, objects, methods, object-oriented programming, and classes in the context of back-end development.
• (c) Server-Side JavaScript
• (d) Using Node on the command line
• (e) NPM
• (f) JavaScript Build Processes
• (g) Event Loop and Emitters
• (h) File System Interaction
• (i) Modules
• (j) Native Node drivers

Topic Covered:

• (a) Understand how to install and use express in Node applications
• (b) Creating Node and Express based servers
• (c) RESTful Routing with Express
• (d) Understand and use middleware for Node applications

Topic Covered:

• (a) Understand what APIs are and how they work.
• (b) HTTP in Depth
• (c) Calling APIs
• (d) Reading API documentation
• (e) Basic API Authentication
• (f) Server to server communication
• (f) JSON vs. XML, sending data over the wire.

Topic Covered:

• (a) Understand what EJS does and how to use it with Node and Express.
• (b) Templating with EJS
• (c) Running code in EJS templates
• (d) Passing data from server to template and vice versa
• (e) Creating layouts/partials with EJS

Topic Covered:

• (a) Data Relationships
• (b) Designing a Data Model
• (c) Relational Databases
• (d) Alternative Databases
• (e) Entity Relationship Modelling (ERM) and Object Relational Mapping (ORM)

Topic Covered:

• (a) Understand what APIs are and how they work.
• (b) HTTP in Depth
• (c) Calling APIs
• (d) Reading API documentation
• (e) Basic API Authentication
• (f) Server to server communication
• (f) JSON vs. XML, sending data over the wire.

Topic Covered:

• (a) Understand the difference between native CSS tooling and external frameworks.
• (b) Learn to install the Bootstrap framework into your website.
• (c) Understand the Bootstrap 12 column layout system.
• (d) Learn to use Bootstrap components such as buttons, carousels, cards and navigation bars.
• (e) Accessing and incorporating designer icons from Bootstrap.
• (f) Find and use bootstrap code snippets, examples and pre-built templates to quickly created beautiful mobile-first websites.

Topic Covered:

• (a) Working with Database Schemas
• (b) Create-Read-Update-Destroy (CRUD)
• (c) Database Joins
• (d) Querying SQL databases

Topic Covered:

• (a) PostgreSQL queries
• (b) Create-Read-Update-Destroy (CRUD)
• (c) Postgres Best Practices
• (d) Installing Postgres
• (e) Relational Databases
• (f) Implementing One to Many, One to One and Many to Many Relationships
• (g) Working with Postgres in Node with the pg Package

Topic Covered:

• (a) Understand hosting and deployment.
• (b) Hosting static websites with GitHub Pages.
• (c) Deploying server based applications with Heroku.
• (d) Deploying Databases with Mongo Atlas.

Topic Covered:

• (a) Understand REST and guiding principles behind API design.
• (b) Learn to work with a MongoDB GUI Robo 3T.
• (c) Implementing GET, POST, PUT, PATCH and DELETE by creating a public API from scratch.
• (d) Understand and use chained route handlers from Express.

Topic Covered:

• (a) Understand the need for authentication and keeping user details secure.
• (b) Learn about Encryption and use encryption to keep your database secure.
• (c) Learn and implement Hashing and Salting with bcrypt.
• (d) Using Sessions and Cookies to persist user log in sessions.
• (e) Setting up local authentication from scratch.
• (f) Implementing Passport to authenticate users quickly and effectively.
• (g) Understand and use environment variables to keep secret keys secure.
• (h) Understand and use OAuth 2.0 to log in users using Google and Facebook.

Topic Covered:

• (a) Understand Web3 and blockchain development.
• (b) Understand a Canister
• (c) Understand a Motoko actor

Topic Covered:

• (a) Set up a cycles wallet
• (b) Obtain free cycles from Dfinity
• (c) Understand how to manage the cycles balance of a canister
• (d) Build and deploy a static, personal CV website to the Internet Computer
• (e) Check how many cycles were used

Topic Covered:

• (a) Use a React frontend in combination with the Internet Computer
• (b) Allow users to create their own notes and persist these in a canister
• (c) Learn to use CRUD style operations on a canister from the front end
• (d) Learn to use the Candid interface to test the app

Topic Covered:

• (a) Understand the role of tokens in dapps and open internet services
• (b) Create a token modelled on Ethereum's ERC-20 and deploy it on the Internet Computer
• (c) Create a faucet contract that dispenses small amounts of the token
• (d) Understand and work with principal IDs to identify users and smart contracts
• (e) Use the Plug wallet to track token balances
• (f) Learn how to transfer the token between user accounts

Topic Covered:

• (a) Create a non-fungible token modelled on ERC-721 and deploy it to the Internet Computer
• (b) Build a marketplace website like OpenSea to allow users to mint, buy and sell NFTs
• (c) The owner of the NFT can interact with the canister to transfer the ownership of the .jpeg to another account