잠시만 기다려 주세요.
Orc Dev
2024. 8. 19.
Looking to become a web developer? In this video, we break down the 5 steps you need to take and have to become a pro in web development. Start your journey today! Next video to watch: https://www.youtube.com/watch?v=BfQZ-nTcCKc&ab_channel=OrcDev ⚔️ Join The Horde - Newsletter: https://www.orcdev.com/newsletter - Discord: https://discord.com/invite/uFB5YzH9YG - Github: https://github.com/TheOrcDev Some of the projects to check: Connector: https://github.com/TheOrcDev/orcish-openai-connector AI Framework: https://github.com/TheOrcDev/orcish-ai-nextjs-framework Orcish Admin: https://github.com/TheOrcDev/orcish-admin 00:00 Intro 00:43 Step 1 02:03 Step 2 03:35 Step 3 04:15 Step 4 05:04 Step 5 05:52 Outro #webdevelopment #orcdev #5steps #react #nextjs #typescript #backend #frontend
이번 영상에서는 모바일 앱 개발자들이 걱정하는 내용들입니다. 웹 개발자들보다 어떻게 보면 먼저 모바일 앱 개발에서는 미래가 어렵다 이런 이야기가 나왔는데요, 왜 그랬을까요? 오늘도 영상을 봐주셔서 감사합니다. 구독과 좋아요를 부탁드려요~ #개발자 #앱 #모바일앱 #웹개발 #앱개발
2024. 10. 7.
API 설계 방법론과 이 때 적용할 다양한 원칙, 그리고 이를 바탕으로 하는 실제 설계 실습 등을 포함하는 API서비스 제작자에겐 길라잡이 책입니다. 4강 교안 : https://docs.google.com/presentation/d/1dgMiUCoVLApc6NUzcaYidrfJYvwlXHR5WWOmORoAMsc/edit?usp=sharing
2024. 6. 27.
In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript. Code: https://codepen.io/bradtraversy/pen/oNVKXBo 20 Projects Course: https://www.traversymedia.com/20-Vanilla-JavaScript-Projects Vanilla Projects Repo: https://github.com/bradtraversy/vanillawebprojects Blog Post: https://www.traversymedia.com/blog/product-filtering-ui 0:00 - Intro 2:02 - Start The HTML 4:35 - Navbar / Search Area 9:00 - Main Products & Categories Area 14:26 - Hardcode HTML Items 19:30 - Start The JavaScript 20:25 - Select DOM Elements & Init 22:42 - Loop Over Products & Create Elements 27:53 - Refactor To Function 29:22 - Update Cart Item Count 35:23 - Filter Products
2024. 2. 27.
React Responsive, Fullstack, Ecommerce App Tutorial from scratch. We will be using React, Material UI, Stripe, Formik, Yup, Strapi, and Redux Toolkit to build this entire application. This application will allow you to add products into a cart, have a form to fill out information and make payments through Stripe with a backend supported by Strapi. Links: create react app: https://create-react-app.dev/docs/getting-started material ui: https://mui.com/material-ui/getting-started/installation/ formik: https://formik.org/docs/overview#installation yup validation: https://github.com/jquense/yup google fonts: https://fonts.google.com/ react responsive carousel: https://github.com/leandrowd/react-responsive-carousel redux toolkit: https://redux-toolkit.js.org/tutorials/quick-start strapi: https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html stripe dashboard: https://dashboard.stripe.com/test/dashboard stripe quickstart: https://stripe.com/docs/billing/quickstart stripe code: https://stripe.com/docs/checkout/quickstart stripe api ref: https://stripe.com/docs/api/checkout/sessions/create stripe api keys: https://dashboard.stripe.com/test/apikeys github completed app: https://github.com/ed-roh/react-ecommerce/tree/master images: https://github.com/ed-roh/react-ecommerce/tree/master/client/src/assets data for strapi items: https://github.com/ed-roh/react-ecommerce/blob/master/client/src/assets/strapi-mock-data/strapi-item-inputs.json ——————————— Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1 for more web development and web 3.0 blockchain tutorials! ——————————— Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now. I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients. Chapters: 0:00 Create a Complete React Ecommerce Website from Scratch 4:04 Strapi Installation and Setup for Backend 13:11 React Ecommerce Frontend Installation and Setup 17:24 Theming Setup 24:50 React Router Setup 27:28 React and Redux File and Folder Architecture 34:15 Navbar 44:44 Redux and Redux Toolkit Setup building CartMenu 1:23:55 Individual Item Component 1:39:19 Home Page 2:22:17 Footer 2:30:56 Item Details Page 2:54:24 Checkout Pages and Forms with Formik and Yup 3:45:27 Stripe Setup and Integration 4:10:03 Final Complete Ecommerce Demo and Summary 4:11:40 Complete Ecommerce Website Built Fully in React
2022. 11. 2.
Tutorial😇 to create Apple iPhone 14 landing page using ThreeJs + ReactJS Demo Link🖤: https://apple-iphone14.vercel.app/ ----------------------------------------------- Need Web Development or AI Solutions Services? 🚀 Let's bring your ideas to life! Contact Me From Here: https://tally.so/r/wdlj0N ----------------------------------------------- Blog📖: https://devdreaming.com Hi there 👋, In this video, We are going to create cool landing page for Apple iPhone 14 Pro Max where we will render 3D model using ThreeJs and add scrolling animations using GSAP. Here I have used different libraries to render 3D model in a React application and made a unique design, You can check the demo link. For this project, we're going to use, ▶️ React JS (CRA) ▶️ GSAP for scrolling animations ▶️ styled-components for styling ▶️ react-three-fiber and react-three-drei to render 3D model ----------------------------------------------------------------------------------------------------------- Starter CODE: ➡ Link 💚: https://github.com/codebucks27/Apple-iphone-3d-landing-page-starter-Code Final CODE: ➡ Link 💚: https://github.com/codebucks27/3D-Landing-page-for-Apple-iPhone ----------------------------------------------------------------------------------------------------------- Don't forget to watch the whole video, we're going to learn a lot of stuff like, ▶️ How to render 3D model in ReactJS applications ▶️ How to create Scrolling effects using Gsap ▶️ How we can leverage the advantages of Context API ▶️ How to use ThreeJS in React JS Timestamp⌛: Channel Intro @00:00:00 Intro + Demo @00:00:10 Setup @00:06:00 Adding Basic Styles @00:09:32 Quote Section @00:15:25 Hero Section @00:31:45 Rendering 3D Model @00:40:15 Adding Animation Using GSAP @00:56:00 Design Section @01:17:15 Display Section @01:29:30 Processor Section @01:44:10 Battery Section @01:56:00 Color Section @02:08:05 Animating 3D Model @02:26:20 Camera Section @02:44:00 Pricing Section @02:58:55 Using Context API @03:20:47 Adding Loading Screen @03:36:35 Making Website Responsive @03:40:50 Final touch @04:19:20 Watch the full video to understand, so that you can easily build and customize your own website. [𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬] 𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀! Twitter🐤 : https://twitter.com/code_bucks LinkedIn 🔗: https://www.linkedin.com/in/codebucks/ Instagram 📫: https://www.instagram.com/code.bucks Email 📧: codebucks27@gmail.com In upcoming videos, I'm going to create lots of cool stuff with JavaScript and React so make sure to subscribe. Like, Sub🥂 & Share! ♥ Learn More About, 🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ] https://youtu.be/Ra1Fsa9YJCk 🔥Create an NFT Collection Website Landing page with React JS [Mobile Responsive] https://youtu.be/edr2o59Twrs 🔥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ] https://youtu.be/jcohAIaSy2M Build Responsive website with ReactJS, Styled-Components & GSAP❣️: https://youtu.be/aAEfBxcGpJ8 Build Devto Clone in React: https://youtube.com/playlist?list=PLjxZxD6BDkebDKxYH4El8P4Obb5VzcGlX Build Awesome stuff with ReactJs (Playlist) : https://youtube.com/playlist?list=PLjxZxD6BDkebOPXoqccGpiinfdY9zybXm React Advanced Topic (Playlist) : https://www.youtube.com/playlist?list=PLjxZxD6BDkeZoRU6v7gMyQ7BirGD6u0Lt If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below. Thank You for watching! 😉 Buy me a coffee and Support this channel🥰: https://www.buymeacoffee.com/CodeBucks Where else you can find me: Twitter🐤 : https://twitter.com/code_bucks LinkedIn 🔗: https://www.linkedin.com/in/codebucks/ Instagram 📫: https://www.instagram.com/code.bucks Email 📧: codebucks27@gmail.com Disclaimer: All videos are for educational purposes only, please use them wisely. #AppleIphoneLandingPage #landingpage #reactjs
2022. 9. 13.
🏆 멤버십 가입 감사합니다! seongjun Min님, jmin님, 김민준님, 온상온상님, For my something님, jun님, kan58dan님, 홍준혁님, 도건호님, kenny님, Jason님, orange007님, Toots Kim님, Economic님, Charles Gardes님, 나비는바다겡서님, Yechan Kim님 😆 너러블 놀러가기 https://www.nullable.cc/ 🔥 잡상훈 채널에 가입하여 혜택을 누려보세요. https://www.youtube.com/channel/UCSQRF8yIhSMVRXhIqLxQnsw/join 📕 출간서적 《쉽게 설명한 자바스크립트》 보러가기 예스24: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=344435187 교보문고: https://product.kyobobook.co.kr/detail/S000213996137 알라딘: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=344435187 📕 출간서적 《UX 디자인의 모든 것》 보러 가기 교보문고 https://product.kyobobook.co.kr/detail/S000001842178 예스24 https://www.yes24.com/Product/Goods/99397396 알라딘 https://www.aladin.co.kr/m/mproduct.aspx?ItemId=269572938 📩 비즈니스 문의 : joshephan0204@gmail.com 🌎 널엔터프라이즈: https://nullenterprise.com 🏝️ 플렉스웹: https://flexweb.io/ 🏠 블로그: https://hansanghoon.com/
2024. 8. 16.