EGATOR
EGATOR
  • 46
  • 5 319 981
Responsive Personal Portfolio Website Tutorial using HTML CSS & JavaScript with Light Dark Theme
Responsive Personal Portfolio Website Tutorial using HTML CSS & JavaScript with Light-Dark Theme
Hostinger Discount: www.hostg.xyz/SH8cs
Are you looking for a video tutorial that's going to teach you how to build and deploy a modern responsive personal portfolio website using HTML, CSS and Javascript? Then this is the perfect tutorial for you!
In this step-by-step tutorial, you will learn how to create the most beautiful portfolio website on the internet! This projects comes with plenty of modern features such as: light-dark theme, mobile responsiveness, accordion for frequently asked questions, carousel for clients testimonials, fully functioning contact form, beautiful floating navigation, amazing animations and transitions, and more!
Source Code: buymeacoffee.com/egator/e/283325
Become a Patron: patreon.com/egator
part 1: czcams.com/video/ekAbxVNcy8Q/video.html
Google Fonts: fonts.google.com/
Iconscout: iconscout.com/unicons/free-line-icons
SwiperJS: swiperjs.com/
Mixitup: www.kunkalabs.com/mixitup/
Animate on scroll: michalsnik.github.io/aos/
Timestamps:
00:00 Intro (Project Demo)
08:25 Hosting & FREE Domain
12:52 Projects CSS
18:50 Mixitup JS
27:10 Testimonials Slides/Carousels & Swiper JS
41:20 FAQs Accordion
53:00 Contact & Form Submit
01:02:45 Custom Scrollbar
01:03:55 Light/Dark Theme Toggle with JavaScript
01:10:43 Animate On Scroll
01:20:00 Media Queries Responsiveness
01:30:37 How to deploy or upload your website on the internet
Starter files: github.com/egattor/responsive-portfolio-starter
#portfoliowebsite #responsivepersonalportfolio #htmlcssjavascript #responsivewebsitedesign
zhlédnutí: 867

Video

