AlephNeoDev

Join us as we dive into these three JavaScript projects, step by step, explaining concepts, demonstrating code implementation, and providing valuable insights along the way. Whether you're a beginner looking to practice your JavaScript skills or an experienced developer seeking inspiration for your next project, this tutorial has something for everyone. Don't miss out on this opportunity to learn, create, and have fun with JavaScript. Hit the play button and let's get coding! 🕛 TimeStamps 🕛 ✅ 39:00 Temperature Converter Source 💻: CodePen🔗https://codepen.io/Oskar_Olortegui/pen/Yzgogwb ✅ 24:15 Stopwatch with LocalStorage 😸GitHub - Branch#2 🔗https://github.com/AlephOlortegui/Stop_Watch/tree/version_2 ✅ 49:11 Filter products - Checkboxes 😸Github: 🔗https://github.com/AlephOlortegui/JSCheckboxFilter Watch 👀 the most recent videos 🔗 https://www.youtube.com/@AlephNeoDev/videos Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey 😸GitHub 🔗 https://github.com/AlephOlortegui?tab=repositories 💻Codepen 🔗 https://codepen.io/Oskar_Olortegui #JavaScriptProject #jstutorial #localstorage

Welcome to our comprehensive tutorial on building a basic website using Express.js, EJS templates, MongoDB for database management, and JWT authentication for secure login and signup functionalities. Whether you're a beginner looking to dive into web development or an experienced developer seeking to expand your skills, this tutorial has something for everyone. In this video, we'll guide you step-by-step through the process of creating a fully functional website with login/signup pages and protected routes 🕛 TimeStamps 🕛 ✅ 02:00 Setup ✅ 04:57 Templates ✅ 12:30 Routes ✅ 15:30 Controllers ✅ 18:00 .env File ✅ 20:29 - How to create a DB in mongoDB ⭐ ✅ 25:00 - Models ✅ 29:52 - POSTMAN Lightning course ✅ 33:30 - Validator ✅ 35:25 - HASH password ⭐ ✅ 39:00 Handle errors ⭐ ✅ 49:50 Signup JS - Frontend. ✅ 58:26 JWT ⭐ ⭐ ✅ 01:05:23 Statics - mongoose Method - Login ✅ 01:14:23 AuthMiddleware Code Source 💻: 😸GitHub🔗 https://github.com/AlephOlortegui/digi_jwt_auth Watch 👀 the most recent videos 🔗 https://www.youtube.com/@AlephNeoDev/videos Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey 😸GitHub 🔗 https://github.com/AlephOlortegui?tab=repositories 💻Codepen 🔗 https://codepen.io/Oskar_Olortegui Whether you're building your first website or enhancing your development portfolio, join us on this exciting journey into the world of web development with Express.js and MongoDB. Don't forget to like, share, and subscribe for more tutorials on web development, coding tips, and industry insights. Let's dive in and start building together!

