- Видео 37
- Просмотров 175 433
Frontend Tribe
США
Добавлен 15 янв 2021
Build and Deploy an Epic Dark-Mode Blockchain Site | Astro.js, TailwindCSS, Framer Motion | Part 2
🚨🚨 Download Your FREE Video Resources Here: 👇
lp.frontendtribe.com/dark-saas-blockchain-site-resource-bundle
🔥 What’s Inside the Resource Bundle?:
- 🎨 Complete Responsive Designs
- 🚀 Starter Template Files
- 📷 All Images and Icons
- 💯 100% FREE!
▶️ If you missed Part 1 of this video series, you can watch it here: ▶️
ruclips.net/video/8PeEKbqE3E0/видео.html
🔔 Make sure you subscribe and turn on notifications - part 3 will be released one week after this video. In that video we'll be completing the project and deploying the whole site for everyone to see! 🔔
👀 Get a FREE 14-day trial of Polypane, the browser used in this video: 👇 polypane.app/?ref=frontendtribe
Welcome to Part 2 of our deep dive into b...
lp.frontendtribe.com/dark-saas-blockchain-site-resource-bundle
🔥 What’s Inside the Resource Bundle?:
- 🎨 Complete Responsive Designs
- 🚀 Starter Template Files
- 📷 All Images and Icons
- 💯 100% FREE!
▶️ If you missed Part 1 of this video series, you can watch it here: ▶️
ruclips.net/video/8PeEKbqE3E0/видео.html
🔔 Make sure you subscribe and turn on notifications - part 3 will be released one week after this video. In that video we'll be completing the project and deploying the whole site for everyone to see! 🔔
👀 Get a FREE 14-day trial of Polypane, the browser used in this video: 👇 polypane.app/?ref=frontendtribe
Welcome to Part 2 of our deep dive into b...
Просмотров: 2 489
Видео
Build an Epic Dark-Mode Blockchain SaaS Site with Astro.js, TailwindCSS, & Framer Motion | Part 1
Просмотров 8 тыс.День назад
🚨🚨 Download Your FREE Video Resources Here: 👇: lp.frontendtribe.com/dark-saas-blockchain-site-resource-bundle 🔥 What’s Inside the Resource Bundle?: - 🎨 Complete Responsive Designs - 🚀 Starter Template Files - 📷 All Images and Icons - 💯 100% FREE! 👀 Get a FREE 14-day trial of Polypane, the browser used in this video: 👇 polypane.app/?ref=frontendtribe In this tutorial, we’re diving deep into buil...
Build a Stunning React Portfolio: Next.js, Tailwind, and CSS Animation | Part 2
Просмотров 16 тыс.14 дней назад
🚨🚨 Download your FREE Portfolio Video Resources Here: 👇: lp.frontendtribe.com/single-page-dev-portfolio-resource-bundle 🔥 What's Inside the resource bundle?: - 🎨 Complete Responsive Designs - 🚀 Starter Template Files - 📷 All Images and Icons - 💯 100% FREE! ▶️ Watch Part 1 of this tutorial series here: ▶️ ruclips.net/video/IHL_r2otyw4/видео.html 👀 Get a FREE 14-day trial of the browser used in t...
Build a Stunning React Portfolio: Next.js, Tailwind, and CSS Animation | Part 1
Просмотров 31 тыс.21 день назад
🚨🚨 Download your FREE Portfolio Video Resources Here: 👇: lp.frontendtribe.com/single-page-dev-portfolio-resource-bundle 🔥 What's Inside the resource bundle?: - 🎨 Complete Responsive Designs - 🚀 Starter Template Files - 📷 All Images and Icons - 💯 100% FREE! 👀 Get a FREE 14-day trial of the browser used in this video: Polypane 👇 polypane.app/?ref=frontendtribe Join us in this video for Part 1 of ...
Create a Stunning AI Landing Page from Scratch (React, Next.js, Tailwind, Framer Motion)
Просмотров 24 тыс.Месяц назад
🚨🚨 Download your video resources here 👇: 🚨🚨 lp.frontendtribe.com/ai-startup-landing-page-resource-bundle 🔥 What You'll Get in the Video Resource Bundle: - 🎨 Responsive Figma Design - 🚀 Starter template files - 📷 All images and icons - 💯 100% FREE! 👀 Get a FREE 14-day trial of the browser used in this video: Polypane 👇 polypane.app/?ref=frontendtribe Join our 4-hour tutorial and master React, Ne...
Build a Stunning SaaS Landing Page with React, Next.js, TailwindCSS & Framer Motion | Full Tutorial
Просмотров 54 тыс.Месяц назад
🚨🚨 Download your video resources here 👇: 🚨🚨 lp.frontendtribe.com/light-saas-landing-page-resource-bundle 👀 Get a FREE 14-day trial of the browser used in this video: Polypane 👇 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...
Create a Stunning Dark Theme SaaS Landing Page: Frontend Dev Tutorial
Просмотров 33 тыс.2 месяца назад
🚨🚨 Download your video resources here 👇: 🚨🚨 lp.frontendtribe.com/dark-saas-landing-page-resource-bundle In this video, you'll level up your front-end development skills to help you land your dream job! Discover how to create a stunning dark SaaS landing page with Next.js and Framer Motion. From structuring your layout to adding smooth animations, I'll guide you through the entire process step-b...
The Ultimate Guide to Flexbox in 12 Demos
Просмотров 8814 месяца назад
In this video, I'll take you through 12 different demos that will unlock 12 concepts about flexbox that you might not have known about. By the end of the video, my mission is to help you start to understand flexbox so well that it becomes a tool you reach for often instead of one that you get frustrated with. Here’s what you’ll see in this video: 0:00 - Introduction 0:32 - Demo 1 1:19 - Demo 2 ...
Staff Level Frontend SOLVES Frontend Mentor QR Code Component Challenge
Просмотров 5525 месяцев назад
In this video, we'll walk through every step of the Frontend Mentor QR Code Component challenge from the design to implementing the HTML and CSS and finally to deploying our final result on Netlify. One of the best ways to learn frontend development is to find new projects to practice with, and this beginner practice challenge is a great one to work on. By the end of this video you'll see how t...
Stop using CSS Hex Values - Use this instead
Просмотров 2405 месяцев назад
In this video, I’ll show you the power of one of my favorite color formats to use with CSS - HSL values. Every frontend developer needs to understand how to manipulate colors effectively using HSL. I'll walk you through this color syntax and teach you everything you need to know to use this effectively in your next website or app. By the end of this video, you'll know how to wield HSL values li...
Amazing Animated Shiny Button in CSS
Просмотров 4515 месяцев назад
In this video, I’ll show you how to create an amazing, subtle CSS shiny button animation that will wow your users and improve your skills. We'll cover how to create this animation and then do a deep dive into how exactly it works. Here’s what you’ll see in this video: 00:00 - Intro 00:34 - Creating the HTML / CSS 01:44 - Creating the Animation 03:11 - How the Animation Works Frontend Tribe is a...
CSS In 60 Seconds
Просмотров 4725 месяцев назад
Ready to learn CSS faster than you thought possible? In this video I break down the core CSS features in one minute flat. Time Codes ⏰ 00:00 Intro 00:13 How to Create a CSS File 00:21 How to Write CSS 00:37 CSS Example 00:49 Selector Cascade
How to Create a CSS File (no downloads needed!)
Просмотров 625 месяцев назад
I break down how to create a CSS file using simple tools you already have installed on your computer. Question - What's your next question about CSS? Leave it in the comments, and it might be featured in one of my upcoming videos! ⏰⏰ Timecodes 0:00 - Intro 00:29 - Create a CSS file with TextEdit on Mac 02:12 - How to Link your CSS to your HTML About: Frontend Tribe exists to help 10,000 people ...
CSS Transitions and Animations For Beginners
Просмотров 1495 месяцев назад
CSS Transitions and Animations For Beginners
How To HyperLink in HTML (Step-by-Step Guide)
Просмотров 1395 месяцев назад
How To HyperLink in HTML (Step-by-Step Guide)
CSS Position: The 5 Types Every Developer Must Know
Просмотров 1886 месяцев назад
CSS Position: The 5 Types Every Developer Must Know
CSS Variables 101: Mastering Custom Properties
Просмотров 1606 месяцев назад
CSS Variables 101: Mastering Custom Properties
Flexbox: Justify and Align Content - Frontend 5
Просмотров 1246 месяцев назад
Flexbox: Justify and Align Content - Frontend 5
CSS Selector Specificity - Frontend Five
Просмотров 386 месяцев назад
CSS Selector Specificity - Frontend Five
CSS Custom Property Inheritance - Frontend Five
Просмотров 616 месяцев назад
CSS Custom Property Inheritance - Frontend Five
what about navbar?
Any way I could I pay for this repo? Or even just the hero section code?
your content is superb!
nice interface
Completed this part also added react-mail for email also change the navbar for specific section and some more touches I need to do as for my projects thanks for helping out man ! Ciao 🥷
Awesome 👏
You're a great teaching. I learn alot watching your videos.
Glad to hear it, thanks!
Good Video, I've enjoy all. Would you do a video about good practices about developing frontend with nextjs/React?
That’s a good idea 👍
nice theme and fonts . which are they
Any one know ka sir na yajo svg use ke hai project ma ya kaha sa download ke hai ku ka mane typescript aur next js ke karni hai to wo nahi ho rhe sahi download please Any one help me
Is it just me or does everyone get enoent errors, problems with files inside of fronted tribe folder ?? Like i can't do anything, everything is red.w
Did you miss doing an npm install?
Hello from where i can get 3d icons ?
They’re included in the resource bundle 😊
Please I want this font name
Bricolage Grotesque 👍
Just completed this part also.. I was mesmerised by your explanation of the animations, nice teaching man 🎉😭❤
Thank you so much 😀
Please, where do you get your assets from. Especially the images
Check the description 🙂
Love from India ❤
Which extension is used for live preview
Browser link in the description 😊
what vs code theme do you use?
I use the Cursor IDE 😌
You are doing good work
I will pray for you and your family and and for your success also.
why i can not get mask-image linear gradient?what is the problem?thanks for you awesome tutorial
For testimonials: [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]
BRO, your video's are ✨. You gonna get popular in no time!
Thanks, I appreciate it 😊
niiice thx
Thanks for the kind words
The intro buenisima ajajaja , Thank you company, it would be great to be able to see some star project where you can write posts, some gallery, images , write posts or have cars to manage it, excellent content
thanks again bro, have nothing to give back to you besides like and subscribe. Very grateful to you for giving us a tutorial like this
That’s enough for sure. Glad I could help!
Awesome video, learned a lot! Where can i find/design images like the shapes you added for my projects?
Google is how I find mine 😆
Thanks bro ❤
Welcome 😊
Uh hoooo....love u brotherrr...🎉
4:53 - Demo 6 important regarding size
Amazing ❤❤❤
Thanks 😊
How many years have you been in design and frontend developing? Btw tysm for video, i didnt actually built this but i got very inspired, the layout in my portfolio is almost same. Also, is this tutorial mostly for ppl looking for job? I mean, theres this happy clients section so im asking
Couldn’t hurt for sure 👍
mentarios Order by Thank you bro , I'm waiting for the second part , I almost finished this first , what I liked most about your channel is that you explain step by step why each thing is done and how to do it , not just copy and paste , I think that's perfect and much appreciated , keep it up you're a great teacher , like and sub
Awesome to hear, thanks 😊
Damnnnn maaannn..!!...Pls upload part 2 asap..so that we can have one of the best landing pages ready with us!!🥹
Coming very soon… 🔜
Hey any reason why I cant use different png's/svg's than yours in the toolbox? Some of mine dont show and the javascript logo is totally yellow for me. Your icons just work...
Yeah, I already fixed them so that they work how I want 😁. Usually it has to do with setting the fill or stroke color to ‘currentColor’
This look's great in most browsers, however it seems to have issues in Safari. Has anyone overcome these?
Might just have to do with using ‘autoprefixer’. Check out the tailwind docs for how to set it up. I usually demo in safari so it should work…
@@frontend-tribe I want to start off saying I love your content. Keep up the great work! Plenty of value here!! Thank you very much. I will check this out. I had a play around myself in the mean time: Issue 1: I ended up having to use the tailwindcss ring class instead of outline, as it was cutting off the rounded corners on the cards. Issue 2: I found the site moved on the horizontal axes, so I added this line to the global css - html, body { @apply overflow-x-hidden; } This then caused an issue with the first card animation due to placing the overflow-x-hidden on the main html and body elements. So I experimented with framer motion to resolve this. There may be an easier approach to this I'm not aware of??
I cant do any className to your icons - so i am forced to use React-Icons instead. How can you write className onto your icon components?
Not sure right off hand… it worked in the video?
@@frontend-tribe its weird though, not the biggest "eeeeh" moment, but still weird 🤣 And it was good you made use of @layer for reuse css classes xD which extension you use for having Long className to wrap auto for next lines?
which text theme do u use in ur vscode?
It’s the Cursor IDE 😊
Great and detailed explanatory video! Is there any extension to view a responsive window? How can I do this on Windows?
Browser link in the description 👍
Finally , the content I was looking for , thank you so much 🥰
You’re welcome 😊
what font u used in this video?
Bricolage Grotesque I believe
@@frontend-tribe thank you so much, thats a great font
Invalid HTTP method/URL pair, lol
For what?
Thank you, I'm served a lot of the star projects and be able to learn how to design it and program it step by step, it is appreciated that you take the time to teach how each measure goes and how to do colors etc, leave like and sub
Awesome 👏
@@frontend-tribe You helped me a lot, I didn't know about that polypane functionality of putting the image on the side and seeing how it's staying, thank you for that tip.
How is this the saas project . Its only frontend . Ther eis nothjng related to blockchain or not even completed
When are you uploading the final part????
That is the final part 😎
hey, when i tried to add new icons, their colors don’t change to the gradient, they show up as the original colored image How can i fix this? Thanks!
You might need to adjust the props - svgs can be tricky sometimes 😅
where is the source code ?
You have to create the source code 😁
yo buddy when is the part two dropping any dates or hints? work work and approach for each section helps a lot
Launching this weekend 🚀
just completed this thanks a ton !
Great to hear! Glad you enjoyed it 😊
I like all your designs, you are the best!
I happen to think they’re pretty great as well 😅
which chrome extension you are using?
Link in the description 😊
Is someone have this complete template repo in Git Hub or other resources ?
Lol, I like how you were so modest about "Rect" users - Facebook, Netflix and Airbnb. I think at this point 46.6% of the websites use React. I think it would be fair to say that EVERY major website uses React at least to some degree.