Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass | Discount Coupon for Udemy Course

Project Tour number one. Here the students will know what this project will be about and how the final website/websites will look. This will give general idea what will the course be about and what can be done in future

We will continue with the description of the course.

We will continue with the description of the course.

We will continue with the description of the course.

Install VsCode text editor. We are going to use this editor for the entire course. You can use your own if you have other preferences.

Creating the folders inside our editor and install XAMPP. XAMPP is free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

Lest start our project

Learn about the most important step for making large projects. 4 Pillars of success

Explanation about BEM notation

Learning what is CMD and how to use.

Learning what is Sass and why we will need it

This is important update, because some student can't compile sass locally so I have decided to help him creating new lectures. Just watch the new lectures from me how to install and compile sass locally. Also because in this videos I'm creating new project so some of the files and names might be different from your part. You can Watch the old videos after that with increased speed :D.

This will help you fix problems with sass locally.

Thanks,

Rick

Important section, so if you can't compile sass locally with lecture 13,14,15 then use this video as simple sass installation with extension. Note you need to have VSCode text editor for this extension.

The link to the https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Install node js and activate live server so we will not reload manually the browser.

Writing scripts in Json.js file.

NPM fixes and testing our scripts how they work.

Will introduce what are sass variable and how to set and use mixins.

7-1 Archtecture

Difference between PX, REM and EM, what we will use and why.

Basic HTML reset and create variables. The variables file is included in the next lecture. You can always download the finished file and download it from there.

Start our header and write our first block of code using BEM notation. You can download the variables txt and that will be our list of variables for these project. Feel free to copy and paste them into your project but also you can add more meaningful names to your variables

Use clip path to style the header

Create first animation using @keyframes

Css Top Horizontal Menu

Style the Menu to match the color

Creating Menu a hover effect and add font-awesome icons

Mixins and Media Query 20

Use Finished Media Query in Action to style menu

Menu Checkbox hack plus jquery

Finished Menu with javascript

Making Logo Box Responsive With Media Queries

Create Our Search Bar in Index File

Search Box Finished With Media Queries

Css Tricks Transform

Learn Css Transition

1.Learn About Bootstrap Framework and how it works

2. Creating the first Card for advertising, card to selling properties

Html code for the front side of the Advertismenet

4.Styling The Advertisement Front Side Plus Position Img And Heading

5.Continue Styling Svg And Heading Using The Modifier

6.Styling more elements from the front card

7.Starting the Back Side, Perspective, Transform and Transition

Continue to style the Back Side, add more html code

Style the company details and create the circle logo

Fix Details and use unordered List, Price And Link

Final Improvements. Card Finished.

Create Another awesome Card, for Car Advertisement

Fix the Car Card-Missing lecture between 12-13

Fix the Car Card-Missing lecture between 12-13

14.Styling Job Header and add new html

15.More of Job Card styling

16.Finished the job card

.Starting and Finish the 4th template for the ad

. Fixing Layout To fit 4 Cards at once

Create Featured Listings Heading with Background Clip Css

. Create Our Registration Form Plus Registration Page

2. Registration Form Before And After Pseudo Elements

Create Very Nice Input Styles, Focus And Placeholder Trick

Adjeson Siblings And Placeholder-Show Css Tricks

5.Time To Create The Login Page

1. Create Footer Section And Add Social Media Icons-1

Footer Sass Styles Applied To Look More Inline With The Header, Clip Path Again

Footer New Mixin And Fancy Linear Gradient-3

Webkit Mask Shine-4

Footer Finished With Media Icons On Right Styled-5

Fixing Footer With Media Queries And Add Z-Indexes-6

Create Scroll Btn, Html, Styles And Js File

Scroll And Header Styled To Work On Small Screen, Clip-Path Removed

css-grid-template.zip

0. Work on Code Pen or Create your own Project, Css Grid Intro

. Write Html And Try Our First Css Grid

. Creating The Layouts.mp4

Learning About Grid-Row, Auto, What Is 1Fr And Much More

.Grid-Template-Areas

.Using Named Lines [Content-Start]

Advanced Css-Grid part 1

Advanced Css-Grid part 2

Exercise Create This Layout Grid

