Code And Create
Code And Create
  • Видео 360
  • Просмотров 1 082 199
Build a Portfolio Website Using Next JS, Tailwind CSS & Framer Motion | Part 4
#ReactJS #NextJS #TailwindCSS #FramerMotion
In this video, we continue our 'Build a Portfolio Website Using Next.js, Tailwind CSS & Framer Motion' series by creating the stunning Experience & Education section. Join us as we dive into adding animations, interactive effects, and responsive design to make your portfolio truly stand out. Watch till the end to learn all the tips and tricks for building a captivating Experience & Education section!
Check the Website online: nick-portfolio-app.netlify.app/
Part 3 - ruclips.net/video/a3MoKpYyW1o/видео.html
💚 Get Source Code: ko-fi.com/s/f38f991731
✅ Download Assets: drive.google.com/drive/folders/1OYvB749EgbkU8_HtCwveat5uZq6WGnON?usp=sharing
🎯Learn Ho...
Просмотров: 135

Видео

Build a Portfolio Website Using Next JS, Tailwind CSS & Framer Motion | Part 3
Просмотров 57614 дней назад
#ReactJS #NextJS #TailwindCSS #FramerMotion In this video, we continue our 'Build a Portfolio Website Using Next.js, Tailwind CSS & Framer Motion' series by creating the stunning About section. Join us as we dive into adding animations, interactive effects, and responsive design to make your portfolio truly stand out. Watch till the end to learn all the tips and tricks for building a captivatin...
Build a Portfolio Website Using Next JS, Tailwind CSS & Framer Motion | Part 2
Просмотров 73921 день назад
#ReactJS #NextJS #TailwindCSS #FramerMotion In this video, we continue our 'Build a Portfolio Website Using Next.js, Tailwind CSS & Framer Motion' series by creating the stunning Hero section. Join us as we dive into adding animations, interactive effects, and responsive design to make your portfolio truly stand out. Watch till the end to learn all the tips and tricks for building a captivating...
Build a Portfolio Website Using Next JS, Tailwind CSS & Framer Motion | Part 1
Просмотров 1,1 тыс.28 дней назад
#ReactJS #NextJS #TailwindCSS #FramerMotion In this video, we kick off our series, 'Build a Portfolio Website Using Next.js, Tailwind CSS & Framer Motion.' In this first part, we’ll give you a project preview and guide you through setting up the perfect development environment. Check the Website online: nick-portfolio-app.netlify.app/ Part 2 - ruclips.net/video/i71Bel0DlKk/видео.html 💚 Get Sour...
React Tutorial: Color Converter App | How to Build React Color Converter App | RGB to HEX Converter
Просмотров 300Месяц назад
#reactjs #webdevelopment #webdesign #colors In this React tutorial, we'll guide you step-by-step on how to build a fully functional color converter app using React. You'll learn how to convert between RGB and HEX values dynamically, handle state with useState, and manage side effects with useEffect. 💚 Get Source Code: ko-fi.com/s/e9200c37d9 🎯Learn about Top 3 CSS Properties You Might Have Misse...
Top 3 CSS Properties You Might Have Missed | Top CSS Tricks | Unlock Hidden CSS Tricks
Просмотров 477Месяц назад
Discover the top 3 CSS properties that can transform your website! In this video, we unveil 3 powerful yet often overlooked CSS techniques that will elevate your web design game. Whether you're looking to create stunning visual effects, improve performance, or simply add that extra flair to your projects, these hidden gems are essential for any web developer. Learn how to apply graphical effect...
Will AI Replace Programmers? The Truth About AI and Coding
Просмотров 2792 месяца назад
Will AI Replace Programmers? The Truth About AI and Coding
Top 10 Visual Studio Code Extensions You Must Try | Best VS Code Extensions
Просмотров 5942 месяца назад
Top 10 Visual Studio Code Extensions You Must Try | Best VS Code Extensions
React Tutorial: News App with React JS | How to Build a React App | API Integration
Просмотров 8933 месяца назад
React Tutorial: News App with React JS | How to Build a React App | API Integration
Build a Translator App with React & TailwindCSS | Step-by-Step ReactJS and TailwindCSS Tutorial
Просмотров 5093 месяца назад
Build a Translator App with React & TailwindCSS | Step-by-Step ReactJS and TailwindCSS Tutorial
New React 19 Features in 10 Minutes | React 19 Update
Просмотров 1433 месяца назад
New React 19 Features in 10 Minutes | React 19 Update
Top 10 Beautiful Visual Studio Code Themes 2024 | Best VS Code Themes
Просмотров 5 тыс.4 месяца назад
Top 10 Beautiful Visual Studio Code Themes 2024 | Best VS Code Themes
React Tutorial: Creating a Fully Functional Calendar App with React
Просмотров 2,9 тыс.4 месяца назад
React Tutorial: Creating a Fully Functional Calendar App with React
React for Beginners: How to Build a React Quote Generator App
Просмотров 4514 месяца назад
React for Beginners: How to Build a React Quote Generator App
React Tutorial: Building a Live Weather App with React JS | OpenWeatherMap API
Просмотров 5 тыс.4 месяца назад
React Tutorial: Building a Live Weather App with React JS | OpenWeatherMap API
Build a Fun Memory Game: HTML, CSS & JavaScript Tutorial
Просмотров 5465 месяцев назад
Build a Fun Memory Game: HTML, CSS & JavaScript Tutorial
Web Project Ideas in 2024 | Top Web Development Project Inspirations
Просмотров 8135 месяцев назад
Web Project Ideas in 2024 | Top Web Development Project Inspirations
Creating Dynamic Signup Form with HTML, CSS, and JavaScript | How to Create Animated Signup Form
Просмотров 4175 месяцев назад
Creating Dynamic Signup Form with HTML, CSS, and JavaScript | How to Create Animated Signup Form
Creating Stunning Slider: HTML, CSS, and JavaScript Tutorial | How to Create Slider
Просмотров 7835 месяцев назад
Creating Stunning Slider: HTML, CSS, and JavaScript Tutorial | How to Create Slider
Building a Responsive Navigation Menu: HTML, CSS, and JavaScript Tutorial
Просмотров 5136 месяцев назад
Building a Responsive Navigation Menu: HTML, CSS, and JavaScript Tutorial
Building a Responsive Navigation with Hamburger Menu: HTML, CSS, & JavaScript Tutorial
Просмотров 2356 месяцев назад
Building a Responsive Navigation with Hamburger Menu: HTML, CSS, & JavaScript Tutorial
Creating a Puzzle Game with HTML, CSS, and JavaScript | Object-Oriented JavaScript
Просмотров 7486 месяцев назад
Creating a Puzzle Game with HTML, CSS, and JavaScript | Object-Oriented JavaScript
Building a Stunning Awwwards-Inspired Gallery | HTML, CSS, JavaScript Tutorial
Просмотров 2906 месяцев назад
Building a Stunning Awwwards-Inspired Gallery | HTML, CSS, JavaScript Tutorial
HTML, CSS, JavaScript: Building Gallery with Stunning Hover Effects
Просмотров 1,6 тыс.6 месяцев назад
HTML, CSS, JavaScript: Building Gallery with Stunning Hover Effects
Building Spotify Music App with HTML, CSS, and JavaScript | CSS Neumorphism Design Tutorial
Просмотров 7836 месяцев назад
Building Spotify Music App with HTML, CSS, and JavaScript | CSS Neumorphism Design Tutorial
Building a Stylish Gallery with HTML, CSS, and JavaScript | Cool Hover Effects Included
Просмотров 6126 месяцев назад
Building a Stylish Gallery with HTML, CSS, and JavaScript | Cool Hover Effects Included
Step-by-Step: Building a Stylish Video Slider with HTML, CSS, & JavaScript
Просмотров 1,3 тыс.7 месяцев назад
Step-by-Step: Building a Stylish Video Slider with HTML, CSS, & JavaScript
Mastering Navigation Effects: HTML, CSS, & JavaScript Tutorial
Просмотров 5607 месяцев назад
Mastering Navigation Effects: HTML, CSS, & JavaScript Tutorial
Mastering CSS: Create Your Own Stylish Scrollbar | Custom Scrollbar Tutorial
Просмотров 2237 месяцев назад
Mastering CSS: Create Your Own Stylish Scrollbar | Custom Scrollbar Tutorial
HTML/CSS/JS Gallery Mastery: A Step-by-Step Guide
Просмотров 2437 месяцев назад
HTML/CSS/JS Gallery Mastery: A Step-by-Step Guide

