Typescript vs Javascript - What are the differences
Which one should I learn?
In this video, we deep-dive into the 'TypeScript vs JavaScript' debate, breaking down the key differences between these two popular programming languages. We explore TypeScript's static type-checking, and how it can enhance JavaScript code readability, maintainability, and catch errors during development. Whether you're a beginner trying to understand the basics or an experienced coder deciding whether to switch to TypeScript, this comprehensive guide is for you. Learn about the advantages and trade-offs of each language and make an informed decision for your next project. Don't forget to like, share, and subscribe for more coding insights!
Looking for more?
☕️ https://www.buymeacoffee.com/time2code
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
TimeStamps
0:57 What are the differences between TypeScript and JavaScript?
01:23 What does TypeScript offers on top of JavaScrip?
03:35 Do you need to know JavaScript to learn TypeScript?
06:05 Can you learn TypeScript as a complete beginner?
06:57 Is it worth learning TypeScript?
07:22 How can I get started with TypeScript
08:27 Should I use TypeScript or JavaScript for my Projects?
169
views
React Hook Form Tutorial for Beginners - Next JS
Contact Page in the Portfolio App built with Next JS 13
Hey, in today's video I show you how to add react hook form to our existing contact page in the Portfolio App built with Next.js
Looking for more?
☕️ https://www.buymeacoffee.com/time2code
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
63
views
How to Connect Next.js 13 with MongoDB - APP Directory Routing
Real Database Integration!
Ditch the JSON files and make your Next.js 13 app thrive with the power of MongoDB! In this tutorial, I'll guide you through the process of connecting your Next.js application with MongoDB, taking your project to the next level. We will not only establish a connection but also implement key CRUD operations, ensuring your portfolio app is fully functional with a real database. If you're ready to level up your Next.js skills and learn how to integrate MongoDB, this tutorial is for you.
💻 Source Code: https://github.com/timeToCode-ali/portfolio-app/tree/video-3-final-unit-tests
🌟 BONUS: FREE CONSULTATION
1. Complete the tutorial and add one of the suggestions I mention
2. Like & Comment to let me know you've finished. (and Subscribe if you haven't yet)
3. Get over Twitter and send me a link to your repo on Github. You can DM me or tweet me. (you can also send me an email, but I use more twitter. (Feel free to follow me on twitter to be up to date with my content)
4. I'll review all the steps are completed
5. We'll set up a call at a convenient time for both of us
Looking for more?
☕️ https://www.buymeacoffee.com/time2code
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
*Videos you may Like to watch:*
🎥 Build a Portfolio with NEXT.js13 & TypeScript & TailwindCSS #1
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)
🎥 Build a Portfolio Contact Form in Next.js 13 & TS! #3
https://www.youtube.com/watch?v=bKOgw3FaAGQ
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*
https://www.youtube.com/watch?v=0BDfyWzw5Hw
🎥 *NEXT.js 13 Exploring the New Features*
https://www.youtube.com/watch?v=7Z69FzlBJwo
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*
https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ
*Timestamp*
🔵 00:00 How to connect MongoDB to Next.js13 App
🔵 01:13 Create a MongoDB Account
🔵 01:13 Route API in Next.js 13
🔵 07:20 What is Mongoose
🔵 12:10 Connect to MongoDB using Mongoose
🔵 18:48 Defining a Model Schema
🔵 25:00 A few different errors submitting the form
🔵 27:17 Important Message!!! - Let's have a coffee together ☕️
🔵 29:00 Testing the database in MongoDB
🔵 31:05 Improving the User Experience - Front Changes
🔵 32:05 Reset the form when is submitted successfully
🔵 37:30 Final words
127
views
Mastering Unit Testing in Next.js & TypeScript | Portfolio App #3
Uncover the power of unit testing in our Next.js and TypeScript project as we take our portfolio app to the next level.
Welcome back to our Portfolio App Series! In this pivotal episode, we dive into the world of Unit Testing. If you're using Next.js with TypeScript, testing might seem daunting – but fear not! I'm here to guide you through each step, simplifying the process and making it digestible.
We'll discuss why unit testing is critical for ensuring the reliability of our applications, and I'll demonstrate how to implement these tests seamlessly within our portfolio app. By the end of this video, you'll have a deep understanding of unit testing and how it can boost the quality of your Next.js and TypeScript projects.
Whether you're new to testing or looking to refine your skills, this tutorial has something for everyone.
💻 Source Code: [https://github.com/timeToCode-ali/portfolio-app/tree/video-1-initial](https://github.com/timeToCode-ali/portfolio-app/tree/video-2-final)
🌟 BONUS: FREE CONSULTATION
1. Complete the tutorial and add one of the suggestions I mention
2. Like & Comment to let me know you've finished. (and Subscribe if you haven't yet)
3. Get over Twitter and send me a link to your repo on Github. You can DM me or tweet me. (you can also send me an email, but I use more twitter. (Feel free to follow me on twitter to be up to date with my content)
4. I'll review all the steps are completed
5. We'll set up a call at a convenient time for both of us
Looking to Connect?:
💙 [https://twitter.com/time_tocode](https://twitter.com/time_tocode)
💌 [time2code.ali@gmail.com](mailto:time2code.ali@gmail.com)
⌨️ [https://github.com/timeToCode-ali](https://github.com/timeToCode-ali)
📃 [https://medium.com/@time2code.ali](https://medium.com/@time2code.ali)
🟩 [https://rumble.com/c/c-2168480](https://rumble.com/c/c-2168480)
*Videos you may Like to watch:*
🎥 Build a Portfolio with NEXT.js13 & TypeScript & TailwindCSS #1
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)
🎥 Build a Portfolio Contact Form in Next.js 13 & TS! #3
https://www.youtube.com/watch?v=bKOgw3FaAGQ
🎥 Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)
🎥  Build a Word Scramble Game with React JS
[https://www.youtube.com/watch?v=hJYG_jBURYE](https://www.youtube.com/watch?v=hJYG_jBURYE)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*[https://www.youtube.com/watch?v=0BDfyWzw5Hw](https://www.youtube.com/watch?v=0BDfyWzw5Hw)
🎥 *NEXT.js 13 Exploring the New Features*[https://www.youtube.com/watch?v=7Z69FzlBJwo](https://www.youtube.com/watch?v=7Z69FzlBJwo)
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*[https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ](https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ)
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
[https://www.youtube.com/watch?v=h13HHII40os](https://www.youtube.com/watch?v=h13HHII40os)
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)
🎥 *Difference between Software Engineer and Software Developer in 2023*[https://www.youtube.com/watch?v=0HQPnPzUQSo](https://www.youtube.com/watch?v=0HQPnPzUQSo)
76
views
Portfolio 2: How to Make a Contact Form in Next.js 13 & TS!
Exploring the New Fetching Routing API
Next.js 13 + TypeScript + TailwindCSS
Discover the powerful combination of TypeScript and Next.js, and learn how to harness their full potential in modern web development. With TypeScript expertise in high demand, it's time to embrace this versatile language. Explore the latest routing features in Next.js 13 to enhance your applications' flexibility and performance. Stay ahead of the curve and become a sought-after developer by mastering these essential tools. WE will create a Dynamic Contact Form in Next.js 13 & TypeScript.
💻 Source Code: [https://github.com/timeToCode-ali/portfolio-app/tree/video-1-initial](https://github.com/timeToCode-ali/portfolio-app/tree/video-1-final)
🌟 BONUS: FREE CONSULTATION
1. Complete the tutorial and add one of the suggestions I mention
2. Like & Comment to let me know you've finished. (and Subscribe if you haven't yet)
3. Get over Twitter and send me a link to your repo on Github. You can DM me or tweet me. (you can also send me an email, but I use more twitter. (Feel free to follow me on twitter to be up to date with my content)
4. I'll review all the steps are completed
5. We'll set up a call at a convenient time for both of us
Looking to Connect?:
💙 [https://twitter.com/time_tocode](https://twitter.com/time_tocode)
💌 [time2code.ali@gmail.com](mailto:time2code.ali@gmail.com)
⌨️ [https://github.com/timeToCode-ali](https://github.com/timeToCode-ali)
📃 [https://medium.com/@time2code.ali](https://medium.com/@time2code.ali)
🟩 [https://rumble.com/c/c-2168480](https://rumble.com/c/c-2168480)
*Videos you may Like to watch:*
🎥 Build a Portfolio with NEXT.js13 & TypeScript & TailwindCSS #1
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)
🎥 Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)
🎥  Build a Word Scramble Game with React JS
[https://www.youtube.com/watch?v=hJYG_jBURYE](https://www.youtube.com/watch?v=hJYG_jBURYE)
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*[https://www.youtube.com/watch?v=0BDfyWzw5Hw](https://www.youtube.com/watch?v=0BDfyWzw5Hw)
🎥 *NEXT.js 13 Exploring the New Features*[https://www.youtube.com/watch?v=7Z69FzlBJwo](https://www.youtube.com/watch?v=7Z69FzlBJwo)
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*[https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ](https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ)
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
[https://www.youtube.com/watch?v=h13HHII40os](https://www.youtube.com/watch?v=h13HHII40os)
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)
🎥 *Difference between Software Engineer and Software Developer in 2023*[https://www.youtube.com/watch?v=0HQPnPzUQSo](https://www.youtube.com/watch?v=0HQPnPzUQSo)
*Timestamp*
🔵 00:00 Build a Portfolio Website
🔵 03:24 Design & Build Overview
🔵 05:35 Building My Projects Page
🔵 10:36 Building Projects Card -
🔵 32:51 Building a Contact Form with Next.js
🔵 44:16 Build a Form with Next.js 13 - use client component
🔵 57:08 Submit a form with Next.js 13
🔵 01:19:40 APP API Route in Next.js 13 - New way of Fetching data
🔵 01:37:40 Final Words!
133
views
Build a Portfolio with NEXT.js13 & TypeScript & TailwindCSS
Step-by-Step Tutorial For Beginners!
Next.js + TypeScript + TailwindCSS
Discover the powerful combination of TypeScript and Next.js, and learn how to harness their full potential in modern web development. With TypeScript expertise in high demand, it's time to embrace this versatile language. Explore the latest routing features in Next.js 13 to enhance your applications' flexibility and performance. Stay ahead of the curve and become a sought-after developer by mastering these essential tools.
💻 Source Code: [https://github.com/timeToCode-ali/portfolio-app/tree/video-1-initial](https://github.com/timeToCode-ali/portfolio-app/tree/video-1-initial)
🌟 BONUS: FREE CONSULTATION
1. Complete the tutorial and add one of the suggestions I mention
2. Like & Comment to let me know you've finished. (and Subscribe if you haven't yet)
3. Get over Twitter and send me a link to your repo on Github. You can DM me or tweet me. (you can also send me an email, but I use more twitter. (Feel free to follow me on twitter to be up to date with my content)
4. I'll review all the steps are completed
5. We'll set up a call at a convenient time for both of us
Looking to Connect?:
💙 [https://twitter.com/time_tocode](https://twitter.com/time_tocode)
💌 [time2code.ali@gmail.com](mailto:time2code.ali@gmail.com)
⌨️ [https://github.com/timeToCode-ali](https://github.com/timeToCode-ali)
📃 [https://medium.com/@time2code.ali](https://medium.com/@time2code.ali)
🟩 [https://rumble.com/c/c-2168480](https://rumble.com/c/c-2168480)
*Videos you may Like to watch:*
🎥 Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)
🎥  Build a Word Scramble Game with React JS
[https://www.youtube.com/watch?v=hJYG_jBURYE](https://www.youtube.com/watch?v=hJYG_jBURYE)
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*[https://www.youtube.com/watch?v=0BDfyWzw5Hw](https://www.youtube.com/watch?v=0BDfyWzw5Hw)
🎥 *NEXT.js 13 Exploring the New Features*[https://www.youtube.com/watch?v=7Z69FzlBJwo](https://www.youtube.com/watch?v=7Z69FzlBJwo)
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*[https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ](https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ)
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
[https://www.youtube.com/watch?v=h13HHII40os](https://www.youtube.com/watch?v=h13HHII40os)
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)
🎥 *Difference between Software Engineer and Software Developer in 2023*[https://www.youtube.com/watch?v=0HQPnPzUQSo](https://www.youtube.com/watch?v=0HQPnPzUQSo)
*Timestamp*
🔵 00:00 Build a Portfolio Website
🔵 00:198 Next.js13 & TypeScript
🔵 01:32 Prerequisites
🔵 01:48 Purposes of this video
🔵 02:07 Intro - how to set up this project
🔵 02:56 Design & Build Overview
🔵 04:48 Bonus: FREE CONSULTATION
🔵 05.28 START CODING!
127
views
1
comment
Build a Next.js 13 APP with TypeScript
Step-by-Step Tutorial For Beginners!
In this video, we'll be continuing our journey by enhancing our Next.js 13 Resume application using TypeScript. Previously, we built a functional Next.js app using JavaScript, but now it's time to take it to the next level. We'll be converting our JavaScript code into TypeScript to harness its powerful type-checking, autocompletion, and maintainability features. By the end of this tutorial, you'll see how TypeScript seamlessly integrates with Next.js, making your development experience even more enjoyable and efficient. So, let's dive in and upgrade our app together, step by step, and unlock the full potential of TypeScript with Next.js!
🎥 Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
https://youtu.be/eOH5QXEgEos
💻 Source Code: https://github.com/timeToCode-ali/resume-app
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
*Videos you may Like to watch:*
🎥  Build a Word Scramble Game with React JS
https://www.youtube.com/watch?v=hJYG_jBURYE
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*
[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*
https://www.youtube.com/watch?v=0BDfyWzw5Hw
🎥 *NEXT.js 13 Exploring the New Features*
https://www.youtube.com/watch?v=7Z69FzlBJwo
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*
https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
https://www.youtube.com/watch?v=h13HHII40os
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
https://www.youtube.com/watch?v=42K4i58xqAI
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*
https://www.youtube.com/watch?v=EY21FvwURWs
🎥 *Difference between Software Engineer and Software Developer in 2023*
https://www.youtube.com/watch?v=0HQPnPzUQSo
*Timestamp*
🔵 00:00 Build a Professional Resume/CV Website
🔵 00:45 Prerequisites
🔵 01:12 Demo of the Project
🔵 01:18 Bonus: FREE CONSULTATION
🔵 02:01 Purposes of this video
🔵 02.23 Importance of having a CV website
tags:
build a website with nextjs 13, build a website with nextjs 13 and tailwind, build a portfolio website, build a cv website, build a resume website, build a professional website, build a professional cv website, build a professional portfolio website, build a website with next.js, nextjs, next 13, next.js13, tailwind, tailwindcss, tailwind.css, tailwind css, javascript, web developement, software engineer, coding, software engineering
178
views
1
comment
One Year on YouTube: A Software Engineer's Journey and Lessons Learned
One Year of Lessons to Boost Your Programming Progress
Have you ever felt like you're coding in the dark, with no one to guide you or offer support? As a YouTuber, I've experienced many of the same struggles and triumphs as someone who's been studying coding for a year. In this video, I'm going to share the lessons I've learned after one year on YouTube, and how they can apply to your journey as a coder.
My journey in this platform is really relatable to when you are learning to code and want become a software engineer, get a job and be successful.
So because of that I am going to share with you how this year has been for me.
Thank you @VanessaLau for inspiring me to open a youtube Channel!
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
*Videos you may Like to watch:*
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*
https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
https://www.youtube.com/watch?v=h13HHII40os
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
https://www.youtube.com/watch?v=42K4i58xqAI
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*
https://www.youtube.com/watch?v=EY21FvwURWs
🎥 *Difference between Software Engineer and Software Developer in 2023*
https://www.youtube.com/watch?v=0HQPnPzUQSo
🎥  Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
https://www.youtube.com/watch?v=eOH5QXEgEos
🎥  Build a Word Scramble Game with React JS
https://www.youtube.com/watch?v=hJYG_jBURYE
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*
https://www.youtube.com/watch?v=osMvyD-wHjY
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*
https://www.youtube.com/watch?v=0BDfyWzw5Hw
🎥 *NEXT.js 13 Exploring the New Features*
https://www.youtube.com/watch?v=7Z69FzlBJwo
*Timestamp*
🔵01:54 Reasons why I started a YouTube Channel
🔵07:35 My progress - First 6 months on YouTube
🔵12:06 My progress - Last 6 months on YouTube
🔵15:26 My Achievements after 1 year on YouTube
🔵16:47 Have I monetize my Channel?
🔵17:57 How I managed to be relatively constant while having a full time job.
🔵19:21 Lessons from MY experience
61
views
1
comment
Unlock Your Developer Potential - Go From Junior to Senior in No Time!
How to Succeed in Your Tech Career
As a software engineer, you already have a solid foundation of technical skills. But to truly excel in your career and stand out in the competitive tech industry, you also need to develop and nurture your soft skills.
In this video, we'll cover some essential soft skills that every software engineer should possess.. We'll explore why these skills are crucial for success in the tech world and provide practical tips and techniques to help you develop them.
Whether you're a seasoned software engineer or just starting out in your career, this video will provide valuable insights and guidance to help you advance and thrive in your role. So, join us as we dive into the world of soft skills for software engineers and discover how to take your tech career to the next level!
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
*Videos you may Like to watch:*
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*
https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
https://www.youtube.com/watch?v=h13HHII40os
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
https://www.youtube.com/watch?v=42K4i58xqAI
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*
https://www.youtube.com/watch?v=EY21FvwURWs
🎥 *Difference between Software Engineer and Software Developer in 2023*
https://www.youtube.com/watch?v=0HQPnPzUQSo
🎥  Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
https://www.youtube.com/watch?v=eOH5QXEgEos
🎥  Build a Word Scramble Game with React JS
https://www.youtube.com/watch?v=hJYG_jBURYE
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*
[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*
https://www.youtube.com/watch?v=0BDfyWzw5Hw
🎥 *NEXT.js 13 Exploring the New Features*
https://www.youtube.com/watch?v=7Z69FzlBJwo
*Timestamp*
🔵 00:00 Soft Skills for Software engineers
🔵 00:57 Communication
🔵 01:25 Leadership
🔵 02:21 Teamwork
🔵 03:20 Problem Solving
🔵 03.57 Speak up your mind
🔵 05.50 Detail-Oriented
🔵 06.10 Time Management
🔵 07.20 Flexibility
tags:
soft skills for software engineers, soft skills for developers, go from junior to senior, junior to senior developer, softskills, web development, software engineer, coding, software engineering, software engineer, coding, tech careers, professional growth, career advice for software engineers, software development tips, software engineer career, tips for software developers, software engineering career, software engineer advice, career advice for software developers, software engineering tips, softawre, enginer, software enginer
130
views
Building a Countdown Timer with REACT.js
Step-by-Step Tutorial For Beginners!
In this video tutorial, we will learn how to build a countdown timer using React.js. We will cover the basic concepts of React and walk through the steps to create a countdown component that can be easily integrated into any React project. Whether you're new to React or looking to expand your skills, this tutorial is perfect for anyone looking to add a countdown timer to their web application.
💻 Source Code: https://github.com/timeToCode-ali/react_playground
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
*Videos you may Like to watch:*
🎥  Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
https://www.youtube.com/watch?v=eOH5QXEgEos
🎥  Build a Word Scramble Game with React JS
https://www.youtube.com/watch?v=hJYG_jBURYE
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*
[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*
https://www.youtube.com/watch?v=0BDfyWzw5Hw
🎥 *NEXT.js 13 Exploring the New Features*
https://www.youtube.com/watch?v=7Z69FzlBJwo
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*
https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
https://www.youtube.com/watch?v=h13HHII40os
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
https://www.youtube.com/watch?v=42K4i58xqAI
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*
https://www.youtube.com/watch?v=EY21FvwURWs
🎥 *Difference between Software Engineer and Software Developer in 2023*
https://www.youtube.com/watch?v=0HQPnPzUQSo
*Timestamp*
🔵 00:00 Building a Countdown Timer with REACT.js
🔵 00:53 Clone the project
🔵 01:35 Demo of the Project
🔵 02:03 Creating a countdown component structure
🔵 05:40 Adding CSS
🔵 08.40 Adding the JS logic
🔵 27.00 Final Result
tags:
build a countdown timer with react.js, countdown timer, countdown timer with react, react, react.js 18, React.js,javascript, web developement, software engineer, coding, software engineering
84
views
How to Build a Word Scramble Game with React (Step by Step) (JAVASCRIPT)
For Beginners!
Build a dynamic and engaging Word Scrambling game with React. Step-by-step instructions on how to create a fun and challenging word game using the power of React. From design to deployment, you'll learn how to implement game logic, handle user input, and generate randomised word scrambles. Whether you're an experienced programmer or just starting out, this guide is the perfect way to build your skills and create a thrilling word game with React.
💻 Source Code: https://github.com/timeToCode-ali/react_playground/tree/main
Looking to Connect?:
💙 https://twitter.com/time_tocode
💌 time2code.ali@gmail.com
⌨️ https://github.com/timeToCode-ali
📃 https://medium.com/@time2code.ali
🟩 https://rumble.com/c/c-2168480
*Videos you may Like to watch:*
🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*
[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*
https://www.youtube.com/watch?v=0BDfyWzw5Hw
🎥 *NEXT.js 13 Exploring the New Features*
https://www.youtube.com/watch?v=7Z69FzlBJwo
🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*
https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ
🎥 The TRUTH about Lies and Coding - A software engineer's perspective
https://www.youtube.com/watch?v=h13HHII40os
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
https://www.youtube.com/watch?v=42K4i58xqAI
🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*
https://www.youtube.com/watch?v=EY21FvwURWs
🎥*Difference between Software Engineer and Software Developer in 2023*
https://www.youtube.com/watch?v=0HQPnPzUQSo
*Timestamp*
🔵 00:00 Build a Word Scramble Game with React
🔵 00:35 Demo of the Project
🔵 01.05 What is react
🔵 01:28 Why we use React in this project
🔵 01:59 Prerequisites
🔵 02:19 Cloning the Project - Github
🔵 05:27 Wireframes
🔵 06:40 Building the Structure
🔵 12:23 Adding Functions and logic
🔵 46:33 Spot the Bug!
🔵 49:01 Bonus: Using Reduce to solve the algorithm problem
🔵 51:21 Sum up!
tags:
React, Word Scrambling, game development, programming, React, Software Engineering, Tutorial, Word Scramble, React Development, Programming, React JS, Game Development, React Game Tutorial, React for Beginners, React Word Scramble, Building a Word Scramble Game with React, React Engineering, Web Development, JavaScript, Front-End Development, User Experience, Software Tutorials, ReactJS Tutorial, Word Scrambling Game, React Word Game, React Development Guide, React Game Development Guide, Building a Word Game with React, React Project, React App, React Web App, React Programming Tutorial, ReactJS Programming Tutorial, React Word Scramble Tutorial, React Word Game Tutorial, ReactJS Word Scramble, ReactJS Word Game, React Game Development Tutorial, Building a React Word Scramble Game, React Word Scrambler, ReactJS Word Scrambler, React for Software Engineers, ReactJS for Software Engineers, React Word Scramble Guide, ReactJS Word Scramble Guide, Word Scrambling with React, Word Scrambling with ReactJS, ReactJS Word Scramble Tutorial for Beginners, React Word Scramble Tutorial for Beginners, Software Development with React, Front-End Development with React, ReactJS Development, ReactJS Web Development, ReactJS Game Development, software engineering, software engineer tips
487
views
2
comments
Next.js 13: Improve Core Web Vitals of your App 🟢
*Fast loading. Boost Performance*
In this video, we'll show you how to use Next.js 13 to improve your Core Web Vitals on YouTube. Core Web Vitals are a set of metrics that measure the loading speed and user experience of a website. By optimising these metrics, you can improve your search engine rankings and increase viewer engagement on your website.
Last week I published a video on youtube where I talked about some updates in Next.js13, such as the new app directory, how the data fetching works in Next.js 13, and How to optimise your app by splitting your code and render it dynamically. So if you want to learn about these check this video:
[https://www.youtube.com/watch?v=7Z69FzlBJwo](https://www.youtube.com/watch?v=7Z69FzlBJwo)
In this video I show you how 3 new updates/features of next.js 13 can improve the performance.
Whether you're a beginner or an experienced developer, this video will give you the knowledge and skills you need to optimize your site for better performance and engagement. So, tune in and boost your App and performance with Next.js 13.
*Timestamps*
🔵 00:00 NImprove Core Web Vitals of your App with Next.js 13
🔵 00:06 Points to cover
🔵 01:21 What is Next.js 13
🔵 01:18 Core Web Vitals metrics
🔵 02:14 First Input Delay (FID)
🔵 02:39 Largest Contentful Paint (LCP)
🔵 02:55 Cumulative Layout Shift (CLS)
🔵 03:33 Next.js 13 New updates
🔵 04:13 Image Component in Next.js 13
🔵 06:18 Link ****Component **in** Next.js 13
🔵 08:23 New Font system in Next.js 13
🔵 09:40 How to master Next.js 13
*Videos you may Like to watch next*
🎥 NEXT.js 13 Exploring the New Features
[https://www.youtube.com/watch?v=7Z69FzlBJwo](https://www.youtube.com/watch?v=7Z69FzlBJwo)
🎥 Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)
[https://www.youtube.com/watch?v=0BDfyWzw5Hw&t=781s](https://www.youtube.com/watch?v=0BDfyWzw5Hw&t=781s)
🎥 Build a responsive card with CSS and Flex-box (& import your own fonts)
[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 6 Hacks for Software Engineers in 2023
[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)
*tags:*
Improve your Core Web Vitals with Next.js 13, image nextjs 13, link next.js 13, fonts in next.js 13, New Features in next.13, next in 2023, next.js,nextjs13,next.js 13, nest.js, next13,react framework, react.js, react,next js app, software engineering,software development tips,software engineer advice,software engineering tips,learn to build next.js app,learn coding for beginners,typescript,react,react js tutorial,code,software engineer,computer science,next js tutorial for beginners, Next.js app,
112
views
NEXT.js 13 Exploring the New Features
is Next.js 12 still relevant?
## Exploring the New Features of Next.js 13: A Dive into the Ultimate React Framework for Server-Rendered Apps
📣 I Apologise for the audio quality. I had a really silly mistake when filming. I tried to fix it as much as I could.
In this video, I will introduce and give you a dive into the new features of Next.js 13.
At the end of last year, Next.js released a new version with significant changes. This new version, Next.js 13, introduced a number of exciting new features.
This new release has raised so many questions about (I’ll answer all of this questions and more in the video)
❓What happened with all the knowledge we have about building apps in Next.js12
❓What is the point of learning the old way?
❓Or shall we only focus on learning Next.js 13?
A month ago I released a ≈ 5h tutorial about How to Build an App in Next.js. After so many requests, today I release the first video of the series Next.js 13.
**Timestamps**
🔵 00:00 New Features of Next.js 13
🔵 00:12 Explaining Next.js 13
🔵 01:30 The New App Directory in Next.js 13
🔵 03:09 Layout Component in Next.js 13
🔵 04:33 Template, Error & Loading Components in Next.js 13
🔵 05:18 **All components are server components in** Next.js 13
🔵 06:04 Data Fetching in Next.js 13
🔵 7:43 Code Splitting in Next.js 13
🔵 8:26 Implementing the Dynamic Module in Next.js 13
🔵 09:53 Other Improvements of Next.js 13 : Next CLI, TypeScript, React
🔵 10:26 Getting started with Next.js in 2023
🔵 11:05 Should we still learn Next.js 12 (as per Jan 2023)
🔵 11:50 How to master Next.js
**Videos you may Like to watch next**
🎥 ****Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)****
[https://www.youtube.com/watch?v=0BDfyWzw5Hw&t=781s](https://www.youtube.com/watch?v=0BDfyWzw5Hw&t=781s)
🎥 Build a responsive card with CSS and Flex-box (& import your own fonts)
[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)
🎥 6 Hacks for Software Engineers in 2023
[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)
**tags:**
New Features in next.13, next in 2023, next.js,nextjs13,next.js 13, nest.js, next13,react framework, react.js, react,next js app, software engineering,software development tips,software engineer advice,software engineering tips,learn to build next.js app,learn coding for beginners,typescript,react,react js tutorial,code,software engineer,computer science,next js tutorial for beginners,Server Side Rendering in Next.js, data fetching in next.js, javascript, Next.js app,
171
views
1
comment
I am terrified with OpenAI's ChatGPT
This tech will Disturb developers
In this video,I will look at what ChatGPT is, and how it performs, and I will talk about whether Developers are going to be replaced and the 5 BIG problems that this new technology will cause us.
🔵 00:29 Points to cover in this video
🔵 00:41 What is ChatGPT
🔵 02.00 ChatGPT stats
🔵 02:46 Testing ChatGPT
🔵 5:15 4. Will ChatGPT Replace Software Engineers
🔵 08:53 Consequences of using ChatGPT
🔵 09:01 First Consequence - People will lose their job with ChatGPT
🔵 10:26 Second Consequence - Developers will be less knowledgeable
🔵 11:46 Third Consequence - Will ChatGPT become the single source of truth?
🔵 12:25 Fourth Consequence - Will ChatGPT be free?
🔵 12:51 Fifth Consequence - Feeding ChatGPT to be better than us
🔵 13:12 Final Conclusion: What really is ChatGPT?
🔵 06:26 What to watch next
Videos you need to watch next:
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)
🎥 6 Hacks for Software Engineers in 2023
[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)
tags
chatgpt will replace developers, chapgpt overtaking the world, openai, open ai, open ai chatgpt, chatgpt, chat gpt, caht gpt, chat gtp, char gpt, engineering,software,developer,ai,computer science,artificial intelligence,software engineering,software development tips,software engineer advice,software engineering tips, Will ChatGPT be free, What really is ChatGPT, people will lose their job with ChatGPT
97
views
2
comments
4 Things I Wish I Knew As A Software Engineer
In this video, I share four things I wish I knew as a software engineer. From the importance of mastering the fundamentals to always value all the skills you are learning , these are lessons that I learned the hard way and want to pass on to other developers. Whether you're just starting out in your career or you've been working in tech for a while, these tips will help you succeed and thrive in your role as a software engineer. Be sure to watch the video to learn more and get my top advice for software engineers
🔵 00:00 Things I wish I knew as SE
🔵 00:34 1. Realistic tech expectations
🔵 01.14 2. You are always learning
🔵 02:34 3. Prioritise Problem Solving Skills
🔵 3:48 4. Prioritise understanding, not tools
🔵 05:18 Advice
🔵 06:26 What to watch next
Videos you may Like to watch:
🎥 The TRUTH about Lies and Coding - A software engineer's perspective https://www.youtube.com/watch?v=h13HHII40os
🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS) https://www.youtube.com/watch?v=42K4i58xqAI
🎥 Build a responsive card with CSS and Flex-box (& import your own fonts) https://www.youtube.com/watch?v=osMvyD-wHjY
🎥 6 Hacks for Software Engineers in 2023 https://www.youtube.com/watch?v=EY21FvwURWs
tags:
• software engineering
• software engineer tips
• career advice for software engineers
• software development tips
• software engineer career
• tips for software developers
• software engineering career
• software engineer advice
• career advice for software developers
software engineering tips
credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
@Video by Kelly: [https://www.pexels.com/video/people-wearing-sneakers-and-walking-in-slow-motion-2881960/](https://www.pexels.com/video/people-wearing-sneakers-and-walking-in-slow-motion-2881960/)
Video by Tima Miroshnichenko: [https://www.pexels.com/video/man-looking-at-a-screen-with-charts-7578640/](https://www.pexels.com/video/man-looking-at-a-screen-with-charts-7578640/)
Video by Nataliya Vaitkevich: [https://www.pexels.com/video/woman-drinking-a-beverage-while-works-7172716/](https://www.pexels.com/video/woman-drinking-a-beverage-while-works-7172716/)
Video by João Adão: [https://www.pexels.com/video/a-human-hand-busy-working-on-a-computer-laptop-2516159/](https://www.pexels.com/video/a-human-hand-busy-working-on-a-computer-laptop-2516159/)
61
views
Why people Struggle to learn to code
Learn to code is hard but it doesn’t need to be - Software engineer
7 reasons why:
- you may be struggling to learn to code
- you may find programming too difficult to learn
- or struggle to get motivated.
As a senior software engineer, I had experienced all of these struggles myself.
And over time not only did I learn to code faster but I also learnt to pick up new technology a lot faster.
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Learn to code is hard but it doesn’t need to be - Software engineer
Hello everybody, in today’s video I’ll show you 7 reasons why:
- you may be struggling to learn to code
- you may find programming too difficult to learn
- or struggle to get motivated.
As a senior software engineer I had experienced all of these struggles myself.
And over time not only I learn to code faster but I also learnt to pick up new technology a lot faster.
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:00 learning how to code
-1:08 7 Reasons why you may be struggling to code
- 1:12 Time
- 2:44 Lack of confidence
- 3:36 Compare yourself to other
- 4:20 Struggle to stay motivated
- 5:05 Too many resources
- 6:04 Too many technologies
- 7:00 Wrong Learning Strategy Plan
- 7:34 Final Reflexion
- 8:30 Thank you
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
tags:
struggling to learn to code,software engineering,software engineer,i'm bad at programming,women in tech,is programming difficult to learn,programming,struggle to stay motivated,learn programming,how to learn programming,how to learn to code,programming for beginners,self-taught programmer,self-taught software developer,computer science degree,i'm bad at coding,i suck at coding,faang,big tech,meta,facebook,amazon,square,growth mindset,learn to code,coding, computer science
41
views
How to Stop Lying About Your Coding Skills and Embrace Your Growth Journey
Overcoming the Imposter Syndrome.
In this video I will help you to understand and overcome the imposter syndrome.
If you feel like you are not as competent or qualified as others perceive them to be.
The video covers common causes when we feel like not being honest, how it can manifest in the world of coding, business and strategies for combating and overcoming it.
By the end of the video, you will know 5 tools to stop lying about your coding skills and embrace your true abilities and potential as software engineer.
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:00 Hacks to Stop Lying About Your Coding Skill
- 0:50 Video: 4 Reasons and The Consequences of Lying About Your Coding Skills Video
- 1:48 5 hacks to Stop Lying About Your Coding Skills
- 1:41 1. Experience
- 3:12 1. Experience - How to gain Experience
- 4:08 1. Experience - Hackathons
- 4:59 2. Track your performance
- 6:04 3. Be Confident
- 6:55 Video: Hack your mind to be Confident
- 7:20 4. Be Optimistic
- 8:32 5. Be Humble
- 10:25 Recap
- 11:40 Video: How to survive your first job as Software Engineer
Videos you may Like to watch:
The TRUTH about Lies and Coding - A software engineer's perspective
https://www.youtube.com/watch?v=h13HHII40os
The Right Mindset to becoming a GREAT software engineer (6 TIPS)
https://www.youtube.com/watch?v=42K4i58xqAI
Build a responsive card with CSS and Flex-box (& import your own fonts) https://www.youtube.com/watch?v=osMvyD-wHjY
6 Hacks for Software Engineers in 2023
https://www.youtube.com/watch?v=EY21FvwURWs
tags
How to Stop Lying About Your Coding Skills, Road to Coding Success, software engineering,
Coding skills, Imposter syndrome, software engineer,computer science,computer science degree,computer science degree,
how to learn programming,
self-taught software developer,
learn programming,how to learn programming,how to learn to code,programming for beginners
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
Sound effects: https://mixkit.co/free-sound-effects/
114
views
Build a responsive card with CSS and Flex-box (& import your own fonts)
Learn to work with Design files | Flex-box | CSS | Import fonts
Hello everyone!
In this video, we will build an equal height card feature, completely responsive, using only HTML and CSS3 😀
We will learn how to build features using Design Files as a reference. And I will also show you how you can use any fonts you want by converting the fonts to a format browser can read and how to define them in our styles file.
Prerequisites for this video:
You need a computer, an IDE like visual studio code and some basic knowledge of HTML and CSS. Check this 3 min video:
📽 https://www.youtube.com/watch?v=SH8rCQvm-cI
🎨 Figma Design: https://www.figma.com/team_invite/redeem/lX7AhTZpLuFaMAHHTURryG
💻 Source Code: https://github.com/timeToCode-ali/html_css_features/tree/main/equal-_height_cards
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:48 Prerequisites
- 3:35 Inspecting the Design File in Figma
- 10:02 Creating a new project
- 14:24 Creating the HTML
- 35:00 Importing Font-faces
- 48:05 Add Styles with CSS
- 59:02 CSS: Flex-box - Display Flex
- 1:39:02 RECAP: What we have done in this tutorial
- 1:43:48 Demo - Final Result
- 1:46:08 Last words & Thank you for watching
tags:
build responsive equal cards, build responsive cards, reponsive css feature, learn css, css3, html and css, build a responsive site with css and html, flex-box, css, software engineering, how to work with design files, how to work with figma designs, software engineer, computer science, computer science degree, computer science degree, women in tech, learn programming, how to learn programming, how to learn to code, programming for beginners, self-taught programmer, self-taught software developer, computer science degree, self-taught programmer, learn to code, getting your first programming job, software development
cc: videos credits
Sound effects: https://mixkit.co/free-sound-effects/
99
views
1
comment
The Right Mindset to becoming a GREAT software engineer (6 TIPS)
5 TIPS 🔥 How to change your mindset to be confident?
How to hack your mind to be a successful Software Engineer!
I will help you understand what's holding you back. And how you can reprogram your mind to have control over yourself. So you'll feel the confidence to take action and believe you have the competence to work through your challenges.
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:00 Intro
- 1:15 Acceptation
- 1:52 Self-belief
- 3:07 Self-awareness
- 6:28 FOCUS ON THE PROCESS
- 7:34 Feel comfortable being wrong.
- 8:32 Personal Experiences.: LOSE AND LET GO
- 10:09 What to watch next
Videos you may Like to watch:
What Software Engineers ACTUALLY Do in 2022
Difference between Software Engineer and Software Developer in 2022
How to survive your first job as a Software Engineer in 2022
How to Become a Web Developer (3 main Languages)
tags
How to change your mindset as software engineer, right mindset as software engineer, become a software engineer,
software engineering,software engineer,computer science,computer science degree,computer science degree,women in tech,learn programming,how to learn programming,how to learn to code,programming for beginners,self-taught programmer,self-taught software developer,computer science degree,self-taught
programmer,faang,big tech,meta,facebook,amazon,square,learn to code,getting your first programming job,software development
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
Sound effects: https://mixkit.co/free-sound-effects/
46
views
Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)
Learn how to build a full-stack App in Next.js from scratch. We'll also learn how to deploy the App using Vercel and to sync up GitHub with Vercel so we deploy the app automatically.
Next is the react Framework for production. It makes building Apps, small or large, a lot easier, Because It has many features out of the box that you can use that will save loads of time.
📝 DATA BASE: https://github.com/timeToCode-ali/nextjs-tutorial/blob/main/data/data.json
💻 Source Code: https://github.com/timeToCode-ali/nextjs-tutorial
- 0:00 Intro: Showcase App
- 1:47 Summary of the content of the video
- 2:20 1. Prerequisites for this video.
- 2:58 2. What is Next.js
- 4:18 3. Main Feature: Server-Side Rendering
- 8:43 4. Create a Next.js Project: install & Set up
- 17:36 5. Analyse the Final App we are going to build
- 20:10 6. Next.js Files Structure
- 23:33 7. Next.js Pages & Build the pages
- 41:30 8. Data Fetching
- 2:01:55 9. Build the Components - UI (user Interface)
- 2:23:43 10. Add CSS - Styles
- 3:21:07 11. API Routing in Next.js
- 4:28:40 12. Deploy the APP in Vercel
- 4:42:46 13. Suggestions to improve the App
- 4:46:40 Last words
Attributions/credits
Server icons created by srip - Flaticon - https://www.flaticon.com/free-icons/server
Js icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/js
Html icons created by catkuro - Flaticon - https://www.flaticon.com/free-icons/html
Load icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/load
Sound effects: https://mixkit.co/free-sound-effects/
Sound music: https://mixkit.co/free-stock-music/ambient/
Tags:
Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)
HOW TO BUILD A FULL STACK NEXT.JS APP FROM SCRATCH
Do You Want to Build a Full Stack Next.js App? Here's How!
What is next.js,next js,next.js,nextjs,react,react next js,react next.js,nextjs13,next.js 13,next 13,what is server side,server side rendering,ssr,software engineering,software engineer,computer science,computer science degree,software,technology,computerscience,web development,react framework,javascript library,learn to code,next js tutorial,next js tutorial for beginners,coding,@timetocode_with_ali,Main NextJS feature,Server Side Rendering in Next.js
530
views
What is NEXT.js and Server Side Rendering in next
The React Framework for Production.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
React it's a JavaScript library that help us to build complex user interfaces a lot easier than it would be with just JavaScript. And Next.js is a Framework on top of React.
So the difference between a library and a Framework is that a Framework is bigger than a library, it has more features and multiple built in libraries.
So Next.js extends React capabilities, by giving us a SDK
Timestamp:
- 0:00 What is NEXT.JS
- 1:22 SSR - Main NextJS feature
- 1:33 SSR - React 18 & CSR
- 1:54 What are the differences between CSR vs SSR
- 2:00 CSR - Client Side Rendering
- 3:24 SSR - Server Side Rendering in Next.js
- 4:19 SSR - When to use SSR over CSR
- 5:05 A Demo of the website we will build
- 5:31 A sum up: What is NEXT.JS
Tags:
What is next.js,next js,next.js,nextjs,react,react next js,react next.js,nextjs13,next.js 13,next 13,what is server side,server side rendering,ssr,software engineering,software engineer,computer science,computer science degree,software,technology,computerscience,web development,react framework,javascript library,learn to code,next js tutorial,next js tutorial for beginners,coding,@timetocode_with_ali,Main NextJS feature,Server Side Rendering in Next.js
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
Sound effects: https://mixkit.co/free-sound-effects/
Sound music: https://mixkit.co/free-stock-music/ambient/
a href="https://www.flaticon.com/free-icons/server" title="server icons" Server icons created by srip - Flaticon
a href="https://www.flaticon.com/free-icons/js" title="js icons" Js icons created by Freepik - Flaticon
a href="https://www.flaticon.com/free-icons/html" title="html icons" Html icons created by catkuro - Flaticon
a href="https://www.flaticon.com/free-icons/load" title="load icons" Load icons created by Freepik - Flaticon
412
views
1
comment
6 Reasons Why I LOVE being a Software Engineer
Become a better decision maker
Videos you may Like to watch:
What Software Engineers ACTUALLY Do in 2022
https://www.youtube.com/watch?v=T4X_VwRL0wQ&
Difference between Software Engineer and Software Developer in 2022
https://www.youtube.com/watch?v=0HQPnPzUQSo
How to survive your first job as a Software Engineer in 2022
https://www.youtube.com/watch?v=EY21FvwURWs
How to Become a Web Developer (3 main Languages)
https://www.youtube.com/watch?v=SH8rCQvm-cI
Timestamp:
- 0:00 6 Reasons Why I LOVE being a Software Engineer
- 0:04 1- Never get bored as Software Engineer
- 0:19 2- Constantly Learning as Software Engineer
- 1:06 3- Solve Problems as Software Engineer
- 1:23 4- Better decision-maker as Software Engineer
- 1:51 5- Power of creation as Software Engineer
- 2:03 6- Flexibility as Software Engineer
Tags
6 reasons why I love being a software engineer,computer science,software developer,software engineer,software engineering,coding,software development,code,software engineer day in life,day in the life of a software engineer,software development advice,why you should become a software engineer,why be a software engineer,why you should become a reasons to become a software engineer,software,technology,computerscience, timetocode_Ali
software engineering,software engineer,computer science,computer science degree
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
Sound effects: https://mixkit.co/free-sound-effects/
Sound music: https://mixkit.co/free-stock-music/ambient/
112
views
How to Become a Web Developer (3 main Languages)
What you need to Learn FIRST - Web Developer, Full-Stack Dev
Software Engineer/web Developer, in particular, is one of the most demanded jobs across the world and you don't need to study Computer science to become a developer anymore.
The demand for software engineers will likely grow by 20-25 % in the coming years.
So if you are thinking about pursuing a new career path! Watch this video and learn everything about Software Engineers.
In this video, I talked about THE 3 Languages you need to learn first.
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:00 First things you need to Learn to Become a web developer / Short Roadmap
- 0:33 What is HTML
- 0:40 What is CSS
- 0:58 What is JavaScript
- 1:25 Analogy of HTML, CSS, JS
- 2:57 What to learn next? React, Next, TypeScript, Node, GraphQL, etc
- 3:05 Thank you for watching & Subscribe
Tags
3 main languages to become web developer, html, programming, how to become web developer, software engineering, software engineer, software developer, web development, how to become software engineer, how to become software developer, html css and javascript, what to learn first in programming, javascript, learn to code, learn to program, computer science, coding, web developer, coding analogy, learn html, learn java programming for beginners, learn javascript, women i tech, software engineer vs software developer
cc: videos credits
Sound effects: https://mixkit.co/free-sound-effects/
Sound music: https://mixkit.co/free-stock-music/ambient/
67
views
1
comment
Difference between Software Engineer and Software Developer in 2022
Same thing? 🤔 Salary? 💰 Web Developer, Full-Stack Dev
What's the difference between a Software Engineer and a Software Developer.
Software Engineer is one of the most demanded jobs across the world and you don't need to study Computer science to become a developer anymore.
The demand for software engineers will likely grow by 20-25 % in the coming years.
So if you are thinking about pursuing a new career path! Watch this video and learn everything about Software Engineers.
Roles: Web Developer, Front End Engineer, Backend Engineer, Data Engineer, Mobile Engineer: iOS Engineer/ developer
High salaries 💰, Career opportunities & fantastic perks
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:00 Software Engineer vs Software Developer
- 0:59 What is Software Engineer
- 1:41 What is Software Developer
- 2:35 Main Roles: Engineers & Developers
- 2:47 Roles within Software Engineers
- 3:05 Roles within Software Developer
- 3:53 What is the difference between Software Engineer and Software Developer
- 4:06 Software Engineer vs Software Developer: Job Advert
- 5:33 Software Engineer vs Software Developer: Interview Process
- 6:33 Software Engineer vs Software Developer: Salary
- 7:25 Software Engineer vs Software Developer: My Conclusion
- 9:25 Last words & Thank you for watching
Tags
software engineer vs software developer,the difference between software engineer and software developer,difference between software developer and programmer,what is the difference between software developer and web developer,software engineer vs web developer,software engineer vs full stack developer,software developer vs software engineer,are software engineers and software developers the same,difference between programmer and software engineer,developer vs engineer
software engineering,software engineer,computer science,computer science degree
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
Sound effects: https://mixkit.co/free-sound-effects/
Sound music: https://mixkit.co/free-stock-music/ambient/
250
views
What Software Engineers ACTUALLY Do in 2022
High salaries 💰, Career opportunities & fantastic perks
Software Engineer is one of the most demanded jobs across the world and you don't need to study Computer science to become a developer anymore.
In today's video, I'll tell you What being a Software Engineer actually means.
And the different Roles you can find within this vast Job title?
The demand for software engineers will likely grow by 20-25 % in the coming years.
So if you are thinking about pursuing a new career path! Watch this video and learn everything about Software Engineers.
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:00 What is Software Engineer: Intro
- 0:44 What is Software Engineer
- 1:38 What is Software & What is not Software | Hardware vs Software
- 3:48 Principles engineering rules
- 4:18 Main Phases Intro - Software Development
- 4:43 Design Phases - Software Development
- 5:51 Development Phases - Software Development
- 6:29 Testing Phases - Software Development
- 7:23 Evaluation Phases - Software Development
- 7:40 Maintenance Phases - Software Development
- 7:59 Roles within Software Engineering
- 8:32 Front End vs Back End
- 9:27 End & Thank you
tags
software engineering,software engineer,computer science,computer science degree,computer science degree,women in tech,learn programming,how to learn programming,how to learn to code,programming for beginners,self-taught programmer,self-taught software developer,computer science degree,self-taught programmer,faang,big tech,meta,facebook,amazon,square,learn to code,getting your first programming job,software development
cc: videos credits
Thank you Pexel, for letting me use your amazing videos
https://www.pexels.com/
a href="https://www.clipartmax.com/middle/m2i8d3H7b1b1A0d3_college-education-graduation-cap-hat-university-graduate-pictogram/" target="_blank"College,
Sound effects: https://mixkit.co/free-sound-effects/
Thumbnail: a href="https://www.freepik.com/free-vector/digital-coding-background-with-numbers-zero-one_12686644.htm#page=2&query=software%20development&position=24&from_view=search&track=sph"Image by starline on Freepik
70
views