Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Modern Web Bootcamp, Design with PHP, SASS, CSS-GRID & FLEX

Name: Modern Web Bootcamp, Design with PHP, SASS, CSS-GRID & FLEX
Rating: 4.3 (22 reviews)

Design Stunning Websites With Sass, PHP, CSS-GRID , Flex and Bootstrap . Learn how to use Node js, NPM and PHP

Created byRick Sekuloski

Last updated 9/2020

English

English [Auto],

What you'll learn

Bootstrap framework and how to use the 12 column grid system
CSS GRID
Flexbox
PHP, OOP
PHP PDO and MySql Database
Align and Justify Content with Flexbox and CSS-GRID
Sass, Compile Sass locally
Complete Folder structure and organization
Transitions and Transforms
NodeJs and NPM to install packages
BEM methodology
Absolute, Relative and Fixed positioning
CSS pseudo-class
Custom properties ( CSS variables or cascading variables)
Animations with @keyframes
BEM methodology
CSS pseudo-class
Classes in PHP
Sessions and Cookies
PHP Loops
PHP Alerts
PHP Objects
PHP Polymorphism
PHP Inheritance.
PHPMailer
Install packages with Composer
Javascript time function
Smooth Scrolling
Wow Js
Animate CSS

Course content

6 sections • 118 lectures • 26h 3m total length

1.What Is PHP And Install Xamp And Apache Server locally8:15
Install and configure PHP on your local machine using XAMPP and Apache, access localhost, set up a database with phpMyAdmin, and learn PHP basics for server-side coding.
Important for those who have problems with PHP and VsCode8:47
Educational and Motivational Lecture3:06
2.Variables, Vscode text editor And Create Our First Folders Structure13:44
In this lecture, you set up a PHP project, create an index.php and first folder structure, and use variables, echo, and comments; explore data types, concatenation, and define constants.
3.Multidimensional, Indexed And Associative Arrays In Php14:15
Learn to declare and access indexed, associative, and multidimensional arrays in PHP, using zero-based indexes, print_r and var_dump for inspection, and loops with count to traverse elements.
4. For Loop, While And Do While, Foreach loop For Arrays12:00
Master for loops, while and do while, and foreach iterations in PHP, learn how to loop through arrays—numeric and associative—and print values with practical examples.
5. If, Else, Switch, Comparison And Logical Operatos6:20
6. Functions In Php, Camel Case Explained, Require And Include And Require Once13:27
Explore PHP functions, including defining with function, returning values, and managing scope, while clarifying camel case conventions and the differences between include, require, and require_once.
7. Sending Data To Another Page With Post, Get, Request, Php Self And Security20:14
8.Filter Var, Sanitze, Filter Validate Function Part 121:42
Learn to validate and sanitize user input in PHP using filter_var, applying email and integer checks, and handling post data for name, email, and age.
9. Validate Data Part 221:36
Explore how to implement filters and validation in PHP forms, including email validation, integer ranges, and input sanitization with filter_var, filter_input, and arrays.
10. Lets Put Everythuing In Practice, Create a simple project24:31
Create a simple PHP form submission, validate inputs, display alert messages for errors and success, and sanitize the email while preparing for future database storage.
11. Part 3 Validation Plus Superglobals15:21
12. Session, Session Start, Unset And Destroy23:21
Explore server-side PHP sessions to store data across pages, start and destroy sessions, and manage login/logout. Compare sessions with cookies and apply basic validation.
12.Cookies, Set, Delete, Print Them7:40
13. Errors, Fatal, Warning And How To Fix Them11:37
Explore how PHP handles errors and exceptions, including fatal errors versus warnings, and learn practical error handling with error reporting, undefined variables, and basic try and catch concepts.
15. Exceptions, Try And Catch Block Plus Custom Exception Class And Handler19:12
15. Starting Book Project, Setting Database, Connectiing It And Create Folder23:21
16. Fixing Problem From Before, And Creating Cards To List Elements From The Db22:12
Fix prior issues by rendering a dynamic Bootstrap card grid from the database using PHP, looping through books to display title, description, author, and read more links.
17. Book Page Is Created, And Using Real Escape String For The First Time15:03
18. Edit Book And Create Session To Notify The User For The Changes23:28
19.Delete, Insert, Image Saving To File And To A Database27:56
Demonstrates building delete and insert actions in PHP, handling post requests, and uploading images to a server folder while updating a database with book details.
20. Php Cheat Sheet, Lot Of Code Plus Php Magic Constants12:26
21. Date And Time In Php, Strtotime Function, Date Function, Time Function20:03
Explore date and time handling in PHP with date, time, and strtotime functions, format options, current timestamps, time zones, and calculations like future dates.
22. Classes, Properties, Set And Get Methods, Constroctor And Access Levels24:10
Explore object oriented programming in PHP by creating a student class, defining private properties, constructors, and public getters and setters, and learning access levels like public, private, and protected.
23. Inheritance, Parent Child Plus Protected Access Level Explained15:47
Explore inheritance by extending a person class into a student class, sharing public and protected properties. Learn how public, protected, and private access control visibility of methods and fields.
24. Abstract Classes, How To Extend An Abstract Class10:52
25. Magic Constants, Constructor And Classes in PHP8:25
26. Interface And Polymorhism, Override Methods From The Child Class12:07