Build & Deploy a Responsive Personal Portfolio Website using HTML CSS & JavaScript
zhlédnutí 1,2KPřed 9 hodinami
Hostinger Discount: www.hostg.xyz/SH8cs Are you looking for a video tutorial that's going to teach you how to build and deploy a modern responsive personal portfolio website using HTML, CSS and JavaScript? Then this is the perfect tutorial for you! In this step-by-step tutorial, you will learn how to create the most beautiful portfolio website on the internet! This projects comes with plenty of...
Beautiful Image Slider using HTML CSS & JavaScript Beginner HTML CSS and JavaScript Project
zhlédnutí 981Před dnem
Beautiful Image Slider using HTML CSS JavaScript - Beginner HTML CSS and JavaScript Project Hostinger Discount: www.hostg.xyz/SH8cs In this step-by-step video tutorial, you will learn how to create a beautiful image slider using html css and javascript. This tutorial is for beginners in web development who want to sharpen their basic skills with projects in HTML, CSS and JavaScript. Source Code...
Simple React Project with useState Hook Build an Accordion using ReactJS and the useState Hook
zhlédnutí 694Před 21 dnem
Simple React Project with useState Hook - Build an Accordion using ReactJS and the useState Hook Hostinger Discount: www.hostg.xyz/SH8cs Learn how to create an Accordion Menu using ReactJS and the useState Hook and CSS Become a patron: patreon.com/egator Source Code: buymeacoffee.com/egator/e/276088
Build & Deploy a Complete Next.js Responsive Personal Portfolio Website Light/Dark Theme Tutorial
zhlédnutí 4,6KPřed 5 měsíci
Hostinger Discount: www.hostg.xyz/SH8cs In this step-by-step Next JS tutorial, I'll teach you how to build and deploy a fully functioning complete personal portfolio website using Next.js 14 and CSS3. Throughout the video, you'll learn some new features that come with the new NextJS 14 and the app router, context api for app-wide state, css variables, css grid and flexbox, css animations and tr...
Complete MERN Stack Project - React Node.JS Express.JS MongoDB Context API JWT Blog App Tutorial
zhlédnutí 32KPřed 6 měsíci
Complete MERN Stack Project - React Node.JS Express.JS MongoDB Context API JWT Authentication Full Stack CRUD Blog App Tutorial Hostinger Discount: www.hostg.xyz/SH8cs In this complete MERN Stack Project tutorial, you'll learn how to create a Fullstack Blog App using React Node.JS Express.JS MongoDB Context API JWT Authentication for beginners! Create a full CRUD MERN Stack Project tutorial fro...
MERN Stack App Tutorial with React Node JS Express JS MongoDB JWT Authentication & File Upload
zhlédnutí 11KPřed 7 měsíci
In this tutorial, you'll learn how to create a MERN Stack App with React Node.JS Express JS MongoDB JWT Authentication & File Upload This is the last part of a 3 part MERN Stack Blog App Tutorial series. Links to the 1st and 2nd video is below. 2024 Responsive React Portfolio Website Tutorial: www.udemy.com/course/react-js-portfolio-website-with-theme-customization/?couponCode=PORTFOLIO2024 In ...
Complete Node JS & Express API Tutorial from Scratch For Beginners | MERN Blog API
zhlédnutí 12KPřed 7 měsíci
In this tutorial, you'll learn how to Create a complete nodejs and express api from scratch. Hostinger Discount: www.hostg.xyz/SH8cs This is the 2nd part of a 3 part MERN Stack Blog App series. Links to the 1st and 3rd video should be below (if you're watching this a two weeks after this upload). 2024 React Portfolio Website Discount: www.udemy.com/course/react-js-portfolio-website-with-theme-c...
Responsive React Blog App Tutorial | MERN Stack CRUD Project Complete Tutorial For Beginners
zhlédnutí 61KPřed 8 měsíci
Responsive React JS Blog Application/Website Tutorial from scratch! Hostinger Discount: www.hostg.xyz/SH8cs In this Tutorial video, I'll teach you how to create a fully complete blog website using React. You'll learn the newest featured in React Router 6, and many tips and tricks when it comes to building React Applications. 2024 Responsive React Portfolio Website Tutorial: www.udemy.com/course...
Build & Deploy a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript
zhlédnutí 15KPřed rokem
Build & Deploy a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript, Personal Portfolio Website Tutorial HTML CSS JavaScript, HTML CSS JavaScript Personal Portfolio Website Full Tutorial, Best Personal Portfolio Website Tutorial HTML CSS and JavaScript Hostinger Discount: www.hostg.xyz/SH8cs 2024 Responsive React Portfolio Website Tutorial: www.udemy.com/course/react-js-po...
Responsive Registration Form using HTML and CSS | SignIn & SignUp Form Design Tutorial
zhlédnutí 6KPřed rokem
Responsive Registration Form using HTML and CSS | SignIn & SignUp Form Design Tutorial Hostinger Discount: www.hostg.xyz/SH8cs Become a patron: patreon.com/egator Get Source Code: www.patreon.com/posts/responsive-form-86173893?Link& In this hands-on tutorial, I'll show you how to create a responsive registration form or signin/signup form using only HTML and CSS. Throughout the video, you will ...
Image Gallery Website Design using HTML and CSS Project Tutorial For Beginners
zhlédnutí 7KPřed rokem
Image Gallery Website Design using HTML and CSS Project Tutorial For Beginners Hostinger Discount: www.hostg.xyz/SH8cs Become a patron: patreon.com/egator Get Source Code: www.patreon.com/posts/image-gallery-85870365?Link& In this tutorial, we're going to design an image gallery using HTML and CSS. This project is targeted to beginners straggling to create beautiful responsive designs using HTM...
Build & Deploy a SmartHome Website with HTML CSS & JavaScript 2023
zhlédnutí 22KPřed rokem
Build & Deploy a SmartHome Website with HTML CSS & JavaScript 2023 Hostinger Discount: www.hostg.xyz/SH8cs (use coupon code EGATOR at checkout for 10% off!) In this complete tutorial, you will learn how to use html, css and javascript to design a smart home website from scratch! 2024 Responsive React Portfolio Website Tutorial: www.udemy.com/course/react-js-portfolio-website-with-theme-customiz...
How To Generate Stunning UI Designs, Logos, Images using AI Midjourney Bot Art Generator
zhlédnutí 6KPřed rokem
Best Portfolio Website Course: www.udemy.com/course/react-js-portfolio-website-with-theme-customization/?couponCode=NEWYEAR1 Hostinger Discount: www.hostg.xyz/SH8cs Do you want to create stunning UI designs, logos, and images using AI? If so, then you need to check out Midjourney Bot Art Generator! This bot can help you generate beautiful designs for your apps, websites, and more in minutes! Mi...
React Notes App Tutorial for Beginners 2023 | React JS Beginner Project Tutorials
zhlédnutí 28KPřed rokem
Hostinger Discount: www.hostg.xyz/SH8cs In this tutorial, I'm going to teach you step-by-step, how to build a modern responsive react notes app from scratch! This might be the best notes app tutorial available on the internet, and this tutorial can give you a good foundation to how react works. Code along with me and by the end of this tutorial, you will have a fully functioning notes app creat...
React Portfolio Website Tutorial From Scratch (2023) Responsive React JS Portfolio Website
zhlédnutí 26KPřed rokem
React Portfolio Website Tutorial From Scratch (2023) Responsive React JS Portfolio Website
React Portfolio Website Tutorial with Theme Customization - React JS Portfolio Website (2022)
zhlédnutí 42KPřed rokem
React Portfolio Website Tutorial with Theme Customization - React JS Portfolio Website (2022)
Responsive React JS Portfolio Website with Theme Customization Functionality
zhlédnutí 10KPřed rokem
Responsive React JS Portfolio Website with Theme Customization Functionality
React Website Tutorial From Scratch - Responsive React Js 18 & React Router 6 Project Tutorial
zhlédnutí 205KPřed rokem
React Website Tutorial From Scratch - Responsive React Js 18 & React Router 6 Project Tutorial
Build & Deploy a Responsive Photography Portfolio Website HTML CSS & JavaScript - Complete Tutorial
zhlédnutí 95KPřed 2 lety
Build & Deploy a Responsive Photography Portfolio Website HTML CSS & JavaScript - Complete Tutorial
Create 5 Responsive Navbar Menu Animations using CSS Keyframes
zhlédnutí 11KPřed 2 lety
Create 5 Responsive Navbar Menu Animations using CSS Keyframes
How to Create Responsive Navigation Bar using HTML CSS and JAVASCRIPT - Responsive Navbar Tutorial
zhlédnutí 13KPřed 2 lety
How to Create Responsive Navigation Bar using HTML CSS and JAVASCRIPT - Responsive Navbar Tutorial
PHP & MySQL Blog App with Admin Panel Tutorial From Scratch PHP & MySQL Tutorial For Beginners
zhlédnutí 174KPřed 2 lety
PHP & MySQL Blog App with Admin Panel Tutorial From Scratch PHP & MySQL Tutorial For Beginners
Responsive Blog App/Website with Admin Panel Tutorial - Full CRUD Blog App PHP & MySQL Project
zhlédnutí 167KPřed 2 lety
Responsive Blog App/Website with Admin Panel Tutorial - Full CRUD Blog App PHP & MySQL Project
HTML SASS CSS & JavaScript Responsive Website Tutorial For Beginners - Complete Hospital Website
zhlédnutí 76KPřed 2 lety
HTML SASS CSS & JavaScript Responsive Website Tutorial For Beginners - Complete Hospital Website
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)
zhlédnutí 1,2MPřed 2 lety
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)
5 Best Icon Libraries For Web Development and How To Use Them Free Icon Packs for Website developers
zhlédnutí 13KPřed 2 lety
5 Best Icon Libraries For Web Development and How To Use Them Free Icon Packs for Website developers
Build A Responsive Multipage Education/School Website using HTML CSS & JavaScript Complete Tutorial
zhlédnutí 657KPřed 2 lety
Build A Responsive Multipage Education/School Website using HTML CSS & JavaScript Complete Tutorial
Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Full Tutorial
zhlédnutí 22KPřed 2 lety
Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Full Tutorial
Responsive SmartHome Website Using HTML, CSS and JavaScript Part 2
zhlédnutí 10KPřed 2 lety
Responsive SmartHome Website Using HTML, CSS and JavaScript Part 2