Welcome to our comprehensive tutorial on creating a Todo App using the power of React! In this video, we'll guide you through the process of building a fully-featured Todo application that leverages advanced techniques like React Context, useReducer, LocalStorage, Dark Theme implementation, and the optimization magic of useMemo. What you'll learn in this tutorial: ✅ Set up a React project with the necessary dependencies to get started. ✅ Dive deep into the React Context API to manage state across components seamlessly. ✅ Harness the useReducer hook to efficiently manage complex state changes in your Todo App. ✅ Implement LocalStorage integration to persist your Todo list even after page refreshes. ✅ Enhance user experience with a stylish Dark Theme using CSS and React Context. ✅ Optimize performance using the useMemo hook to prevent unnecessary re-renders. ✅ Gain a strong grasp of these advanced React concepts while building a practical application. Throughout the video, we'll break down complex concepts into easy-to-follow steps, making this tutorial suitable for both intermediate and experienced developers. By the end, you'll have not only built a functional Todo App but also gained valuable insights into powerful tools that can be applied in various React projects. Whether you're aiming to bolster your React skills, explore modern state management techniques, or develop an eye-catching application, this tutorial is the perfect fit for you. Join us on this coding adventure and craft a dynamic Todo App that showcases your newfound expertise! 🕛 TimeStamps 🕛 ✅ 02:50 Initial base components ✅ 05:00 ThemeContext ✅ 11:44 TodoContext ✅ 13:15 Todos - AlertMsg - TodoList ✅ 15:28 form - Add Todo ✅ 18:00 check todo ✅ 19:34 delete todo - delete All ✅ 21:23 Editing Actions ✅ 26:18 Edit Todo ✅ 28:00 LocalStorage with useReducer - TodoProvider ✅ 30:00 MemoProvider Code Source 💻: 😸GitHub🔗 https://github.com/AlephOlortegui/react-todo Watch 👀 the most recent videos 🔗 https://www.youtube.com/@AlephNeoDev/videos Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey 😸GitHub 🔗 https://github.com/AlephOlortegui?tab=repositories 💻Codepen 🔗 https://codepen.io/Oskar_Olortegui

Get ready to grasp the art of asynchronous programming and create an interactive web application that fetches Pokemon data with ease. Whether you're a Pokemon fan or a JavaScript enthusiast, this tutorial is sure to captivate your interest. Don't forget to like, share, and subscribe to our channel for more engaging coding tutorials. Let's embark on this journey of learning and exploration together! What you'll learn in this tutorial: ✅ Understand the basics of asynchronous programming and why async/await is a game-changer. ✅ Set up a simple web interface with an input form and a button for fetching Pokemon data. ✅ Utilize the Fetch API and async/await to efficiently retrieve data from the Pokemon API. ✅ Implement a reusable function for fetching Pokemon details based on user input. ✅ Create an exciting "Random Pokemon" button that fetches and displays information about a randomly chosen Pokemon. ✅ Enhance your JavaScript skills and build a foundation for handling asynchronous operations effectively. Whether you're a beginner looking to grasp asynchronous programming or an experienced developer seeking to refresh your skills, this tutorial has something for you. Join us on this exciting coding journey and level up your JavaScript prowess! Code Source 💻: 💻Codepen 🔗 https://codepen.io/Oskar_Olortegui/pen/bGQPEmx Watch 👀 the most recent videos 🔗 https://www.youtube.com/@AlephNeoDev/videos Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey 😸GitHub 🔗 https://github.com/AlephOlortegui?tab=repositories 💻Codepen 🔗 https://codepen.io/Oskar_Olortegui #PokemonAPI #AsyncAwait #APIFetching #JavaScriptTutorial

Welcome to our latest YouTube tutorial, where we dive into the fascinating world of color conversion! 🌈🚀 In this video, we'll explore how to effortlessly convert colors between RGB and HEX formats using JavaScript. Whether you're a web developer, designer, or just curious about color representation, this tutorial has something for everyone! 💻💡 Discover how to convert RGB (Red, Green, Blue) values to HEX codes and vice versa with a simple step-by-step guide. No more struggling with manual conversions - we've got you covered! 🔄🎨 Stay tuned to discover how to make your web development experience even more colorful. 🎨🔍 Don't forget to hit the notification bell, so you won't miss any of our exciting web development tutorials! Join us on this colorful journey and let's level up our web development skills together! 🎓🚀 🔗 GitHub 😸: https://github.com/AlephOlortegui/basicColors Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/abQMMWg Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #JavaScriptColorConversion #RGBtoHEX #HEXtoRGB #WebDevelopmentTutorial

