NorbertBM

Learn CSS Container Queries the new css feature that helps you style sidebars, aside and side navigations on different screen width. 🎱Source Code for this Video: https://norbertbm.com/?p=5761 ----------------------------------------------------------------------------- 👇 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 01:00 - Basic Setup 02:00 - CSS Container Queries ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #cssContainerQuerie #learncss #csstips

Learn how to setup Visual studio coide

Welcome the my React Crash Course. In this course you will learn all the basics of React JS witch will set you up with the necessary knowledge to get starting creating applications using the React Framework. This course has two parts: theoretical part (definitions, explanations and resources ). practical part ( build a work out planer web application using React and React Router). 🎱Source Code & PDF Download for this Video: https://norbertbm.com/react-crash-course/ ----------------------------------------------------------------------------- Useful resources: How to install and run NodeJS with NPM on Windows and Mac: https://youtu.be/yM92Iuh35JY ES6 JavaScript and most array methods: https://youtube.com/playlist?list=PL1XOgHNZBUvKDBcAjjwJoW3JQ7ZR1PK87 Complete HTML CSS and JS Course: https://youtu.be/1LqVCHcLVBM React Router Crash Course with React v6 Invoice App: https://youtu.be/wJaJIpDkfZE Visual Studio Code Full Course for Beginners: https://youtu.be/955G78tL8hE 👇 Website & Courses: 👨‍🏫 : https://norbertbm.com/web-development/web-dev-courses/ Podcast: https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro & About me 00:53 - About this React Course 01:21 - What will you learn in this course 02:52 - Is there any prior knowledge required for learning React? 03:25 - Who is this course for? 04:11 - What is React 05:47 - Why learn react 07:58 - How React works 08:12 - What is a SPA 09:00 - React language JSX 09:30 - What are React components 10:28 - What are React Hooks and how to use them 11:32 - Useful resources 12:30 - React Web App Project Intro 15:28 - Project overview 20:06 - How to installing and run React 27:30 - The React File and Folder structure 39:26 - Writing JSX code 44:10 - How to use Images in React 46:44 - How to use CSS and Bootstrap CSS framework in React 54:47 - Creating components and props in React 01:13:31 - How to use Icons in React 01:21:30 - React Hook - useState 01:30:43 - React Hook - useEffect 01:36:42 - React Router - Client Side Routing 01:50:53 - How to Create multiple Routes in React 02:21:31 - Build the React Application 02:23:24 - Deploy React Application using Node.js and Express ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #learnreact #reacttutorial #norbertbmwebdevelopment

In this tutorial I will walk you through my Desktop setup for programming, that I use to or code my Applications and Website, depending on if I am coding for a real life web application or website. Or Creating tutorials or Crash courses for my YouTube channel, like the one coming on for React, or full curses on Udemy or Skillshare. 🎱Blog post for this Video: https://norbertbm.com/desk-setup-for-programming-pc-and-mac/ ----------------------------------------------------------------------------- 👇 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 - My PC setup for coding 04:38 - My Mac setup for coding 06:48 - Budget desk setup for programing ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #desksetup #PCandMacForPrograming #norbertbmwebdevelopment

In this web development tutorial you will learn how to create a timesheet calculator web application using HTML CSS and JavaScript. The web application will calculate the amount of worked hours, the amount of break time and then by subtracting from the work time the break time the application will calculate the amount of hours worked in one day. You can add multiple day to this application, or even multiple weeks, or moths. At the end the application will calculate the total amount of hours worked in the specified time span. Resource: Random Avatar API: https://avatars.dicebear.com/ Custom Fonts: https://fonts.google.com/ Code Editor : https://code.visualstudio.com/ 🎱Source Code for this Video: https://norbertbm.com/build-a-employee-timesheet-web-app/ ----------------------------------------------------------------------------- 👇 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:22 - Create the Project HTML CSS and JS files 03:42 - Create a timesheet table in html 14:55 - Style the timesheet table 15:25 - CSS Custom Fonts, general reset and css variables and style the body and project container. 23:34 - Generate a random Avatar using API and style it. 29:46 - Style the html form inputs and table body, header and footer 33:53 - Style the add button 37:41 - Get all table rows from the DOM 38:55 - Create a function that creates a html form element 40:39 - Add all form elements to the DOM using async and IIFE (Immediately Invoked Function Expression) 42:23 - Get all forms elements from the DOM 43:49 - Add submit event listeners to all forms 45:15 - Get input elements from the submitted form 49:46 - Validate form submission 54:22 - Calculate the daily hours worked 55:27 - Create a function that calculates the amount of hours 57:14 - Convert string to time 59:38 - Calculate work time 1:01:38 - Calculate break time 1:03:18 - Calculate the final difference work - break time 1:06:28 - Calculate total amount of worked hours 1:18:56 - Refactoring the JavaScript code ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #webapp #javascriptproject #norbertbmwebdevelopment

In this javascript tutorial you will learn how to refactor javascript code to a more simpler and cleaner cod. We will use a previous project for this as a example. 🎱Source Code for this Video: https://norbertbm.com/?p=5660 ----------------------------------------------------------------------------- 👇 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 01:44 - Alternative to declaring const for each variable 02:32 - Alternative to addEventListener of submit 03:12 - Alternative to if else - Conditional (ternary) operator 04:54 - Create a function that gets values from HTML input tags 07:58 - Create a function that calculate the compounded interest rate with also a monthly contribution. ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #refactoring #javascriptproject #norbertbmwebdevelopment

