Full Stack Web Development
(Detailed Course Content)
Introduction to Web Development
● What is web development?
● HTML: Building Your First Website
● What you can do as a web developer
● Frontend vs Backend development
● Installing an IDE
Introduction to HTML
● Intro to HTML, HEAD, BODY, and HEADER
● HTML: Lists, Paragraphs, and Text Styling
● HTML: Displaying Data With Tables
● HTML: Images & Forms
Introduction to CSS
● What is CSS?
● How to use Inline, Internal and External CSS
● CSS: Element, ID & Class Selectors
● CSS: Colors
● CSS: Backgrounds & Borders
● Using browser inspector tools
● CSS: Combinators
● CSS: Grouping
● CSS: Specificity
● Specificity Domination
Copyright ® || Diginique TechLabs
Intermediate CSS
● CSS: Text Styling & Formatting
● CSS: Google Fonts
● CSS: Images
● CSS: Padding & Margin
● CSS: Rows & Columns
Advanced CSS: Building and Styling Website
● Intro to building your first website
● Building the Navbar
● Making the Navbar Mobile Responsive - Part 1
● Making the Navbar Mobile Responsive - Part 2
● Creating the Form Group
● Working with iframes
● Working with images and box shadows
● Working with text and image spacing
● Building the footer
CSS Grids
● Grid Layout Containers
● Grid Layout Items
● Grid Layout Areas
● Grid Layouts Website
Computers and Code
● How Computers Work
● Understanding Binary
● How code works
● Heap vs Stack
● Understanding hexadecimal
● Variables & storage capacity
Copyright ® || Diginique TechLabs
Code with JavaScript
● Time to Javascript
● Javascript Reference
● Comments & How to Link Scripts
● Variables & Strings
● Numbers
● Comparison Operators
● Logical Operators
● Arrays
● Loops
● Functions
● Objects
● Bind
● Percentage Calculator - Setting Up the Form
● Percentage Calculator - Grabbing Elements With Javascript
● Percentage Calculator - Using Event Listeners
● Percentage Calculator - Algorithm & Prevent Default
Introduction to Bootstrap 4
● What is Bootstrap 4?
● Downloading Bootstrap 4
● Project Setup
● Overview of Bootstraps Components
● Understanding Bootstraps Classes
● Using the Grid System
● Cards: Creating the Sign-in Portal Box
● Forms: Adding the input fields
● Buttons: Adding the Sign In button and Labels
● Grids - Finishing Mobile Compatibility
● Skate or Die Intro
● Working with Navbars
● Using Carousels
● Nesting rows and columns
● Modals
Copyright ® || Diginique TechLabs
● Adding images and buttons
● Sizing Modals
● Building the Footer
● Working with Font Awesome Favicons
Setup Hosting for WebApps
● Web Hosting
● Creating a server
● Accessing your server
● Installing Nginx
● Creating server SSH Keys
● Uploading files to your server
● Setting up a domain
● Configuring Nginx
Introduction to [Link], MongoDB and Rest APIs
● Understanding web requests
● Installing Node
● All About JSON
● Basics of Node
● Node Modules
● Building Your First API
● Postman, GET & POST Requests
● URL Parameters & Delete Requests
● Installing MongoDB
● Working With the Mongo Shell
● Searching for Documents
● Deletions & Documentation
● Project Creation
● Creating the Models
● Posting Products
● Fetching Products
● Populating Data
Copyright ® || Diginique TechLabs
Introduction to [Link]
● Setting Up React Tooling
● Installing Bootstrap
● Setting Up the API
● Creating a HTTP Service
● Promises With ES6 & React
● Components in React - Website Product
● Props in React
● Working With State in React
● Creating a WishList Component
● Building a Singleton Data Service
● Creating a Notification Service
● Posting Notifications to React Components
● Observing Notifications in React
● Finishing Our Full Stack React App
Copyright ® || Diginique TechLabs