์ ์๋ง ๊ธฐ๋ค๋ ค ์ฃผ์ธ์.
Frontend Tribe
2024. 7. 20.
๐จ๐จ Download your video resources here ๐: ๐จ๐จ https://lp.frontendtribe.com/light-saas-landing-page-resource-bundle ๐ Get a FREE 14-day trial of the browser used in this video: Polypane ๐ https://polypane.app/?ref=frontendtribe ๐ Transform your web development skills by building a landing page that captures attention and leaves a lasting impression. In this video, you'll learn to create a digital masterpiece with stunning animations and responsive design using cutting-edge tools like React, Next.js, TailwindCSS, and Framer Motion. This project isn't just about creating a beautiful pageโit's about standing out from the crowd and showcasing your talent to potential employers and clients. ๐ค In this video, you'll learn to: - Master React and Next.js to build lightning-fast, SEO-friendly websites - Gain the skills used by tech giants like Facebook and Netflix, making you a hot commodity in the job market. - Create jaw-dropping animations with Framer Motion - Stand out from the crowd with silky-smooth interactions that will impress potential employers and clients alike. - Implement efficient styling with TailwindCSS - Boost your productivity and create polished designs in record time, allowing you to take on more projects and increase your earning potential. - Transform a Figma design into a fully functional, responsive website - Bridge the gap between design and development, making you an invaluable asset to any team or client project. ๐ Timestamps: 00:00 - Introduction 01:38 - Build Preview 03:00 - Getting Started 09:35 - Design Overview 13:34 - Header Section 25:02 - Hero Section 50:56 - Logo Ticker Section 1:00:24 - Product Showcase Section 1:15:59 - Pricing Section 1:43:46 - Testimonials Section 2:04:08 - Call to Action Section 2:13:41 - Footer Section 2:23:43 - Hero Animation 2:38:30 - Logo Ticker Animation 2:43:42 - Product Showcase Animation 2:48:39 - Pricing Animation 2:53:37 - Testimonials Animation 3:03:56 - Call to Action Animation ๐ Subscribe for more great frontend dev content: https://www.youtube.com/@frontend-tribe?sub_confirmation=1 ๐ Visit our website: https://frontendtribe.com #frontenddev #nextjs #framermotion #saaslandingpage #webdevelopment #codingtutorial #developers ๐ฃ Frontend Tribe is on a mission to transform 10,000 lives through front-end development mastery! ๐ฃ Affiliate links disclaimer: This video description contains affiliate links, which means I may receive a commission if you click on a link and make a purchase. However, I only recommend products I genuinely endorse and believe would be helpful to you. Your support helps me keep creating valuable content like this, so thank you! Attribution disclaimer: Design adapted from 'SaaS Website UI Kit โ Framer Website Kit' by Framer: https://figma.com/community/file/1347551304372055519
2024. 10. 14.
2024. 2. 2.
We've all been in situations where our code errors when we least expect it, blowing up our program and taking down production. It's natural, and totally normal! But it's also preventable. Here's how Gleam does errors better. Writer: Ben Peinhardt __________________________________________ Check out my other socials! ๐ฎ Discord โถ https://discordapp.com/invite/bWrctJ7 ๐ฆ Twitter โถ https://twitter.com/IsaacHarrisHolt ๐ฅ๏ธ Portfolio โถ https://ihh.dev ๐ Blog โถ https://isaacharrisholt.com __________________________________________ Timestamps: 00:00 - Introduction and explanation 01:06 - A two pronged approach 01:44 - In case of emergency 02:35 - The `Result` type 03:54 - Handling errors 05:08 - Cleaning up with `use` 05:55 - Representing errors #gleam #softwareengineer
2024. 7. 14.
๐ EO ๊ธ๋ก๋ฒ ์ฑ๋ ๊ตฌ๋ ํ๊ธฐ ๐๐ป๐๐ป https://bit.ly/3S0Pacc ๐ฝ eo PLANET ๋ด์ค๋ ํฐ ๊ตฌ๋ ํ๊ธฐ ๐๐ป๐๐ป https://bit.ly/3cIKLuL ๊ธ๋ก๋ฒ AI ์คํํธ์ ์ ๊ฟ๊พธ๊ณ ์๋ค๋ฉด ์ฃผ๋ชฉ! ๐ข ๋ค๊ฐ์ค๋ 9์, ๊ฒฝ๊ธฐ๋์์ ๊ธ๋ก๋ฒ ์คํํธ์ ํ์คํฐ๋ฒ์ด ์๋กญ๊ฒ ๋ฑ์ฅํฉ๋๋ค. ์ธ๊ณต์ง๋ฅ ์ฐ์ ์ ์ ๋์ฃผ์๋ค์ด ๋ชจ์ด๋ AI ์คํํธ์ ์ถ์ '2024 ๊ฒฝ๊ธฐ ์คํํธ์ ์๋ฐ South Summit Korea' โจ ๊ฒฝ๊ธฐ๊ฒฝ์ ๊ณผํ์งํฅ์ X ๊ธ๋ก๋ฒ ์คํํธ์ ํ์คํฐ๋ฒ '์ฌ์ฐ์ค ์๋ฐ'์ ๋ง๋จ์ 2024๋ 9์ 25-27์ผ๊น์ง ์์์ปจ๋ฒค์ ์ผํฐ์ ํ๊ต ์คํํธ์ ์บ ํผ์ค์์ ํ์ธํด๋ณด์ธ์-! * ์ด ์์์ ๊ฒฝ๊ธฐ๊ฒฝ์ ๊ณผํ์งํฅ์์ผ๋ก๋ถํฐ ์ ์์ง์์ ๋ฐ์ ๋ง๋ค์์ต๋๋ค.
2024. 9. 2.
#frontend #styledcomponents #shorts
2024. 9. 2.
Github & Additional Content: https://www.codewithantonio.com/projects/twitch-clone PART 1 https://youtu.be/a02JAryRPVU?si=WjpXB_oThWNObQgz Clerk: https://dub.sh/UyH5Jb2 LiveKit: https://livekit.io/ Ngrok: https://ngrok.com/download Nodejs: https://nodejs.org/en Hi all ๐ In this free 14 hour tutorial you are going to learn how to build a Twitch Clone using Next 14. We are going to start with the basics like configuring Next.js, learning the routing concepts, and then slowly go deeper into setting up authentication, database, local tunnels, webhooks, all the way to generating RTMP and WHIP connections to connect to our OBS streaming software. Key Features: - ๐ก Streaming using RTMP / WHIP protocols - ๐ Generating ingress - ๐ Connecting Next.js app to OBS / Your favorite streaming software - ๐ Authentication - ๐ธ Thumbnail upload - ๐ Live viewer count - ๐ฆ Live statuses - ๐ฌ Real-time chat using sockets - ๐จ Unique color for each viewer in chat - ๐ฅ Following system - ๐ซ Blocking system - ๐ข Kicking participants from a stream in real-time - ๐๏ธ Streamer / Creator Dashboard - ๐ข Slow chat mode - ๐ Followers only chat mode - ๐ด Enable / Disable chat - ๐ฝ Collapsible layout (hide sidebars, chat etc, theatre mode etc.) - ๐ Sidebar following & recommendations tab - ๐ Home page recommending streams, sorted by live first - ๐ Search results page with a different layout - ๐ Syncing user information to our DB using Webhooks - ๐ก Syncing live status information to our DB using Webhooks - ๐ค Community tab - ๐จ Beautiful design - โก Blazing fast application - ๐ SSR (Server-Side Rendering) - ๐บ๏ธ Grouped routes & layouts - ๐๏ธ MySQL - ๐ Deployment Timestamps 00:00 Intro & Demo 00:11 Additional content 00:45 Key settings 22:32 Ingress 47:09 OBS crash course 53:45 Livekit webhook 01:10:20 Viewer token 01:34:14 Video component 02:14:27 Chat component 03:01:16 Community component 03:29:14 Header component 03:53:08 Info card 04:35:21 About card 04:57:16 User page 05:18:52 Home page 05:46:28 Search page 06:14:57 Unblock page 06:46:00 Deployment
2023. 12. 12.