Комментарии

  • @kwsim539
    @kwsim539 4 дня назад

    Parts 1 & 2 were a week apart. We are coming up on 2 weeks after Part 3. When can we expect to see Part 4?

    • @codeandcreate
      @codeandcreate 4 дня назад

      Part 4 will be available by the end of this week, there won’t be any delays in the future

    • @kwsim539
      @kwsim539 4 дня назад

      @@codeandcreate Nice! Thanks for the update.

  • @kwsim539
    @kwsim539 5 дней назад

    Adding 'sm:text-sxl' does not affect the size of the icons when you add this to the parent div. Also, the icons do not use 'font-size', they use 'size', (based on the repo doc). The only way to get the icons to change size is to create a class, (e.g., social-icon) and add it to the className of each of the objects in the heroIcons array in the index.js file. Then add this class to either the global.css file or create a Hero.css file in the components folder and import it into the Hero.jsx file. Then add '@apply sm: size-8', (or whatever size-x you like) to the class name.

  • @kwsim539
    @kwsim539 5 дней назад

    According to the Remixicon repo, the actual npm install uses remixicon/react, not remixicon-react. This version, (remixicon-react) is not provided or maintained by Remixicon and has not been updated in the past 4 years. The true Rexicon repo was updated 3 months ago. Wouldn't you want to have the latest version of icons to work with?

  • @JohnSmith-e6n
    @JohnSmith-e6n 15 дней назад

    Great series🎉 Keep up the good work

  • @jiimrood
    @jiimrood 16 дней назад

    That's why client and dev should not meet!!

  • @sepiHEDAYATI-b9n
    @sepiHEDAYATI-b9n 19 дней назад

    hi can you please make a video explain how to add function to it so when they submit the form ill receive an email?

  • @GaryChike
    @GaryChike 20 дней назад

    Thank you George et al!

  • @ProdJBI
    @ProdJBI 20 дней назад

    Hello, first I appreciate the making of this video it is very helpful in learning more about react. My problem however is that when I'm coding along with the video my CalendarApp.css styles aren't showing up on the local host. I deleted everything and restarted in case I missed something, but I can't seem to find what I'm missing. Help would be greatly appreciated!

    • @codeandcreate
      @codeandcreate 20 дней назад

      Thanks. Did you import the css file?

    • @ProdJBI
      @ProdJBI 20 дней назад

      @@codeandcreate Yes I used import "./Components/CalendarApp.css"

    • @ProdJBI
      @ProdJBI 19 дней назад

      ​@@codeandcreate I just found the issue, I had a type in a class name in the CalendarApp.jsx file. Thanks for the assistance though!

  • @tatemo_labs
    @tatemo_labs 22 дня назад

    I would like if you create a bloggin section connecting to Strapi / other thing. Thinking for a developer blog. Great job anyway.

  • @luckyluke7095
    @luckyluke7095 23 дня назад

    Thank you for your great work. Can you please provide index.js file in assets folder?

    • @codeandcreate
      @codeandcreate 23 дня назад

      Thanks. Just updated the assets folder and the file is available now

  • @luckydevelopers
    @luckydevelopers 24 дня назад

    can you provide live preview link to test it

  • @RAVISHARMA-hk5ll
    @RAVISHARMA-hk5ll 24 дня назад

    Excellent tutorial, may god bless you and take care 🙂

  • @vladislavnovoselov3699
    @vladislavnovoselov3699 25 дней назад

    An ineresting one! Keep going!

    • @codeandcreate
      @codeandcreate 25 дней назад

      Thanks, part 2 is coming tomorrow ❤️

  • @novoice27
    @novoice27 27 дней назад

    Thank you for this amazing video. waiting for the next part!.

    • @codeandcreate
      @codeandcreate 25 дней назад

      Thanks, part 2 will be live tomorrow ❤️

  • @EFRESHINDA
    @EFRESHINDA 29 дней назад

    Can i have image what you are using for earth

  • @alan-overthenet
    @alan-overthenet 29 дней назад

    This looks fantastic, thank you. All I need now is a portfolio of projects, happy customers and the ability to make an Ecommerce site - I wish 🤔

  • @innomind11
    @innomind11 Месяц назад

    Is this bro code

  • @matt112fly
    @matt112fly Месяц назад

    why not use react query?

    • @codeandcreate
      @codeandcreate Месяц назад

      React query is a good suggestion, you can modify the app and let us see your version

    • @matt112fly
      @matt112fly Месяц назад

      @@codeandcreate sure, if i dont forget to share my solution

  • @rakeshkumarparida98
    @rakeshkumarparida98 Месяц назад

    Which font you are using ?

  • @annisajasmine614
    @annisajasmine614 Месяц назад

    I have tried to code like tihis video, but I have a lot of error. Maybe you can explain it?

  • @rohith3465
    @rohith3465 Месяц назад

    ✌️👍

  • @doriomer
    @doriomer Месяц назад

    First, thank you for this tutorial 🙏 1. your screen with the code is anoyinglly too small 😥 2. Gnews Api is NOT free but ONLY up to 100 calls per day 🤔 Its a big problem because your app using 9 categories with 10 calls each. If someone wants to complete your tutorial they must use the browser Local Storage Api, or PAY! 3. This tutorial is NOT for begginers. 🤔 Since I'm not a begginer I find this tutorial to be nice and challenging 👍

  • @HAKANKOKCU
    @HAKANKOKCU Месяц назад

    me: plain javascript 😂

  • @I_good_at_alaphabet
    @I_good_at_alaphabet Месяц назад

    Thank you for this video :)

  • @christopherelihualvarezrod4122
    @christopherelihualvarezrod4122 Месяц назад

    zzzz

  • @КопибаралордМаслова

    На JS очень круто сделать что-то подобное 👏

  • @RAVISHARMA-hk5ll
    @RAVISHARMA-hk5ll Месяц назад

    Wonderful experience !!

  • @futboltv17
    @futboltv17 Месяц назад

    I have taken yr course on Udemy and from other ei got to know yr yt channel. Both are good at an extent,however you can still upgrade yourself for master projects which your previous videos were. Now about this video, i have used all these 3 CSS properties in my projects. You can teach about writing-mode , pointer-events ,@supports etc. Well, rest is 💥💥✌🏼✌🏼

    • @codeandcreate
      @codeandcreate Месяц назад

      Thanks for you suggestions. New projects are coming up so stay tuned

  • @tutkubakay8017
    @tutkubakay8017 Месяц назад

    Good job as always

  • @sachinspavadshetty9137
    @sachinspavadshetty9137 2 месяца назад

    Thank you Sir it was a great help. SIr can we get backend for this program.

    • @codeandcreate
      @codeandcreate 2 месяца назад

      Thanks, I doubt to release backend for this particular app but we plan to have the full stack tutorials in the future

  • @RAVISHARMA-hk5ll
    @RAVISHARMA-hk5ll 2 месяца назад

    thanks, for removing fear from AI , I was scared 🙂

    • @Anthony-dj4nd
      @Anthony-dj4nd 2 месяца назад

      While you were typing that A. I. just took your job😅

    • @RAVISHARMA-hk5ll
      @RAVISHARMA-hk5ll 2 месяца назад

      @@Anthony-dj4nd who are you to take my job ?

  • @suman3699
    @suman3699 2 месяца назад

    I have learnt HTML, CSS and JS with you guys on udemy. You people are the best. Looking forward for more ReactJS content or course.

    • @codeandcreate
      @codeandcreate 2 месяца назад

      There is already our brand new React course on Udemy ;)

    • @suman3699
      @suman3699 2 месяца назад

      @@codeandcreate I don't see it, is it available for Indian audience?

    • @codeandcreate
      @codeandcreate 2 месяца назад

      Yes, it is available for everyone, just check our profile, there are two brand new React courses

  • @UNJ-Galgulus
    @UNJ-Galgulus 2 месяца назад

    Yooooo man your so good at scripting

  • @KingBeyu
    @KingBeyu 2 месяца назад

    Hello, I hope this message finds you well. I would greatly appreciate a few minutes of your time for a constructive conversation regarding your Udemy course. If possible, would you be available for a quick call? Thank you in advance for considering my request.

  • @anatolydyatlov963
    @anatolydyatlov963 2 месяца назад

    What trickery is this?!

    • @codeandcreate
      @codeandcreate 2 месяца назад

      It is a built-in package in VS Code called Emmet

  • @riyagupta4946
    @riyagupta4946 2 месяца назад

    is it responsive?

  • @yt159-sj6hd
    @yt159-sj6hd 2 месяца назад

    Nice theme

  • @S-craY
    @S-craY 2 месяца назад

    Увы, но нет)

  • @sidds09
    @sidds09 2 месяца назад

    use a bigger font size in your videos or zoom in-out.

  • @mr.fabian8471
    @mr.fabian8471 2 месяца назад

    thanks!!!

  • @mr.fabian8471
    @mr.fabian8471 2 месяца назад

    Thanks, you're my hero !!!

  • @mr.fabian8471
    @mr.fabian8471 2 месяца назад

    Thanks!!!

  • @arkapravadas8674
    @arkapravadas8674 3 месяца назад

    is the API used free?

    • @codeandcreate
      @codeandcreate 3 месяца назад

      100 HTTP requests per day are free

  • @brsh1190
    @brsh1190 3 месяца назад

    hi. thanks for the tutorial - but I have problem in the moment when you start changing the hardcoded headline in jsx - I did all the same as you did - but still image and text are not defined. Weird - because in console same what you have.

    • @codeandcreate
      @codeandcreate 3 месяца назад

      Hi, thank you. Let me look at your code and will, otherwise it’s hard to find out the problem

    • @brsh1190
      @brsh1190 3 месяца назад

      @@codeandcreate thank you

    • @brsh1190
      @brsh1190 3 месяца назад

      @@codeandcreate did you got links or youtube deleted it?

    • @codeandcreate
      @codeandcreate 3 месяца назад

      It seems that youtube deleted it. Please send it via email. You can find the email address in our profile

    • @brsh1190
      @brsh1190 3 месяца назад

      @@codeandcreate I wrote on Instagram! thanks

  • @martinyates353
    @martinyates353 3 месяца назад

    Many thanks for creating these tutorials I've now completed the translator and weather apps and have really enjoyed doing both.

  • @arif5268
    @arif5268 3 месяца назад

    00:04 Building a live weather app with React JS 02:28 Setting up the React application using Node.js and npm 07:49 Setting up project structure and creating components 10:29 Creating JSX file and importing components and CSS file. 16:04 Displaying images in React application 18:52 Styling the Weather App with CSS and importing Google Font 23:20 Aligning elements using CSS Flexbox 25:40 Configuring flex layout in React for vertical alignment 30:09 Styling input field and placeholder in React 32:30 Styling input field, weather type, and temperature 37:09 Styling weather data with CSS 39:26 Customizing weather data display and fixing interface issues 44:20 Building a Live Weather App using React JS 46:42 Creating and Managing State in React using useState hook 51:36 Updating state based on input changes 53:56 Updating location using key press event and dynamic temperature display. 59:10 Building a live weather app with React JS using OpenWeatherMap API. 1:01:52 Using useEffect hook to fetch weather data for default location 1:07:05 Setting up weather images and background images based on weather type. 1:10:22 Setting background colors and images based on weather conditions 1:15:41 Defining days of the week and months using arrays and date methods 1:18:46 Creating and formatting the date for display. 1:24:47 Implementing loader GIF to hide broken image during page reload 1:27:48 Customizing loader in CSS for a better look