PHP, Ultimate JavaScript, CSS and Sass! Complete Sass & PHP
4.8 (52 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
549 students enrolled

PHP, Ultimate JavaScript, CSS and Sass! Complete Sass & PHP

PHP, PHP Laravel, JavaSctipt and Sass are the future! Take this Ultimate PHP Laravel, CSS, SASS and JavaScript course!
4.8 (52 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
549 students enrolled
Created by Rick Sekuloski
Last updated 3/2020
English
English [Auto-generated]
Current price: $129.99 Original price: $199.99 Discount: 35% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 80 hours on-demand video
  • 3 articles
  • 15 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Ultimate PHP,CSS-SASS course. Enhance your skills in PDO,PHP security and create layouts using CSS Grid,Flexbox,Bootstrap topped up with JavaScript,Ajax and Jquery.
  • You will learn how to create fast and modern layouts using Flexbox
  • You will have 3 crash courses for PHP, CSS-GRID and Flexbox
  • New modern 2019/2020 css techniques for building stunning websites
  • Cutting edge responsive design using media queries manager, mobile-first vs desktop-first
  • Difference between em vs rem units
  • SVG Images, Clip path, Font-awesome icons
  • Learn How to use Sass in real-world projects
  • BEM Methodology
  • 7-1 Architecture
  • You will Learn about CSS-GRID and how to create complex layouts fast
  • Advanced CSS animations using @keyframes, animatiosn and transitions
  • Use NPM to set up a development process to compile Sass fast and without page refresh
  • You will learn how to write reusable and maintainable that can be easily scale
  • Create Complete (CMS) Content Management System similar like Wordpress
  • You will master PHP PDO
  • You will Use OOP to create classes
  • Create Clean URL by removing .php extension at the end of the files
  • Learn how to refractor and clean your code
  • Learn about PHP security with PDO
  • Create From Filters and Pagination
  • Use Boostrap to create your Admin site
  • You will learn how to use composer (PHP package manager)
  • Send emails using PHPMailer
  • Create complete CRUD (create, read, update and delete) application
  • Making different forms and loading based on condition
  • You will learn how to create new Databases, create tables inside and use them
  • Forgot Password functionality with password hashing and tokens
  • You will use Google Maps Javasctipt API
  • Create Markers and use Geocoding
  • Show 4 different types of post based on condition
  • Use Payment methods : PHP Stripe API, and PHP SDK for PayPal RESTful APIs.
  • Variables, Constants & Super Globals
  • Use Prepared statements that will prevent SQL attack
  • Use JavaScript and JQuery.
  • Learn about regular expression and how to validate login input and register users
  • Geo-coding will be used to convert the address that is in our DB
  • Create Tree like Commenting system, with Ajax
  • Save and Load data without page refresh using Ajax
  • Last seen and Time ago function same as in FB messinger or Viber or WhatsApp
Course content
Expand all 387 lectures 79:55:29
+ Welcome Students!
4 lectures 46:00

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

Preview 12:44

We will continue with the description of the course.

Preview 12:50

We will continue with the description of the course.

Preview 15:04

We will continue with the description of the course.

Preview 05:22
+ Project Tools and Installation
5 lectures 40:07
Important Lecture For All Taking This Course
06:29

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.

Project Tools 1
11:12

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.

Project Tools 2 Installation of XAMPP
07:09

Lest start our project

Finally, starting to our project and first steps!
08:28

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

4 Pillars of lean Design
06:49
+ CSS terminology and Pillars of Good Web Design Practice
1 lecture 12:13

Explanation about BEM notation

Css Rule and BEM Notation
12:13
+ Finally Starting with SASS & Node.Js and NPM
10 lectures 01:37:25

Learning what is CMD and how to use.

Learning how to use CMD or the command-line interpreter
07:56

Learning what is Sass and why we will need it

What is Sass?
03:51

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, Follow the new lectures for Node.js Sass and NPM.
02:07

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

Important Watch this video if you can't compile sass with lecture 13,14,15.
08:32
1. NEW - Nodejs, Npm And Writing Our Scripts For Compiling Sass Locally
20:37
2. NEW- Adding All Script Or Task For Creating Fast Build Process
09:52
3. NEW-Finished, Final Build Process Is Working And Live Browers Is Refreshing
09:35

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

OLD- Node.js, Sass, Live Server and NPM, Create New Scripts in package json file
12:01

Writing scripts in Json.js file.

OLD- Writing More Scripts in Json file
17:23

NPM fixes and testing our scripts how they work.

OLD-Fixing problems and Testing the usability of our scripts
05:31
+ Finally Coding and using Sass for the first time
2 lectures 29:46

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

What are Sass Variables, how to decrale and use them. Nesting, Mixings and...
16:33

7-1 Archtecture

7-1 Architecture and creating folders and files
13:13
+ Lets work on Header
13 lectures 02:54:02

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

Learning about Typhography,Units,Rem,Em and pixel
08:44

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.

Basic Html Reset and declaring our project variables and colors
15:26

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

Start the Header using html and css. Write first html block of code using BEM
13:31

Use clip path to style the header

Use clip-path to style the header and create the header title
14:21

Create first animation using @keyframes

Create first animation @keyframes for the title in this header
14:58

Css Top Horizontal Menu

Creating Our Horizontal menu
15:29

Style the Menu to match the color

More Menu Css styles
16:14

Creating Menu a hover effect and add font-awesome icons

Creating the a hover effect and include font awesome icon
15:01

Mixins and Media Query 20


Learn and Create Media Queries
13:58

Use Finished Media Query in Action to style menu

Use Media Query to make our menu responsive
16:20

Menu Checkbox hack plus jquery

Using checkbox hack for the menu and download jquery
14:16

Finished Menu with javascript

Finish the Menu with adding javascript function
05:53

Making Logo Box Responsive With Media Queries

Making Logo Box or title to be seen on mobiles
09:51
+ Creating Search Bar
4 lectures 58:07

Create Our Search Bar in Index File

Creating Search Bar in Index File
13:26

Search Box Finished With Media Queries

Style Inputs and Finish the Search bar and optimise it for Mobile Viewing
16:56

Css Tricks Transform

Learn and Practice Css Transform Porperty
16:42

Learn Css Transition

Learn and Practice Css Transition
11:03
+ Creating 4 Different Flip Card with CSS, They will represent 4 different Ads
20 lectures 03:42:37

1.Learn About Bootstrap Framework and how it works

1.Learn About Bootstrap Framework and how it works
14:26

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

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

Html code for the front side of the Advertismenet

3.Html code for the front side of the Advertismenet
10:42

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

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

5.Continue Styling Svg And Heading Using The Modifier

5.Continue Styling Svg And Heading Using The Modifier
11:56

6.Styling more elements from the front card

6.Styling more elements from the front card
09:29

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

7.Starting the Back Side, Perspective, Transform and Transition
10:33

Continue to style the Back Side, add more html code

8. Continue to style the Back Side, add more html code
11:25

Style the company details and create the circle logo

9 . Style the company details and create the circle logo
09:50

Fix Details and use unordered List, Price And Link

10. Fix Details and use unordered List, Price And Link
11:21

Final Improvements. Card Finished.

11.Final Improvements. Card Finished
13:19

Create Another awesome Card, for Car Advertisement

12.Create Another awesome Card, for Car Advertisement
12:49

Fix the Car Card-Missing lecture between 12-13

Fix the Car Card-Missing lecture between 12-13
08:19

Fix the Car Card-Missing lecture between 12-13

13. Fixing Car Card And Making Jobs Card
11:31

14.Styling Job Header and add new html

14.Styling Job Header and add new html
11:24

15.More of Job Card styling

15.More of Job Card styling
11:44

16.Finished the job card

16.Finished the job card
12:33

.Starting and Finish the 4th template for the ad

17.Starting and Finish the 4th template for the ad
11:26

. Fixing Layout To fit 4 Cards at once

18. Fixing Layout To fit 4 Cards at once
08:55

Create Featured Listings Heading with Background Clip Css

19.Create Featured Listings Heading with Background Clip Css
06:01
+ Registration and Login Pages
5 lectures 01:06:06

. Create Our Registration Form Plus Registration Page

1. Create our Registration Form plus registration page
13:58

2. Registration Form Before And After Pseudo Elements

2. Registration Form before and after pseudo elements
10:45

Create Very Nice Input Styles, Focus And Placeholder Trick

3. Create Very nice Input Styles, Focus and Placeholder Trick
14:17

Adjeson Siblings And Placeholder-Show Css Tricks

4 Adjeson Siblings and Placeholder-show Css tricks
14:56

5.Time To Create The Login Page

5.Time To create the login page
12:10
+ Footer Plus Edit the Login Page
6 lectures 01:08:22

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

1. Create Footer Section and add social media icons
11:16

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

2 Footer Sass styles applied to look more inline with the header, clip path agai
11:15

Footer New Mixin And Fancy Linear Gradient-3

3. Footer new Mixin and fancy linear gradient
10:49

Webkit Mask Shine-4

4. Webkit Mask Shine
10:45

Footer Finished With Media Icons On Right Styled-5

5.Footer Finished with media icons on right styled
10:07

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

6.Fixing Footer with media queries and add Z-indexes
14:10
Requirements
  • Basic HTML, CSS and PHP skills are desirable, but anyone basically can follow me on this course. No need for buying any software, your computer and text editor for writing the code will be sufficient.
Description

Welcome To Ultimate PHP, CSS and SASS: Enhance Your JavaScript Skills!

This course will offer more than 380 lectures and lifetime access to 79 hours of HD quality videos at this moment.

Requirements:

  • Basic HTML, CSS and PHP skills are desirable, but anyone basically can follow me on this course. No need for buying any extra software, your computer and text editor for writing the code will be sufficient.

Description

Have you have been taking courses that are not up to date or courses that after finishing them you will immediately know that is not what they promised to be in the promo video? Have you joined multiple courses for basically learning the same thing over and over again? Have you been thinking why there is no complete course out there where you can learn how to become master of front and back end development with the latest, greatest and the most modern programming/designing techniques?

Great news: Then This Is The Right Course For You!

Welcome to "Ultimate PHP, CSS, and Sass: Enhance Your JavaScript Skills, course ever". This is the most advanced, the most modern, and the most up to date course ever on this platform. It's everything you need to become master and advance your career as a graduate student, junior developer or programmer. Look at the end of why I create this course to be for everyone.

There are multiple parts to this course. The first part is the designing process where you will learn how to use HTML, CSS, and Sass. You will be able to design and create modern layouts on your own after finishing this part. You will learn the most complex and advanced responsive design techniques, CSS GRID and Flexbox layouts and yes you will get familiar with Bootstrap as well. You will become a master of Sass, and CSS architecture also you will be able to design 3 very many different landing pages for these projects so you can get experience and practice what we have learned and put that in practice. You will have 2 complete guides for CSS GIRD and Flexbox in this section in order to make your life easy. This course is all about design, and you will be the architect of 3 different and beautifully designed and crafted projects.


FIRST PART OF THE COURSE CSS AND SASS, FLEXBOX, CSS-GRID AND BOOTSTRAP INTRO:

1) Create layouts of every kind with the latest cutting-edge layout technologies.

2) You master Flexbox and CSS Grid and Bootstrap;