Finish The Example In And Use Named Lines In Practice

Align, Justify, Self

Postapp Starter, You can work from here or copy the content and create categories folder in the readapp project.zip

Starting Our Post App Project, Create The Html Structure-1

2 Css Grid Layout, Create The Layout For Our Project-12

Style Profile Gallery Section, Use Slider-15

Gallery Description Thrid Nested Grid!-16

Post Gallery Completed

.Post Author Html And Styling It Little-18

7. Finishing The Post Author Section Styling-19

.Staring Our Logo And Edit Section-20

Starting Our Post Content Section-21

.Turning Our Content Into Awesome Grid

Positioning Css Grid Cells Like Pro And Making Them Responsive

Post Content Grid Finished And Css Styling To The Element

Starting Additional Content Info Section

Additional Info Grid Positioning

.Finished Additional Info Section

Contact Agent HTML part

Contact Form CSS Grid and positioning

Making Form Responsive and Nice

Styling the Inputs

Contact Form Finished

Post Comment Html

Comment Form Finished + Footer And Scroll Element

Finishing up the footer and This Project Is Done!

ostapp Finished.zip

.Lets Start With Flexbox

Flex Justify Content And Align Items

Align Self, Order And Flex Grow, Shrink And Much More

Flexbox And Bootstrap

Flexbox And Bootstrap Finished

Welcome, Starting Our New Project Called Profile App. Now Lets Create Template And The Header

Header And Nav Icons And Dropdowns

Header Display Flex

Dropdown Style

User-Online Pulse And Dropdown

Online Pulsating And Fix For The Dropdown

Header Media Queries Flex-Wrap

Lets Create The Layout With Flexbox

Sidebar Html Nav-67

Styling The Sidebar

Making Cool Animation On Hover, Icons

Sidebar Finished

Sidebar Hamburger Menu

4.Checkbox Hack And Background Color

. Menu Visible And Icon And Font-Size Fixed

.Before And After Pseudo Class

. Sidebar Finished

Profile Search Coding

Styling Up Two Search Input And Icons

Media Query And Flex Direction Column

1.Crazy On Hover Button

On Hover Transform The Button

Button Animation Done!

Creating Free, Standard And Premium Ads

Flex And Sass Styling Of Price Card

.Price, Heading And Option Styling

Finished Price Guide Cards, Crazy Icon Clip Text And Coloring

My Posts Preview

Section User Posts Html And Carosel

Post Icons And Setting Up Second Post

Html Code Finished, And Sass Styling

Carousel And Img Styles In Css

Description, Price And Title Positioning

Del And Edit Link, And More Positioning

Location, Date And Map Icons Positioned And Another Before Pseudo Trick Used

Fixing Post Issues And Create Our First Popup Modal

Using Target Pseudo Selector And Styling Our Modal

Target Pseudo And Id Linked, Modal Body And Header Styling

.Modal Finished And Responsive Media Query Added

Create Our Submition Ad Form

Input Style, Label Style And Input Focus

Date Input And Scss Styling

Radio Buttons And File Input

Radio Group Styling

.Radio Group Hack Fixed

Three Input Fields And Magic Positioning With Flex

Submit Button And New And Used Condition Added In The Form

Summenote Editor And Button Styles Added

Shopping Cart Html Structure

Checkout Box Html Coding Done, Lest Use Flexbox And Sass

Display Flex To Style The Shopping Cart

\Item Styled Using Super Fast Flex Utility Classes

Checkbox Styling

First Part Of Cart Is Finished With Flexbox And Sass Styles

Bootstrap Payment Section Done Very Fast

Payment Form

Creating Live Search Section

D-Flex And Align Items For The Searched Box

Position Absolute The Img And D-Flex The Profile Section

59.Styling Icons And Text To Be Shown One Under Other With D-Flex

Media Queries For Finishing The Live Search Par

Utility Class And Message Section Created

Payment Success Page Finished-

Finished Add To Cart And Checkout Link

Finally Footer-64.mp4

Introduction, PDO Data Object

Our Create database and establish PDO Connection

PDO Query And Prepared Statements.mp4

PDO Named Params,Insert, Single And Fetch All Records from db.mp4