Welcome to our latest tutorial on React CRUD (Create, Read, Update, Delete) operations, where we'll build a powerful web application using various cutting-edge technologies. In this video, we'll leverage JSON-server API, Bootstrap Table, React Router, Custom Hooks, Reusable Components, Input Filter Search, and implement a Dark Mode using context. ⭐ What you'll learn in this tutorial ⭐ 🔦Set up a React project and install all the required dependencies. 🔦Create a JSON-server API to simulate a backend for handling CRUD operations. 🔦Implement the basic structure of our React application using reusable components for a cleaner codebase. 🔦Utilize React Router to create multiple pages and enable seamless navigation. 🔦Build a dynamic Bootstrap Table to display and manage data effectively. 🔦Integrate Custom Hooks to enhance code reusability and maintainability. 🔦Implement a powerful Input Filter Search functionality to easily find and manipulate data. 🔦Enable Dark Mode using context to provide a visually appealing user experience. Throughout this tutorial, we'll follow a step-by-step approach, making it suitable for both beginners and experienced developers. By the end of the video, you'll have a comprehensive understanding of React's CRUD operations and various advanced features that streamline the development process. Whether you're looking to expand your React skills or master cutting-edge techniques for building efficient web applications, this tutorial is perfect for you! Join us on this exciting journey and level up your React development skills. Don't forget to like, share, and subscribe to our channel to stay updated with the latest web development tutorials. Let's dive into the world of React and create stunning applications together! 🕛 TimeStamps 🕛 ✅ 01:01 - setup react enviorment ✅ 01:48 - Header Table Comps. ✅ 06:56 - Display data ✅ 14:31 - Detail page ✅ 17:32 Delete action ✅ 18:56 Form - Create - useFormFx ✅ 27:00 Active class for Links with NavLink ✅ 28:44 Edit comp, useFetch default params ✅ 35:41 input filter on table.js ✅ 38:58 ThemeProvider ✅ 41:00 ThemeBtn component ✅ 44:00 Links CSS - NavLink ✅ 46:00 Reusable Title Comp. Code Source 💻: 😸GitHub 🔗 https://github.com/AlephOlortegui/reactCrudTable Watch 👀 the most recent videos 🔗 https://www.youtube.com/@AlephNeoDev/videos Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey 😸GitHub 🔗 https://github.com/AlephOlortegui?tab=repositories 💻Codepen 🔗 https://codepen.io/Oskar_Olortegui #ReactCRUD #DarkMode #ReusableComponents #ReactRouter #Bootstrap #WebDevelopmentTutorial

Welcome to our exciting new YouTube tutorial on building a Random Color Generator using JavaScript! 🎨🚀 In this short and engaging video, we'll dive deep into JavaScript and explore how to create a dynamic web application that generates random colors with just a few lines of code. 🌈💡 With a focus on JavaScript throughout the 9-minute video, we'll walk you through each step, explaining the code and concepts in an easy-to-follow manner. Whether you're new to web development or a seasoned pro, this tutorial is designed to empower learners of all levels. 💻📚 Join us in creating your very own Random Color Generator with JavaScript and elevate your web development skills today! 💪 🔔 Subscribe to our channel and hit the notification bell to stay updated with more exciting web development tutorials and coding projects! Don't forget to like and share this video if you find it helpful. Happy coding! 🚀🎉 🔗 GitHub 😸: https://github.com/AlephOlortegui/basicColors Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #JavaScriptColorGenerator #WebDevelopmentTutorial #RandomColors #JavaScriptProjects

Welcome to our captivating YouTube tutorial, where we'll show you how to clone a beautifully designed single page using JavaScript, Bootstrap, and SCSS. 🌟💻 In this video, we'll take you through the entire process of replicating a stunning single page with ease. Our step-by-step guidance will ensure that you gain valuable insights into using these powerful technologies for web development. 🔍 Dive into the world of JavaScript as we demonstrate how to add interactivity and dynamic features to your page. you'll discover how JavaScript elevates the user experience. 🌐⚙️ Throughout the tutorial, we'll share valuable tips and best practices to ensure your coding journey is a smooth one. Our focus on clean code and efficient development will empower you to create outstanding web projects in no time. 💡💪 Whether you're a beginner or an experienced developer, this tutorial offers something for everyone. Elevate your web development skills and impress your audience with a beautifully cloned single page. Subscribe to our channel and hit the notification bell to stay updated with our upcoming tutorials on JavaScript, Bootstrap, SCSS, and much more. Join us on this exciting journey of web development excellence! 🔔🎉 GitHub 😸: https://github.com/AlephOlortegui/coronaPageClone Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 🕛🕛 Timestamps 🕛🕛 ✅ 01:14 header HTML/SCSS ✅ 05:59 carousel HTML/SCSS ✅ 08:45 home-product ✅ 11:10 footer ✅ 16:23 JS toggle ✅ 21:50 carousel html/css ✅ 25:21 carousel js ✅ 33:17 dots - controls js ✅ 38:05 age-page html/css/js Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #JavaScriptCloneTutorial #BootstrapWebDevelopment #SCSS #SinglePageClone