1. Flexbox, Justify-Content, Main-Axis And Cross Axis21:43
2. Align Items And Justify Content6:59
3. Flex Wrap, Align Self, Order And Calc Function17:56
Learn how to build responsive flexbox layouts using flex wrap, align self, and order, and apply calc for dynamic widths and margins with center alignment and justify content.
4.Flex Grow, Shrink And Basis11:23
Explore how flex grow, shrink, and basis control item sizing in flexbox, using wrap, fixed bases like 300px, and percentage-based space.
5. Align Content7:42
6. Practice Flexbox And Build Real Website Layout23:15
7.Project Finished7:07
Implement responsive layouts using flexbox and media queries to switch from row to column, manage an 800-pixel width breakpoint, and adapt navigation for smaller screens.

1.Css Grid Introduction, History, Tables, Flexbox9:14
Learn CSS grid introduction and history, compare tables and floats, and master flexbox and bootstrap to build flexible, cross-browser layouts with rows and columns.
2. Explicit Vs Implicit5:50
3. Grid Template Columns, Px, Rem ,Em, 1Fr Min Content And Max-Content26:05
4. Grid Rows, Minmax For Rows And Grid Flow, Grid Lines18:28
5. Span And Postion Items In Grid17:03
Learn to span and position items in CSS grid by naming lines, using grid-column and grid-row, adjusting gaps, and swapping items with start and end values for flexible layouts.
6.Css Grid Project - Create Amazing Layout Fast17:54
7. Naming Grid Lines And Recreating This Layout17:57
Learn to name grid lines and recreate layouts using grid template columns, repeat, and named areas like header, nav, content, and footer, positioning content and ads precisely.
8.Grid Template Areas And Making The Layout8:11
9. Justify And Align Content, Items20:38
Explore how to justify content and align content and items using grid and flexbox. Learn main and cross axes and implement justify self and align self to create balanced layouts.
10. Grid Area And Justify Items8:07
Learn to use the justify-items property in CSS grid and design layouts with named lines and grid areas. Combine rows, columns, and grid areas to create powerful, responsive templates.