PDO Update Delete And Search.mp4

PHP Oop, Class, Property And Methods.mp4

. Extends And Abstract Class.mp4

Config And Database Class-1.mp4

.Database Class And Models-2.mp4

.Create Our First Our First Query From Our Models

.Convert Our Index Html Files Into Php Files

.Create Database And Users Table

Create Base Url And Root Path So We Can Start Linking The Files

Use $ Post To Get The Data From The Register Form And Display So We Can Create

.Secure Password And Create User Class In Model And Store Details In Database

Create Redirect Helper And Success Message

Finishing The Session Helper Msg And Applying The Message To Login And Registrer

Creating Subcriber And Javascript Regular Exp

.Checking Password And Loading Error Msg Live With Reg Expressions-5

Getting Password To Match And Notify Users What To Do

Learning About Ajax Call And Passing Email To Php Files

Json Encode And User Function For Checking Email In Db

.Ajax Json Datatype And Awesome Spinning Function For Users. Registration Complete

Login Setting Up Form And JavaScript For Getting The Values For Ajax

Create Find User Function In User Model To See If We Have The User In The Db

Password Verify Function And Checking If Password Or Email Are In Db

Getting The Output From Login Php And Create A Session For Logged

Login, Session And Progress Bar All Done

Cleaning Up The Profile Index And Making It To Php.Use The Root Path To Link Files

.Finished. The Profile Index File Is Now Fully Cleaned And Separated In Folders Create

.Logout Redirect With Base Url Fixed And Login Form Fixed To Notify The User

Security Access And Redirect Users When Trying To Access Wrong Page

Get User Details From User Model And Print Out Its Name

Updating User Img Function In Php

3.Saving The Image In Db And Get Notification

User Image Uploaded And Loaded In Profile Index Page

Making pretty Url With Mod Rewrite And Eliminating Php Extension-

How To Load Dynamically Content Based On Url Get Condition

Creating First Post From Profile Admin Site. Creating Post Table And Form

Storing Our First Post In Database With Realestate Model Functions

Creating Categories Table And Putting Its Content In Select Option Value.

.Upload Multiple Files, Images And Get Them Into String Separated With Comma

Files Uploaded And Linked Stored In Database. Separate File Function In Models

Get The First Post From Db To Application

Getting All Posts And Featured Images Numb

.Getting All Posts And Its Data From Database

.Listing All Of The Images From Db To Post Carousel

Active Posts Finished, All Images Listed, New Format Date Function And Much More

Unpaid Posts, Listing Them And Explain The Logic

.Google Maps Api Key

. Google Maps JavaScript Api And Saving To Db

Getting Address To Be Visible In Pay Posts And My Posts

1Installing Bootstrap Token-field

Get Input Token field Showing Tags And Import Suburbs And Cities Db

Now Create Php File That Will Fetch The Result Using Like Operator And Json Obj

Listing All Of The Suburbs Based On Key up And Change Style

Working On Suburbs And Postcode Using Explode Function

Finally,Save Postcode And Suburb In Database

Fix The Post Margin Using Sass And Change Cart From A Href To Input-

Cart Input Fixed And Profile Css File Is Transferred From Redapp To Theredapp

Create Pay Post Form And Use Separate File For Paying Unpaid Post

Input D-Block Used For Hiding Some Information When Submitting To Car

Finally Getting Values From Post Payment Records And Start Our Cart

Creating Our Shopping Cart With Session

Adding Post Items In Shopping Cart And Update The Quantity,Avoiding Duplicates

Adding Items And Displaying The Number Of Items Done!

.List All Of The Shopping Cart Items And Use Model Functions To Get Them

.Print All Of Post Information And Price Into The Payment Section Of The Cart

.Finishing All Of The Cart Items And Plus Delete Item Functionality Added

.Shopping Cart Finished And Turn Long Url Into Pretty Url

Stripe Introduction And All Important Files-

Create The Stripe Form With More Input Fields And Submit It To Separate Charge

Install Composer And Use The Stripe Php Library Provides Convenient Access To

. Recap And Trying To Store Our Data In Customer Array And Create New Models

Create Stripe Customer Table To Keep The Customers That Paid, Add User Id

