In this practical (real-world) Project, we're going to build a complete CRUD (Create, Read, Update and Delete) Blog Website/Application using HTML, CSS, JavaScript, PHP, and MySQL.

This project is going to be in two parts. In this first video, we are going to design all the pages, of the blog website or application and make them responsive for the next video. The second video is going to be the backend using PHP & MySQL to make this whole application come to life.

Users will be able to read blogs, search blogs, sort blogs by categories, and more!
Users can also signup to become authors, where they can (add/edit/delete) their posts.
An Admin can do all an author can do, and more. An admin will be able to (add/edit/delete) users (admin/author), manage (add/edit/delete) categories.

Timestamps
00:00:05 Intro (Project Overview)
00:20:57 File/Folder Structure
00:26:04 Extensions
00:28:18 Nav HTML
00:32:40 Iconscout
00:35:35 CSS Variables
00:38:45 General CSS Styles
00:42:04 Google Font (montserrat)
00:49:40 Nav CSS
01:00:00 Featured Post HTML
01:09:45 General Post CSS
01:14:25 Featured Post CSS
01:16:37 Posts HTML
01:21:45 Posts CSS
01:24:50 Category Buttons HTML
01:26:50 Category Buttons CSS
01:30:00 Footer HTML & CSS
01:46:00 Media Queries (Medium Devices) Responsive Design
01:50:00 Nav Dropdown
01:58:05 Nav Toggle using JavaScript
02:04:00 Nav Dropdown Animation using CSS Keyframes
02:12:30 Media Queries (Small Devices) Responsive Design
02:17:30 Blog Page HTML
02:20:18 Blog Page CSS (Search Bar)
02:25:35 General Button CSS
02:29:20 Single Post Page HTML & CSS
02:40:20 Category Posts HTML & CSS
02:44:32 About, Services, Contact Page HTML & CSS
02:48:30 Sign Up Page HTML
02:54:30 General Form CSS
03:03:50 Sign in Page
03:05:20 Add Category Page
03:08:25 Add Post Page
03:14:35 Add User Page
03:18:20 Edit Category, Edit Post & Edit User Pages
03:24:00 Manage Categories Page
03:34:10 More Button CSS (sm, danger, success classes)
03:36:08 Dashboard CSS
03:46:00 Dashboard Media Queries (Responsive Design)
04:03:10 Manage Users Page
04:06:25 Manage Posts Page

Source Code: https://www.buymeacoffee.com/egator/e/75490 
Become a patron: https://patreon.com/egator 
Images & CSS Variables: https://github.com/egattor/frontend-blog-app-assets 

Part Two (Backend): https://morioh.com/p/c6c044febcd7 

Iconscout (CDN) href: https://unicons.iconscout.com/release/v4.0.0/css/line.css 

Subscribe: https://www.youtube.com/@EGATORTUTORIALS/featured 
#html  #css  #javascript #php #mysql  

Build a Complete CRUD Blog Website/Application using HTML, CSS, JavaScript, PHP, and MySQL
10.45 GEEK