✅ ⭐⭐ 30:27 Related video: https://rumble.com/v2v193s-javascript-localstorage-is-it-hard-to-use.html Welcome to our latest tutorial on creating a powerful Todo List with local storage integration! In this video, we'll walk you through the process of developing a feature-rich task management system, where you can add, edit, delete, and persist your todos using the browser's local storage. With our step-by-step guidance, you'll learn how to leverage JavaScript to build a robust Todo List application. We'll start by setting up the necessary HTML structure and styling it to create an intuitive and user-friendly interface. Using JavaScript, we'll implement local storage functionality, allowing your tasks to be saved and retrieved even after closing the browser window. You'll be amazed at how easy it is to maintain your todos with the power of local storage! Throughout the tutorial, you'll discover how to add new tasks to your list, view and edit existing tasks, as well as delete individual tasks with a simple click. Additionally, we'll show you how to incorporate a convenient "Delete All" button, which clears your entire task list with just one click. By the end of this tutorial, you'll have a fully functional Todo List application that utilizes local storage to store and manage your tasks effectively. Enhance your productivity and stay organized with this powerful tool! Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/KKrmPba Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Subscribe to our channel and hit the notification bell to stay updated with our upcoming tutorials on JavaScript, web development, and more. 🕛🕛 Timestamps 🕛🕛 ✅ 00:50 initial HTML ✅02:10 initial CSS ✅ 05:36 HTML unordered list ✅ 06:13 unordered list CSS ✅ 07:30 HTML & CSS Clear BTN ✅ 08:55 JavaScript - Add a new item ✅ 12:10 displayAlert function ✅ 14:18 Display ClearBtn and functionality ✅ 16:17 icons and event listeners ✅ 17:37 checkItem Fx ✅ 19:30 deleteItem Fx ✅ 21:54 editItem Fx ✅ 24:58 Cancel Fx ✅ 26:23 Edit Button problem⭐ ✅ 30:17 LocalStorage ⭐⭐⭐ Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #TodoListTutorial #LocalStorage #TaskManagement #WebDevelopment

Welcome to our latest YouTube tutorial on building an interactive image slider using JavaScript! In this video, we'll guide you through the process of creating a dynamic slideshow with next and previous buttons that smoothly transition between images. Using JavaScript, we'll select all the images on the page and assign them to the 'imgs' variable. Additionally, we'll grab references to the next and previous buttons using their respective IDs ('next' and 'prev'). By implementing event listeners for the buttons, we'll enable the functionality to navigate through the images. When the 'next' button is clicked, the 'nextFx' function will increment the 'count' variable, ensuring that we loop back to the first image when reaching the end. Similarly, the 'prev' button triggers the 'prevFx' function, decrementing the 'count' variable and looping to the last image when going beyond the first one. The 'slideImg' function plays a crucial role in updating the image positions based on the current 'count' value. Using the 'forEach' method, we'll loop through each image and apply a transformation that slides them horizontally based on the 'count' multiplied by 100%. Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Subscribe to our channel and hit the notification bell to stay updated with our upcoming tutorials on JavaScript, web development, and more. Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #JavaScriptImageSlider #NextPreviousButtons #Transitions