Save Customer Data To Customer Database And Redirect Customer to Success Page

Stripe Transaction Saved In Db, New Model Created In Models Folder

Working On Our Success.Php Page To Display And Unset The Shopping Cart-

Update Posts And Loop Through Shopping Cart To Get The Value

Success Page Finished, Shopping Cart Empty And Posts Table Updated-

Paypal Rest Api, Files And Composer Installation

Creating The Paypal Files, Set Our Credentials And Cancel And Response

Creating The Request File And Also Setting The Paypal Items From Shopping Cart

.Create Payer, Transaction And Redirect Url And Finally Build The Payment

Response And Complete Transactions And Finlay Execute The Payment

Paypal Payment Done, Success Page Linked

Creating New Table For Paypal And Store The Values Inside Using Transaction

Starting To Shape The Front Index Page, And Load The Posts-

Creating Function In Models For Listing Free And Paid Posts

Getting The Posts Based On Switch Condition

Switch Case Logic For Showing The Posts Finished, Now Lets Loop Through Posts

Displaying The Images For The Each Posts Based On The Numb Of Images In The Db-5

.Linking Our Posts To Categories Now, From Categories Folder

Now It's Time To Use Inner Join To Get Information From Users And Their Post

Getting The Images, Count Them And Put Them In Carousel

Gallery Done Plus Extract More Data From Db And Put Inside The Relevant Places

.Google Maps, Adding Marking, Info Windows And Flag Icons

Geocoding And Getting From Address To Lat And Lng So Our Map Will Be Visible

Creating Sass Component And Starting New Section For Comments In Html Index

Using Some Stiles To Create The Cascading Layout Or Waterfall

Save Comments With Ajax Function

Getting The Data Ready For Inserting Into Database

Json Encode Issue Solved And Created New Comments Table And Function Add comment

Saving Comments In Db And Now Preparing To Load Them Without Page Refresh

. Trying To Load Our Comments In Categories

Loading The Comments From Database Using Ajax Without Page Refresh

Creating Reply Section And Loading All Comments From The Parent

Finally Comments Are Done,And Names Added To The People We Are Replying To-

Preparing Ajax Live Load Comments In Profile Header Section

. Loading The Messages And Fixing Some Of The Issues. Long Video Sorry

.Comments Updated And Removed From The Header, Nice Feature

Fixing Issues Related With Comments And Other Things

Changing The The Form For Adding The Posts To Include Start And End Date-

.Saving Now Into Two Tables, Posts And Post Payment Records. Long Video Again

. Changing Structure Of Post Payment Records Table To Support Storing Transaction

Finally Adding New Comments, And Change The Table Comments To Support Use

Connecting The Comments To User, Change The Js File And Get Comments File-

Printing All Comments In Profile With Nice Table-1

Deleting Comments Done And Fixing Some General Bugs

Adding Payment Transaction Table For Evey User-

Create The Update User Form And Get The Values From The Form With $ Post

.Using Array Push And Array Unset For The First Time To Built Sql Query Syntax

Saving To Database After Creating Syntax Qyery

Finally Doing An Edit Option For Users In Our System

Create The Form And Introduction Of Php Self Super Global-

Checking For Errors And Display Them On The Form And Use Pattern For Preg Macth

Creating New Hashed Password And Check Current With New Password-

Saving The Password In The Db And Displaying The Message

Demonstration Of The New Password Update System

Updating Our Form And Loading Different Ad Forms Based On JavaScript

Creating New Database Estate And Add More Inputs In Realestate Form

.Insert Into Estate,Posts,Post Payment Records In One Transaction Using Same Id

Cleaning The Code Creating Data Array To Store All Of Our Post Variable

Displaying All Information From Properties Into Front Flipping Cards-

Estate Ads Finally, Completed, Now Categories Are Displaying All Of The Inform

Creating The Job Form Ad,Suing Input Number,Url For First Time And Create

Getting All Job Titles From Subcategory Class And Show Them As Select Option

Child Depended Select Drop down Options Done For Jobs Done With Ajax

Getting All Values From Form To Safe Them In Db

Adding Jobs To Posts,Jobs Table After Creating Multiple Function In Models