3) Design carefully for all kind of devices with media queries;

4) Understand the concepts of CSS and how you can make reusable code that is easily maintainable with Sass.


In this course, you will get familiar with background-clip, transform and perspectives when we are making rotating/flipping cards. You will use clip-path to shape the footer and header. Also, you will be able to create animations using @keyframes, transitions, and animation.

Working on these projects you will be able to use CSS selectors and pseudo-classes, elements that are the foundation of the modern CSS. Dealing with complex scenarios you will learn parent, child inheritance, box types and positioning elements using abstract and relative positioning. This course will be based on 7-1 rule and we will stick with the BEM methodology so you can create massive code components that will be very easy for maintenance and in the same time expandable and scalable. With Sass, we will use variables where we declare their values and after that, we will use them in our project whenever we need them. You will learn how to use media queries and create ones where our design breaks, meaning that you can adjust your design to fit all kinds of screen sizes by simple and advanced calculation.

Flexbox and CSS grid will give us the opportunity to learn the process of organizing our website into a layout that is easily fits different screen widths. I have two crash courses and examples for these two particular layouts. Additionally, we will use font awesome icons but we also will learn how to use the modern SVG icons in our projects so we can understand the difference between them. You will know how to change SVG color and generate SVG sprites with a breeze. On top of this, we will use the NPM so we can compile Sass and every code changes will automatically be reloaded on the browser. You will get familiar with the processes how to concatenate, prefix and compress and compile CSS file;