Welcome to our latest YouTube tutorial on creating a stunning iPhone design using SASS. In this video, we'll guide you through the process of building a sleek iPhone interface with a real-time clock and a unique feature that allows you to change the home screen background image through a single menu or "App." Throughout the tutorial, we'll demonstrate the power of using data attributes, which play a major role in this project. By leveraging data attributes, we can seamlessly incorporate dynamic functionality into our iPhone design. Unlock your creativity and take your web design skills to the next level with this captivating project. Subscribe to our channel and hit the notification bell to stay updated with our upcoming tutorials on web development, design, and much more. Get ready to dive into the world of SASS and create a remarkable iPhone design with a touch of interactivity! Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/dyQXbgN Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 I am NeoDev 👽, Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 0:58 initial HTML structure ✅ 3:40 initial SCSS ✅ 4:23 partial _configSetup.scss ✅ 6:17 main style.scss ✅ 6:50 partial _iphone.scss ✅ 7:34 partial _top.scss ✅ 8:56 partial _screen.scss ✅ 9:42 partial _home.scss ✅ 11:36 partial _homeBtn.scss ✅ 15:45 Layers HTML ✅ 18:27 partial _layer.scss ✅ 22:27 partial _layer_1.scss ✅ 23:23 partial _layer_23 -- Layer 3 ✅ 26:34 Get imgs/gifs Via JS. ✅ 29:03 styling our layer 2 ✅ 31:20 Main Logic Explanation⭐⭐⭐ ✅ 34:10 Reason of Using data-attributes ⭐⭐⭐ ✅ 36:49 toggleClass Function ✅ 42:14 layer 3 - z-index 3 ✅ 42:45 How to update layer3 bg-image ✅ 45:47 Update the popUp ✅ 46:39 Update the HomeScreen bg-image ⭐⭐⭐ ✅ 49:23 How to remove all active Classes? ⭐⭐ ✅ 53:32 double click event for the iPhone button ✅ 54:23 Clock Functionality. ✅ 59:33 Final touch partial _screen.scss and other details Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #SASSiPhoneDesign #RealTimeClock #DynamicBackgrounds #DataAttributes

Ready to boost your web development skills? Look no further! This quick and informative video will guide you through the essentials of HTML in just a few minutes. 🚀 Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 I am NeoDev 👽, Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 0:12 What is HTML? ✅ 0:37 how to create an HTML file ✅ 1:27 HTML element ⭐ ✅ 2:00 Your first Tags! ✅ 2:20 Attributes and HTML elements ⭐ ✅ 3:07 general HTML elements like tables, lists, video, audio, iframes ⭐ ✅ 3:55 Block and inline elements ✅ 4:30 Container Elements - "Div-mania" ✅ 4:44 class and ID attributes ⭐ ✅ 5:30 Semantic Elements ✅ 6:04 Forms - Basics ⭐⭐⭐ ✅ 7:05 Forms - Radio Inputs and Checkboxes ✅ 7:40 Forms - Select element Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #webdev #htmlcourse

Ready to create a stunning and seamless endless carousel? Look no further! This tutorial will walk you through building a simple yet impressive carousel using an amazing algorithm that ensures smooth and continuous carousel. 🚀💻 Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Welcome back 😀 Today we're going to create a automatic endless carousel with Javascript Follow along and grow your code skills or practice a little bit with me. Tools 🏷️ Icons: https://boxicons.com/ Images: IG 📷 https://www.instagram.com/p/Ca97wJbqED7/ IG 📷 https://www.instagram.com/p/CbnB3bjOz6q/ 🕛🕛 Timestamps 🕛🕛 0:37 Creating our HTML content 3:10 CSS 9:12 JavaScript 16:02 Quick Review of the Algorithm 12:53 JavaScript 17:50 Prev function 19:46 Prev function Please share the video and the other videos too to grow the comunity Subscribe to the channel for more! Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #endlessJSCarousel #JSCarousel #JSAlgorithm