What We Are Going To Build, Header, Menu, Backgound Video Tour1:15
1. Starting Our Portfolio Page, Creating our folder Structure9:01
Kick off the portfolio page by creating a structured folder setup (profile, images, js, sass, vendors) and configuring Bootstrap and local Sass, with guidance on using local versus CDN resources.
Important Watch This1:06
Watch This lecture because If you can't create the build process with the scripts then you can install latter on vs extension
2. NodeJs, NPM and writing our scripts for compiling Sass locally20:37
Install Node.js and npm, create a package.json, and set up scripts to compile sass locally with node-sass.
3. Adding Scripts or Task for Creating simple Build Process9:52
Design and assemble a simple build process by configuring scripts, concatenating CSS assets with Sass, watching files, and running a final npm build to produce ready files.
4. Finished, Final Build Process is Set and live page view is working9:35
Fix for those who have problems How To Compile Sass With Plugin5:10
5. Starting Our Project. Add video File in the background17:25
Start a new web project by setting up abstracts, variables, and layout folders, then build a header and a looping, muted background video.
6. Styling the video with object fit and create grey overlay with using pseudo16:29
7.Title Box and Heading styled in Typhography section14:00
8. Coding Header and Menu Section14:22
9. Basic reset, border box and box-sizing, plus adding google fonts12:39
Perform a basic reset, enable border-box via box-sizing, and load Google fonts to establish consistent typography and a scalable base for your projects.
10. Menu Styled and Border Box Explained16:31
11.Using pseudo elements to style the hamburger button& hide the chekboxI& float15:19
Learn to style a hamburger menu with CSS using pseudo elements before and after, hide the checkbox, and float the menu in the header.
12. Create horizontal menu and plus making hamburger menu18:51
Build a responsive horizontal navigation with a logo and items styled by absolute positioning, floats, borders, media queries to reveal a css hamburger menu with a checkbox toggle and transitions.
13. Make hamburger button to work on click, checbox hack11:24
Learn to make a responsive hamburger menu work with a checkbox hack, toggle visibility, height, and opacity, and refine the menu for a smooth transition and close behavior.
14. Menu Finished, Javascript Function to close the menu10:02
About Me Section Tour0:45
Design and implement an about me section with a left image and descriptive text, using media queries for responsiveness and building it with both Bootstrap and flex layout to practice.
15. About Me Section with css grid20:31
Discover how to build an about me section using CSS grid, combining Bootstrap layout with responsive grid columns for a profile image, heading, and description.
16.About me section recreated with boostrap grid12:47
Explore how to recreate an about me section using Bootstrap grid, with container and container-fluid, 12-column layouts, rows, and responsive utilities to align image and heading.
Education Section Tour0:45
17. Education section HTML Code11:22
Style the education section by adjusting fonts, colors, and alignment using css variables, data nesting, and typography tweaks, then refine responsive spacing with a 600px media query.
18. Education Section Created with Typhography from Bootstrap17:02
Create an education section using bootstrap typography and flex layouts to structure headers, content wrappers, and education data with icons and titles for responsive presentation.
19.Anchor link added and margin and padding to some elements6:27
20. Fixing our design and also creating smooth scrolling with our anchors11:45
Polish the design by adjusting the education and about sections, tuning padding and margins for responsiveness, and implement smooth scrolling for anchors with a dedicated JavaScript file.
Experience Section Tour0:45
Explore the experience section tour and learn to build a responsive area with card layouts, while noting that animations will not be included at this stage.
21.Experience Section HTML structure11:00
22. Display flex applied to out Experience section17:55
Apply display flex to the experience section, align items center, and style the article, image wrapper, borders, padding, and colors for a responsive mobile-friendly layout.
23. Experience section finished to be seen on mobile with 2 lines of code17:21
Gallery Section Tour0:50
Create a responsive gallery section to showcase our projects portfolio, inviting designers, photographers, and developers to add relevant images. Ensure the section remains scrollable and responsive across large viewports.
24. Gallery Section HTML Code6:42
Learn how to implement a responsive HTML gallery section by creating a gallery container, a gallery list with multiple items, assigning classes, and preparing images and alt text for styling.
25.Gallery section Created with css grid techniques24:34
Portfolio Section Tour1:07
Preview how to build and style a responsive portfolio section by linking projects and expanding cards. Connect to a YouTube channel and plan future lectures as the design evolves.
25.Portfolio Section HTML Structure18:08
Build a portfolio section with a structured HTML layout, including a portfolio container and body, pricing in australian dollars with original price and discounts, and a link to contact.
26. Styling the Portfolio section with flexbox14:17
Learn to style the portfolio section with flexbox, adjust the container and sizing, apply a lime background, and use space-between alignment, typography, and links for a polished, responsive layout.
27.Portfolio Almost Done, More styles and making it to look like udemy posts15:39
This lecture teaches styling a portfolio item to resemble Udemy posts by adjusting font sizes, colors, borders, spacing, and hover effects, with responsive tweaks for overflow and coupons.
28. Gallery, Porftolio all styled to be visible with media queries16:56
Style the gallery for mobile with media queries, switching from rows to two columns, adjusting container width and image sizing, and adding a YouTube portfolio link with a styled icon.
29.Finished! Youtube Section Added plus box shadow7:42
Design and polish a YouTube section by styling a video block with color, padding, borders, and a hover box-shadow, then adjust for mobile version.
Contact Me Section Tour0:48
30.Contact Me Section, HTML code and form created20:05
Create a contact me section with a form including name, email, a reason select, a message textarea, and a submit button, plus label and styling guidance.
31. Style the form using D-flex15:45
Style the form using d-flex to center content and apply padding, background color, and shadows. Enhance the interface with button hover effects, responsive sizing, and clear typography.
32. Styling the inputs, labels,textarea and etc12:25
33.Form Styled used Pseudo elemets to style focus state of the inputs and area16:51
Explore styling focus states of inputs and text areas using CSS pseudo elements. Build interactive forms with focus and active states, custom arrows, gradients, and responsive positioning.
34. Contact Me Section Finished14:30
Style the contact form by configuring borders, a 600px text area height, 10px border radius, vertical alignment, font sizes, margins, and responsive tweaks via media queries.
Newsletter Section tour0:24
Take the newsletter section tour by implementing a single input and a submit button, and preview its background and responsive layout on very small screen devices.
35. Section newsletter, HTML code9:41
Build a newsletter sign-up section with HTML and Bootstrap, including a container, a 'subscribe to my newsletter' heading, an email input, and a submit button.
36. Subscribe Section Styled and Finished16:09
Style a centered subscribe section with a max-width container and centered text. Build a flex form with an input and a button, applying typography, placeholders, hover effects, and responsive tweaks.
Footer Section Tour0:42
Design a responsive footer section with social icons, terms and conditions link, and copyright information. Learn how this footer adapts to mobile screens for a modern look.
36.Footer9:47
Build the portfolio footer, add social media icons, legal links, and copyright notes, and style the section with flexbox, list resets, and responsive spacing.
37.Footer Finished using flex-basis and nth-last-child12:42
Master the footer layout by using flex-basis, flex-wrap, and nth-last-child to align social and legal sections, apply padding and a top border, and style links with hover effects and transitions.
38.Lets animate the page using Wow js and Animate css15:12
Explore using wow.js and animate.css to animate web pages with data-wow-delay and effects like fade in and slide in from left across sections.
39. Css Custom Properties or Varibles. Use root variables5:40
Learn to use CSS custom properties and root variables declared in :root to define colors and values that inherit across the entire document, usable in JavaScript and calc functions.
40. Loding Animation with google colors18:35
Create a Google colors loading spinner with HTML, CSS, and Sass by building a fixed full-screen loader using before and after elements and minimal JavaScript to stop on load.
41. Loading Finished with @keyframes animation15:47