In this web development tutorial you will learn how to create a compound interest calculator using HTML CSS and 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 ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro & Project overview 01:53 - Create index.html file 04:05 - Create the style.css file and project styling 08:16 - Get elements by Id from the DOM 12:43 - Form submission and validation 15:41 - Create form validation and Alert! 18:11 - Create a function in javascript to calculate the compounded interest 19:59 - Calculate the compounded interest 25:27 - Use toFixed to limit the number of trailing decimals 26:02 - Calculate the compounded interest rate wiht monthly contributions 29:34 - Add animation using JavaScript and CSS keyframes ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #compoundinterest #javascript #webdevelopment

In this live tutorial we are goin to design a html form using css 🎱Source Code for this Video: https://norbertbm.com/html-form-design-using-css/ ----------------------------------------------------------------------------- 👇 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 ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #livecoding #formdesign #norbertbmwebdevelopment

In this React tutorial I will explain what useState() is and how to use the useState( ) hook in React js. The useState() is a Hook that allows you to have state variables in functional components . useState Syntax: The first element is the initial state and the second one is a function that is used for updating the state. const [state, setState] = useState(initialstate) 🎱Source Code for this Video: https://norbertbm.com/what-is-usestate-in-react/ ----------------------------------------------------------------------------- 👇 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 00:34 - How to install react 02:55 - Example using vanilla JavaScript 03:53 - Prevent default behavior of forms 05:00 - How to use variables in React 05:54 - how to use functions in React 06:33 - using events in react 08:14 - change the value of a variable using regular javascript in react 09:32 - how to import useState in react 10:26 - How to use useState in React 13:06- How to chage state in React ------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------- #useState #reacttutorial #norbertbmwebdevelopment

In this JavaScript project you will learn how to create a amazing text animation using HTML CSS and JavaScript with delay. 🎱Source Code for this Video: https://norbertbm.com/amazing-text-animation/ ----------------------------------------------------------------------------- 👇 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 00:30 - Create a index.html file 01:25 - Basic styling 04:28 - Create animation and add it to the title id 06:31 - Get title element from the DOM using querySelector 08:53 - Transform a string in to a array using js 10:12 - Wrap each item of the array in to a html div element 14:09 - Create and add a class to each item of the array 15:22 - Add the .anime-element in js 17:40 - Add Animation on mouse over event in js 18:06 - Add hover effect to the .anime-element class 18:53 - Add Animation on mouse over event in js 20:46 - Create a utility function to toggle the animation ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #textanimation #javascript_project #norbertbmwebdevelopment

React js Project. Create a Expanses calculator application using the React JavaScript framework

Check out my setup for web development

Learn Visual Studio Code, the most powerful code editor for web development and more. 👇 Website & Courses: 👨‍🏫 : https://norbertbm.com/web-development/web-dev-courses/ Podcast: https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro to the Course 02:35 - What will you learn in this VS Code Course 07:57 - What is Visual Studio Code & Why us it 12:05 - Download and Install VS Code on Mac & PC 16:09 - Visual Studio Code Basic UI Orientation 21:56 - Creating Opening Editing Deleting Project Folders and Files in Visual Studio Code 26:36 - How to Save and Auto Save in Visual Studio Code 30:58 - Changing the Display Language in Visual Studio Code 37:04 - Mini Map, Word Wrap, Zoom and Font Size 43:30 - How to Updates Visual Studio Code 45:55 - Increase Productivity in Visual Studio Code using IntelliSense 50:18 - Emmet HTML & CSS Shortcuts 01:08:05 - Find and Replace in Visual Studio Code 01:13:08 - Navigate the Code in Visual Studio Code 01:21:56 - Introduction to Visual Studio Code Extensions 01:26:33 - Visual Studio Code Essential Extensions 01:40:45 - Visual Studio Code Optional Extensions 01:56:20 - Visual Studio Code Environmental Specific Extensions 02:10:06 - Visual studio code productivity snippets 02:30:10 - Visual Studio Code Essential Keyboard Shortcuts 02:35:27 - Create you own Keyboard Shortcuts & New File Extension in Visual Studio Code 02:36:56 - Import other Keymap extensions 02:38:09 - Visual Studio Code custom Color Themes 02:42:54 - Extensions for Custom Themes and Icons 02:46:46 - Customizing your own Theme in Visual Studio Code 02:47:53 - Learn Visual Studio Code Terminal 02:54:11 - How to setup Sync in visual studio Code 03:00:55 - Setting up Node.js in Visual Studio Code 03:06:04 - What is React.js 03:07:28 - How to install React in visual Studio code 03:09:49 - What is Angular 03:10:28 - Installing Angular in visual studio code 03:14:04 - What is Vue 03:15:05 - Install Vue js in visual studio code 03:17:20 - What is Python 03:18:23 - Setting up Python ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #visualstudiocodecourse #bestcodeeditor #norbertbmwebdevelopment

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

Create a responsive navigation bar menu using HTML CSS and JavaScript with a hamburger button and a closing button with dropdown effect. 🎱Source Code for this Video: https://norbertbm.com/responsive-navbar-using-html-css-and-javascript/ ----------------------------------------------------------------------------- 👇 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:13 - Create the header and navigation tag 06:26 - CSS general reset 08:28 - Style the navigation using css 15:05 - Make navbar responsive using css 20:36 - Get elements from the DOM using JavaScript 23:31 - Show hide navigation using JavaScript 27:46 - Show hide navbar button using javascript 32:14 - Add remove active state to navigation link items ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- #responsivenavbar #javascriptproject #norbertbmwebdevelopment