This tutorial will guide you through building an impressive automatic endless carousel using JavaScript. 🚀 Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/zYzZOVo Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Welcome back 😀 Discover how to harness the power of JavaScript to create a dynamic and engaging carousel that seamlessly loops through your content. From implementing automatic behaviour to handling user interaction, this tutorial has got you covered. 🌐 Today we're going to create a automatic endless carousel with Javascript Follow along and grow your code skills or practice a little bit with me. Tools 🏷️ Icons: https://boxicons.com/ Images: https://www.freepik.es/ Vector SVG: https://worldvectorlogo.com/ 🕛🕛 Timestamps 🕛🕛 0:51 Creating our HTML content 3:37 CSS 6:36 CSS Grid -- using Grid Areas 11:17 mediaQueries 12:53 JavaScript 14:10 Next function 19:46 Prev function 20:58 HandleChanges function 21:38 First Bug 21:58 Solution of the first bug 23:01 How to get the initial image? 24:04 How to make our carousel automatic 26:15 Play and Pause actions 29:15 AutoPlay function Please share the video and the other videos too to grow the comunity Subscribe to the channel for more! Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #endlessJSCarousel #JSCarousel #AutoplayCarousel

Codepen 💻 : https://codepen.io/Oskar_Olortegui/pen/JjmLRNj Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Welcome back 😀 Today we're going to see what problems we encounter while creating a CSS carousel. And we will see one way (because there are many ways to create a carousel) to solve a few bugs until we get our final result. Please, have fun, follow along the video and discover the intricacies of creating a responsive carousel that seamlessly adapts to different screen sizes. Learn about CSS techniques, flexbox, and media queries to overcome the obstacles you might encounter during the development process. 🌐💻 🕛🕛 Timestamps 🕛🕛 0:50 Creating our HTML content 2:06 CSS part 1 3:19 CSS Pseudo-selecto and CSS sibling combinator 5:27 The main logic of creating a carousel using CSS only 6:07 completing the CSS part1 7:20 Responsive Images? 13:19 The problem, The bug. 14:28 Creating a new CSS file 16:24 Giving a solution? 19:09 Conclusion. The villian was that transition property applied to the .carousel-images div Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #CSSCarousel #CSSSlider #CSSResponsive

Ready to have some fun while exploring the power of React Hooks? This video tutorial is the perfect opportunity! Let's play Hangman together and discover how React Hooks can enhance the gaming experience. 🚀 Responsive hangman Game with categories. GitHub 😸 https://github.com/AlephOlortegui/react_hangman Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Challenge your word-guessing abilities and witness the simplicity and flexibility of React Hooks in managing state and components. From useState to useEffect, you'll see how Hooks streamline the game development process. 🌟 This is the Second part - Same project but with Hooks Watch the previous video for more detailed explication about the project 👀https://youtu.be/9y08qtcnMW4👀 Please follow along and have fun with me. This is NeoDev 👽 - Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 0:38 Watch the previous Video with React Classes 👀https://youtu.be/9y08qtcnMW4👀 ✅ 1:24 Creating a Functional Component ✅ 5:40 generateButtons method ⭐ ✅ 7:13 GuessedWord method ✅ 9:15 HandleGuess method ❗⭐ ✅ 17:41 Restart button method ✅ 24:37 A new Bug ❗❗❗⭐ Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #ReactHangmanGame #BegginerReactProject #ReactHooks

Ready to have some fun while sharpening your React JS skills? This video tutorial is a perfect blend of entertainment and learning. Let's play Hangman together and explore the power of React JS in building interactive games. 🚀 Responsive hangman Game with categories. GitHub 😸 https://github.com/AlephOlortegui/react_hangman Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Challenge your word-guessing abilities and see how React JS can enhance the gaming experience. From creating components to managing game logic, you'll get hands-on experience while having a great time. 🌟 In this project we will focus on React JS rather than the Styles. And yes we Are going to use Clasess but don't worry I have the same project but with hooks: 👀https://youtu.be/N5RKz-9fbhc👀 Please follow along and have fun with me. This is NeoDev 👽 - Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 0:38 Final view of our Project ✅ 1:58 Creating a React enviorment from scratch ✅ 3:40 Hangman Js component ✅ 5:50 generateButtons method ⭐ ✅ 8:05 Word js comp - list of words to play with ✅ 11:30 Apply new Set() as State ⭐ ✅ 21:09 Reset Method. ✅ 23:04 Adding my images ✅ 2825 HandleChange method - Select input tag ⭐ ✅ 38:04 A new Bug ❗❗❗⭐ Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #ReactHangmanGame #BegginerReactProject #ReactClasses