Getting The Advertisement Rotating Cart In Main Index Php With Switch Conditition

Finished Displaying Everything That Is Related On Job Card-

leaning The Realesatete Parts Of The Categories Based On Condition And Displaying

.Showing Edit Icon If The User Is The Owner Of The Post. Plus Add The Application

Creating New Ad. The Template Form Given For The Students

Getting The Value Of Radio Buttons In Js And Remove Or Add Readonly

Creating Ads Table And Trying To Save The From Values There. Small Problem

Php Switch Again To Display The Normal Post In The Index Flipping Cart Section

Categories Changed According To The Latest Ad Changes

Adding Input Files In Contact Form To Attach Resume And Cover Letter

Redapp Image Changed, Added Last Seen And Date Divs, Alert Message Box Finised

.Install Phpmailer Through Composer In Vendor Folder

Setting Our Fake Smtp, Load Phpmailer Autoload And Send Email

Creating Config Class To Define Php Constants So We Can Hide Smtp Credentials

.Based On Category Now We Modify And Display The Contact Agent For

Creating Js Ajax Call To Grab The Files From The Form And Submit It To Send

Validating And Sanitizing Our Form Fields Before Sending Emails-

Creating File upload Function To Move Attached Files

Using Json Encode To Print The Message In Ajax And Remove And Add Classes

Getting All Errors Working And Validating Before Submitting The Email

Email Sent, Message Timeout Section Created

Email Finished, You Can Send For Other Categories Now-

Creating Forgot Password Html Form And Reset Request Php

Using Bin2hex And Random Bytes To Create Secure Tokens, Password Hash

Create Url Link With Tokens, Save Them In Db, And Send An Email With Reset Password

Creating Alert Messages For Reset Password File And Also Getting What We Have In

.Create New Form For The New Input Password And Confirm Password Fields

Creating Last Reset Password File And Its Logic, Making Sure That We Update

Finally Password Update Finished With, Email, Token And Password Has

Create Time Ago Function To Display When User Post The Ad

.Change Php Ini From Xamp Server To Reflect Your Time Zone, And Start Last Seen

.Showing When Owner Of The Post Is Last Seen Function And Date-

Creating Page Views, Insert Into Database User Ip, Page Number And Views

.Page Views Finally Working-

Creating The Logic For Edit, And Form For Editing The Estate Posts

Edit Post With All New Information From The Form-

.Fixing The Issue For Editing The Post And Create Delete Post With Alert Box

.Finally We Can Delete, Edit And Access Our Edit Files When Logged In From Catetegories

Adding Bootstrap File In The Header, Create Admin Account And Secure The Admin

Profile And Admin Secure Page Access, Plus Writing Our First Admin Function

.Creating New Functions For Users, Payments, Ads, Comments Count-1

Listing All Of Our Posts Or Ads In Table Format

Deleting Ads With Notification Before Delete Action

Creating Modal So We Can Update Admin Photo

Upload Image New Function In Php Folder And Fix The Error Uploading

Update Image Done, Link The Avatar Image In The Header And Project Manager

Fill The Values Of The Right Widget And Create Form To Show And Add Categoires

Uploading New Category And Creating Arrays And Labels For The App Chart

Create New Bar Chart Fro Our Application And Use The Data Arrays From Php

Creating Users Registered Table With Block And Delete Use

Fixing The Issue With Redirect And Create Unblock And Block Functionality

Comments Table, Unapproved And Delete Comments, Plus Adding And Testing

. Security!!!Action Php, Needs To Be changed Because Is Not secure, Prevent Delete

.Refactoring Action Php And Making Admin Site Very Secure

Pagination, Sorting, Searching Crazy In One Lecture

Update Admin Details And Plus Change Log In System To Not Allow Blocked Users

Finally Admin Part Done With The Functions We Have In Mind. Thank You All

New Lecture: Change The Design Card Description In Main File, This Will Stop Overflow Of The Description

New Lecture:Fix Security Issues From Profile When Deleting And Blocking Comments

New Lecture:Making Changes To Edit Post And Delete Post In Profile Section

Here you will find all of the information you need how to access this course for free.

Please share like, subscribe and leave a 5 star review here