Channel Title: EGATOR Channel Description: Hi, my name is Ernest Achiever, and I'm a front-end web developer based in Ghana. Here on this channel, I create modern web development project tutorials with HTML, CSS, Sass, JavaScript, React, Node, Express, and more. Learn how to Create Responsive Websites and web apps using modern languages, frameworks, and libraries! Become A Patron: https://patreon.com/egator Buy me a coffee: https://buymeacoffee.com/egator For collaborations and sponsorships: support@egattor.com <video> Complete PHP & MySQL Project Tutorial from Scratch Blog App using HTML CSS JavaScript PHP & MySQL Description: In this Complete step-by-step tutorial, you are going to learn how to build a full CRUD application from scratch using php & mysql. I am going to teach you how to build a responsive blog application or website using HTML, CSS, JavaScript, PHP and MySQL. I take a beginner's approach to this tutorial, to explain this project throughout the journey using modern design principles and technologies in the frontend, and PHP's procedural programming on the backend. By the end of this complete PHP Project tutorial, you will be able to build a full CRUD project using html, css, javascript, php and mysql. This is be best php project with source code you can find on the internet or youtube. Source Code: https://buymeacoffee.com/egator/e/318209 Become a Patron: https://www.patreon.com/posts/complete-php-app-114148284?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link FRONTEND Timestamps 00:00 Intro (Project Demo & What you'll learn) 00:20:10 File/Project Folder Structure 00:27:45 Nav HTML 00:34:55 CSS Variables & General styles 00:49:10 Nav CSS 00:59:40 Featured Post 01:09:00 General Post CSS 01:14:00 Featured Post CSS 01:16:00 Posts 01:24:20 Category Buttons 01:29:25 Footer 01:45:45 Media Queries Responsive Design 01:50:00 Nav Dropdown 02:16:50 Blog Page HTML & CSS 02:28:40 Single Post Page HTML & CSS 02:39:40 Category Posts HTML & CSS 02:44:00 About, Services, Contact Page HTML & CSS 02:47:54 Sign Up Page HTML 02:54:00 General Form CSS 03:03:15 Sign in Page 03:04:55 Add Category Page 03:07:55 Add Post Page 03:14:00 Add User Page 03:17:45 Edit Category, Edit Post & Edit User Pages 03:23:00 Manage Categories Page 03:32:40 Dashboard CSS 04:02:40 Manage Users Page 04:05:50 Manage Posts Page BACKEND Timestamps 04:12:18 XAMPP Installation 04:16:14 Minor Frontend Changes 04:18:35 Creating Blog Folder & Installing Extensions 04:24:45 Project Folder/Files Structure & Configurations 05:04:08 Creating Database & DB user & Connecting DB to project 05:14:50 Creating Users Table 05:19:12 User Signup/Registration 06:22:30 User Login and Access Control 07:01:55 Creating/Adding Users (Author/Admin) 07:31:55 Displaying/Fetching Users on Manage Users Page 07:44:45 Updating/Editing Users 08:04:40 Deleting User 08:23:15 Creating Categories Table 08:24:35 Creating/Adding Categories 08:43:40 Displaying/Fetching Categories on Manage Categories Page 08:53:40 Updating/Editing Categories 09:06:25 Deleting Categories 09:15:00 Creating Posts Table 09:23:25 Creating/Adding Posts 09:54:10 Displaying/Fetching Posts on Manage Posts Page 10:17:20 Updating/Editing Posts 10:40:35 Deleting Posts 11:18:50 Fetching Single Post, Fetching Posts by Category, Fetching Posts on Blog Page 11:56:04 Searching Post Assets: https://github.com/egattor/php-mysql-blog-assets </video> <video> Beautiful Image Slider using HTML CSS & JavaScript Beginner HTML CSS and JavaScript Project Description: Beautiful Image Slider using HTML CSS JavaScript - Beginner HTML CSS and JavaScript Project Hostinger Discount: https://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 & Assets: https://www.patreon.com/posts/image-slider-css-108542817?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link Timestamps: 00:00 Intro (Project Demo) 01:10 Project Setup 03:00 HTML 07:25 CSS 27:16 JavaScript Assets: https://github.com/egattor/image-slider-assets </video> <video> Build & Deploy a Responsive Personal Portfolio Website using HTML CSS & JavaScript Description: Hostinger Discount: https://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: https://buymeacoffee.com/egator/e/283325 Become a Patron: https://patreon.com/egator part 2: https://youtu.be/fGT97ZYP-Hs Google Fonts: https://fonts.google.com/ Iconscout: https://iconscout.com/unicons/free-line-icons SwiperJS: https://swiperjs.com/ Mixitup: https://www.kunkalabs.com/mixitup/ Animate on scroll: https://michalsnik.github.io/aos/ Timestamps: 00:00 Intro (Project Demo) 08:25 Hosting & FREE Domain 12:14 Project Folder Structure 14:27 Top Navbar 18:20 General CSS Helper styles 34:20 Navbar CSS 38:40 Floating Navbar HTML & CSS 52:05 Header HTML & CSS 01:06:50 Resume HTML & CSS 01:21:40 Floating Navbar JavaScript 01:26:20 Resume JavaScript 01:43:40 Projects HTML Starter files: https://github.com/egattor/responsive-portfolio-starter #htmlcssjavascript #responsivewebsite #personalportfolio </video> <video> How To Put Your Website Online - How To Deploy Your Website Description: Hostinger Discount: https://www.hostg.xyz/SH8cs How To Put Your Website Online - How To Deploy Your Website Hospical Website Tutorial: https://www.youtube.com/watch?v=SvKL_i8A1N8 Hospital Website Source Code: https://buymeacoffee.com/egator/e/61533 Become a Patron: https://patreon.com/egator </video> <video> Responsive Personal Portfolio Website Tutorial using HTML CSS & JavaScript with Light Dark Theme Description: Responsive Personal Portfolio Website Tutorial using HTML CSS & JavaScript with Light-Dark Theme Hostinger Discount: https://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: https://buymeacoffee.com/egator/e/283325 Become a Patron: https://patreon.com/egator part 1: https://www.youtube.com/watch?v=ekAbxVNcy8Q Google Fonts: https://fonts.google.com/ Iconscout: https://iconscout.com/unicons/free-line-icons SwiperJS: https://swiperjs.com/ Mixitup: https://www.kunkalabs.com/mixitup/ Animate on scroll: https://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: https://github.com/egattor/responsive-portfolio-starter #portfoliowebsite #responsivepersonalportfolio #htmlcssjavascript #responsivewebsitedesign </video> <video> Build & Deploy a Responsive Multi Page Crypto Investment Dashboard using HTML CSS & JavaScript Description: Build & Deploy a Responsive Multi-Page Crypto Investment Dashboard using HTML CSS & JavaScript Hostinger Discount: https://www.hostg.xyz/SH8cs In this step-by-step project tutorial, I'm going to teach you how to build or design this beautiful responsive multi-page crypto invesment platform or dashboard using html css and javascript. This dashboard will have a light and dark theme as well, and we will deploy it and make it avaialble on the internet. Source Code: https://buymeacoffee.com/egator/e/309268 Become a Patron: https://patreon.com/egator Timestamps 00:00 Intro (Project Demo & What you'll learn) 03:55 Buying Hosting & Claiming FREE Domain Name 07:43 Project Folder Structure 13:50 Navbar 19:20 General CSS Styles 37:00 Navbar CSS 44:45 Sidebar 57:55 Cards 01:12:50 Fast Payments 01:20:40 Line Chart 01:30:25 Investments 01:38:40 Recent Transactions 01:52:00 Media Queries for Responsive Design 02:03:50 Closing/Opening Sidebar on small screens 02:07:16 Dark/Light Theme 02:18:30 Transactions Page 02:33:10 Wallet Page 02:41:10 Deployment (Putting the website on the internet) Assets: https://github.com/egattor/crypto-dashboard-assets </video> <video> 5 Best HTML CSS JavaScript Responsive Website Projects Tutorials Step-by-step from scratch Description: Hostinger Discount: https://www.hostg.xyz/SH8cs Are you looking for video tutorials that will teach you how to create modern responsive websites using html css and javascript? Then these 5 videos are best for you! In these 5 practical step-by-step tutorials, I will teach you how to build and deploy 5 beautiful and modern websites from start to finish! By the end of this hands-on html css and javascript projects tutorial, you will be able to design any modern website or web application from scratch! Source Code for all 5 Projects: https://buymeacoffee.com/egator/e/296083 Become a Patron: https://patreon.com/egator Timestamps 00:00 Intro 00:01:05 What you're going to learn 00:05:31 Project 1 (Education Website) 00:12:23 Buying Hosting & Claiming free Domain 03:23:10 Project 2 (Admin Dashboard) 04:51:55 Project 3 (Social Media Website) 07:29:42 Project 4 (Hospital Website) 10:37:35 Project 5 (Personal Portfolio Website) ASSETS to follow along: https://github.com/egattor/5-html-css-js-assets </video> <video> Responsive React JS Multi Election Voting App Design with Redux Toolkit & Light-Dark Theme Description: Responsive React JS Multi-Election Voting App Design with Redux Toolkit & Light-Dark Theme Hostinger Discount: https://www.hostg.xyz/SH8cs If you're a developer looking for another project for your portfolio, then this is the perfect project for you! This is a full stack voting application that comes with features like Authentication system, light-dark theme, responsiveness, multi-election voting functionality, and more! I will walk you through the entire project from scratch and make sure you understand everything step-by-step! In this first part of 3, we will build and design the frontend (all pages and components needed for the application). In the next video, we will work on the API or backend of the project. This is the most practical MERN Stack project you can find on the internet. Hostinger Discount: https://www.hostg.xyz/SH8cs Complete Project SOURCE CODE with backend: https://buymeacoffee.com/egator/e/340214 Part 2 (Node Express API): https://youtu.be/WcZ5NPLIdOY Timestamps 00:00 Project Demo 17:13 Hostinger and FREE Domain 21:00 Project Folder Structure 27:40 Routing 36:15 Error Page 39:00 General CSS Styles 52:50 Navbar 1:09:47 Theme Toggle 1:17:40 Register Page 1:29:35 Login Page 1:32:20 Results Page 2:01:00 Candidates Page 2:13:40 Redux Toolkit 2:20:50 Confirm Vote Modal 2:42:20 Congrats Page 2:45:53 vote-slice 2:54:04 Elections Page 3:07:15 Add Election Modal 3:18:00 Election Details Assets: https://github.com/egattor/voting-app-assets </video> <video> Simple React Project with useState Hook Build an Accordion using ReactJS and the useState Hook Description: Simple React Project with useState Hook - Build an Accordion using ReactJS and the useState Hook Hostinger Discount: https://www.hostg.xyz/SH8cs Learn how to create an Accordion Menu using ReactJS and the useState Hook and CSS Become a patron: https://patreon.com/egator Source Code: https://buymeacoffee.com/egator/e/276088 </video> <video> How to Deploy a MERN Stack Application How to Put a Fullstack MERN Project on the Internet Description: Learn How to Deploy a MERN Stack Application or How to Put a Fullstack MERN Project on the Internet Hostinger Discount: https://www.hostg.xyz/SH8cs Voting App Project Source Code: https://buymeacoffee.com/egator/e/340214 In this video tutorial, I'm going to show you how to deploy a fullstack MERN application using continuous deployment. We'll first deploy the Node-EXpress API on render via git repo, then we'll go on to deploy the react client app as well. This is the best video that shows you how to deploy a full stack MERN application on the internet. </video> <video> MERN Stack Multi Election Voting App Tutorial React & ExpressJS API Communication Description: Hostinger Discount: https://www.hostg.xyz/SH8cs Complete Project SOURCE CODE with backend: https://buymeacoffee.com/egator/e/340214 Part 1 (React App): https://www.youtube.com/watch?v=lwVdmLP3Fh0 Part 2 (Node Express API): https://www.youtube.com/watch?v=WcZ5NPLIdOY Timestamps 00:00 Project Demo 01:30 Getting Started 07:18 Register Voter 16:10 Login Voter 24:50 Results Page 41:40 Candidates Page 1:04:00 Vote Candidate 1:18:45 Elections Page 1:43:05 Election Details Page Assets: https://github.com/egattor/voting-app-assets </video> <video> Build & Deploy a Modern E Commerce Dashboard Website using HTML, CSS & JavaScript Light Dark Theme Description: https://www.hostg.xyz/SH8cs Learn how to build and deploy a modern responsive ecommerce dashboard using html css and javascript. Source Code: https://buymeacoffee.com/egator/e/354397 ZERO TO HERO course newsletter: Coming soon... TIMESTAMPS: 00:00 Intro (Project Demo) 03:52 Hosting & FREE Domain 07:39 Folder Structure 11:45 Sidebar HTML 21:22 CSS Variables and General Styles 34:15 Sidebar CSS 42:00 Navbar 51:44 Main Cards 1:06:47 Chart HTML & CSS 1:08:39 Top Products 1:14:41 Top Categories 1:24:35 Upcoming Events 1:33:40 Media Queries 1:54:00 Theme Toggle JavaScript 1:57:40 Sidebar Toggle on small screens 2:01:20 Bar Chart & Pie Chart 2:12:00 Website Deployment Assets: https://github.com/egattor/ecommerce-dashboard-assets </video> <video> Build a NodeJS ExpressJS API for a Multi Election Voting App with MongoDB Mongoose & Cloudinary Description: Here's the perfect MERN Stack project tutorial for your portfolio! In this step-by-step tutorial, I'm going to teach you how to build a custom full stack voting application that comes with features like jsonwebtoken Authentication, light-dark theme, responsiveness, multi-election voting functionality, Cloudinary file upload, mongoose sessions and relationship between collections and more! I will walk you through the entire project from scratch and make sure you understand everything step-by-step! In this first part of 3, we will build and design the frontend (all pages and components needed for the application). In the next video, we will work on the API or backend of the project. This is the most practical MERN Stack project tutorial you can find on the internet where you'll learn how to create this entire project from scratch! Hostinger Discount: https://www.hostg.xyz/SH8cs Complete Project SOURCE CODE with backend: https://buymeacoffee.com/egator/e/340214 Part 1 (React Frontend): https://www.youtube.com/watch?v=lwVdmLP3Fh0 Timestamps 00:00 Project Demo 17:20 Project Folder Structure 23:30 MongoDB Atlas 35:55 404 & Error Middleware 41:35 Routing, Controllers & Testing endpoints with Postman 1:06:25 Models 1:14:50 Voter Controllers 1:45:45 Election Controllers (file upload & cloudinary) 2:33:00 Authentication/Authorization Middleware 2:46:10 Candidate Controllers Assets: https://github.com/egattor/voting-app-assets </video> <video> How To Create a Website Using HTML and CSS Complete Tutorial For Beginners Description: Hostinger Discount: https://www.hostg.xyz/SH8cs In this in-depth video tutorial, you will learn how to create a responsive website from scratch using html and css. You will also learn how to deploy or put the website online after building it. This step-by-step tutorial is perfect for absolute beginners who want to learn how to make a complete website from scratch using HTML and CSS. Follow along and get your hands dirty, as I teach you how to build and deploy your very first responsive modern website! Source Code: https://buymeacoffee.com/egator/e/299724 Become a Patron: https://patreon.com/egator Timestamps 00:00 Intro (Project and what you'll learn) 02:37 Buying Hosting and Claiming FREE Domain 06:25 Project Files & Folder structure 17:26 Navbar HTML 22:35 Iconscout (How to use icons on your website) 26:10 Google Fonts (How to add font to your website) 30:00 CSS Variables & General Styles 42:30 Navbar CSS 53:25 Main Header 01:03:35 Services Section 01:19:10 Footer 01:30:50 Media Queries (Responsive Design for small screens) 01:38:30 Nav menu toggle using JavaScript 01:43:00 Works Page 01:59:20 About Page 02:09:15 Contact Page 02:20:04 Deployment (Putting the website on the internet) How To Create a Website Using HTML and CSS Complete Tutorial For Beginners Assets: https://github.com/egattor/html-and-css-website-assets </video> <video> complete mern stack voting app with source code multi election app Description: Hostinger Discount: https://www.hostg.xyz/SH8cs Voting App SOURCE CODE: https://buymeacoffee.com/egator/e/340214 </video>

Contacts and Links

Description

Hi, my name is Ernest Achiever, and I'm a front-end web developer based in Ghana. Here on this channel, I create modern web development project tutorials with HTML, CSS, Sass, JavaScript, React, Node, Express, and more. Learn how to Create Responsive Websites and web apps using modern languages, frameworks, and libraries!

Become A Patron: https://patreon.com/egator
Buy me a coffee: https://buymeacoffee.com/egator

For collaborations and sponsorships: support@egattor.com

Videos from channel