Discover the power of Sass and its capabilities in creating dynamic and visually appealing elements. Elevate user experience with interactive hover effects that will leave a lasting impression on your visitors. 💫 Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/yLXgdRM Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Hover card with Sass and a little of JS. this as other of my videos are meant for practicing porpuses. I hope you find them useful in anyway! We will see how to animate a card using Sass and JS. This is NeoDev 👽 - Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 0:32 initial HTML structure ✅ 3:11 initial SCSS ✅ 4:00 Mixins and Variables in SCSS ✅ 6:59 Nesting SCSS ✅ 11:27 Apply ellipsis Text ⭐ ✅ 14:07 JavaScript ✅ 18:06 JavaScript - getBoundingClientRect() Method. ⭐ ✅ 19:15 Using restParams - Function argument⭐ ✅ 21:17 transform-origin property ⭐ ✅ 28:20 adding the Hover class ✅ 30:30 Transition mixin ✅ 34:03 NO Delay Transition mixin Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #SassCard #HoverCards #JSevents

📹 Calling all web developers! Don't miss this insightful video tutorial: "JavaScript LocalStorage, Is It Hard to Use?" 🤔💡 Curious about LocalStorage and how it can simplify data storage in your web applications? This video has got you covered! Dive into the world of JavaScript LocalStorage and discover how easy it is to implement and utilize. 🚀💻 Learn the ins and outs of LocalStorage, from storing and retrieving data to handling key functionalities. Demystify the complexities and explore the power of this handy browser feature. 🗃️🔑 Let's review the basics of JavaScript LocalStorage. This can give you an idea how to create a TodoList afterwards. Any CRUD operation could use the LocalStorage API depending of your what you want with your personal project. I am NeoDev, Let's grow together!

Just a simple HTML Crash Course Start your journey in the world of web development with HTML. Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Post of: "Target="_blank" the most underestimated vulnerability ever" Link: 👀https://www.instagram.com/p/CNHKL2XAXC5/ 👀 This is NeoDev 👽, Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 3:19 Explaining each part of the HTML document ✅ 3:50 initial CSS ✅ 8:23 Your first Tags! ⭐ ✅ 15:12 Comments ✅ 13:28 Anchor Tag. ✅ 15:13 "Target="_blank" the most underestimated ⭐ ✅ 15:35 Buttons ✅ 16:33 Images ✅ 19:50 Website Icon ⭐ ✅ 21:03 Lists ✅ 22:28 Inline - Block elements - CSS Spoiler ✅ 23:24 ID - Class attributes - CSS Spoiler ✅ 24:05 Tables ✅ 28:14 Semantic Elements ✅ 30:00 Inject other content into your page. ✅ 31:43 Forms - Basics ⭐⭐⭐ ✅ 37:34 Forms - Radio Inputs and Checkboxes ✅ 40:11 Forms - Select element ✅ 45:30 Forms - Datalists ✅ 47:40 Style tag - CSS Spoiler ✅ 49:03 Hands on! Practice everything! Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #webdev #htmlcourse

