์ ์๋ง ๊ธฐ๋ค๋ ค ์ฃผ์ธ์.
CodeBucks
2023. 9. 4.
Tutorial๐ to build a amazing static blog using Nextjs, Tailwind css and contentlayer that has great lighthouse score. Demo Link๐ค: https://create-blog-with-nextjs.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 ----------------------------------------------- Contentlayer documentation link (Temporary): https://website-git-new-landing-page-schick.vercel.app/docs ----------------------------------------------------------------------------------------------------------- Starter CODE: โก Link ๐: https://github.com/codebucks27/Nextjs-contentlayer-blog Final CODE: โก Link 1๐(Give โญ to the repo): https://github.com/codebucks27/Nextjs-tailwindcss-blog-template โก Link 2๐(If you want to support the channel): https://codebucks.lemonsqueezy.com This link contains all the code which is used in the Video ๐ดNOTE: At @06:55:15 we have created one file called ThemeScript.js, there is no need to do that instead just add id and strategy to the script that is in the layout.js file. ----------------------------------------------------------------------------------------------------------- Hey there ๐, In this comprehensive coding tutorial, you'll learn how to create a stunning static blog website with Next.js, Contentlayer, and Tailwind CSS. We'll cover everything from building a homepage, blog pages, category pages, an about page, and a contact page, to implementing powerful SEO strategies for higher Google rankings. Our blog features both dark and light themes, offering a minimal and elegant design that's fully responsive on mobile devices. Plus, you'll discover how to showcase your Markdown-based blogs easily on this website. For this project, we're going to use, โถ๏ธ Next Js โถ๏ธ Tailwind CSS for styling โถ๏ธ Contentlayer to render Markdown blogs โถ๏ธ Supabase to count and display blog page views โถ๏ธ Lottie Animation โถ๏ธ React hook form โถ๏ธ Next Sitemap to create sitemap of the website โถ๏ธ Google's structured json-ld schema for SEO Don't forget to watch the whole video, we're going to learn a lot of stuff like: โถ๏ธ Setting up a Static Blog with Next.js โถ๏ธ New Next.js App router โถ๏ธ Designing a Beautiful Homepage โถ๏ธ Creating Engaging Blog and Category Pages โถ๏ธ Crafting an Informative About Page โถ๏ธ Building an Interactive Contact Page โถ๏ธ Implementing Powerful SEO Techniques โถ๏ธ Adding Dark and Light Themes โถ๏ธ Ensuring Mobile Responsiveness โถ๏ธ Showcasing Markdown Blogs โถ๏ธ Different methods to highlight code blocks and use themes Watch the full video to understand, so that you can easily build and customize your own website. Timestampsโ: Intro + Demo @00:00:00 Setup and Installation @00:09:34 Tailwind CSS Setup, Dark Mode and project files @00:12:58 Adding Fonts @00:18:33 Navbar Component @00:26:20 Setup Contentlayer@00:45:55 How to render a Blog @01:07:55 Creating Home Cover Section @01:12:35 Featured Posts Component @01:33:40 Recent Posts Component @01:49:35 Footer Component @02:00:10 Blog Page @02:15:55 Creating TOC Component @03:01:30 Category Page @03:20:15 About page @03:44:55 Contact page @03:57:50 Insights Component @04:13:35 Store blog views using Supabase @04:23:05 Adding SEO @04:48:40 Adding Dark Mode @05:18:00 Making it Responsive @05:30:00 Adding Sitemap @06:38:48 Image Optimization @06:42:36 Adding Favicon and manifest file @06:48:32 Adding google's structured json-ld for SEO @07:01:35 ๐๐ผ๐น๐น๐ผ๐ ๐บ๐ฒ ๐ผ๐ป ๐ ๐๐ต๐ฒ๐ฟ๐ฒ ๐'๐บ ๐๐ต๐ฎ๐ฟ๐ถ๐ป๐ด ๐น๐ผ๐'๐ ๐ผ๐ณ ๐๐๐ฒ๐ณ๐๐น ๐ฟ๐ฒ๐๐ผ๐๐ฟ๐ฐ๐ฒ๐! 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, ๐ฅHow to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion๐ https://youtu.be/Yw7yWHigGKI ๐ฅโญBuild Feature Rich Crypto Screener App with Tailwind CSS https://youtu.be/JPlVb3t6kx8 ๐ฅBuild awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP https://youtu.be/cT160dOzpGY ๐ฅBuild a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ] https://youtu.be/Ra1Fsa9YJCk ๐ฅBuild a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ] https://youtu.be/jcohAIaSy2M If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below. Thank You for watching! ๐ 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. #nextjs #tailwindcss #blogwebsite
RESOURCES โ Join the LearnVue+ Waiting List - https://learnvue.co Get early access to videos, exclusive content, interactive code challenges, and more. follow me on twitter https://twitter.com/mattmaribojoc #vuejs #vue #javascript #webdev
2024. 9. 10.
This End-to-End Machine Learning course will help you with core concepts and advanced MLOps integration. You will learn how to: โจ Conduct thorough EDA to craft compelling data narratives. โจ Engineer features with a deep understanding of why and how. โจ Implement a single model with rigorous testing and validation. โจ Write scalable, defensive, and readable code using design patterns. โจ Integrate MLOps with tools like ZenML & MLflow for experiment tracking and deployment. Before starting this project, read this initial doc: https://docs.google.com/document/d/108EMtdWOnXZp5UTKdHYrL9I95CUQf9FfABa1Wh-vEM8/edit You can buy the source code here: https://topmate.io/ayush_singh13/1192098 Course developed by @AyushSinghSh
2024. 9. 25.
๐ง๐ปโ๐ป ๋ ธ๋ ๋ฐฑ์๋ 1๋ ์ฐจ์ ๊ณ ๋ฏผ ๐ ๋งํฌ๋ชจ์ : https://solo.to/dongjun_yang ๐ฅ ์ด๋ ฅ์ํ๋งค - ํ ํ๋ฆฟ/ํฉ๊ฒฉ์ด๋ ฅ์/๊ธฐ์ ์ถ์ฒ ๐ฆ ์ ๋ฐ๋ฏธ๊ฐ์ - ์ค์ ํ๋ก์ ํธ ์ค๊ณ ๐ ์ธํ๋ฐ๊ฐ์ - AWS์๋ฒ๋ฆฌ์ค ๐ ์ธํ๋ฐ๊ฐ์ - AWS ElasticSearch ๐ ์ธํ๋ฐ๊ฐ์ - Express + AWS EC2 RDS ๐ ์ธํ๋ฐ๊ฐ์ - ์ด๋ ฅ์ ํฌํธํด๋ฆฌ์ค ๐ ์ธํ๋ฐ๊ฐ์ - ํ๋ก ํธ์๋ ๋ก๋๋งต(์ ์์ฑ ์ฆ์ ) ๐ ์ธํ๋ฐ๊ฐ์ - ๋ฐฑ์๋ ๋ก๋๋งต(์ ์์ฑ ์ฆ์ ) ๐ง ์ด๋ ฅ์, ํฌํธํด๋ฆฌ์ค ์๋ด ๐ ์ ์์ฑ (ํ๋ก ํธ์๋ ๋ก๋๋งต) ๐ ์ ์์ฑ (๋ฐฑ์๋ ๋ก๋๋งต) ๐ ๋์ค์ฝ๋ ์ปค๋ฎค๋ํฐ - ๊ตฌ๋ ํ์๊ณ ๋์ค์ฝ๋์ ์ง๋ฌธํด๋ณด์ธ์!
2024. 8. 7.
์๋น ๊ฐ ๋ ๋๊ผฌ๋ ์ถ์ ์ง ํฅ์์ ์ํด AI ๋์ ์ ์ ๊ทน ๊ฒํ ํ๋๋ฐ...! AI ์์ด์ ํธ๋ก ์ถ์ ์๋ํํ ๋ฐฉ๋ฒ feat. ์ก์..... ์ค๋์ Crew AI ์ ๋งค๋ ฅ์ ์๋ ค๋๋ฆผ...! #crewai #ai . 0:00~1:03 : Intro 1:04~3:05 : AI Agents? 3:06~5:15 : CrewAI Agents 5:16~7:07 : Tasks 7:08~9:11 : Tools 9:12~5:18 : Crew / Results 11:27~11:54 : Outro . ๐ฅ ํ์คํ GPT (2024 ์ต์ ๋ฒ์ ) ๐ฅ https://bit.ly/3VhITwB . ๐ ์ง์ ๋ง๋ค๋ฉด์ ์ฝ๋ฉ ๋ฐฐ์ฐ๊ธฐ (*๋ฌด๋ฃ*) ๐๐ป https://bit.ly/46W9XVC . ๐ฅ ๋น๊ทผ๋ง์ผ ํด๋ก ์ฝ๋ฉ (2024 ์ต์ ๋ฒ์ ) ๐ฅ https://bit.ly/4aaaZyK
2024. 6. 16.
Learn the simplest way to build a contact form using Next.js, Shadcn, V0, and Resend. Here is the repo: https://github.com/TheOrcDev/orcish-contact-form 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 My first SaaS project, register and get 5 free tokens! https://www.textualgames.com/ #webdevelopment #orcdev #contactform #resend #shadcn #v0 #react #nextjs #typescript
2024. 9. 8.
--- ์๋ ์ฑ๋๋ค์์๋ 44bits๋ฅผ ๋ง๋ ์ ์์ต๋๋ค. - 44bits.io ๋ธ๋ก๊ทธ: https://www.44bits.io - ๊ฐ๋ฐ ํ์บ์คํธ: https://podcast.44bits.io - ํธ์ํฐ: https://twitter.com/@fortyfourbits - ํ์ด์ค๋ถ: https://facebook.com/fortyfourbits
2024. 8. 31.