SECOND PART OF THE COURSE PHP, PDO, MYSQL, SECURITY AND OOP INTRO:

The second part of this course is PDO PHP and OOP using Classes, methods and etc. We will not use the entire MVC framework but we will get familiar with how to use M from that framework which stands for MODELS. Inside this model folder, we will create our core functions that will interact with the database in a secure manner. Security is the number one feature of PDO so that is why we are going to do our projects with PDO. I have created a crash course on how to use Classes and PDO just for this project so if you are a person with limited PHP understanding you will not have a problem after the crash course to follow this part.

What you will learn in this part:

You will learn that PDO represents PHP data objects and a lean and consistent way to connect to a Database. Also, PDO can work with multiple different databases like MySQL, Firebird, Oracle, PostgreSQL and lots more. PDO provides secure data access layer no matter what type of system you are using, you can still use the same functions to access this data. You need to use a PHP 5.4 or latter version in order to work because PDO will need OOP features. The biggest advantage for which I choose to use PDO is that we can write prepared statements that will prevent SQL attacks and injections that can destroy what we have stored in the database. PDO is very usable and reusable, usable because have lots of functions out there that we can use like fetch and error handling, and reusable means that it can access multiple databases because of its unified API. We will write so many create, read, update, delete queries that by the end of this course you will become the master of PHP. You will become a master of PHP PDO and get to know the three main Classes like PDO, PDOStatment, and PDOexception. For these reasons, I have also included lectures about OOP (Object Oriented Programming) Classes where I discuss what is Class and how to use them in our project. You will learn how to instantiate objects of that Class and how these objects can interact and use the methods/functions of a parent class. In addition, we will discuss Abstract and Extend Classes. In addition, you will learn how to take payments using PHP Stripe API, and PHP SDK for PayPal RESTful APIs.

