Weekly Code Quickies (Norbert B.M.)
Explore every episode of Weekly Code Quickies
| Pub. Date | Title | Duration | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 05 Feb 2023 | ChatGPT subscription, CSS has, is , not and Activision Blizzard Microsoft - WCQ27 2023 | 00:11:47 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Join the ChatGPT revolution with the latest ChatGPT Subscription! This powerful language model is trained by OpenAI, making it easier than ever to automate and streamline your work. Don't miss out on this opportunity to enhance your workflow - subscribe today! CSS pseudo-class rise in popularity: has(), is(), not() gaining more and more Global browser support. Plus, learn about the recent collaboration with Activision Blizzard and Microsoft for WCQ27 2023. Watch now! YouTube Video : https://youtu.be/jGS27WehIjs Show notes:
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 04 Sep 2022 | What is ASTRO JS & How To Run it | 00:03:23 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Learn what the Astra Framework is and how to run Astro and create your first Astro blog website. # What is Astro and How to use it Your assignment, build a Blog website, ok , let me do a `npx create-react-app my-blog` and do a total overkill of your assignment. Or just use Astro, with is similar to a static site generator and make you life much easear. ## What is Astro? Astro is an all-in-one web framework for building fast, content-focused websites. For example Blogs, Landing pages ,Portfolio, Showcase, etc... ## Key Features: Some of the Key Features of the Astro framework are : - **Component Islands**: A new web architecture for building faster websites, that considers your website as the ocean and the components as islands. - **Server-first API design**: opposite to next.js, expensive hydration is removed of your users’ devices increasing site speed. - **Zero JS, by default**: No JavaScript runtime overhead to slow you down. JavaScript is loaded only when required. - **Edge-ready**: can run on global edge runtime like Deno or Cloudflare. - **Customizable**: Tailwind, MDX, and 100+ other integrations to choose from. - **UI-agnostic**: Supports React, Preact, Svelte, Vue, Solid, Lit and more as integrable components. There main selling point is that you ship les JavaScript! 🎱Source Code for this Video: https://norbertbm.com/ 👇 Website & Courses: 👨🏫 : https://norbertbm.com/web-development/web-dev-courses/ Podcast: https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 22 Nov 2021 | Web 3 / Metaverse, New Framework Hydrogen for dynamic E-commerce - WCQ11 | 00:20:21 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode of Weekly code quickies I will analyze Gary Veynerchuck AKA GaryVee interview withMark Zuckerberg the CEO of Meta about his future plans for the Metaverse and the Web 3.0 Here are the topics todays episode - Web3 / Metaverse - The Metaverse ETF - Hydrogen Framework --------------------------------------------------------------------------------------------------------------------- Watch on YouTube: https://youtu.be/fmMU6ICqVwY Listen to the podcast on: Apple Podcasts: https://podcasts.apple.com/de/podcast/weekly-code-quickies-with-norbert-b-m/id1455776215 Spotify: https://open.spotify.com/show/1bpbmoaP44RGq9rDqaat4R?si=76134374af6d495d Stitcher: https://listen.stitcher.com/yvap/?af_dp=stitcher://show/380154&af_web_dp=https://www.stitcher.com/show/380154 Follow the Blog: https://norbertbm.com/garyvee-and-mark-zuckerberg-on-web3-metaverse-new-framework-hydrogen-for-dynamic-e-commerce-wcq11/ --------------------------------------------------------------------------------------------------------------------- Show notes: 00:00 - Introduction and topics 00:49 - Mark Zuckerberg about Web3 / Metaverse 01:55 - Is the Metavers similar to the early days of Facebook 03:14 - Why did Mark Zuckerberg acquire Oculus so early on? 05:07 - Are contact lenses the future of augmented reality ? 07:51 - Will the Metaverse core focus be the attention grab 10:23 - What is Mark Zuckerberg stand on NFTs 11:00 - What is the real problem with the Metaverse ? 12:34 - How to invest in the Metaverse ETF 13:10 - What is a ETF? 17:58 - What is Hydrogen Framework 18:30 - Why build a custom storefront? #metaverse #nft #WCQ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 01 Oct 2021 | How Old are programing [ coding ] languages | 00:10:50 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode we are going to go through some of the most popular coding / programing languages like C, C++, C#, Java, JavaScript, HTML, CSS Pythone, Rupy, Rust, and more. And define what they stand for, when they ware released and how old they are. Check out the full episode on youtube: https://youtu.be/UY0FR6_Xw_k 💖 Support The Channel by becoming a patreon! https://www.patreon.com/user?u=49022497 ------------------------------------------------------------------------------------------------- Full blog post : https://wp.me/pakj3t-14W 👨🏫 Check out my Website for more Tutorials and Udemy Course👨🏫 : https://volere.life/web-development/web-dev-courses/ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 03 Jan 2022 | Blockchain in a nutshell WCQ17 | 00:11:18 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode we will explain what blockchain is, how it works, what proof of work in a blockchain is and if Blockchain is secure. Watch it on youtube: https://youtu.be/Pby0lta2cN0 Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 05 Mar 2023 | Top 10 skills web developers will need in 2023 - WCQ30 | 00:09:40 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this video, we'll be exploring the top 10 skills that web developers will need to stay ahead of the game in 2023. As technology continues to evolve at an unprecedented pace, it's essential for web developers to remain up-to-date with the latest trends and technologies to build robust, scalable, and user-friendly web applications. We'll be covering a range of topics, including front-end and back-end development, cloud computing, artificial intelligence, and more. Whether you're a seasoned developer or just getting started, this video is sure to provide valuable insights and practical tips to help you succeed in the fast-paced world of web development. So if you're ready to take your web development skills to the next level and stay ahead of the curve, be sure to tune in to our Top 10 Skills Web Developers Will Need in 2023 video! Time Stemps : 00:40 - Proficiency in JavaScript 01:14 - Responsive Design 02:17 - Cybersecurity 03:01 - UI/UX Design 04:00 - Cloud Computing 04:41 - Version Control 05:30 - AI and Machine Learning 06:31 - Server-Side Programming 07:14 - Agile Methodology 08:16 - Communication Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 28 Nov 2022 | What is the Difference between Beginner vs Intermediate vs Advanced programmer | 00:08:32 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this video, we're going to discuss what it takes to become a professional programmer. We'll cover the basics of what it takes to become a professional programmer, as well as some of the benefits that come with this career. If you're interested in becoming a professional programmer, then this video is for you! We'll discuss what it takes to become a professional programmer, cover the basics mistakes and give you some tips on how to avoid them. Whether you're a beginner or a professional programmer, this video is a great way to learn more about this career! 🎱Blog Post for this Video:https://norbertbm.com/ ----------------------------------------------------------------------------- 👇 Website & Courses: 👨🏫 :https://norbertbm.com/web-development/web-dev-courses/Podcast:https://anchor.fm/menyhart-b-norbert9 ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro 01:00 - Beginner VS Intermediate Programmer 03:00 - Intermediate VS Advanced Programmer 07:40 - About My upcoming React Course ----------------------------------------------------------------------------------------------------------------------------------------------------------------- #programmingforbeginners #howtolearntocode #norbertbmwebdevelopment Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 12 Feb 2023 | Microsoft ChatGPT vs Google AI Bard and GitHub layoffs 10% | 00:04:09 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Compare Microsoft's ChatGPT with Google's AI Bard and stay updated on the latest tech news with our coverage of the 10% layoffs at GitHub. Discover the strengths and weaknesses of each AI technology and how they stack up against each other. Stay informed and make informed decisions with our in-depth analysis. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 06 Aug 2022 | How to write good code | 00:05:01 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this web development tips and tricks I will share my thought on how to write better code. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 04 Mar 2024 | 10 Visual Studio Code Update you need February 2024 | 00:15:52 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this video we are going to go though the laster update or the visual studio code February 2024 code editor.
YouTube: https://youtu.be/rjz6J3jdZHU
#vscodeupdates #codeeditor Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 10 Feb 2024 | 10 GitHub Best Practices for repository management | 00:09:59 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Learn the top 10 GitHub best practices for effective repository management! Whether you're a beginner or an experienced developer, implementing these practices can streamline your workflow, enhance collaboration, and optimize your projects on GitHub. From organizing your repositories to leveraging branching strategies, this video covers essential tips to help you maintain clean, efficient, and well-managed repositories on GitHub. Watch now and take your GitHub skills to the next level! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 23 Apr 2023 | Is CSS making Sass obsolete | WCQ 34 | 00:05:22 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode, we explore the question of whether CSS is making Sass obsolete in front-end web development. We examine the advantages and disadvantages of both CSS and Sass and provide insights on which option may be best for your project. 👇 My Website / Courses / Podcast / Tutorials / Projects / Blog: 👨🏫 : Complete Article: https://norbertbm.com/is-css-making-sass-obsolete-a-look-at-the-pros-and-cons/ ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 19 Feb 2024 | CSS Frameworks VS Custom CSS - WCQ 37 | 00:12:47 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Explore the intricate differences between CSS frameworks and custom CSS in web development. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 14 Apr 2024 | Devin AI vs Web Developer vs Coding | 00:09:14 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Devin AI is a new AI created by the company Cognition, and they claim they have created the first AI software engineer. witch can basically write code for you. Watch on YouTube:
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 26 Oct 2021 | New Macbook Pro M1 Max and VS Code WEB APP | 00:13:57 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
New apple Macbook pro m1 max release and Microsoft visual studio code web application in the browser ------------------------------------------------------------------------------------------------- Check out the video on my youtube : https://youtu.be/kQ5ionTNzbo Timestamps: 00:00 - Intro & overview 00:18 - New VS Code Web app in the browser 01:08 - Limitations of VS Code web app 02:14 - Advantages of VS Code web app 03:23 - First look at vs code web app 08:37 - New Macbook pro 16'' M1 Max Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 15 Nov 2021 | The future of coding, NodeJS in the browser and WebContainers - WCQ November 15, 2021 | 00:07:53 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode we will talk about the potential future of web development, witch could take place in the browser instead of traditional IDE app. --------------------------------------------------------------------------------------------------------------------- Watch it on YouTube: https://youtu.be/PPJQSZJyvCg --------------------------------------------------------------------------------------------------------------------- Show notes: 00:00 - Introduction 01:31 - Topics 01:51 - What are web containers 02:56 - Node.js in the browser 03:53 - What is a IDE 04:23 - What is StackBlitz 05:05 - Properties of StackBlitz 06:10 - FRONT-END FRAMEWORKS & LIBRARIES in StackBlitz 06:47 - BACK-END in StackBlitz #webcontainers #stackblitz #WCQ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 27 Dec 2021 | Ethereum In A Nutshell | WCQ16 | 00:10:09 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode we are going to explain Ethereum
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 11 Mar 2024 | 3 NEW Visual Studio Code UPDATES 2024 (vs code v1.87) WCQ-40 | 00:07:26 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Welcome to the February 2024 release of Visual Studio Code. There are 3 important updates for web developers in this version that we hope you'll like, include: Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 10 Feb 2022 | Top 10 Skills You Must Know 2022 Before You Learn ReactJS | 00:09:28 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Here is what you should know in JavaScript before starting to learn the React JS Framework. 💖 Support The Channel by becoming a part of this community! 🎱 Outlet for this Video and PDF: https://norbertbm.com/top-10-skills-you-must-know-2022-before-you-learn-reactjs/----------------------------------------------------------------------------- 👨🏫 Check out my Website for more tutorials and Udemy Course👨🏫 : https://volere.life/web-development/web-dev-courses/ ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro & Project overview 00:47 - What are javascript template literals , template strings 01:36 - JavaScript Shorthand property names 02:08 - JavaScript Arrow functions 02:53 - What is JavaScript Destructuring 03:23 - JavaScript Parameter defaults 03:54 - JavaScript Rest/Spread 04:50 - JavaScript ESModules 06:19 - JavaScript Ternaries 06:51 - JavaScript Array Methods 07:28 - JavaScript Promises and async/await Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 15 Apr 2024 | 3 Best Practice Tips for Backend Development | WCQ-42 | 00:09:11 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode of the podcast we will discuss some best practices for backend development. These tips will help you write better code and build more efficient applications. Watch on YouTube:
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 26 Feb 2023 | GitHub Copilot, Windows Mac BING, Junoior DEVs and Students | 00:06:33 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GitHub Copilot the good the bad, and the ugly, Windows on Mac BING on the down fall, Top countrie in europe for Junoior devs and students Welcome to WCQ, in this episode:
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 11 Apr 2022 | React version 18 | What is new in React v18 | How to Install Update and run React JS v18 | 00:10:04 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this React tutorial you are going to learn how to install update and run react version 18 💖 Support The Channel by becoming a part of this community! 🎱 Code for this Video: https://norbertbm.com/ ----------------------------------------------------------------------------- 👇 Website & Courses: 👨🏫 : https://norbertbm.com/web-development/web-dev-courses/ ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro 00:40 - What is new in React 18 01:22 - React create root method 02:10 - React 18 new Hooks 02:42 - React useId hook 03:03 - React startStransition and useTransition Hooks 03:34 - React useDeferredValue hook 4:04 - React useSyncExternalStore 04:35 - React useInsertionEffect 05:06 - How to Update React from v17 to v18 05:40 - How to instal react v18 06:07 - How to implement react createRoot method 07:55 - How to instal and Run React V18 #ReactV18 #ReactNews #norbertbmwebdevelopment Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 18 Mar 2024 | New React V19 Update | ReactJS Compiler | WCQ-41 | 00:04:32 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
First look at React V19 and the react compiler that will bring one of the biggest changes to the React ecosystem and the way we will write react code in the future. YouTube:
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 28 Sep 2021 | Windows 11 for coding and programing | 00:05:06 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In todays Weekly Code Quickies we are going to take a first look at windows 11 and if it is any good for coding and programing Timestamps: 0:00 - Intro 0:37 - Will windows 11 increase coding performance 1:30 - What are window 11 Improvements 1:35 - What is windows 11 snap layouts 2:04 - Windows 11 multi monitor setup 3:38 - Windows 11 with integrated Microsoft Teams for communication 4:24 - Conclusions about Windows 11 💖 Support The Channel by becoming a patreon! https://www.patreon.com/user?u=49022497 👨🏫 Check out my Website for more tutorials and Udemy Course👨🏫 : https://volere.life/web-development/web-dev-courses/ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 26 Feb 2024 | 4 New JavaScript Array Methods for 2024 - WCQ 38 | 00:06:43 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Explore the latest JavaScript array methods for 2024! In this video, we dive into 4 powerful array methods introduced in the current year. Stay updated with WCQ 38 as we unravel these cutting-edge techniques to enhance your JavaScript programming skills.
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 29 Nov 2021 | New JavaScript Framework Remix, React Router 6 - WCQ12 | 00:08:28 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode of Weekly code quickies we will take a look at Remix the New, Free and Open source JavaScript Framework, and React Router V6 --------------------------------------------------------------------------------------------------------------------- Watch it on YouTube: --------------------------------------------------------------------------------------------------------------------- Show notes: 00:00 - Introduction 01:04 - What is remix? 01:40 - Remix is Server-side rendered 02:10 - Remix is not part of the JAM Stack 02:40 - What are the Benefits of Remix 03:10 - What are the use case of Remix 03:40 - How to get Started with Remix 04:10 - React Router V6 What is React Router ? 05:16 - How to set up React Router 6 06:12 - What is New to React Router 6 ? #RemixFramework #ReactRouter6 #WCQ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 13 Dec 2021 | Top Benefits of micro Frontend Web Development in 2022 - WCQ14 | 00:10:02 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In todays episode we will take a look at the benefits of Micro Frontend! Throughout this episode I will cover : What are Micro Frontends? How Micro Frontend Works? What are the Best Practices of Micro-Frontend? How to Adopt Micro Frontend Architecture? Why Micro Frontend Matters? What are the Benefits of Micro Frontend Architecture? Concluding Micro Frontend Architecture Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 19 Dec 2021 | Bitcoin in a Nutshell | WCQ15 | 00:09:03 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In todays episode you will learn about Bitcoin, what bitcoin is, who created it, how bitcoin works , haw to own bitcoin, how to mine bitcoin and where to store bitcoin. Also as a conclusion at the end, the ups and down or the pros and cons of Bitcoin. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 18 Oct 2021 | Vs Code v1.61 September 2021 updated & Font Awesome V6 Beta - WCQ Ep6 | 00:06:55 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In todays episode we are going to take a look at the new Visual Studio Code Aka VS Code Version 1.61 September 2021 updates and at Font Awesome V6 BETA. Watch the full episode on YouTube: https://youtu.be/HGhLHGDFeck Timestamps: 00:00 - Introduction 00:38 - What is Visual studio code? 00:49 - VS Code September 2021 version 1.61 updates overview 01:37 - Vs Code Split editors within the same group 01:59 - VS Code-Locked editor groups 02:06 - VS Code-Better display of deleted and readonly files 02:23 - VS Code Bracket pair guides 02:43 - VS Code-Fixed terminal dimensions 03:00 - VS Code - Jupyter Notebook improvements 03:30 - VS Code-Platform-specific extensions 03:47 - VS Code - Virtual Workspaces extension guide 04:11 - VS Code - Advanced container configuration 04:36 - Font Awesome V6 Beta 04:44 - What is Font Awesome Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 31 Oct 2021 | Facebook is going Meta, get ready User One! | 00:04:18 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The company that owns Instagram, WhatsApp and Facebook called facebook, is as of Oct 28 known as Meta. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 28 Sep 2021 | 8 Useful JavaScript Array Methods | 00:05:05 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this Weekly Code Quickies we will learn about the 8 most Useful JavaScript Array Methods: JavaScript Filter () method JavaScript Map () method JavaScript Find() method JavaScript forEach () method JavaScript some() method JavaScript every () method JavaScript reduce() method JavaScript includes() method 👨🏫 Check out my Website for more tutorials and 👨🏫 Udemy Course : https://volere.life/web-development/web-dev-courses/ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 10 Apr 2023 | Top 10 ways to EARN MONEY with OpenAI's ChatGPT | Analysis | WCQ32 | 00:12:37 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 04 Feb 2024 | 10 Productivity Tips for Web Developers 2024 | 00:07:58 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Welcome to our latest video where we're diving deep into the world of web development productivity! In this fast-paced industry, staying efficient is key to success. Whether you're a seasoned developer or just starting out, these 10 productivity tips will help you streamline your workflow, maximize your output, and stay ahead in 2024 and beyond. 🕐 Timestamps: Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 22 Apr 2024 | Top 10 CSS FEATURES YOU NEED TO KNOW - WCQ #43 | 00:08:15 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode of the podcast, we discussed some of the new CSS features that you need to know about. These features can help you create more powerful and flexible designs for your web pages. By using container queries, new viewport units, CSS nesting, individual transform properties, and other new features, you can take your CSS skills to the next level. So, start experimenting with these new features and see how they can enhance your web designs. Course and Projects: https://volerelife.wordpress.com/web-development/web-dev-courses/ YouTube Video:
#webdevelopment #cssnews Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 04 Oct 2021 | Top 10 tips for beginner web developers | 00:11:04 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This one is for all you beginner web developers. In this episode I will give you my personal top 10 tips for you if you wish to start your career as a web developer. Watch the full episode on YouTube: https://youtu.be/o3IFf-9DQL8 Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 28 Sep 2021 | 5 Tips for improving your web development skills | 00:05:09 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this Weekly Code Quickies I will give you 5 Tips for improving your web development skills. 💖 Support The Channel by becoming a patreon! https://www.patreon.com/user?u=49022497 🎱 Resources for this Video: https://volere.life/5-tips-for-improving-your-web-development-skills/ ----------------------------------------------------------------------------- 👨🏫 Check out my Website for more tutorials and 👨🏫 Udemy Course : https://volere.life/web-development/web-dev-courses/ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 13 Jun 2022 | WWDC 2022 Apple iOS and MAC's for Web Development. | 00:06:39 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Is Apple viable for Web Development in 2022 with ist new M2 silicon Chip. iOS 16 and MacOS Ventura, also new MacBook Air and MacBook Pro for Web Developers and coding. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 02 Oct 2022 | Create a website with scroll animation | 00:10:38 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Learn how to create a website with scroll animation using HTML CSS and JavaScript with its Intersection Observer API 🎱Source Code for this Video: https://norbertbm.com/scroll-animated-website/ ----------------------------------------------------------------------------- 👇 Website & Courses: 👨🏫 : https://norbertbm.com/web-development/web-dev-courses/ Podcast: https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro & Project overview 02:00 - Basic Setup HTML and CSS 05:25 - using Intersection Observer API 08:42 - delay transition effect with css ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #SrollAnimation #javascriptproject #WebsiteAnimation Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 18 Apr 2023 | Is The GitHub Copilot Killer The FREE Amazon Code Whisperer | WCQ33 | | 00:03:42 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode of the podcast I will analyze the new Amazon CodeWhisperer and GitHub Copilot X Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 29 Jan 2023 | Reacting to The state of JS 2022 - WCQ26 | 00:21:16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The State of JavaScript 2022 report is an annual survey that aims to understand the current state of the JavaScript ecosystem. This report provides an overview of the most popular JavaScript frameworks, libraries, and tools, as well as the latest trends and future predictions. One of the biggest takeaways from the State of JavaScript 2022 report is the continued dominance of React. My Udemy Courses: - 30+ React Projects, Learn React JS by Building 30+ Web Apps: https://www.udemy.com/course/30-react... - Advanced HTML CSS & SASS - Build and Deploy Modern Websites: https://www.udemy.com/course/advanced... - Git & GitHub -Essentials for Version Control & Management Complete: https://www.udemy.com/course/essentia... - Bootstrap 5 for Beginners with real world Projects: https://www.udemy.com/course/complete... - 30 HTML CSS & JavaScript projects in 30 Days for Beginners: https://www.udemy.com/course/30-html-... - Visual Studio Code - Master the Complete VS Code environment: https://www.udemy.com/course/visual-s... - Master Responsive Web Design CSS Grid, Flexbox & Animations: https://www.udemy.com/course/master-r... - Modern JavaScript from Beginner to Advanced: https://www.udemy.com/course/modern-j... - Advanced CSS & SASS: Framework, Flexbox, Grid, Animations: https://www.udemy.com/course/advanced... - Web Development HTML CSS & JS a Beginner to Advance guide: https://www.udemy.com/course/advanced... ----------------------------------------------------------------------------- 👇 Website / Tutorials / Projects /Blog 👨🏫 https://norbertbm.com/web-development... Show notes:
Check out the State of JS 2022 here: #stateofjs2022 #javascript2023 #WCQ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 08 Nov 2021 | Is Web 3.0 the future of the internet, should you even care blockchain? | 00:13:50 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Web 3.0, You may have heard of it, but what is it? Should you even care about it and do we really need another version of the internet? What's wrong with Web 2.0, witch is the current version of the internet and its predecessor Web 1.0? Are there any benefits to Web 3.0? In this episode of the podcast I will try to answer all of this questions. And if wish to learn about the current fastest growing then Technology then stick around to the end! Whatch it on YouTube: https://youtu.be/zN_fpvp_EVk Summery Is Web 3.0 the future of the internet, should you even care?Summery Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 03 Jul 2022 | React JS Explained | 00:07:04 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Learn what react is and how to create your first react app in this web development tutorial. React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript Framework, or kind of. Actually React is a JavaScript library that is declarative, efficient, and flexible for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. Watch the full video Tutorial: Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 06 Dec 2021 | Top 5 Technologies for WEB Development in 2022 - WCQ13 | 00:09:50 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
In this episode of the Weekly Code Quickies Podcast we will take a look at the latest trends for 2022 for web development like: No-code, Data base, JavaScript, WEB 3.0, Metaverse. Support the channel by subscribing! --------------------------------------------------------------------------------------------------------------------- Listen to the podcast on: Apple Podcasts: https://podcasts.apple.com/de/podcast/weekly-code-quickies-with-norbert-b-m/id1455776215Spotify: https://open.spotify.com/show/1bpbmoaP44RGq9rDqaat4R?si=76134374af6d495dStitcher: https://listen.stitcher.com/yvap/?af_dp=stitcher://show/380154&af_web_dp=https://www.stitcher.com/show/380154--------------------------------------------------------------------------------------------------------------------- Show notes: 00:00 - Introduction 00:42 - NO CODE web development 01:47 - Database 04:35 - AI in web development 05:32 - JavaScript the foundation of all Frameworks 06:17 - Web 3.0 08:08 - Metaverse #2022 #webdevelopmen #WCQ Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 05 Nov 2024 | How To Install Next.js in Visual Studio Code in 4 min | 00:06:01 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Step-by-Step Guide to Installing Next.js and Setting Up Tailwind CSS in Visual Studio Code In this guide, I'll walk you through the process of setting up a Next.js project and integrating Tailwind CSS for styling, all within Visual Studio Code. By the end, you’ll have a fully functional Next.js app styled with Tailwind CSS! Prerequisites * Node.js: Make sure Node.js is installed on your computer. Next.js requires version 18 or higher. * Visual Studio Code: Open your project here, as it provides a consistent terminal experience across Windows and Mac. Step 1: Check Node.js Installation * Open Terminal in Visual Studio Code: * Go to the top menu and select Terminal > New Terminal. * Or use the shortcut Ctrl + ~ (tilde) to open the terminal. * Verify Node.js Installation: * Run the following command to check your Node.js version: node -v * Copy code node -v * If you don’t have Node.js installed, download it from Node.js, choosing the LTS version. Follow the installation prompts. * Verify NPM Installation: * Node.js installation automatically includes npm. Confirm its version with: npm -v * Copy code npm -v Step 2: Create a Project Folder * On your desktop or a location of your choice, create a folder named projects (or any preferred name). * Inside, create another folder for your Next.js app. For this example, we’ll name it my-next-app. * Drag and drop this folder into Visual Studio Code to open it. Step 3: Install Next.js * Run the Next.js Installation Command: * In the terminal, use npx to install Next.js: npx create-next-app@latest my-next-app * Copy code npx create-next-app@latest my-next-app * Here’s a breakdown of the installation prompts: * Project Name: Enter my-next-app or another name. Avoid uppercase letters or starting with a number. * TypeScript: Choose No (or Yes if you want TypeScript). * ESLint: Choose No (or Yes if you need linting). * Tailwind CSS: Select Yes to automatically install and configure Tailwind. * Source Directory: Select Yes to store your code in a src directory. * App Router: Choose Yes to enable routing (like React Router). * Turbo Pack: Choose No. * Custom Imports: Select No. * Navigate to Your Project Directory: * Once the setup completes, move into the newly created project directory: cd my-next-app * Copy code cd my-next-app Step 4: Start the Development Server * In the terminal, run the following command to start your Next.js app in development mode: npm run dev * Copy code npm run dev * After a few seconds, your app will be live at http://localhost:3000 * . * Hold Ctrl and click the link in the terminal to open it. * Alternatively, open a browser and go to http://localhost:3000 Step 5: Verify Tailwind CSS Setup * Open any page file, like src/pages/index.js. * In the classes, you’ll notice Tailwind’s utility classes ready for styling. With Tailwind installed, you can now apply utility-first CSS classes directly in your JSX. Wrap Up That’s it! You now have a Next.js app with Tailwind CSS configured. Tailwind’s powerful styling makes it easy to quickly build and customize UIs. Thank you for following along. Happy coding! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 17 Nov 2024 | State of Front-End Development in 2024: Trends, Tools, and Insights | 00:20:47 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dive into the latest front-end development trends for 2024, including popular frameworks, tools, and technologies shaping the future. Explore key developer preferences, accessibility insights, and the role of AI in front-end workflows. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 06 Jan 2025 | State of JavaScript 2024 Survey Insights: Trends, Salaries, and Framework Preferences | 00:22:41 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
State of JavaScript 2024: Comprehensive Survey Results The State of JavaScript 2024 Survey offers valuable insights into the JavaScript ecosystem, from developer demographics to salary trends, framework preferences, and emerging technologies. In this post, we’ll analyze the key takeaways, helping you stay ahead in this dynamic field. 1. Demographics and Salaries: Who Took the Survey? Participation by Region * United States: 1,596 respondents. * Germany: 875 respondents. * France, Spain, UK, Poland: Significant representation. * India’s participation (257 respondents) remains surprisingly low, given its large developer community. Average Salaries by Country * United States: $125,000–$200,000. * Germany and Poland: Both average around $70,000, though Poland offers lower living costs. * Australia, Sweden, and Ireland: Competitive salaries at $125,000. Diagram Idea: A bar chart comparing average salaries by country. Experience vs. Income * 50-59 Age Bracket: Highest median salary at $119,000. * Developers aged 20-29 typically earn $38,000, reflecting entry-level roles. 2. Years of Experience: Impact on Careers * Most respondents have 5-9 years of experience (31%). * Interestingly, those with 25-29 years earn more than those with 30+ years, likely reflecting evolving skills demand. Insight: Staying updated with modern frameworks and tools is crucial for career longevity. 3. Framework Preferences: Winners and Losers Front-End Frameworks * React: Dominates with the highest positive sentiment and adoption rate. * Vue.js: Strong runner-up with growing appeal. * Angular: Declining popularity, though it remains significant in specific regions like Germany. * Svelte: Emerging as a promising alternative. Diagram Idea: A pie chart of framework popularity percentages. Meta Frameworks * Next.js: The preferred choice for full-stack applications. * Vite: Gains traction as a fast and flexible bundler, often paired with frameworks like React and Vue. 4. Back-End and Serverless Trends Back-End Frameworks * Express: Leading for Node.js applications. * NestJS: Rising for structured, scalable apps. Serverless Runtimes * AWS Lambda: The clear leader at 28%, followed by Vercel and Cloudflare. 5. AI and Development Tools AI Tools * ChatGPT: The most used AI assistant for coding and debugging. * GitHub Copilot: Close second, integrated into popular IDEs like Visual Studio Code. Future Prediction: * Google Gemini is expected to surpass current leaders by the end of 2025, given its advanced capabilities. Diagram Idea: A timeline predicting AI tools’ market share shifts by 2025. 6. Hosting and Bundling * AWS and Vercel: Top hosting platforms. * GitHub Pages and Netlify: Ideal for small-to-medium projects. Bundlers and Libraries * Vite and Webpack: Popular choices for faster development cycles. * Lodash and Day.js: Leading utility libraries for code optimization. 7. Career Paths: Education, Job Titles, and Salaries Education * 24% of respondents had no formal degree, earning comparable salaries to those with degrees over time. * Takeaway: Practical skills and experience outweigh formal education in many cases. Job Titles and Salaries * Top Earners: Directors of Engineering and Senior Software Engineers, earning $125,000+. * Front-End Developers: Entry-level salaries around $50,000 but can reach $125,000+ with experience. 8. Resources and Learning Platforms * Top Learning Platforms: * Udemy: Popular for beginner courses. * Frontend Masters and Wes Bos Courses: Ideal for advanced learners. * Podcasts: Syntax.fm remains a favorite among developers. Tip: For beginners, focus on foundational courses before diving into advanced topics like TypeScript. Conclusion: What Lies Ahead for JavaScript? JavaScript continues to evolve as a versatile, developer-friendly language. The 2024 survey highlights: * The growing importance of React, Vite, and serverless technologies. * Competitive salaries across regions, with career growth tied to staying updated with tools and frameworks. * AI tools are becoming integral to the developer workflow, with promising advancements on the horizon. Key Takeaway: Invest in foundational JavaScript knowledge, stay adaptable, and leverage the latest tools to excel in your career. What are your thoughts on these trends?Share your opinions in the comments below, and subscribe to stay updated with the latest insights in web development. Norbert B.M. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 13 Jan 2025 | A Beginner's Guide to Getting Started with Web Development in 2025 | 00:02:32 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dive into web development in 2025 with my step-by-step guide. Learn how to set up your tools, master HTML, CSS, JavaScript, and explore essential frameworks like React and Tailwind CSS. Watch it on YouTube ------------------------------------------------------------------------------------------------- Read Blog Post: https://menyhartmedia.com/2025/01/13/a-beginners-guide-to-getting-started-with-web-development-in-2025/ ------------------------------------------------------------------------------------------------- ALL Course: https://menyhartmedia.com/web-dev-courses/ 👇 My Website / Courses / 🔗 Source codes/Podcast / Tutorials / Projects / Blog: 👨🏫 : https://menyhartmedia.com/ ------------------------------------------------------------------------------------------------- 🕐 Timestamps: 00:00 - Intro 00:10 - Install Node.js 00:16 - Install Code Editor 00:28 - Setup Code Editor 00:32 - Learn Web Dev Basics 00:43 - Learn Beck-end Development 01:00 - Learn Version Control 01:10 - Learn Responsive design 01:18 - Learn CSS Frameworks 01:23 - Learn JavaScript Frameworks 01:32 - Build Simple Projects 01:54 - Learn AI for Web Development 02:01 - Learn to publish your website 02:11 - Buy a Domain 02:19 - Outro ------------------------------------------------------------------------------------------------- Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 26 Jan 2025 | Best Visual Studio Code Crash Course for beginners in just 15 min | 00:21:16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Visual Studio Code, or VS Code, is a powerful and versatile code editor that can revolutionize the way you write and manage your code. Whether you're a beginner diving into web development or an experienced coder, VS Code offers tools and extensions to supercharge your productivity. In this comprehensive guide, we’ll walk you through the basics of setting up VS Code, understanding its interface, and leveraging its key features. 👨💻 What You’ll Learn: * How to download and install VS Code * A complete walkthrough of the interface * Setting up your coding environment * Installing and using essential extensions * Using Git and version control ------------------------------------------------------------------------------------------------- 🕐 Timestamps: 00:08 - What is Visual Studio Code 00:42 - Download and Install Visual Studio Code 01:27 - Interface Overview of Visual Studio Code 01:51 - What is the Activity Bar 02:08 - What is the Sidebar 02:22 - The editing area 02:56 - How to open the command pallet 03:17 - How to open files and folders in Visual Studio Code 03:54 - How to create new files and folders in Visual Studio Code 04:43 - How to install Extensions in Visual Studio Code 06:30 - How to install and run Live Server to Visual Studio Code 09:37 - How to setup Visual Studio Code 10:46 - How to set autosave in visual studio code 11:32 - How to increase editor font size in visual studio code 12:19 - How intalicense works in visual studio code 13:06 - How to use comments in Visual Studio Code 1 3:55 - How to switch between tabs in Visual Studio Code 14:22 - How to open the terminal in visual studio code 15:19 - How to use search in Visual Studio Code 16:16 - How to use Source control Git and GitHub in VS Code 17:37 - How to change Themes in Visual Studio Code 18:37 - How to use Keyboard shortcuts in Visual Studio Code 19:04 - Productivity tips for Visual Studio Code 20:21 - How to open and arrange multiple tabs in Visual Studio Code 20:54 - Outro 🔗 Resources: * Download VS Code: https://code.visualstudio.com * Prettier Extension: Prettier * Live Server Extension: Live Server Hit the Like button if this helped you, and don’t forget to Subscribe for more tutorials! In this comprehensive guide, we’ll walk you through the basics of setting up VS Code. You will understand its interface. We will also show you how to leverage its key features. Step 1: Download and Install Visual Studio Code * Head over to the official VS Code website. * Click the download button for your operating system (Windows, macOS, or Linux). * Follow the straightforward installation process and open VS Code once installed. Step 2: Explore the Interface Here’s what you’ll see when you open VS Code: * Activity Bar (Left): Features like Explore, Search, Source Control, Debugging, and Extensions. * Sidebar: Displays project folders and files. * Editor Area (Middle): Where you’ll write and edit your code. * Status Bar (Bottom): Shows key project information like active programming language and servers. * Command Palette: Accessed with Ctrl+Shift+P (or Cmd+Shift+P on macOS), this lets you perform quick actions. Step 3: Setting Up Your Workspace * Create a project folder on your desktop (e.g., "Code"). * Open this folder in VS Code using File > Open Folder or drag it into the editor. * Inside this folder, create the files you need: * index.html (HTML file) * style.css (CSS file) * script.js (JavaScript file) Step 4: Install Must-Have Extensions VS Code’s real power lies in its extensions. Two essential ones for web development are: * Prettier: Automatically formats your code for better readability. * Live Server: Runs a local development server and refreshes the browser automatically when you save changes. To install these: * Click the Extensions icon in the Activity Bar. * Search for "Prettier" and "Live Server." * Click Install for each. Step 5: Writing Your First Code Open index.html and write this basic structure: htmlCopyEdit Hello, World!Right-click on the file and choose Open with Live Server to see your webpage in action. Now, every time you make changes and save the file, the browser will auto-refresh. Step 6: Key Features of VS Code * Command Palette: Use Ctrl+Shift+P (or Cmd+Shift+P) to access commands like changing settings or running tasks. * Integrated Terminal: Open the terminal with Ctrl+ (or Cmd+). Use it for running commands like npm install. * Split Editor: Work on multiple files side-by-side by dragging tabs or using Ctrl+\. Step 7: Customizing Your Setup * Themes: Change the editor’s appearance by going to File > Preferences > Color Theme. * Keyboard Shortcuts: Customize shortcuts under File > Preferences > Keyboard Shortcuts. * Autosave: Enable autosave in File > Preferences > Settings > Autosave. Step 8: Mastering Git Integration VS Code has built-in Git support for version control. * Go to the Source Control tab. * Initialize a Git repository for your project. * Connect to GitHub to share or back up your code. If you're unfamiliar with Git or GitHub, check out our GitHub Crash Course. Conclusion By now, you should have a solid understanding of Visual Studio Code's interface, setup, and essential features. Keep practicing and exploring to make VS Code your ultimate coding companion. Remember: The more you use it, the more you’ll uncover its hidden gems! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 09 Feb 2025 | HTML Crash Course for complete beginners | 00:38:23 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML Crash Course Introduction HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using markup. HTML elements are the building blocks of HTML pages. Step 1: Basic Structure of an HTML Document * Open your text editor (e.g., Visual Studio Code). * Create a new file and save it as index.html. * Add the following basic structure to your HTML document:
Welcome to HTML Crash Course: This declaration defines the document type and version of HTML. It ensures the browser knows to render the page in standards mode. : This is the root element of an HTML document. The lang="en" attribute specifies the language of the document as English. : This element contains meta-information about the HTML document, such as its title and character set.: This meta tag specifies the character encoding for the HTML document, ensuring that it can display a wide range of characters correctly. : This meta tag ensures the webpage is responsive by setting the viewport to match the device's width and initial zoom level. Welcome to HTML Crash Course: This is a heading element that displays a level 1 heading with the text "Welcome to HTML Crash Course".Each of these elements plays a crucial role in structuring and presenting the HTML document correctly. Step 2: Adding Content to the HTML Document Now that you have set up the basic structure of the HTML document, you can start adding content to it. Here are some common HTML elements for adding text, images, links, and lists: * Text: Use the element to add paragraphs of text. This is a paragraph of text. * Images: Use the * Links: Use the element to create hyperlinks.Visit Example Website * Lists: Use the
Enhance your understanding of Weekly Code Quickies with My Podcast DataAt My Podcast Data, we strive to provide in-depth, data-driven insights into the world of podcasts. Whether you're an avid listener, a podcast creator, or a researcher, the detailed statistics and analyses we offer can help you better understand the performance and trends of Weekly Code Quickies. From episode frequency and shared links to RSS feed health, our goal is to empower you with the knowledge you need to stay informed and make the most of your podcasting experience. Explore more shows and discover the data that drives the podcast industry. © My Podcast Data | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
