The Complete HTML 5 CSS 3 and PHP Master Class for Beginners

Опубликовано: 08 Январь 2025
на канале: Web Monkey

3,488

114

In this mega tutorial, we are going to build a full one page business website using HTML 5, CSS 3 and PHP.

We will first cover the basics of HTML and CSS and then use this knowledge to build the website. I will also show you how to make the website responsive for tablet and mobile devices.

There will also be 3 additional sections where we will cover web design, SEO and also PHP as well.

HTML

0:00 - Introduction
8:24 - Writing our first HTML Code
10:39 - Installing Brackets
12:29 - Introduction to HTML
15:16 - HTML Tags & Elements
19:32 - HTML Attributes
21:26 - HTML Headings & Paragraphs
26:24 - Hyper Links
29:28 - Images & File Paths
34:41 - Assignment
35:52 - Assignment Solution
38:08 - HTML Lists
46:09 - HTML Style Attributes
53:27 - Text Formatting
59:16 - Block vs Inline Elements
1:02:57 - The Break Tag
1:05:35 - Divs and Span Tags
1:10:50 - Combining Inline & Block Elements
1:14:05 - The Head Tag
1:21:47 - HTML5 Semantic Elements
1:25:43 - HTML Conclusion

CSS 3

1:26:48 - CSS Section Preview
1:27:40 - Download the Files
1:28:31 - Basic CSS Syntax
1:30:37 - Linking HTML & CSS
1:32:35 - The Power of CSS
1:36:35 - The Font Family Property
1:47:36 - Other Font Properties
1:53:00 - CSS Classes & IDs
2:03:11 - The Background Image Property
2:18:25 - The Display Property
2:23:43 - CSS Margins & Paddings
2:34:38 - The CSS Box Model
2:37:58 - Max Width Property
2:44:34 - The Position Property
3:02:05 - Z-index Property
3:04:22 - CSS Specificity

THE PROJECT - BUILDING OUR WEBSITE

3:15:37 - Project Section Preview
3:18:06 - Download the Files
3:18:59 - The Starter Code
3:23:05 - The Inspect Tool
3:40:28 - Building the Header Part 1
3:57:09 - Building the Header Part 2
4:05:48 - Designing the Header Part 1
4:24:50 - Designing the Header Part 2
4:38:06 - Adding the Header Background Image
4:47:52 - Adding the Hero Section
4:53:52 - Styling the Hero Section
5:13:01 - Transitioning our Buttons
5:22:07 - Building the About Us Section
5:35:24 - Creating the Services Section
5:49:35 - The Clear Property
5:57:34 - Styling the Services Section
6:08:02 - Building the Why Us Section
6:18:26 - Building the Team Section
6:35:37 - Testimonials Challenge
6:37:53 - Building the Testimonials Section
6:50:13 - Building the Clients Section
6:55:58 - Styling the Clients Section
7:04:22 - Creating the Contact Form
7:15:00 - Styling the Contact Form Part 1
7:24:43 - Styling the Contact Form Part 2
7:31:50 - Building the Footer
7:37:13 - Styling the Footer Part 1
7:44:11 - Getting our Social Media Icons
7:49:17 - Styling the Footer Part 2
8:05:26 - Adding the Remaining Icons
8:17:04 - Adding the Anchor Links
8:34:50 - Adding Animations
8:48:25 - Adding Filter Effects
8:51:55 - Section Review
8:42:40 - Responsive Design Section Preview
8:54:21 - Introduction to Mobile Responsiveness
8:57:19 - Creating the Break Points
9:01:39 - Creating the Mobile Header Part 1
9:10:13 - Creating the Mobile Header Part 2
9:22:37 - Tablet Responsiveness Part 1
9:34:32 - Tablet Responsiveness Part 2
9:39:09 - Phone Responsiveness
9:48:21 - Section Review
9:50:13 - Search Engine Optimization
9:58:00 - Speed Optimization Part 1
10:10:11 - Speed Optimization Part 2
10:12:51 - Adding our Favicons
10:20:04 - HTML Markup Validation
10:23:56 - Launching our Website
10:36:34 - Managing Scripts
10:39:38 - YOU DID IT !!!

WEB DESIGN

10:42:22 - Site Structure
10:52:38 - Fonts
10:58:16 - Colors
11:05:02 - Icons
11:08:57 - Background Images
11:14:13 - Spacing
11:15:55 - Section Review

PHP

11:16:42 - Section Preview
11:19:13 - Creating the footer.php file
11:30:11 - Creating the header.php file
11:32:35 - Creating the contact.php file
11:35:22 - Updating the Menu Links
11:39:09 - PHP Challenge
11:41:06 - The Date Function
11:45:19 - Making our Contact Form Work
11:53:59 - Conclusion

Download the Code & PDF Book - https://www.dropbox.com/s/7vjfuwzdtof...

Buy the Course - https://www.thewebmonkeyacademy.com/c...

Follow me on Facebook - / thewebmonkeyonline

Visit my blog - https://thewebmonkeyonline.com/

Buy Siteground Web Hosting - https://www.siteground.com/go/you_tube

For business inquiries, product reviews or partnerships, please send an email to [email protected]

Did you find this video useful and want to say thanks by buying me a cup of tea? Please send your donation via Paypal to [email protected]. Thanks.