After that, we can send emails to our users/customers using PHPMailer and we can install it via Composer. In short, you will learn how to use a composer or dependency management tool for managing dependencies of PHP software and required libraries.


Other smaller things worth mentioning:


1)Password Hashing & Security in PHP

2)Variables, Constants & Super Global

3) Arrays in PHP

4)Loops like While, foreach, for and etc

5)Control Structures

6)Methods or Functions

7)Sessions

8)Store and move FILES

9)Authentication

10)PHPMailer to send emails and files

11) Take Payments With Stripe and Paypal


THIRD PART OF THE COURSE JAVASCRIPT, AJAX and JQUERY INTRO:

Although there will be no separate third part but it will be included with the PHP part because we need to do a lot of the things on the website using JavaScript and JQuery. So in this last part, I want to discuss why we are going to use JavaScript and Ajax to finish our project. Although this course is not about learning JavaScript and Ajax you will still learn a lot during this course. So what is AJAX?

AJAX is an acronym that stands for Asynchronous JavaScript and XML, and it describes a set of development techniques used for building websites and web applications. Ajax's core function is to update web content asynchronously (the "A" of AJAX), meaning you will not need to reload an entire web page when only a small portion of the content on that page is updated. "J" stands for JavaScript and JavaScript will be used to hide and show notification or messages when we are deleting and saving data. Also, we will display alert messages with the help of JavaScript. Login and registration will be done using JavaScript regular expressions so we can validate input form data before storing it in our database. With the help of Ajax, we will create Ajax dependent drop down select. Because this is a real project that requires a lot of things to be done, we need to use Ajax and JavaScript in order to keep our design feels and look very modern.

