This is a WordPress Tutorial for Beginners who wants to learn how to build just about any web pages they see on the internet, and using just the WordPress editor, a free theme, and a free plugin.
Resources:
๐ Download Tutorial Images: https://jackcao.com/download/tasters-tutorial-images
Tools I use:
โ
Web Hosting: https://jackcao.com/best-web-hosting
โ
WordPress Theme: https://jackcao.com/best-wp-theme
โ
WordPress SiteSpeed Plugin: https://jackcao.com/best-wp-caching
๐ Subscribe to get notified when new videos are published: https://jackcao.com/subscribe
0:00 Overview: What we are going to build
2:15 Important Concept to Understand about Web Pages
2:58 Orientation of the Tutorial
3:49 Theme and Plugin Installation
4:42 Initial Page Settings
5:57 Designing the Page Header
7:01 Adding Logo
7:58 Adding Header Navigation Menu
9:23 Change the Text Color of the Header Menu
9:26 Install Google Chrome Extension: Colorfont
10:44 Designing the Header Menu Button
12:50 Transparent and Sticky Header Menu
14:01 Page Hero Creation
14:11 Initial Settings (Font Style and Color)
14:56 Editing the Home Page
15:18 Initial Settings (Remove Title, Page Full-Width
16:13 Adding Elements to the Page (Row Layout, Background, Columns)
19:58 Paddings and Margins
22:29 Adding Featured In Icons
24:00 Product Grid
24:15 Color selection
24:39 Adding Background of the Section
25:07 Add Heading Title
25:48 Add 4 Columns for the Product Grid
26:42 Add button (Styling Trick)
28:52 Duplicate Elements (Styling Trick)
30:00 Edit Sticky Header Background Color
33:52 Testimonials Section
33:59 Adding Background
34:42 Adding/Customizing Testimonials Gutenberg Block
43:23 Accordion Section
43:37 Adding Background
43:45 Adding/Customizing Accordion
51:09 Call-to-Action Section
52:25 Designing the Page Footer
53:51 Add Logo
54:17 Add HTML Text to Widget (Without Understanding HTML Codes)
55:14 Add/Style Social Icons
56:03 Add Multiple Menus for Footer Widgets
58:16 Edit Colors of the Footer Widget Menus
59:04 Edit Footer Bar Elements (Copyright, Terms and Conditions, etc.)
1:02:40 Outro
1:03:04 Speed Performance of the Landing Page weโve just built
1:03:20 WordPress Speed Optimization
โญ WordPress Themes:
Kadence vs Blocksy: https://youtu.be/EjQG601ljXk
โ About the video: The objective of this video is to give you the foundation on WordPress so that you can build any web pages you see on the internet without using any page builders, like Elementor or Beaver Builder. Page builders are the main cause of site speed, so we want to avoid them as much as possible.
๐ Case Study: Improve Site Speed (28 to 92): https://youtu.be/INvxYNH9gKk
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, Iโll receive a small commission. I wonโt put anything here that I havenโt verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#homepage #landingpage #fastloadingpage #wordpressspeed #wordpressforbeginner #wordpress #jackcao #wordpresstraining