Komentáře

  • @guylevy5284
    @guylevy5284 Před 15 hodinami

    FORMSUBMIT not working; FORMSPREE working. thanks!

  • @ndongo-rk1mk
    @ndongo-rk1mk Před dnem

    Good video but it wasn’t that easy to follow as a beginner trying to build up a portforlio.

  • @jumbo999614
    @jumbo999614 Před dnem

    Do you tutorial that teach how to upload this MERN to free hosting site?

  • @Prumzy234
    @Prumzy234 Před dnem

    This is really superb. One thing I love about Egator (Earnest) is the fact that he knows how to explain while coding. And his explanations are easily comprehensive. Thanks sir for your tutelage. I don't know if you have like a Coding School or college for young tech enthusiasts, but I'm sure that would be great. Keep it up sir. I'm a big fan of yours ⭐⭐⭐⭐⭐

    • @EGATORTUTORIALS
      @EGATORTUTORIALS Před dnem

      Glad you liked it, brother! I may be working on such school/course in the future though.

    • @Shs_hypeteens
      @Shs_hypeteens Před dnem

      @@EGATORTUTORIALSplease can you check your Petreon messages I sent you a message concerning a refund I was automatically billed just right now thanks 🙏

  • @marpusik1277
    @marpusik1277 Před dnem

    thanks 🙏

  • @mdshadhin4582
    @mdshadhin4582 Před 2 dny

    plz making E-currency website backend php

  • @Prumzy234
    @Prumzy234 Před 2 dny

    Thanks for this tutorial sir. Looking forward for the finished portfolio. 😊😊

  • @Prumzy234
    @Prumzy234 Před 2 dny

    Thanks for this tutorial sir. Looking forward for the finished portfolio. 😊😊

  • @FUNYBOX6
    @FUNYBOX6 Před 2 dny

    Bro I want to buy social media website

  • @marpusik1277
    @marpusik1277 Před 3 dny

    thanks 🙏

  • @JohnProsper-yq5mh
    @JohnProsper-yq5mh Před 4 dny

    The assets are not the right images. They're for another project. Please include the real asset file for this project as I am currently working on it

  • @AsifDawood
    @AsifDawood Před 4 dny

    Very good portfolio project. Keep it up

  • @JohnProsper-yq5mh
    @JohnProsper-yq5mh Před 4 dny

    Please 🙏🏾🙇🏽‍♂️ can you also do a portfolio Tutorial using Bootstrap 5.3?

  • @mandavisahay
    @mandavisahay Před 4 dny

    Thank you for this tutorial...can you pls make a Travel and Tour website using Nextjs, Nodejs, Express js and MongoDB

  • @Dongamoham.18
    @Dongamoham.18 Před 4 dny

    Can you please do the developer portfolio using NextJs and Aceternity UI

  • @AsifDawood
    @AsifDawood Před 8 dny

    Great Video. I just wanted an additional functionality. i.e when you click the small preview that image should come on the screen. I tried with the following code. const cards = document.querySelectorAll('li'); cards.forEach(card => { card.addEventListener('click', ()=>{ const menu = document.querySelector('menu'); newcards=document.querySelectorAll('li'); menu.appendChild(newcards[0]) }) }); But what is happening is that whenever i click the any of the preview image, the first one in the line comes up . I want the preview image that i clicked to come up. Tired with the index etc but not successful. Any one can show how it is done

  • @mandavisahay690
    @mandavisahay690 Před 10 dny

    Hello, can you please make this project using React..

  • @codeurdell2231
    @codeurdell2231 Před 11 dny

  • @joeljacob4484
    @joeljacob4484 Před 13 dny

    How can I subscribe your HTML CSS and JavaScript

  • @rahulgoswami7503
    @rahulgoswami7503 Před 13 dny

    Egator is back!!! 🔥🔥

  • @VishnuVardhan-dc7rt
    @VishnuVardhan-dc7rt Před 13 dny

    Can someone send the github source code link..

  • @melatv7355
    @melatv7355 Před 13 dny

    It been a while 😌i hope you're fine I would like to see how you design using tailwind css, i love the way you normally arrange your css using react js.i want to see how you do it using tailwind

  • @marpusik1277
    @marpusik1277 Před 13 dny

    thanks 🙏

  • @samsiddique4751
    @samsiddique4751 Před 13 dny

    Hope you are fine , please,create a complete website using html scss and js ( frontend only ).

  • @vasukalluru24
    @vasukalluru24 Před 13 dny

    It's not a practical component typically used in websites, please make videos on building real world components like accordion, image light box, image carousel, animated navigation menus and any other real time practical components. Thanks

    • @EGATORTUTORIALS
      @EGATORTUTORIALS Před 13 dny

      Not all projects have to fit websites. Some are just for practice, and to challenge our skills in some fields. I have lots of practical projects btw. Check those out!

  • @alipalvane
    @alipalvane Před 15 dny

    very very good course

  • @sandy_0072
    @sandy_0072 Před 15 dny

    How many forms we can create ?

  • @abdurrohman5009
    @abdurrohman5009 Před 16 dny

    u are the best

  • @dtbrown1335
    @dtbrown1335 Před 16 dny

    This is useless unless you are making your form using form submit and paying a monthly fee.

  • @lekanolaoye
    @lekanolaoye Před 16 dny

    Hi. I'm hoping someone who has completed this video responds to my question. Pls how long do you think it'll take a lazy person to code along through this video and complete the project? I know it's a >2hr video, but it'll definitly take more than that in the real sense.

  • @electricai-tech9217
    @electricai-tech9217 Před 17 dny

    Thank you for this amazing tutorial.

  • @basitahmed7772
    @basitahmed7772 Před 19 dny

    you are best bro I do n't understand why you are stil inn 85k you deserves million subscribers and don't worry we are with you bro :)

  • @deepakjm2706
    @deepakjm2706 Před 20 dny

    From create post till end in connect backend to frontend Port is changed 3001 to 3000 But create,edit post will not work properly to everyone Because of Access control by frontend port to backend port Topic is good but disappointed at create and edit post time because of Access control not mentioned

  • @marpusik1277
    @marpusik1277 Před 20 dny

    thanks 🙏

  • @charlesokorobo508
    @charlesokorobo508 Před 21 dnem

    Hello Sir, I see that you are a React heavyweight: meaning that you know React very well. Now, I will like you to learn Svelte and SvelteKit, and I promise you that you will love it. I am poor with JavaScript itself, but I have started learning Svelte and SvelteKit, and I am already understanding it. After you've mastered Svelte and SvelteKit, I will like for you to create this same Tutorial of Facebook clone-- using Svelte and SvelteKit, plus, I will like you to make it a Full Stack Application by connecting it to a Postgres database and probably deploying it to something like Supabase, Firebase and so on. Would you be able to do that, Sir? Regards.

  • @oyetoludan346
    @oyetoludan346 Před 23 dny

    Welcome back sir. Will love a fully dynamic website like jumia or netflix

  • @Deqike_Michael12
    @Deqike_Michael12 Před 23 dny

    Facing the following problems how can I solve them Warning: Undefined array key "signin-data" in C:\xampp\htdocs\blog\signin.php on line 5 Warning: Trying to access array offset on value of type null in C:\xampp\htdocs\blog\signin.php on line 5 Warning: Undefined array key "signin-data" in C:\xampp\htdocs\blog\signin.php on line 6 Warning: Trying to access array offset on value of type null in C:\xampp\htdocs\blog\signin.php on line 6

  • @mandavisahay690
    @mandavisahay690 Před 23 dny

    Welcome Back Sir😊, Nice to see you.. Can you please come up with a blog app with admin panel on Nextjs and also with normal CSS (not tailwind).. Thank you❤

  • @kentganevsky3181
    @kentganevsky3181 Před 23 dny

    Does not work - the formsubmit site becomes a endless LOOP of endless emails with them

  • @manojmanchikatla7047
    @manojmanchikatla7047 Před 23 dny

    Can you make a tutorial on how to deploy it

  • @DevChris-v6o
    @DevChris-v6o Před 23 dny

    Thank you so much man.. your tutorials has really help me.. but i will excited if you can be integrating tailwind Css for your styling>> thanks man..🤗🙏

    • @EGATORTUTORIALS
      @EGATORTUTORIALS Před 23 dny

      Yes. I plan on integrating tailwind in this series.

  • @seanwilliams8833
    @seanwilliams8833 Před 24 dny

    Nice! I've been wanting to learn React, so it will be nice to see what comes next

  • @j-man4231
    @j-man4231 Před 24 dny

    Absolutely fantastic course! Thank you so much! By the way, if you guys would like to make it so that the textarea is not adjustable in size by the user, use this line of code: <textarea name="Message" rows="12" placeholder="Message" required style="resize: none;"></textarea> All you have to do is add the required style to not be able to be resized. Hope that helps! around 2:56:00

  • @dante_brains
    @dante_brains Před 25 dny

    This is a very great work and effort. Thank you very much for this tutorial it's understandable and it gives valuable insights.

  • @umeshdewsinghe74
    @umeshdewsinghe74 Před 25 dny

    appreciate this ❤

  • @mrkxrys
    @mrkxrys Před 26 dny

    Why does my thumbnail on the edit-post not connect to the database and the folder image?? anyone help mee

  • @kaluemmanuel4472
    @kaluemmanuel4472 Před 29 dny

    Thanks a lot for this video even though i am one year late

  • @SukritKeereerat-n3c
    @SukritKeereerat-n3c Před měsícem

    this is phising?

  • @FavourOguntolu
    @FavourOguntolu Před měsícem

    Where do you copy the css root from

  • @parth6661
    @parth6661 Před měsícem

    Thank you so much bro your video helped us a lottt!!!