Finally, we will use Google Maps JavaScript API and Geocoding to display lat and lng, search for live places or particular addresses and finally store them into the database. Geo-coding will be used to convert the address that is in our DB into lat and lng to display into the map on other pages. Additionally, we will learn how to place a marker, how to make custom icons for marker such as beach flag because I think that adding google maps into any website will make the website look more professional and clean.


Why should you take this course?

Before buying any course my recommendation is to look into the specification and curriculum of that course and also look at the project tour or how the application will look like. After reading and watching what has been created by the instructor/instructors then join that course.


My promise to you?

I will always try to make you happy during the entire course, maybe sometimes over boring but that's me. I know that life is hard on its own and everyone has it's own problems so sharing info about my day and wishing you to be strong and positive is something that I will do in the lectures. It's never about how much money I will make from this course, it's what you will get out of this course. So promise that I will update the course constantly and listen to your requests and desires.

Info that you need to know: In some lectures, the cursor pointer of my mouse is not visible but that should not stop you from taking this course, because this is a web development course where you can see me coding and my mouse is not going to be the problem. This is my mistake and is only there in the first part of this journey. My honesty is number one and I want you to know before joining the course. Also, I'm here for you in the Q&A section, we will do everything together and I hope you will enjoy it.

My Style

I like to create things and achieve things that most the people think that it's not possible or I'm not able to do this by myself. So don't be the person that will listen to others and never take the step forward. What I suggest is to listen what your heart & guts tells you and follow them.

My Goal

My goal is to make you a better programmer/designer and developer so you can get your dream job, get more money or even start your eCommerce or any other business with my help.

So, should you take this course?

The answer is a big YES YES YES!

The reason is that I packed so much great content into one course and I can easily split this one into 3 smaller courses so I can get more students and money. But that is not the case I want to create one that will stand out.

Can I make money with PHP and CSS, AJAX and JavaScript?

  1. The answer is yes, the senior PHP developer in Australia can take from 80 to 130 thousands per year.

  2. PDO PHP is must programming language for anyone that deals with web development.

  3. CSS is underestimated and is true must because as you will see in this course it can be very powerful.

  4. The reason why i put this complete course in one is because I know that the entry job is very hard, and they are thousands and thousands like this on job advertisement companies. So look bellow what they require and also what you will learn.


Some of the PHP Junior/Graduate or entry Level Web Developer graduate will earn from 50K-70K for the first years:


Outline of what they request and want from job applicant: This is a short summary of the skills they want today in 2019/2020.

  • Follow Best Practices – Apply the best practices of web design and development using HTML, CSS, JavaScript, etc.

  • Have a passion for clean code – Take pride in creating reusable, easy to read, scalable code.

  • Have an eye for detail and design

  • CSS Pre - processors – Sass, Less or similar

  • Good verbal and written communication skills

  • Can work Independently and problem solve difficult issues on the fly

  • Experience with command line

Highly regarded but not necessary:

  • Development experience with other eCommerce platforms

  • Object Oriented Programming – A clear understanding of OOP or experience in any kind of backend development.

  • SQL experience – A good understanding of or experience with SQL databases

  • Experience with build tools – Gulp, Grunt or similar

  • Have a good understanding of Web Accessibility and SEO



After all, being said, I hope to welcome you as a new student in my course. I'm sure you're gonna love and enjoy the content because there is so much you can learn from. You will start with zero and end up being a hero!


Thanks,

Rick



Who this course is for:
  • This course has been created to assist students, IT graduates, IT developers at varying levels of expertise that want to upskill in both Advanced CSS and Advanced PHP PDO