Ready to create a responsive menu for your website? Look no further! This step-by-step video will guide you through building your first responsive menu using JS and CSS. 🚀 Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/eYReMKb Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 A simple Responsive page using CSS and JS por a responsive Menu With an amazing design. A little bit of flex box and CSS animation. Learn how to implement a dynamic menu that adapts beautifully to different screen sizes. With the power of JS and CSS, you'll gain the skills to create a seamless navigation experience for your users. 🌐 This is NeoDev 👽, Let's grow together! 🕛🕛TimeStamps🕛🕛 ✅ 0:35 initial HTML structure ✅ 3:50 initial CSS ✅ 5:36 Styling the Header ✅ 8:40 CSS the Section ✅ 9:40 CSS Left section side. ✅ 13:05 CSS right side ✅ 14:58 CSS the middle bottle ✅ 16:49 Using the Filter - Drop Shadow Property ⭐ ✅ 18:26 Media Queries ⭐ ✅ 19:59 Make the Header Responsive Step by Step ⭐⭐⭐ ✅ 22:43 HTML burger icon menu ✅ 25:10 JS DOM manipulation ✅ 26:27 Active class to each line of our Burger icon ✅ 28:05 Initial values/properties for our Nav. ✅ 33:26 Formula Animation Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #ResponsiveCSSMenu #SinglePageCSS #CoronaCSS

Ready to unleash your creativity? This video will walk you through the steps to design a stunning and eye-catching card using CSS. Get ready to add some flair to your web projects! 🚀 Learn how to apply CSS techniques and tricks to bring your designs to life. From gradients to animations, this tutorial will help you master the art of creating visually striking cards. 🌈💫 Simple Card for Beginners with CSS and JS Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/eYMNdWP Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Review 👽 --- We use data HTML attribute -- Toggle JS classes -- JS Automatic Counter 🕛🕛TimeStamps🕛🕛 ✅ 0:41 initial HTML structure ✅ 4:30 initial CSS ✅ 6:30 CSS circular shape ✅ 20:03 HTML/CSS modal ✅ 25:28 setting initial values/properties ✅ 26:05 Testing the active class ✅ 27:43 JavaScript - DOM manipulation ✅ 29:40 Adding Transition to our modal ✅ 30:15 What is JS Recursion? ⭐ ✅ 30:35 Using the Data attribute in our HTML ✅ 36:24 How to change the counter format? ⭐ Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #CSSCard #JSCounter #HTMLdataAttribute

Ready to level up your React JS skills? This beginner-friendly video will guide you through building a hilarious 😂 jokes app using React JS ⚛ and leveraging the power of LocalStorage. Codepen 💻 : https://codepen.io/Oskar_Olortegui/pen/XWPOWxa Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Remember guys I ommited the CSS part in order to focus with the JS and React JS part - The logic. What will we see here? ✅ Async code with Axios ✅ React basic Hooks ✅ ES6 Destructoring, spread operator, ternary operator. ✅ LocalStorage ✅ Votes action (Counter) ✅ Handler Events (onClick , click events) ✅ Sort Data Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #ReactJokesApp #ReactJokesGenerator #ReactLocalStorage

Hi everyone, this is NeoDev. Codepen 💻 : https://codepen.io/Oskar_Olortegui/pen/zYJVKxv Watch the most recent videos https://www.youtube.com/@AlephNeoDev/videos 👀 Learn how to leverage the power of Sass and JS to build elegant and user-friendly mobile-first websites from scratch. Master the art of responsive design and impress your audience on any device! 💪 We will practice our JS skills by toggling classes, and deals with animations This is a responsive landing page with the following features. ✅ How to create a respnsive menu ✅ How to create an CSS mansory layout ✅ How to set a section among other parts of your page. ✅ How to embed a video ✅ How to toggle content to display. ✅ How to add a "Chat support" Resources: Svg logos at https://worldvectorlogo.com/ Free icons no sign up needed: https://boxicons.com/ I know guys the video is quite long, but it's worth it. Who am I? 🔍 I am just a new developer trying to learn and grow and I would like you to join me in this journey GitHub 😸 https://github.com/AlephOlortegui?tab=repositories Codepen 💻 https://codepen.io/Oskar_Olortegui #ResponsiveMenu #CSSMansoryLayout #LandingPage