Why You Should Try Tailwind CSS
By LearnWebCode
Published: Jun 20, 2022“
Let’s get started using Tailwind CSS in our projects. My premium courses and coupons: https://learnwebcode.com/courses/
GitHub link for this video: https://github.com/LearnWebCode/tailw…
CONTENTS
- 0:00 Intro
- 1:56 The Problems With CSS
- 7:39 What Is Tailwind?
- 10:59 Actually Getting Started
- 18:20 GitHub Examples
- 22:40 Markdown or Blog Content?
- 27:31 Custom Colors
- 29:38 Custom Fonts
- 34:51 Typography Plugin
- 37:03 VS Code Extension
Follow LearnWebCode 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
”
Tag: coding
[#Script #Coding] Learn Go Programming by Building 11 Projects – Full Course
Learn Go Programming by Building 11 Projects – Full Course
By freeCodeCamp.org
Published: Mar 22, 2022“
In this Go programming language course for beginners, you will improve your Go programming skills by building eleven projects.
Akhil Sharma created this course. Check out his channel: https://www.youtube.com/c/AkhilSharmaTech
Project Code
- Build A Simple Web Server With Golang – https://github.com/AkhilSharma90/simp…
- Build A CRUD API With Golang – https://github.com/AkhilSharma90/Gola…
- Golang With MySQL Book Management System – https://github.com/AkhilSharma90/Gola…
- Simple SlackBot To Calculate Age – https://github.com/AkhilSharma90/GO-S…
- Golang Slackbot for File Uploading – https://github.com/AkhilSharma90/GO-S…
- Email Verifier Tool With Golang – https://github.com/AkhilSharma90/GO-E…
- AWS Lambda With Golang – https://github.com/AkhilSharma90/Simp…
- CRM with Golang Fiber – https://github.com/AkhilSharma90/go-b…
- HRMS with Golang Fiber – https://github.com/AkhilSharma90/go-b…
- Complete Serverless Stack – https://github.com/AkhilSharma90/Gola…
- A.I Bot with Wolfram, Wit.ai and golang – https://github.com/AkhilSharma90/AI-B…
Course Contents
- (0:00:00) Build A Simple Web Server With Golang
- (0:20:34) Build A CRUD API With Golang
- (1:07:14) Golang With MYSQL Book Management System
- (2:30:57) Simple SlackBot To Calculate Age
- (2:44:12) Golang Slackbot for File Uploading
- (3:01:45) Email Verifier Tool With Golang
- (3:24:32) AWS Lambda With Golang
- (3:50:12) CRM with Golang Fiber
- (4:34:34) HRMS with Golang Fiber
- (5:44:25) Complete serverless stack with Golang
- (7:28:55) A.I Bot with wolfram, wit.ai and Golang
”
[#Script #Coding] Learn TypeScript – Full Course for Beginners
Learn TypeScript – Full Course for Beginners
By freeCodeCamp.org
Published: Mar 15, 2021“
Learn the TypeScript programming language in this crash course for beginners. By the end of this course you will understand all modern TypeScript features.
Created by Alexander Kochergin. Check out his channel: https://www.youtube.com/MonsterlessonsAcademy
Code: https://github.com/monsterlessonsacademy/typescript-course
Course ContentsM/strong>
- (00:00) Intro
- (00:30) Do I need to learn Typescript?
- (05:02) How to install Typescript tools?
- (12:55) Typescript Type definitions introduction
- (22:02) Introduction to Interfaces in Typescript
- (31:22) Union & Type alias in Typescript
- (39:58) Any never void unknown in Typescript
- (49:57) Typescript Working with DOM
- (58:27) Creating classes in Typescript
- (1:09:37) Generics interfaces and functions in Typescript
- (1:27:17) How to use Enums in Typescript
- (1:34:07) Outro
”
[#Script #Coding] Top VS Code Updates | v1.69 Released!! | Tips & Tricks 2021 (Visual Studio Code)
Top VS Code Updates | v1.69 Released!! | Tips & Tricks 2021 (Visual Studio Code)
By codeSTACKr
Published: Jul 20, 2022“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Get my FREE VS Code Cheat Sheet: https://courses.codestackr.com/vs-cod…
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
In this video, we are going to look at some of the recent updates to VS Code (Visual Studio Code) with version 1.69. There are several great improvements.
If you want to learn more about VS Code, check out my VS Code course at https://vsCodeHero.com.
”
[#Script #Coding] Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial
Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial
By freeCodeCamp.org
Published: Apr 19, 2021“
Learn how to create an Instagram clone with React and JavaScript! This project uses React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library and Cypress E2E Testing.
This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles. The sign-in page connects to Firebase when a user tries to sign in, and when a user signs up, Firebase auth is used to store the user in the Firebase auth database. After the application is built you will learn how to deploy it to Vercel.
Course created by Karl Hadwen. Check out his channel: https://www.youtube.com/c/CognitiveSurge
Code: https://github.com/karlhadwen/instagram
Course Contents
- (0:00:00) Introduction
- (0:05:37) Showcase
- (0:15:28) Create React App (yarn)
- (0:18:22) Project Folder Structure
- (0:20:26) Installing Dependencies
- (0:22:47) Refactoring unnecessary files, refactoring code
- (0:29:18) Install ESLint
- (0:33:06) Creating Folder Structure & Architecture
- (0:43:05) Setup Firebase
- (0:44:22) Firestore
- (0:46:44) Firestore Rules
- (0:48:43) Firestore (Collections & Docs)
- (0:51:00) Firebase Authentication
- (0:53:59) Realtime Database (Explanation)
- (0:54:45) createContext in firebase.js
- (1:02:34) Creating App in Firebase
- (1:09:15) Start working on Login Page
- (1:10:17) Install React Router Dom
- (1:18:15) Create Routes
- (1:21:51) Continue working on Login Page (Part 2)
- (1:26:35) Tailwind.css Introduction
- (1:31:34) Continue working on Login Page (Part 3)
- (1:32:35) Install more dependencies
- (1:36:30) Change how all scripts work
- (1:40:21) yarn add postcss -D
- (1:40:57) Create components folder
- (1:34:19) Tailwind.css setup
- (1:35:51) Completed Tailwind Setup, Continue working on Login Page (Part 4)
- (1:39:28) Interjection: Field Value
- (1:41:56) Continue working on Login Page
- (2:01:47) Tailwind.config
- (2:06:05) Login Functionality (with Firebase)
- (2:11:12) Signup Page
- (2:22:53) Check for user created is a duplicate
- (2:54:49) Not Found & Dashboard Page
- (3:01:11) Created Timeline Component
- (3:01:28) Created Sidebar Component
- (3:01:47) Created Header Component
- (3:04:14) use-auth-listener.js Hook
- (3:11:23) users.js UserContext
- (3:15:38) Back to Header Component
- (3:42:21) Working on Dashboard Page
- (3:45:59) Working on Sidebar Component
- (3:46:15) use-user.js hook
- (4:04:20) In user.js ? Introduction to prop types
- (4:25:03) Created Timeline.js
- (4:25:43) Explanation on useMemo
- (4:27:45) Add WhyDidYouRender
- (4:29:53) Struggling with some issues
- (4:42:42) Finally Figuring out some problems with WhyDidYouRender
- (4:50:41) Working on suggestion.js (sidebar completed)
- (4:59:20) Get suggested profiles
- (5:16:28) Functionality: Remove followed user from suggestion
- (5:23:12) Functionality: Update user’s following & followers
- (5:34:18) Overview on Timeline
- (5:40:47) Creating Post Component
- (5:42:57) Creating more custom hooks (usePhotos)
- (6:04:16) Rendering out the photos (using React skeleton)
- (6:10:55) Start work on Post Component
- (6:15:18) Components within Post
- (6:16:03) Header Component
- (6:20:56) Image & Actions
- (6:27:32) Service call in Firebase
- (6:42:44) Show Comments
- (6:51:13) Add Comments
- (7:12:26) Adding Protected Routes
- (7:27:13) Profile
- (7:30:20) Lazy load explanation
- (7:45:23) Continue working on Profile Page
- (7:58:48) Header Component in Profile Page
- (8:02:14) Profile Specific Header
- (8:18:00) Get User Photos
- (8:37:52) Continue working on header
- (9:20:31) Information in header
- (9:37:09) Photos Component in Profile Page
- (9:50:07) Recap of everything we’ve done
- (9:52:55) Start of Review
- (9:55:33) Not found header
- (9:57:04) Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
- (9:58:35) Review of contexts: firebase.js and user.js
- (9:58:57) Review of Routes & Posts
- (10:01:31) loadtest (Npm install -g loadtest)
- (10:15:27) Create a production build
- (10:38:28) Deployment to Vercel done but with issues
- (10:51:47) Issues fixed
- (10:52:19) Lighthouse
- (11:02:27) Wrapping up
- (11:04:13) Changes and Refactoring (Fixing Bugs)
- (11:48:50) Quick Look at Paid Version
- (11:49:59) Cypress
- (11:54:08) Signing Off
[READ MORE]”
[#Script #Coding] Learn Terraform (and AWS) by Building a Dev Environment – Full Course for Beginners
Learn Terraform (and AWS) by Building a Dev Environment – Full Course for Beginners
By freeCodeCamp.org
Published: Apr 11, 2022“
Learn Terraform basics as you utilize Visual Studio Code (On Windows, Mac, or Linux!) to deploy AWS resources and an EC2 instance that you can SSH into to have your own redeployable environment.
Derek Morgan created this course. Check out more of his courses at: https://morethancertified.com
- LinkedIn: https://linkedin.com/in/derekm1215
- Twitter: https://twitter.com/derekm1215
Course Contents
- Welcome and Setup (0:00)
- What We’re Going to Build
- AWS IAM Setup
- Local Environment Setup
- Let’s Build! (7:22)
- AWS Provider and Terraform Init
- A VPC and Terraform Apply
- The Terraform State
- Terraform Destroy
- A Subnet and Referencing
- An IGW and Terraform fmt
- A Route Table
- A Route Table Association
- A Security Group
- An AMI Datasource
- A Key Pair
- An EC2 Instance
- Userdata and the File Function
- SSH Config Scripts
- The Provisioner and Templatefile
- The Deployment and Replace
- Variables
- Variable Precedence
- Conditional Expressions
- Outputs
- Conclusion
”
[#Script #Coding] Design a Scalable Mobile App With Figma Variants
Design a Scalable Mobile App With Figma Variants
By freeCodeCamp.org
Published: Apr 07, 2022“
Learn how to use Figma Variants to design a scalable mobile app. Variants can streamline your frontend design process by allowing you to group and organize similar components into a single container.
Ahmet Efeoglu developed this course. Check out his channel: https://www.youtube.com/channel…
Tutorial file link: https://www.figma.com/file/FrLR3t9jZ9…
Homework file link: https://www.figma.com/file/8js2feuv6L…MCONTENTS:
- (0:00:18) Intro
- (0:02:13) Accessing Tutorial and Homework Files
- (0:04:24) Project Overview
- (0:05:27) Recommending Personal and freeCodeCamp Channel
- (0:06:25) Basics Overview
- (0:08:22) Learning The Frame Functionality
- (0:10:25) Learning The Autolayout Functionality
- (0:14:39) Learning The Component Functionality
- (0:18:55) Learning The Variant Functionality
- (0:21:42) Creating The Type System
- (0:28:41) Creating The Color Palette/System
- (0:35:54) Creating The Icon Set
- (0:41:34) Creating Input Variants
- (0:52:23) Creating Large Button Variant
- (1:00:47) Designing Sign Up and Login Screen
- (1:18:46) Creating Status Bar Variant
- (1:23:14) Creating The Filter Variant
- (1:27:40) Creating Bottom Navigation Variant
- (1:35:02) Creating Image Card Variant
- (1:49:27) Updating Input Variant
- (1:57:31) Designing The Discover Screens
- (2:15:20) Creating Large Avatar Variant
- (2:24:05) Creating Small Button Variant
- (2:32:45) Creating The Benefit Card Variant
- (2:46:45) Designing Details Screen
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] Algorithms in Python – Full Course for Beginners
Algorithms in Python – Full Course for Beginners
By freeCodeCamp.org
Published: Sep 22, 2022“
In this Introduction to Algorithms in Python course, you’ll learn about algorithm basics like recursion and then go all the way to working with concepts like dynamic programming.
The 5 main course segments include simple recursive algorithms, data structures, divide & conquer, greedy algorithms, and dynamic programming.
Joy Brock developed this course in collaboration with realtoughcandy.io. Check out Joy’s channel: https://www.youtube.com/c/PythonLearn…
Sign up for the RealToughCandy newsletter and get a free ebook plus coding challenges, exclusive promo codes and more delivered directly to your inbox. https://realtoughcandy.com/newsletter…
Code Samples
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
Course Contents
- (0:00:00) Intro & course overview
- (0:07:07) Factorials refresher
- (0:10:04) CODING CHALLENGE: Factorial program using iteration, recursion
- (0:14:57) What is a permutation?
- (0:16:34) CODING CHALLENGE: Recursive permutation
- (0:20:13) Iterative permutation example
- (0:22:17) 8/N queens problem: theory & explanation
- (0:23:57) Real world example of permutations
- (0:24:49) Lesson recap
- (0:26:11) What are data structures?
- (0:27:53) What is a one-dimensional array?
- (0:29:01) Search & sort
- (0:30:39) CODING CHALLENGE: Linear search
- (0:31:00) Binary search
- (0:32:06) CODING CHALLENGE: Iterative binary search
- (0:33:31) Coding a recursive binary search
- (0:34:47) Bubble sort
- (0:36:42) CODING CHALLENGE: Bubble sort
- (0:38:02) Insertion sort
- (0:39:24) CODING CHALLENGE: Insertion sort
- (0:40:36) Linked lists
- (0:44:01) CODING CHALLENGE: Linked list (traverse, search, add, delete, header, nodes, tail)
- (0:52:12) Hash tables
- (0:56:27) Lesson recap
- (0:57:42) Divide & conquer algorithm paradigm: uses, benefits and more
- (1:00:43) Merge sort
- (1:02:48) CODING CHALLENGE: An efficient merge sort
- (1:05:48) Getting judged mercilessly on LeetCode
- (1:06:47) Getting Python to do the work for us with sorted()
- (1:07:33) Matrix multiplication
- (1:10:06) CODING CHALLENGE: Matrix multiplication
- (1:11:20) Strassen algorithm
- (1:14:45) CODING CHALLENGE: Strassen algorithm
- (1:16:27) Lesson recap
- (1:17:21) What is a greedy algorithm?
- (1:19:20) Assign mice to holes conceptual overview
- (1:21:45) CODING CHALLENGE: Assign mice to holes
- (1:23:10) Fractional knapsack
- (1:23:36) Understanding the fractional knapsack problem with a (light-hearted) dystopian apocalypse example
- (1:25:54) Coding challenge prep
- (1:27:13) CODING CHALLENGE: Fractional knapsack
- (1:31:49) Egyptians fractions
- (1:34:03) CODING CHALLENGE: Egyptian fractions
- (1:37:06) Lesson recap
- (1:38:15) What is dynamic programming (also called DP)?
- (1:41:55) What is the principle of optimality?
- (1:42:20) The 3-step process to solving a problem with optimal substructure
- (1:43:55) Introduction to “ugly numbers”
- (1:47:19) CODING CHALLENGE: Ugly numbers
- (1:51:41) Traveling salesman problem (TSP)
- (1:55:49) CODING CHALLENGE: Traveling salesman problem
- (1:59:52) Palindromic matrix paths
- (2:03:11) CODING CHALLENGE: Palindromic matrix paths
- (2:08:37) Lesson recap
- (2:10:03) Course wrap up (and the importance of coding every day)
[READ MORE]”
[#Script #Coding] Command Line Hacking – Over The Wire Bandit Walkthrough (CTF Wargame)
Command Line Hacking – Over The Wire Bandit Walkthrough (CTF Wargame)
By freeCodeCamp.org
Published: Nov 09, 2022“
Improve your cybersecurity and Linux skills by solving challenges in the Bandit Wargame from OverTheWire. This video is a walk through of how to solve the challenges—but make sure to try each on your own before watching the solution!
Start the game here: https://overthewire.org/wargames/bandit/
Tutorial from Sabyasachi Paul. Check out his channel: https://www.youtube.com/channel/UCF6D…
Sabyasachi’s Linktree: https://linktr.ee/h0tPlug1nContents
- (0:00:00) Introduction
- (0:02:11) Level 0
- (0:04:06) Level 0 – Level 1
- (0:05:11) Level 1 – Level 2
- (0:06:18) Level 2 – Level 3
- (0:07:56) Level 3 – Level 4
- (0:09:11) Level 4 – Level 5
- (0:11:57) Level 5 – Level 6
- (0:14:51) Level 6 – Level 7
- (0:17:06) Level 7 – Level 8
- (0:18:37) Level 8 – Level 9
- (0:21:08) Level 9 – Level 10
- (0:22:45) Level 10 – Level 11
- (0:24:10) Level 11 – Level 12
- (0:27:11) Level 12 – Level 13
- (0:35:22) Level 13 – Level 14
- (0:37:01) Level 14 – Level 15
- (0:38:45) Level 15 – Level 16
- (0:41:35) Level 16 – Level 17
- (0:50:46) Level 17 – Level 18
- (0:53:07) Level 18 – Level 19
- (0:55:28) Level 19 – Level 20
- (0:58:23) Level 20 – Level 21
- (1:02:33) Level 21 – Level 22
- (1:07:47) Level 22 – Level 23
- (1:11:54) Level 23 – Level 24
- (1:26:39) Level 24 – Level 25
- (1:32:53) Level 25 – Level 26
- (1:43:25) Level 26 – Level 27
- (1:47:18) Level 27 – Level 28
- (1:52:10) Level 28 – Level 29
- (1:56:36) Level 29 – Level 30
- (2:00:17) Level 30 – Level 31
- (2:05:31) Level 31 – Level 32
- (2:10:34) Level 32 – Level 33
- (2:14:45) Level 33 – Level 34
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] User Authentication in Web Apps (Passport.js, Node, Express)
User Authentication in Web Apps (Passport.js, Node, Express)
By freeCodeCamp.org
Published: Mar 16, 2021“
In this full course for beginners, you will learn how to implement user authentication from scratch in your web apps. You will learn how to use Passport.js in a Node / Express app.
Course created by Zach Gollwitzer. Check out his channel: https://www.youtube.com/zachgollwitzer
Course Contents
- (0:00:00) Introduction
- (0:04:04) Topics and Prerequisites
- (0:16:43) Intro to HTTP Headers and Cookies
- (0:34:23) Intro to Express Middleware
- (1:05:04) Intro to Express Sessions
- (1:31:10) Implementation of Passport Local Strategy
- (2:50:21) Intro to Public Key Cryptography
- (3:34:31) How do JWTs work?
- (4:16:58) Implementation of Passport JWT Strategy
- (5:17:29) Implementing a Custom JWT Auth Solution
- (5:46:20) JWT Strategy in Angular Front-End App
”