1. Start PHP PDO and Creating Database and Tables in Phpmyadmin22:16
2. Install Composer and Use PHPMailer to send emails, Insert new rows in db14:06
Install composer and set up PHPMailer integration, connect to the database, insert new rows into the contact table with bound parameters, and prepare email sending.
3. Setting PHPMailer and fake smtp server to recieve the message17:27
Set up PHPMailer with a fake smtp server Mailtrap, configure smtp credentials, and send test emails with from, reply-to, and subject lines.
4. Using Redirect, Sessions to notify the user if the email is sent or not17:01
Learn how to implement redirects and PHP sessions to inform users whether an email was sent, including success and error messages and Bootstrap alerts.
5.More Css Style added in Profile part and Message Styled16:05
6. Subscribe section done with PHP, plus making custom subject for emails16:36
Learn to implement a PHP-based subscribe form, store subscribers in a database, and generate dynamic email subjects (e.g., free course, ultimate promo) for personalized mailouts.
7. Notification closed with javascript setTimeout function5:05

0. Very Important First Lecture How To Get The Maximum Of This Course5:22
1.Link to Theodore Coding Website Look at the table and there are the lectures ordered, On youtube is hard to follow
if you don't use my website.

2.
https://theodorecoding.com/post/4-ultimate-laravel-course-from-scratch-become-expert-in-laravel-php
3. Resources are at the end. Scroll at the end to grab the resources
4. Subscribe and like my Youtube Channel
Rick
1-Laravel Introduction And Advantages Of Using It To Build Applications11:29
2. Tools Neded6:15
Learn how to set up essential development tools for Laravel, including composer for dependencies, node.js and npm, Apache server, and a suitable code editor with Laravel extensions.
3 Create Our Project And How To Use Different Versions-89:49
Learn how to install a Laravel project using composer, choose and switch between versions, and use the official docs to set up and run the intro project.
4. Ways We Can View Our Project11:16
Start and run a Laravel app locally with Zamp, open localhost/public, configure a virtual host and hosts file, and ensure secure, direct access to the app.
5.Laravel Folder Structure Introduction15:06
Explore the Laravel folder structure and map MVC components—models, controllers, and views—across app, routes, and resources. Use composer.json, Artisan, bootstrap, config, database, and environment to scaffold and run the application.
6.Views And Routes13:17
Learn to create routes and pass variables in a Laravel-inspired flow, render views from resources/views, and handle get and post requests, including dynamic blog post IDs and titles.
7.Controllers And Methods15:42
learn how to replace closures with a pages controller in a laravel app, using resources and mapped routes to render contact, about, policies, and employment views.
8.Passing Parameters Into Views Using Compact And With14:12
9.Css And Javascript Scaffolding7:10
Learn how to scaffold CSS and JavaScript in Laravel before version six using the ui package, generate login and registration scaffolding, install dependencies, and compile assets for the public folder.
10.Blade Templating And Passing Parameters Into The View15:17
Master blade templating in Laravel by extending layouts, yielding content, and passing multiple parameters to views; explore compact versus with and resource routing for posts.

