-
CSS Crash Course - Create a Responsive Website
By the end of this CSS 3 crash course, a responsive website will be built. We will look at different ways to add CSS, color, margin, padding, header, navigation bar, position and more. Let's learn!
Hostinger Anniversary Deal ➜ https://bit.ly/3z6Ahvq
⭐ Get a Free .COM domain with Premium Plan for 12+ months. Free SSL and Cloudflare included
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/css-crash-course
Related crash courses:
HTML: https://youtu.be/g2RQCfcoMXM
Flexbox: https://youtu.be/gNXLJeW6-XI
Grid: https://youtu.be/jD_R-aVjUTU
JavaScript: https://youtu.be/ooQdaRQmTdo
ℹ️ Websites used in this video:
https://blog.hubspot.com/website/css-margin-vs-padding
🕒 Timestamps:
00:00 Intro & demo
02:52 3 ways to add css
08:09 Color
10:22 Font size & font family
13:02 Body
14:06 Margin vs. padding
21:55 Header
27:08 Navigation bar
31:09 Slideshow
36:09 Sidebar & main content
40:18 Responsiveness
41:49 Footer
45:16 Form
53:35 Position
59:55 Container
01:00:58 Bonus
O1:09:39 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#css #css3 #website -
Vue Crash Course - Build Real Project
By the end of this Vue 3 crash course, you will be able to build a real project. Topics include props, PrimeVue, create components, add/update/delete functions, POST/PUT/DELETE requests via API and more.
Hostinger Anniversary Deal ➜ https://bit.ly/3z6Ahvq
⭐ Get a Free .COM domain with Premium Plan for 12+ months. Free SSL and Cloudflare included
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/vue-crash-course
Related crash courses:
JavaScript: https://youtu.be/ooQdaRQmTdo
React: https://youtu.be/-sld1zTz3uY
ℹ️ Websites used in this video:
https://v3.vuejs.org/
🕒 Timestamps:
00:00 Intro & demo
04:18 Requirement
05:01 Create a new project
10:24 Extensions
12:43 Folders & files
20:13 Style menu
21:23 Props
30:17 PrimeVue vs Vuetify vs Quasar
31:55 Create card component
45:24 Grid
51:37 Form
56:25 Conditional class
58:26 Events
59:54 Delete function
01:05:30 created()
01:06:49 Favorite function
01:11:37 Add pet function
01:21:57 Create a free REST API
01:24:27 Fetch functions
01:27:26 POST, DELETE & PUT requests
01:42:15 Bonus
01:44:46 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#vue #vuejs #vue3 -
Uploading Multiple Images to Firebase in ReactJS
I will be showing you how to upload multiples images at once to firebase using ReactJS. Let's start!
Upload a single image to firebase (First part)
https://youtu.be/8r1Pb6Ja90o
Get ExpressVPN ➜ https://www.xvinlink.com/?a_fid=hongly
⭐ SAVE 49% + 12 months + 3 months FREE with this special offer! ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/reactjs/tree/react-firebase-multiple-images-upload
🕒 Timestamps:
00:00 Intro
00:35 Firebase setup
07:04 Update code for multiple images
23:55 Recap
26:22 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#firebase #reactjs #uploadimages -
YAML Crash Course 2021
In this YAML crash course, I will show how to store data in YAML file with various data types. Let's start!
Get ExpressVPN ➜ https://www.xvinlink.com/?a_fid=hongly
⭐ SAVE 49% + 12 months + 3 months FREE with this special offer! ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
Related crash courses:
JavaScript: https://youtu.be/ooQdaRQmTdo
React: https://youtu.be/-sld1zTz3uY
🕒 Timestamps:
00:00 Intro
01:11 Data types
03:57 Object
05:04 Array
07:52 List of objects
10:31 Multiline strings
11:52 Preserve newlines
13:08 Anchors
16:24 Convert data types
18:25 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#yaml #json #xml -
HTML Crash Course 2021
After completing this HTML5 crash course, you will be able to create a website. Many topics will be covered including Entities, Hyperlinks, Lists, Table, Forms and more. You will also learn how to use DevTools and create a Boilerplate.
⭐ Download Kite for FREE today
https://bit.ly/2RjeNKL
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
Related crash courses:
CSS: https://youtu.be/reDfZXpa1Dw
Flexbox: https://youtu.be/gNXLJeW6-XI
Grid: https://youtu.be/jD_R-aVjUTU
JavaScript: https://youtu.be/ooQdaRQmTdo
🕒 Timestamps:
00:00 Intro
01:43 Set up extensions
04:33 HTML basics
07:11 Image
09:13 Quick recap
09:47 CSS basics
12:45 HTML & CSS validator
15:50 DevTools
17:31 Boilerplate
18:46 UTF-8
19:34 More meta tags
21:47 Heading tag
25:53 Entities
30:42 Hyperlinks
40:09 Lists
41:10 Table
42:54 Forms
48:54 BONUS
51:10 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#html #html5 #course -
Grid Crash Course 2021
By the end of this Grid crash course, you will learn how to implement Grid in your projects. We will start from scratch. Topics such as grid-template-columns, grid-auto-rows, grid-column, grid-template-areas and more will be covered. Let's learn!
Get NordVPN ➜ https://go.nordvpn.net/SH3C1
⭐ SAVE 68% + 1 FREE Month + 30 Day Money Back Guarantee ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
Related crash courses:
CSS: https://youtu.be/reDfZXpa1Dw
Flexbox: https://youtu.be/gNXLJeW6-XI
JavaScript: https://youtu.be/ooQdaRQmTdo
React: https://youtu.be/-sld1zTz3uY
🕒 Timestamps:
00:00 Intro
00:31 Setup html & css
03:52 grid-template-columns
05:00 grid gap
05:57 fraction
07:27 repeat
08:21 grid-auto-rows
10:31 justify-items
11:47 align-items
12:30 grid-column & grid-row
14:08 grid-row
17:34 grid-template-areas
20:11 grid-column-start & end
21:40 span
23:41 Complete guide
25:43 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#grid #css #gridtutorial -
Flexbox Crash Course 2021
By the end of this Flexbox crash course, you will learn how to use Flexbox effectively by positioning elements wherever you like. Let's get started!
Get NordVPN ➜ https://go.nordvpn.net/SH3C1
⭐ SAVE 68% + 1 FREE Month + 30 Day Money Back Guarantee ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
Related crash courses:
CSS: https://youtu.be/reDfZXpa1Dw
Grid: https://youtu.be/jD_R-aVjUTU
JavaScript: https://youtu.be/ooQdaRQmTdo
React: https://youtu.be/-sld1zTz3uY
🕒 Timestamps:
00:00 Intro
01:00 Create 3 images (card)
04:44 flex
05:44 justify-content
07:38 align-items
09:11 Center horizontally & vertically
09:44 align-content
11:37 flex-direction
12:50 flex-grow
15:04 flex-basis
15:40 flex shorthand
16:41 align-self
17:47 order
19:23 Refactoring
20:52 Flexbox guide
23:15 More examples
25:34 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#flexbox #css #course -
JSDoc Crash Course 2021 - JavaScript Documentation Generator
In this JSDoc crash course, you will learn how to install JSDoc locally. More topics are covered such as different types (string, number or array), Object, Template, Class, Module, Tutorials, README and more.
Get NordVPN ➜ https://go.nordvpn.net/SH3C1
⭐ SAVE 68% + 1 FREE Month + 30 Day Money Back Guarantee ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/jsdoc-crash-course
Related crash courses:
JavaScript: https://youtu.be/ooQdaRQmTdo
Async: https://youtu.be/RI490V7YOrE
React: https://youtu.be/-sld1zTz3uY
🕒 Timestamps:
00:00 Intro
00:42 Install JSDoc
03:19 Create config file
08:15 Run command
10:45 Run JSDoc in browser
11:41 String
13:48 Type checking
14:39 Number
15:40 Array
18:28 Object
21:27 Template
23:50 Function
28:28 Custom type
33:48 Class
40:04 Link
42:24 Module
47:54 Tutorials
53:51 Add text to Home
56:12 README
57:57 Recap
59:17 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#jsdoc #javascript #documentation -
Async Crash Course 2021 - Callbacks, Promises, Async/Await
In this new Async crash course, you will learn what Callbacks, Promises & Async/Await are. I will show you different examples and fetch data from a real server. Let's start!
Get NordVPN ➜ https://go.nordvpn.net/SH3C1
⭐ SAVE 68% + 1 FREE Month + 30 Day Money Back Guarantee ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/async-crash-course
Related crash courses:
JavaScript: https://youtu.be/ooQdaRQmTdo
React: https://youtu.be/-sld1zTz3uY
🕒 Timestamps:
00:00 Intro
00:32 Synchronous function problem
06:24 Callbacks
08:40 Promises
13:02 Promise.all
16:44 Fetch data from server
20:50 Async/Await
25:58 Bonus: callbacks
36:16 Bonus: promises
44:04 Bonus: async/await
47:07 Recap
52:59 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#async #callbacks #promises -
React Redux Crash Course 2021
By the end of this React Redux crash course, you will learn how Redux works in React. You will be introduced to different terms in Redux such as Store, Action, Reducer & Dispatch. I have a quick exercise for you to complete as well. Let's start!
Get NordVPN ➜ https://go.nordvpn.net/SH3C1
⭐ SAVE 68% + 1 FREE Month + 30 Day Money Back Guarantee ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/react-redux-crash-course
Related crash courses:
React: https://youtu.be/-sld1zTz3uY
JavaScript: https://youtu.be/ooQdaRQmTdo
🕒 Timestamps:
00:00 Intro
00:49 Install React app
01:22 Diagram
05:21 Required libraries
08:46 All React Redux code in index.js
21:44 Folder structure
31:47 Provider
35:54 Buttons
40:55 Payload
42:59 Quick exercise
47:20 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#redux #react #reactredux -
React Crash Course 2021
In this React JS crash course, you will learn the following topics:
File structure, create components, JSX (styling in React), Routing, Props, Events, useState & useEffect (Hooks), Add pet function, Delete function, Build form using Material-UI (library from Google), Fetch data from server, PUT, DELETE, POST requests and many more.
Get NordVPN ➜ https://go.nordvpn.net/SH3C1
⭐ SAVE 68% + 1 FREE Month + 30 Day Money Back Guarantee ⭐
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
💻 Source code: https://github.com/lyhd/reactjs-crash-course
Related crash courses:
React Redux: https://youtu.be/RPFr-hiFiU0
JavaScript: https://youtu.be/ooQdaRQmTdo
ℹ️ Websites used in this video:
https://reactjs.org/
🕒 Timestamps:
00:00 Intro
03:47 Create a new project
08:50 Folders & files
13:10 JSX
14:17 Writing first code
15:50 Fragments
16:55 Pages folder
18:12 File structure
19:27 Create components
20:04 Functional vs. Class components
22:31 Routing & Inline Styling
34:35 CSS
39:08 Quick recap
40:11 More styling
41:25 Props
45:57 PropTypes
51:23 Material-UI
55:18 Create a card
01:00:21 map function
01:04:07 useState Hook
01:06:01 Global state
01:10:17 Create pet component
01:17:07 Events
01:18:23 Delete function
01:20:04 Favorite icon
01:24:33 Favorite function
01:28:02 React Developer Tools
01:29:14 JSX expressions
01:30:18 Build a form
01:35:58 Input state
01:39:53 Submit form function
01:41:14 Add pet function
01:44:52 Create a Free REST API
01:47:21 useEffect Hook & fetch data
01:49:07 POST, DELETE & PUT requests
01:53:51 Testing
01:58:32 Grid & Responsiveness
02:05:22 Outro
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#react #reactjs #course -
This is How Routing Works in Next.js | Next.js Tutorial
In this video, I will show you how routing works in Next.js including pages and routes. Let's get started
Get Hostinger with 90% Off https://www.hostg.xyz/SH5yf
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on the notification bell to get more videos like this.
ℹ️ Websites used in this video:
https://nextjs.org/docs/routing/introduction
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Discord: https://discord.gg/Acn6bpA8
#next.js #tutorial #routing
