Build a Webshop – Angular, Node.js, TypeScript, Stripe
By freeCodeCamp.org
Published: Oct 11, 2022“
Build a Webshop! In this tutorial, we are going to build a webshop or e-commerce store using Angular/TypeScript, Express.js, and Stripe.We are gonna learn how to use Angular material and Tailwind to structure our UI and how to integrate store API into our app.
Also at the end, we will build a checkout, and we are gonna integrate Stripe so that we can process payments.
Slobodan Gajic created this course. Check out his channel: https://www.youtube.com/c/CodewithSloba
Resources
- Code: https://github.com/bobangajicsm/E-Commerce-Store
- Fake store API: https://fakestoreapi.com/
- Stripe: https://stripe.com/
- Prebuilt checkout page: https://stripe.com/docs/checkout/quickstart
- Stripe Shipping Code: https://stripe.com/docs/payments/checkout/shipping
Contents
- (0:00:00) Intro
- (0:01:01) Installing dependencies and project setup
- (0:18:11) Building home page
- (1:27:11) Building cart page
- (1:58:26) Implementing Cart logic
- (2:48:08) Implementing Store API
- (3:16:06) Stripe payment implementation
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
Tag: freecodecamp
[#Script #Coding] HTML & Coding Introduction – Course for Beginners
HTML & Coding Introduction – Course for Beginners
By freeCodeCamp.org
Published: Feb 21, 2023“
Learn the basics of HTML and how to begin coding in this course for beginners.Are you interested in coding but have never tried it before? Are you curious about how to create your own website or app? If so, then this video course is for you!
Course developed by @AniaKubow
Full course: http://codewithania.com/Contents
- (0:00:00) Introduction
- (0:01:34) What is a code editor?
- (0:03:08) Code editor options
- (0:03:52) Files files files
- (0:07:27) HTML Introduction
- (0:09:27) HTML – what is it exactly?
- (0:11:53) HTML Syntax
- (0:17:08) Saving files in your code editor
- (0:18:19) HTML Anatomy
- (0:22:50) Headings
- (0:24:49) Paragraphs
- (0:26:04) HTML headings, paragraphs and emphasis
- (0:32:20) Indenting code in HTML
- (0:34:03) HTML lists
- (0:38:54) HTML links
- (0:43:49) Navigating Pages
- (0:51:20) Images in HTML
- (0:55:15) Creating tables using HTML
- (1:03:27) Introducing the Div
- (1:05:09) Semantic sectioning
- (1:07:39) Table Tennis Leaderboard: Project prep
- (1:09:30) Table Tennis Leaderboard: Starting out our project
- (1:12:44) Table Tennis Leaderboard: table rows and lists
- (1:16:44) Table Tennis Leaderboard: Sectioning and the figure element
- (1:25:27) HTML forms
- (1:26:52) The various input element types in HTML
- (1:33:17) HTML Inputs exercise 1
- (1:40:40) HTML Inputs exercise 2
- (1:43:55) HTML Inputs exercise 3
- (1:48:57) The select dropdown in HTML
- (1:54:38) The Inspect tool
- (1:56:51) Using the data attribute in HTML
- (1:59:15) Commenting out code
- (2:01:29) What’s next?
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] 3 Ways to Code a BuzzFeed Clone (JavaScript + TypeScript + JSONServer + Database + API + Node.js)
3 Ways to Code a BuzzFeed Clone (JavaScript + TypeScript + JSONServer + Database + API + Node.js)
By freeCodeCamp.org
Published: Feb 08, 2023“
Learn how to build a Buzzfeed Clone in JavaScript, followed by a version in React using JSON server for mimicking an API, and then build a TypeScript Buzzfeed Clone with a mini backend using Node.js to communicate with a Database.Final code:
https://github.com/kubowania/…
https://github.com/kubowania/b…
https://github.com/kubowania/bu…Course developed by @AniaKubow
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
[#Script #Coding] Computer & Technology Basics Course for Absolute Beginners
Computer & Technology Basics Course for Absolute Beginners
By freeCodeCamp.org
Published: Oct 06, 2021“
Learn basic computer and technology skills. This course is for people new to working with computers or people that want to fill in some gaps about their computer knowledge.This course was developed by GCF Global. Check out their YouTube channel: https://www.youtube.com/c/Gcflearnfre…
GCF Global offers more free learning resources at their website: https://www.GCFLearnFree.orgCourse Contents
- (00:00:55) Introduction
- (00:00:55) What Is a Computer?
- (00:03:37) Buttons and Ports on a Computer
- (00:06:01) Basic Parts of a Computer
- (00:08:47) Inside a Computer
- (00:10:58) Getting to Know Laptop Computers
- (00:12:55) Understanding Operating Systems
- (00:14:21) Understanding Applications
- (00:15:53) Setting Up a Desktop Computer
- (00:18:47) Connecting to the Internet
- (00:22:41) What Is the Cloud?
- (00:25:06) Cleaning Your Computer
- (00:29:02) Protecting Your Computer
- (00:32:17) Creating a Safe Workspace
- (00:36:25) Internet Safety: Your Browser’s Security Features
- (00:38:36) Understanding Spam and Phishing
- (00:43:27) Understanding Digital Tracking
- (00:45:39) Windows Basics: Getting Started with the Desktop
- (00:47:40) Mac OS X Basics: Getting Started with the Desktop
- (00:52:26) Browser Basics
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
By freeCodeCamp.org
Published: Sep 20, 2022“
Learn how to code a playable Minecraft clone using React, JavaScript, and Three.js. You will learn about many React concepts such as useState, useEffect, useRef, custom Hooks for State management, and more. And you will be able to apply the principles to create other 3d games in JavaScirpt.Course created by Daniel Bark. Check out his channel: https://www.youtube.com/c/barelycoding
Finished Code: https://github.com/danba340/minecraft…
Starting Code: https://github.com/danba340/minecraft…
Demo: https://minecraft-freecodecamp.vercel…Contents
- (0:00:00) Boilerplate
- (0:03:56) Sky
- (0:05:46) Textures
- (0:07:48) Ground
- (0:15:11) Player
- (0:25:43) Keyboard input
- (0:32:03) Movement
- (0:41:26) First person camera
- (0:46:25) State management
- (0:49:55) Cube component
- (0:58:02) Add/Remove Cubes
- (1:09:34) Texture Selector
- (1:21:34) Save world
- (1:27:31) Hover cubes
- (1:30:28) Outro
”
[#Script #Coding] Object Oriented Programming (OOP) in C++ Course
Object Oriented Programming (OOP) in C++ Course
By freeCodeCamp.org
Published: Feb 02, 2021“
Object Oriented Programming (OOP) is commonly used when writing code with C++. In this crash course, you will learn what OOP is and how to implement it using C++.This course was developed by Saldina Nurak (CodeBeauty). Check out her channel: https://www.youtube.com/c/CodeBeauty
Course Contents
- (0:00:00) Introduction
- (0:00:54) Introduction to OOP
- (0:03:17) Classes and objects
- (0:10:40) Access modifiers
- (0:17:26) Constructors
- (0:29:39) Encapsulation
- (0:39:50) Abstraction
- (0:52:23) Inheritance
- (1:15:43) Polymorphism
- (1:28:26) Outro
- (1:29:01) Bloopers
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Learn Tailwind CSS – Course for Beginners
Learn Tailwind CSS – Course for Beginners
By freeCodeCamp.org
Published: Jan 17, 2023“
This course will give you a full introduction into all of the core concepts of Tailwind CSS — it will also provide details on every feature that provides Tailwindcss.Course from codewithguillaume.
Contents
- (0:00:00) Introduction
- (0:02:36) Setup
- (0:17:01) Colors
- (0:29:11) Customization
- (0:42:11) Typography
- (1:05:21) Spaces & sizes
- (1:29:36) Flex
- (1:51:46) Grids
- (2:12:48) Layouts
- (2:37:49) Borders
- (2:45:41) Effects & filters
- (2:57:33) Animations
- (3:08:28) Design System
- (3:56:31) Core concepts
- (4:05:26) Dark mode
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Using map() in Python #shorts
Using map() in Python #shorts
By freeCodeCamp.org
Published: Jan 27, 2023“
Master the HTTP networking protocol by completing over 80 coding exercises and quizzes in JavaScript. Once you’ve learned it all, we’ll build a real web crawler using Node.js to put all the concepts into practice.HTTP is the backbone of the modern web, and in this course we’ll do a deep dive into all of the fundamentals you’ll need to know to master web networking. We’ll use the Fetch API to interact with a live RESTful server in order to connect the different components of a video game.
Code: https://github.com/bootdotdev/fcc-learn-http-assets
Follow this course interactively on Boot.dev: https://boot.dev/learn/learn-http
Lane Wagner created this course.
Boot.dev: https://boot.dev
Lane on Twitter: https://twitter.com/wagslane
Lane’s YouTube: https://www.youtube.com/@bootdotdev
New to JavaScript? Beginner course: https://boot.dev/learn/learn-javascriptContents
- (0:00:00) Introduction
- (0:03:32) Ch 1 – Why HTTP
- (0:27:31) Ch 2 – DNS
- (0:48:11) Ch 3 – URIs and URLs
- (1:16:21) Ch 4 – Async JavaScript
- (1:49:48) Ch 5 – Errors in JS
- (2:04:54) Ch 6 – HTTP Headers
- (2:21:04) Ch 7 – JSON
- (2:41:09) Ch 8 – HTTP Methods
- (3:17:01) Ch 9 – URL Paths
- (3:36:33) Ch 10 – HTTPS security
- (3:48:24) Proj – Setup Dev Environment
- (3:51:28) Proj – Hello World
- (3:56:29) Proj – Normalize URLs
- (4:11:05) Proj – URLs from HTML
- (4:27:49) Proj – The main.js file
- (4:33:10) Proj – Using Fetch
- (4:45:16) Proj – Recursively crawling the web
- (4:55:33) Proj – Print an SEO report
- (5:06:59) Proj – Conclusion
- (5:08:04) Congratulations
Documentation used:
Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
URL constructor: https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Fetch Response: https://developer.mozilla.org/en-US/docs/Web/API/Response
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Watch the full Python course: https://www.youtube.com/watch?v=eWRfhZUzrAc”
[#Script #Coding] Angular Course for Beginners
Angular Course for Beginners
By freeCodeCamp.org
Published: Sep 07, 2022“
Learn Angular in this complete course for beginners. First, you will learn the basics of Typescript and then you will learn about important Angular concepts such as binding, dependency injection, forms, routing, and more.Santosh Yadav created this course.
Check out his channel: https://www.youtube.com/c/TechTalksWi…
https://twitter.com/SantoshYadavDev
https://github.com/sponsors/santoshya…Course Contents
Introduction
- (0:00:00) Introduction to Angular
- (0:09:56) Introduction to Typescript
- (0:28:57) SPA and Local Setup
Typescript
- (0:42:09) Typescript Data Types and Functions
- (1:25:56) Classes and Interface
- (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
- (2:20:24) Angular Installation and Binding Syntax
- (3:25:04) Built-in Directives
- (4:07:36) Built-in Pipes
- (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
- (4:44:53) ngOnInt and Component Communication using Input and Output
- (5:09:32) Change Detection and ngOnChanges
- (5:36:51) ngDoCheck
- (5:42:01) ViewChild, ViewChildren and AfterViewInit
- (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
- (6:44:55) Introduction
- (7:09:34) Resolution Modifiers
- (7:24:06) Value Providers
HttpClient and RxJs
- (7:41:04) Setting Up HttpClientModule
- (7:44:07) HttpService , RxJs observables and http get
- (8:01:28) RxJs Observable and Observer
- (8:11:59) Http Put and Delete
- (8:27:10) Http Request
- (8:40:55) ShareReplay RxJs Operators
- (8:47:17) Async Pipe
- (8:57:15) catchError operator
- (9:05:29) map operator
- (9:09:06) Http Interceptor
- (9:29:11) APP_INITIALIZER
Routing Basics
- (9:35:06) Angular Router and default Route
- (9:51:01) Adding Angular material and navigation
- (10:00:35) Wild card, dynamic route and ActivatedRoute service
- (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
- (10:25:45) Introduction
- (10:50:20) Validation
- (11:09:26) Pristine, Dirty State and Reset Form
- (11:19:08) Custom Directives and Custom Validation
Advanced Routing
- (11:49:33) Navigation using Router Service
- (11:52:34) Feature and Routing Module
- (12:10:57) Nested and Child Route
- (12:19:41) Lazy Loading
- (12:35:49) Configure Lazy Loading using CLI
- (12:42:46) Using ProvidedIn Any
- (12:59:15) Router Events
- (13:06:00) Listening to Router Events
Route Guards
- (13:08:49) CanActivate
- (13:21:24) CanActivateChild
- (13:26:53) CanLoad
Reactive Forms
- (13:30:44) Introduction
- (13:41:33) Using Material Controls
- (13:59:54) Nested Form Controls
- (14:17:38) Dynamic Forms
- (14:45:09) Built-in Validators
- (14:51:50) Reset Form
- (14:55:15) Control Level Validation
- (15:05:22) SetValue and PatchValue
- (15:09:23) ValueChanges and UpdateOn
- (15:17:40) map operator with Form
- (15:29:55) Custom Validator
CanDeactivate Guard
- (15:57:10) CanDeactivate Guard and Form
Custom Pipe
- (16:15:04) Custom Pipe
Resolve Guard
- (16:25:39) Resolve Guard
Global Error Handling
- (16:45:46) Error Handling
Testing Basics
- (16:50:08) Introduction
- (16:56:59) First test
- (17:01:43) Testing Component and Service
Deployment and CI/CD
- (17:15:44) Using Netlify for Deployment
- (17:28:06) GitHub Actions to Automate Tasks
”
[#Script #Coding] Docker Containers and Kubernetes Fundamentals – Full Hands-On Course
Docker Containers and Kubernetes Fundamentals – Full Hands-On Course
By freeCodeCamp.org
Published: Oct 12, 2022“
Learn how to use Docker and Kubernetes in this complete hand-on course for beginners.Learn how to containerize applications with the Docker CLI and Visual Studio Code. Push and pull container images on Docker Hub, a container registry, and create multi-container applications using Docker Compose.
Learn about the Kubernetes architecture and how it works. Run it locally and use the Kubernetes CLI and Visual Studio Code to run, debug and troubleshoot applications and services. Learn about pods and the different workloads available.
Install Docker Desktop and enable Kubernetes. Download the lab files here: https://github.com/K8sAcademy/Fundamentals-HandsOn
Course from Guy Barrette, from Kubernetes Academy Online
Certified on Kubernetes, Terraform, Azure, AWS, and GCP. Proud to be an Azure MVP and a DigitalOcean Navigator.
Consult his bio: https://guybarrette.comThe course is also available here (with a French version): https://kubernetesacademy.online
If you like the course, You can make a small donation to the creator: https://www.buymeacoffee.com/guybarrette
View other courses from Guy here: https://kubernetesacademy.online
Guy on Twitter: @GuyBarrette and @K8s_OnlineCourse Contents
0:00:00 Introduction
- Course Introduction
- Course Setup
0:05:02 Introduction to MicroServices
- Microservices Concepts
- Microservices Anti Patterns
- Microservices Advantages and Drawbacks
0:13:56 Welcome to Cloud Native!
- What are Cloud Native and the Cloud Native Foundation
- Cloud Native Concepts
- Cloud Native Hands-On
0:23:01 Introduction to Containers
- Container Concepts
- What is Docker?
- Docker Hands-On
- Basic Commands
- Basic Commands Hands-On
- Running Containers
- Running Containers Hands-On
- Building Containers
- Building Containers Hands-On
0:54:41 Visual Studio Code
- The Docker Extension
- The Docker Extension Hands-On
1:07:03 Persisting Data
- Containers are Ephemerous and Stateless
- Docker Volumes Concepts
- Using Docker Volumes Hands-On
1:17:03 Docker Compose
- Understanding the YAML File Structure
- Docker Compose Concepts
- Using Docker Compose
- Using Docker Compose Hands-On
- Docker Compose Sample App Hands-on
- Docker Compose Features
- 1:47:18 Container Registries
- Container Registries Concepts
- Push/Pull Images from Docker Hub
- Push/Pull Images from Docker Hub Hands-On
1:56:58 Kubernetes Concepts
- Kubernetes Concepts
- How to Run Kubernetes Locally
- How to Run Kubernetes Locally Hands-On
- Kubernetes API
- Using Kubectl Hands-On
- The Declarative Way vs the Imperative Way
- The Declarative Way vs the Imperative Way Hands-On
2:20:38 Namespaces
- Namespaces Concepts
- Namespaces Hands-On
2:28:47 Nodes
- Master Node Concepts
- Worker Nodes Concepts
- Nodes Hands-On
2:38:36 Pods
- Pod Concepts
- The Pod Lifecycle
- Defining and Running Pods
- Pod Hands-On
- Init Containers
- Init Containers Hands-On
3:01:00 Selectors
- Selector Concepts
- Selector Hands-On
3:07:51 Multi Container Pods
- Common Patterns for Running More then One Container in a Pod
- Multi Container Pods Networking Concepts
- Multi Containers Pods Hands-On
3:19:45 Workloads
- Introduction to Workloads
- ReplicaSet Concepts
- ReplicaSet Hands-On
- Deployment Concepts
- Deployment Hands-On
- DaemonSet Concepts
- DaemonSet Hands-On
- StatefulSet Concepts
- StatefulSet Hands-On
- Job Concepts
- Job Hands-On
- CronJob Concepts
- CronJob Hands-On
4:05:15 Updates
- Rolling Updates Concepts
- Rolling Updates Hands-On
- Blue-Green Deployments
- Blue-Green Deployments Hands-On
4:21:13 Services
- What are services?
- ClusterIP Concepts
- ClusterIP Hands-On
- NodePort Concepts
- NodePort Hands-On
- Load Balancer Concepts
- Load Balancer on Docker Desktop Hands-On
4:44:03 Storage & Persistence
- Storage & Persistence Concepts
- The Static Way
- The Static Way Hands-On
- The Dynamic Way
5:03:48 Application Settings
- ConfigMaps Concepts
- ConfigMaps Hands-On
- Secrets Concepts
- Secrets Hands-On
5:22:24 Observalibilty
- Startup, Readiness and Liveness Probes Concepts
- Probes Hands-On
5:30:46 Dashboards
- Dashboards Options
- Lens Hands-On
- K9s Hands-On
5:47:36 Scaling
- Auto Scaling Pods using the Horizontal Pod Autoscaler
- Auto Scaling Pods Hands-On
5:55:22 Conclusion
- Course Conclusion
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”