Requirements

Basic HTML skills

Description

Welcome To Modern Web Bootcamp, Design With Sass, PHP, CSS-GRID, Flex, and Bootstrap. Learn how to use Node js, NPM, and PHP!

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

Requirements:

You will learn PHP front to Back from the beginning
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.
You Will learn about Flexbox and CSS-Grid from the begining

Description

The aim of this course is to help anyone that wants to create stunning websites for its business or as a portfolio page so you can attract more customers.

This course will help everyone that wants to learn how to create modern and fancy websites. There will be 3 crash courses at the moment and I'm planning to create more crash courses in the future.

So 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?

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

This course if for every IT developer working or for every student out there that want to land is its dream job. It will take you from the basics until the very advanced stages of designing and programming.

Welcome to the best and "Modern Web Bootcamp, Design with PHP, SASS, CSS-GRID & FLEX, 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.

1. The first part is for absolute beginners in PHP, starting from the basics like variables, to handling errors and creating simple CRUD application.

2. Second is designing layouts with Flexbox highly used by Boostrap

3. The third part is CSS-GRID

4. The fourth part is creating a modern website for your portfolio or company needs

What You Will Learn in this course

You will learn about the Bootstrap framework and how to use the 12 column grid system.
You will learn how to create a very important build process with installing Nodejs and NPM packages
You will learn how to create animations with @keyframes
Transitions and Transforms
You will learn how to add video in the background
You will learn about opacity, visibility z-index and much more
Box-shadow and Text-Shadow
You will create a responsive website and payouts with media query
You will learn how to use NPM and install packages
You will learn how to use CSS GRID to create layouts very fast
Sass and components
Complete Folder structure and organization
Fixed menu on the top
Checkbox hack for the menu
Parent, Child relationship
BEM methodology
CSS pseudo-class
You will learn how to position items old with the absolute positioning and new way with CSS GRID and Flexbox
You will learn about PHP Object-Oriented Programming
You will learn about Classes in PHP
Sessions and Cookies
PHP Loops
PHP Alerts
PHP Objects
PHP Polymorphism
PHP Inheritance.
PHP Abstract Classes
Design to fit all kinds of screen sizes
Ions and Fonts
PHPMailer
Composer
Emails Sending and Receiving
Create a database and tables
Store information in the tables using PDO named parameters
Javascript time function
Smooth Scrolling
Wow Js
Animate CSS

=======================================In future without Time Frame================================================

1.I will include more crash course like Laravel from the begining

2. All advanced course I create you will have the chance to see what I will do there with small crash course so if you are intereted then you can continue with your studies with me

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.

There will be a Q&A section where I want you to be involved and interactive with other students

My Style

I like to create things and achieve things that most of 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 to 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!

Are there any course requirements or prerequisites?

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.

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

Who this course is for:

All Levels

Modern Web Bootcamp, Design with PHP, SASS, CSS-GRID & FLEX

What you'll learn

Explore related topics

Course content

PHP Crash Course from the Beginning. Learn OOP, Small Crud Application included29 lectures • 7hr 41min

CSS FLEXBOX from beginner to master. Small Project Layout included7 lectures • 1hr 36min

CSS GRID Complete Course from the beginner to master. With small project10 lectures • 2hr 29min

Portfolio Page With PHP, SASS, Flexbox, CSS GRID and Bootstrap54 lectures • 10hr 23min

PHP Section With PDO7 lectures • 1hr 49min

Bonus Laravel Section11 lectures • 2hr 5min

Requirements

Description

Who this course is for: