Setting Up a Windows PC For Web Development: WSL, Git, Node.js, Docker, Oh My Zsh, & MySQL
By LearnWebCode
Published: Dec 06, 2021“
Let’s walk through setting up a Windows PC for web development, and use Windows Subsystem For Linux as the backbone.
My premium courses: https://learnwebcode.com/courses/
Finished product Node.js code: https://gist.github.com/LearnWebCode/…
Finished product Docker Compose file:
https://gist.github.com/LearnWebCode/…CONTENTS:
- 0:00 Intro
- 1:03 Windows Subsystem For Linux
- 5:24 Just For Fun: cmatrix
- 6:20 VS Code Integration
- 8:57 Oh My Zsh
- 11:00 Git
- 15:52 Windows Terminal
- 20:40 Node.js
- 24:50 Docker
- 33:18 Upgrading From WSL1 To WSL2
- 38:25 MySQL
Follow me for updates on new videos or projects:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
”
Category: Scripting and Coding
Various coding languages are the building blocks of apps, The Internet, and the Metaverse. We explore tutorials of scripting and coding.
[#Script #Coding] Ecommerce Website Tutorial – Create a B2B App with Stripe + Postgres + REST API Backend
Ecommerce Website Tutorial – Create a B2B App with Stripe + Postgres + REST API Backend
By freeCodeCamp.org
Published: Sep 29, 2022“
Learn how to create three SaaS internal business tools with Postgres, Stripe API, and the Retool low-code platform. You will build an order management dashboard, an employee dashboard, and a developer portal.
You will use the Retool platform to build the business tools. Retool is a drag-and-drop no-code editor with many of pre-built components to build internal CRUD (create, read, update, delete) apps as fast as possible.
Ania Kubów developed this course. Check out her channel: https://www.youtube.com/aniakubow
Code: https://github.com/kubowania/mobee-ps…
Retool provided a grant to make this course possible. Learn more about Retool: https://retool.com
Contents
- (00:03:40) The Employee App
- (01:06:20) The Manager/Admin App
- (01:43:12) The Developer App
”
[#Script #Coding] Jenkins Tutorial – How to Deploy a Test Server with Docker + Linux (Full Course)
Jenkins Tutorial – How to Deploy a Test Server with Docker + Linux (Full Course)
By freeCodeCamp.org
Published: Sep 16, 2022“
Learn about Jenkins by building a CI/CD pipeline for a web application. Jenkins is an open source automation server which makes it easier to build, test, and deploy software. In this course, you will learn how to build a full dev-ops pipeline using Jenkins, Linode Servers, and other tools.
Course Readme: https://github.com/gwenf/jenkins-fcc-…
Sign up for Linode with a $100 credit: https://www.linode.com/studentsGwendolyn Faraday developed this course. Check out her channel: https://www.youtube.com/c/FaradayAcademy
? Linode provided a grant that made this course possible.
Contents
- (00:00:00) Video Intro
- (00:01:33) Course Overview
- (00:02:36) What is Jenkins?
- (00:08:47) Terms & Definitions
- (00:11:58) Project Architecture
- (00:13:28) Linode Intro
- (00:20:18) Setting Up Jenkins
- (00:24:11) Tour of Jenkins Interface
- (00:30:33) Installing Plugins
- (00:33:39) Blue Ocean
- (00:34:55) Creating a Pipeline
- (00:42:37) Installing Git
- (00:45:15) Jenkinsfile
- (00:46:27) Updating a Pipeline
- (00:52:05) Jenkins with nom
- (00:56:36) Docker & Dockerhub
- (01:02:14) Closing Remarks
”
[#Script #Coding] Python Programming for Beginners – Full Course
Python Programming for Beginners – Full Course
By freeCodeCamp.org
Published: Aug 09, 2022“
Learn the Python programming language in this full course for beginners! You will learn the fundamentals of Python and code two Python programs line-by-line. No previous programming experience is necessary before watching this course.
Start using Replit: https://join.replit.com/python-students
Beau Carnes developed this course. Check out one of his other channels: https://youtube.com/zizyo
- Rock, Paper, Scissors Code: https://replit.com/@BeauCarnes/rps-py…
- Blackjack Code: https://replit.com/@BeauCarnes/blackj…
- Replit provided a grant that made this course possible.
- The Python Handbook by Flavio Copes: https://www.freecodecamp.org/news/the…
Course Contents
- (0:00:00) Introduction
Rock, Paper, Scissors Intro Project
- (0:03:11) RPS – Variables and Functions
- (0:09:07) RPS – Calling Functions
- (0:12:31) RPS – Dictionaries
- (0:15:28) RPS – User Input
- (0:16:55) RPS – Libraries, Lists, Methods
- (0:20:45) RPS – Function Arguments
- (0:22:33) RPS – If Statements
- (0:25:40) RPS – Concatenating Strings
- (0:27:13) RPS – f-strings
- (0:30:26) RPS – Else and Elif Statements
- (0:33:37) RPS – Refactoring and Nested If
- (0:38:37) RPS – Accessing Dictionary Values
- (0:41:55) RPS – Testing Game
Fundamentals of Python
- (0:43:52) Setup Python Locally
- (0:47:47) Creating New Repl
- (0:48:45) Variables
- (0:51:21) Expressions and Statements
- (0:52:38) Comments
- (0:54:23) Data Types
- (1:00:16) Operators
- (1:00:44) Arithmetic Operators
- (1:03:52) Comparison Operators
- (1:05:13) Boolean Operators
- (1:07:26) Bitwise Operators
- (1:07:42) is & in Operators
- (1:08:21) Ternary Operator
- (1:09:40) Strings
- (1:12:36) String Methods
- (1:16:41) Escaping Characters
- (1:19:23) String Characters & Slicing
- (1:21:45) Booleans
- (1:26:07) Number Data Types
- (1:28:19) Built-in Functions
- (1:29:50) Enums
- (1:32:51) User Input
- (1:34:39) Control Statements
- (1:36:48) Lists
- (1:46:21) Sorting Lists
- (1:49:57) Tuples
- (1:53:49) Dictionaries
- (2:01:45) Sets
- (2:06:10) Functions
- (2:16:57) Variable Scope
- (2:18:35) Nested Functions
- (2:21:37) Closures
- (2:22:59) Objects
- (2:26:27) Loops
- (2:32:01) Break and Continue
- (2:33:02) Classes
- (2:39:12) Modules
- (2:45:55) Arguments from Command Line
- (2:52:42) Lambda Functions
- (2:54:51) Map, Filter, Reduce
- (3:02:41) Recursion
- (3:04:42) Decorators
- (3:06:45) Docstrings
- (3:09:54) Annotations
- (3:11:30) Exceptions
- (3:17:09) With
- (3:18:26) Installing Packages with pip
- (3:21:39) List Compression
- (3:23:09) Polymorphism
- (3:24:23) Operator Overloading
Blackjack Card Game Project
- (3:26:58) Blackjack – Beginning
- (3:50:13) Blackjack – Deck Class
- (3:58:45) Blackjack – Card Class
- (4:03:25) Blackjack – Hand Class
- (4:21:13) Blackjack – Game Class
- (4:37:04) Blackjack – Testing
- (4:39:36) conclusion
[#Script #Coding] Internet History, Technology, and Security – Full Course from Dr. Chuck
Internet History, Technology, and Security – Full Course from Dr. Chuck
By freeCodeCamp.org
Published: Dec 20, 2021“
Learn about the history of the Internet. In this course, you will learn how the Internet was created, who created it, and how it works. Along the way, you will meet many of the innovators who developed the Internet and Web technologies that we use today.
Course website: Dr. Charles Severance developed this course. He is a Clinical Professor at the University of Michigan School of Information, where he teaches various technology-oriented courses including programming, database design, and Web development.
Course Contents
(0:00:00) Introduction (0:09:28) High Stakes Research in Computing and Communication (0:16:50) IEEE Computer: Alan Turing at Bletchley Park (0:41:39) The “First” Electronic Computers Around the World (0:44:30) Monash Museum of Computing History Interviews (0:51:33) Post-War Computing and Communication (1:03:28) Early Academic Networking Research (1:19:04) Len Kleinrock: The First Two Packets on the Internet (1:32:06) Packet Switched Networks (1:37:47) Computing Conversations: Len Kleinrock on the Theory of Packets (1:48:30) Packet Switching and the ARPANET (1:49:50) Katie Hafner on the history of the ARPANET project (2:01:54) Supercomputers as Technology Drivers (2:05:38) Networked Computing, lecture by Larry Smarr on Scientific Computing (2:16:36) From Super Computers to NSFNet (2:19:57) Doug Van Houweling: Building the NSFNet (2:32:13) Expanding NSFNet Around the World (2:34:42) Nii Quaynor: Bringing the Internet to Africa (2:47:28) The World-Wide-Web Emerges at CERN Collider by the cernettes: https://youtu.be/1e1eLe1ihT0 (2:51:28) Building the Web Around the World (3:26:38) Steve Job’s Second-Order Effects (High resolution) (3:39:01) Mosaic at NCSA – The Browser for Everybody (3:43:01) Joseph Hardin: NCSA Mosaic (3:57:12) Reflecting on Mosaic (4:01:22) Computing Conversations with Brendan Eich (4:13:38) Computing Conversations: Mitchell Baker on the Mozilla Foundation (4:32:29) The Web, the World, and the Economy (4:51:05) Computing Conversations: Brian Behlendorf on the Apache Software Foundation (4:55:39) Open Source Wrap Up (4:56:06) Introduction: Link Layer (5:22:11) Computing Conversations: Bob Metcalfe on the First Ethernet LAN (5:39:03) The InterNetwork Protocol (IP) (6:14:35) Computing Conversations: Vint Cerf on the History of Packets (6:30:33) DNS – The Domain Name System (6:38:16) Transport Layer (6:47:45) Van Jacobson: The Slow-Start Algorithm (6:59:32) TCP Wrap Up (7:01:38) Application Layer (7:26:59) Security Introduction (7:29:22) Bruce Schneier: The Security Mindset (7:36:54) Understanding Security (7:46:08) Encryption and Confidentiality (8:06:56) Cryptographic Hashes and Integrity (8:15:47) Bruce Schneier: Building Cryptographic Systems (8:27:06) Hashing and Digital Signatures (8:48:54) Security Public/Private Key – Secure Sockets (9:08:23) Security – Integrity and Certificate Authorities https://ihts.pr4e.com/ ”
[#Script #Coding] What is JavaScript? Click to watch more…
What is JavaScript? Click to watch more…
By codeSTACKr
Published: Aug 19, 2022“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
JavaScript explained quickly!
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Great Design With User Research – Design a Mobile App Using Figma
Great Design With User Research – Design a Mobile App Using Figma
By freeCodeCamp.org
Published: Feb 02, 2022“
Improve your UI / UX design skills by designing a real-world app using Figma. You will learn how to use the d.school design thinking process and self-process management to come up with design solutions.
Course created by Dev and Design. Check out his channel: https://www.youtube.com/channel…
Course Contents
- (0:00:00) Introduction
- (0:04:53) Outline Breakdown
- (0:07:01) Workflow Breakdown In FigJam
- (0:22:50) User Empathy ( Empathize )
- (0:23:21) Creating User Experience Survey With Google Forms
- (0:38:21) Creating User Personas
- (0:43:08) Creating Problem Statement
- (0:44:31) Ideate
- (0:47:49) Prototype Analysis
- (0:48:16) User Goals & User Tasks
- (0:50:11) Information Architecture
- (0:55:38) Low Fidelity Prototyping
- (1:19:59) High Fidelity Prototyping
- (1:20:11) Creating Style Library
- (1:37:21) Creating Component Library
- (3:32:11) Prototype Presentation & Assignments
”
[#WebDesign #Coding] Learn HTML & CSS – Full Course for Beginners
Learn HTML & CSS – Full Course for Beginners
By freeCodeCamp.org
Published: Sep 14, 2022“
Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser version: https://scrimba.com/links/htmlandcss
Code
- Interactive version: https://scrimba.com/links/htmlandcss
- GitHub repo: https://github.com/scrimba/learn-html…
This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: https://twitter.com/perborgen.
Tools used:
- Netlify: https://www.netlify.com/
- VS Code: https://code.visualstudio.com/
- GitHub Desktop: https://desktop.github.com/
- Figma: https://www.figma.com/
- Coolors: https://coolors.co/
- Google Fonts: https://fonts.google.com/
- 1001 Fonts: https://www.1001fonts.com/
Contents
- 0:00:00 Introduction
Build and deploy your first website
- 0:01:32 1: Welcome to the HTML & CSS Course
- 0:04:12 2: HTML Tags
- 0:07:33 3: Write a news article
- 0:09:43 4: The image tag
- 0:14:43 5: Nesting
- 0:17:33 6: Internet superpowers – Change the BBC news!
- 0:22:34 7: Interactive elements – Button
- 0:24:37 8: Interactive elements – input tags — Experiment with input types 100%
- 0:29:37 9: Let’s build Google!
- 0:33:28 10: Aside – Anchor tags
- 0:38:04 11: Add an anchor tag to Google.com
- 0:39:43 12: Proper document structure
- 0:45:29 13: Aside: Lists
- 0:49:27 14: Build a personal Website
- 0:58:15 15: Deploy your Personal Website
- 1:01:30 16: HTML Recap
Build a Google.com clone
- 1:03:06 1: Let’s learn CSS!
- 1:03:53 2: Write your first lines of CSS!
- 1:08:10 3: Write your first lines of CSS! Solution
- 1:11:46 4: Let’s destroy wikipedia – recording
- 1:13:43 5: Link to the CSS file
- 1:16:22 6: Set the width of the elements
- 1:18:31 7: Inline vs block elements
- 1:20:49 8: Margin top
- 1:22:05 9: Divs rule the world
- 1:24:10 10: CSS classes
- 1:28:07 11: Aside – Learn margins via flags
- 1:34:04 12: Add space between our elements
- 1:35:12 13: Aside – Centering with margins
- 1:38:39 14: Centering our content
- 1:40:01 15: Aside – padding
- 1:45:23 16: Aside – Border and border-radius
- 1:50:33 17: Aside challenge – style Twitter button
- 1:55:36 18: Fix the input field
- 2:00:22 19: Center the button
- 2:02:42 20: Style the button
- 2:07:13 21: Why we can’t have two block-level buttons
- 2:11:42 22: Aside – Flexbox
- 2:15:25 23: Centering both buttons with flexbox
- 2:18:20 24: Google clone recap
Build a Digital Business Card
- 2:20:27 1: Building your digital business card
- 2:21:00 2: Fix the image path
- 2:23:56 3: Add alt attribute
- 2:28:24 4: Make the image smaller
- 2:29:40 5: Add a border and padding
- 2:33:30 6: Aside – flexbox child containers
- 2:37:11 7: Flex item containers
- 2:38:51 8: Add a utility class
- 2:42:04 9: Justify the items
- 2:44:13 10: Center the card
- 2:46:13 11: Aside – inheritance
- 2:50:31 12: Center the text via inheritance
- 2:53:32 13: Add colors
- 2:56:57 14: Web-safe fonts
- 3:02:06 15: Aside – margin/padding shorthand
- 3:06:09 16: Use the margin & padding shorthands
- 3:07:26 17: Deploy your Digital Business Card
- 3:12:16 18: Business Card Recap
Build a Space Exploration Site
- 3:14:17 1: Let’s go to space
- 3:14:54 2: Add a background image from Unsplash
- 3:18:54 3: Center elements and Style button
- 3:22:12 4: Add a Google font
- 3:26:34 5: @font-face
- 3:28:39 6: Aside – spans
- 3:32:37 7: Add an underline using a span
- 3:34:27 8: Use an ID for the logo
- 3:38:51 9: Replace the jpg with a webp
- 3:41:25 10: Choose a color palette from an image
- 3:44:18 11: Add the terms & conditions section
- 3:48:17 12: Aside – text shadow
- 3:54:17 13: Improving the readability with text shadows
- 3:56:17 14: Space – Exploration recap
Build a Birthday GIFt Site
- 3:58:02 1: Let’s build a Birthday GIFt site
- 3:59:13 2: Add basic header styling
- 4:02:47 3: Set the colors
- 4:04:13 4: Add shadow on text
- 4:07:34 5: We have a problem that flexbox can fix
- 4:10:10 6: Aside – align-items
- 4:16:13 7: Aside – flex-direction
- 4:20:42 8: Turn the header into a flexbox
- 4:22:26 9: Fix date and age design
- 4:26:36 10: Create the first gift
- 4:31:56 11: Replace the img with a div
- 4:36:14 12: Aside – make elements change on hover
- 4:39:08 13: Add the hover effect
- 4:41:17 14: Create the next GIFt
- 4:45:39 15: Create two more GIFts
- 4:48:15 16: Create the final GIFt
- 4:51:38 17: Add the footer
- 4:55:18 18: Add a background gradient
- 4:58:46 19: Personalize the Birthday GIFt Site
- 5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site
- 5:05:44 21: Deploying your Birthday GIFt Site
- 5:06:45 22: Use VS Code to edit your Birthday GIFt
- 5:11:36 23: GIFt site recap
Solo Project: Hometown Homepage
- 5:13:29 1: It’s time to go solo!
- 5:15:47 2: Solo Project – Hometown Homepage
- 5:19:54 3: Congrats on completing the course!
”
[#Webdesign #Coding] Web Scraping with Puppeteer & Node.js: Chrome Automation
Web Scraping with Puppeteer & Node.js: Chrome Automation
By LearnWebCode
Published: Jul 26, 2021“
My premium courses: https://learnwebcode.com/courses/
CONTENTS:
- 0:00 Intro
- 1:20 Installing Puppeteer
- 4:29 Taking a Screenshot
- 7:09 Scraping Text From HTML
- 15:34 Saving Images to Hard Drive
- 21:45 Clicking a Button
- 25:16 Filling Out a Form
- 30:51 Scheduling a Task to Repeat
The practice URL I’m working with in the video: https://learnwebcode.github.io/practi…
My finished example code: https://gist.github.com/LearnWebCode/…
Follow me for updates on new videos or projects:
Instagram: https://www.instagram.com/javaschiff/
Twitter: https://twitter.com/learnwebcode
Facebook: https://www.facebook.com/Brad-Schiff-…
Twitch: https://www.twitch.tv/learnwebcode”
[#Script #Coding] Instant Preview for Image Upload Applications JavaScript Tutorial
Instant Preview for Image Upload Applications JavaScript Tutorial
By Adam Khoury
Published: Jan 20, 2022“
In this video Adam demonstrates how to provide instant image preview that you can give your users in any upload applications. There may be an occasion where you want to allow the user to see or manipulate the object before it is uploaded to your server.
”
