Fundamentals of Full Stack Web Development

Categories: Design and Development Tools

Wishlist Share

Course Info

Curriculum

About Course

Intro to Web Development

What is Web Development?
What you can do as a web developer
Where should I start as a beginner?
HTML: Building Your First Website
What you can do as a web developer
Frontend vs Backend development
Installing an IDE
Intro to Web Development

Getting Started With 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

...

Intro to Web Development

What is Web Development?
What you can do as a web developer
Where should I start as a beginner?
HTML: Building Your First Website
What you can do as a web developer
Frontend vs Backend development
Installing an IDE
Intro to Web Development

Getting Started With 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

Bootcamp CSS

CSS: Text Styling & Formatting
CSS: Google Fonts
CSS: Images
CSS: Padding & Margin
CSS: Rows & Columns

Advanced CSS: Building and styling website

CSS: Intro to building your first Website!
CSS: Building the Navbar
CSS: Making the Navbar Mobile Responsive - Part 1
CSS: Making the Navbar Mobile Responsive - Part 2
CSS: Creating the Form Group
CSS: Working with iframes
CSS: Working with images and box shadows
CSS: Working with text and image spacing
CSS: Building the footer

Computers & Code

How Computers Work
Understanding Binary
Heap vs Stack
iOS Binary App – Building UI _ UX
iOS Binary App – Creating BinaryDecimal Class
iOS Binary App – Finishing Up
iOS Binary App – Challenge
How Code Works
Variables & Storage Capacity
Understanding Hexadecimal

Learning to Code With Javascript

Time to Javascript
Javascript Reference
Javascript: Comments & How to Link Scripts
Javascript: Numbers
Javascript: Variables & Strings
Javascript: Comparison Operators
Javascript: Logical Operators
Javascript: Arrays
Javascript: Loops
Javascript: Functions
Javascript: Objects
Javascript: Bind
Percentage Calculator - Setting Up the Form
Percentage Calculator - Grabbing Elements With Javascript
Percentage Calculator - Using Event Listeners
Percentage Calculator - Algorithm & Prevent Default

Version Control With Git

How Version Control Works
Git Basics
Terminal Basics - Changing directories
Terminal Basics - Copying & renaming files
Terminal Basics - Creating directories & files
Terminal Basics - Deleting files & directories
Setting up Github
Working with Local & Remote Repositories
Handling Git Merge Conflicts

Introduction to Bootstrap 4

What is Bootstrap 4?
Downloading Bootstrap 4
Bootstrap 4: Project Setup
Bootstrap 4: Overview of Bootstraps Components
Bootstrap 4: Understanding Bootstraps Classes
Bootstrap 4: Using the Grid System

Bootstrap 4: Creating a Login Portal

Project Overview
Bootstrap 4 Cards - Creating the Sign-in Portal Box
Bootstrap 4 Forms - Adding the input fields
Bootstrap 4 Buttons - Adding the Sign In button and Labels
Bootstrap 4 Grids - Finishing Mobile Compatibility

Bootstrap 4: Skate or Die Website

Bootstrap 4 - Skate or Die Intro
Bootstrap 4 - Working with Navbars
Bootstrap 4 - Using Carousels
Bootstrap 4 - Nesting rows and columns
Bootstrap 4 - Modals
Bootstrap 4 - Adding images and buttons
Bootstrap 4 - Sizing Modals
Bootstrap 4 - Building the Footer
Bootstrap 4 - Working with Font Awesome Favicons

Intro to Flexbox

What is flexbox
Flexbox fundimentals
Intro to flexbox landing page
Building the navbar - Part 1
Building the navbar - Part 2
Designing the navbar for mobile
Making the dropdown menu functional
Creating the landing page header
Creating the first Media Object
Building the Services section
Flexbox ordering
Adding the Quote button
Making Media Objects mobile compatible
Designing the portfolio object
Making the portfolio object mobile compatible
Creating the contact form
Making the contact form mobile compatible

Courses Sass

Intro to Sass
What is Sass
How to install Sass and compile it to CSS
Your FIRST Sass Website
Different tools to compile Sass
Sass Architecture
Sass Partials - Maintainable Styles Rules
Sass Variables and Imports - Create a clean Scalable Stylesheet
Sass Mixins - Save time & recycle styles
Sass Extends - Share style properties between other selectors
Final Project - Intro to our Landing Page
Final Project - Setting up our Variables
Final Project - Styling our Navbar with Sass
Final Project - Creating the Banner Container
Final Project - Adding Content to our Banner Container
Final Project - Some quick cleanup in our Sass files
Final Project - Using the Extend method
Final Project - Styling a section splitter with Sass
Final Project - Using advanced Mixins
Final Project - Styling the next Container with Sass
Final Project - Finishing our Landing Page, Congrats!

How to Set Up Hosting For Your Web Apps

Web Hosting
Creating a server
Accessing our server
Installing Nginx
Creating server SSH Keys
Uploading files to our server
Setting up a domain
Final Step - Configuring Nginx

Intro to Node, Mongo, & REST APIs

Understanding Web Requests
Installing Node on macOS
All About JSON
Basics of Node
Node Modules
Building Your First API
Postman, GET & POST Requests
URL Parameters & Delete Requests
Installing MongoDB on macOS
Working With the Mongo Shell
Searching for Documents
Deletions & Documentation
Swag Shop API - Project Creation
Swag Shop API - Creating the Models
Swag Shop API - Posting Products
Swag Shop API - Fetching Products
Swag Shop API - Populating Data

Intro to React

Swag Shop - Setting Up React Tooling
Swag Shop - Installing Bootstrap
Swag Shop - Creating a HTTP Service
Swag Shop - Setting Up the API
Swag Shop - Promises With ES6 & React
Swag Shop - Components in React
Swag Shop - Working With State in React
Swag Shop - Creating a WishList Component
Swag Shop - Building a Singleton Data Service
Swag Shop - Creating a Notification Service
Swag Shop - Props in React
Swag Shop - Posting Notifications to React Components
Swag Shop - Observing Notifications in React
Swag Shop - Finishing Our Full Stack React App

BONUS- Webstrom IDE Tricks & Tips

Webstorm Ide Basic Setup
Webstorm Ide Navigating Your Project
Webstorm Ide Performing Searches
Webstorm Ide Mastering The Editor

About the instructors

S4S Academy

0.00 (0 Rating)

3 Students

135 Courses

Course Curriculum