13.12.2022, 18:59
Learn Bootstrap 4 The Complete Guide By Building 8 Projects
Last updated 6/2019
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 9.52 GB | Duration: 18h 2m
Learn Bootstrap 4 CSS Framework by Building 8 Projects & 1 WordPress Theme from Scratch with this 100% practical course!
What you'll learn
Create Responsive websites in NO TIME thanks to bootstrap
Take any PSD or JPG design and convert it into a Bootstrap Project
Build Websites with the New Bootstrap Version with the new Flexbox Grid!
Connect PHP / MySQL with a Bootstrap Website
Learn almost all the Components and Bootstrap Classes with a Hands On Training Course
Take your existing site into a fully dynamic WordPress site
Convert a Bootstrap site into a WordPress Theme!
Create 8 different & amazing projects!
Requirements
Basic Knowledge of CSS and HTML if you have ever writen a little HTML or CSS you will be fine!
A Text Editor i will be using ATOM & Visual studio Code, Brackets or Sublime Text are free too and available for Windows, Mac and Linux
A Local Server will be needed for the PHP section, i will be using MAMP, for the WordPress section i will show you a great tool called Local
6 Photoshop files are included, but if you don't have photoshop don't worry, i'll provide the images, colors and everything you need to complete the course
A great desire to LEARN with a 8 Real World Projects
Description
UPDATE AUGUST 2018:Just Added more than 100 videos and 7 Projects with the newest Bootstrap Version!Learn Bootstrap 4 The Complete Guide by Building 8 ProjectsWelcome to the course!! What makes this course the best about Bootstrap?In this course we will build 8 different projects (Beautiful and well Designed Websites)The projects included in this Bootstrap 4 Course:Spa WebsiteReal State WebsiteMusic Festival WebsiteAdmin PanelE-commerce DesignFiverr CloneArchitecture Studio WebsiteCuisine School WebsiteThis Course contains everything you need to know about the new Bootstrap 4 Version + Building a Complete Project from Scratch ( 7 Different Projects included also! & a WordPress Theme )The new version of Bootstrap contains a lot of new classes, helper utilities, a Flexbox powered grid and new components which all will be covered in this new course.We're building a complete Website (with 6 internal pages) and i'm gonna show you how to integrate PHP / MySQL with Bootstrap 4.Also we're building the Homepage of 7 Different ProjectsAlso we will take our design and create an amazing WordPress Theme.You will also learn how to extend Bootstrap components with CSS to make them look the way that you need to.6 Photoshop files (PSD) are included in this course that are going to be converted intro a Bootstrap 4 Website, so if you're looking for a PSD to Bootstrap course, this is the course that you should take!
Overview
Section 1: Course introduction
Lecture 1 The Projects Included in this Course
Lecture 2 The PSD Files for this Course
Lecture 3 The Code for this Course
Lecture 4 The Images for this Course
Section 2: Bootstrap 101 - The Basics of Bootstrap Grid, Buttons, Typography & More
Lecture 5 First steps with the Grid
Lecture 6 More About the Grid
Lecture 7 Typography Classes in Bootstrap
Lecture 8 Working with Images
Lecture 9 Margins & Paddings
Lecture 10 Tables in Bootstrap
Lecture 11 Buttons
Lecture 12 The Card Component
Lecture 13 Card Columns & Masonry Effect
Lecture 14 The Carousel Component
Lecture 15 Finishing the Carousel
Lecture 16 The Collapse or Accordion Component
Lecture 17 The Modal (or Lightbox) Component
Lecture 18 All About Navigation Menus
Lecture 19 The ScrollSpy Component
Lecture 20 The ToolTip Component
Lecture 21 The DropDown Component
Lecture 22 The Jumbotron Component
Section 3: PROJECT: Building the Home Page
Lecture 23 Starting our Project
Lecture 24 Working With The Header
Lecture 25 Creating the Main Navigation
Lecture 26 Styling the Main Navigation
Lecture 27 Adding Google Fonts
Lecture 28 Adding the Carousel
Lecture 29 Styling the Carousel
Lecture 30 Working with the New Website Section
Lecture 31 Styling the New Website Section
Lecture 32 Working With the Image Links Section
Lecture 33 Styling the Image Links Section
Lecture 34 Adding CSS3 Transitions
Lecture 35 Working with the Business Hours Section
Lecture 36 Adding a Table
Lecture 37 Styling the Working Hours Section
Lecture 38 Developing the Products Section
Lecture 39 Styling the Products
Lecture 40 Working With The Appointment Section
Lecture 41 Styling the Appointments Section
Lecture 42 Working with the Footer
Lecture 43 Working with the Social Networks Menu
Lecture 44 Printing the Social Icons
Lecture 45 Moving the File to a Local Server
Lecture 46 Splitting the Website into different PHP Files
Section 4: PROJECT: Building the About Us Page
Lecture 47 Adding the Main HTML For this Section
Lecture 48 Styling the Hero Image & adding the main content
Lecture 49 Adding the Business Hours Table
Lecture 50 Adding a Gallery
Section 5: PROJECT: Working with the Services Section
Lecture 51 Creating the services page
Lecture 52 Printing the Services into a Tab / Collapse
Lecture 53 Building the Coupon Sidebar
Lecture 54 Styling the Services Section
Lecture 55 Re using the Appointments Section from the home page
Section 6: PROJECT: Building the Shop / Products Section
Lecture 56 Creating the Main Products / Shop Page
Lecture 57 Adding the Single Page Product
Section 7: PROJECT: Building the Contact Section
Lecture 58 Building the Contact Form
Lecture 59 Styling the Contact Form
Section 8: PROJECT: PHP / MySQL - Creating the Database to display the Products
Lecture 60 Creating the Database
Lecture 61 Populating the Database
Lecture 62 Creating the Connection to the Database
Lecture 63 Printing the Products in the Home Page
Lecture 64 Printing the Products in the Products page from the Database
Lecture 65 Working with the Single Product Page
Lecture 66 Printing the Information from the database to the Single Product Page
Section 9: PROJECT: Building the Contact Form with jQuery, AJAX and PHP
Lecture 67 Adding Validation with jQuery
Lecture 68 Refactoring our Code
Lecture 69 Printing feedback in the Contact Form
Lecture 70 Validating the other fields
Lecture 71 Checking that there're no errors in our contact form
Lecture 72 Adding AJAX
Lecture 73 Building the Send PHP File
Lecture 74 Finishing the AJAX function
Lecture 75 Testing our Project
Section 10: Adding a Responsive Navigation (Hamburger Menu)
Lecture 76 Adding the markup (HTML)
Lecture 77 Styling our Hamburger Menu
Lecture 78 Making the Menu Fixed when scrolling to the bottom of the page
Section 11: How to Migrate your website into the latest version
Lecture 79 Migrate to the new Beta Version
Section 12: Converting our Website into a WordPress Theme - First Steps
Lecture 80 Local by Flywheel
Lecture 81 Installing WordPress locally with MAMP
Lecture 82 Creating our theme
Lecture 83 Adding the main Stylesheet
Section 13: WordPress Theme: Working with the Header
Lecture 84 Working with the header
Lecture 85 Adding the Main Social to the functions file
Lecture 86 Printing the Menu in our header
Lecture 87 Creating all the Pages and Adding the Main Navigation
Lecture 88 Printing the Main Menu
Lecture 89 Finishing the Main Menu
Section 14: WordPress Theme: Working with the Footer
Lecture 90 First steps with the footer file
Lecture 91 Adding a widget in the footer
Lecture 92 Adding two more widgets in the footer
Lecture 93 Finishing the footer
Lecture 94 Adding the JavaScript Files in the footer
Section 15: WordPress Theme: Working with the About Us Page
Lecture 95 Adding a Page Template for the About Us Page
Lecture 96 Adding a Gallery for the About Us Page
Lecture 97 Making the Gallery compatible with Bootstrap
Lecture 98 Final Adjustments to our Gallery
Lecture 99 Adding the Business Hours and the Sidebar
Lecture 100 Printing the Business Hours in the Sidebar
Lecture 101 Creating a Widget in the Sidebar for the Business Hours
Section 16: WordPress Theme: Working with the Services Page
Lecture 102 Adding the Page Template and Registering the Fields
Lecture 103 Printing the Information
Lecture 104 Displaying the Coupon on the Sidebar
Section 17: WordPress Theme: Working with the Products Page
Lecture 105 First Steps with the Products Page
Lecture 106 Adding all the Products into WordPress
Lecture 107 Adding a Shortcut to Display all the Products
Lecture 108 Working with the Single Product Page
Section 18: WordPress Theme: Working with the Contact Us Page
Lecture 109 Displaying the Contact Form with a Shortcut
Section 19: WordPress Theme: Working with the Home Page
Lecture 110 Adding the Posts for the Carousel
Lecture 111 Querying the Database to display the posts in the slider
Lecture 112 Finishing the Slider
Lecture 113 Printing the Slogan
Lecture 114 Adding the Main Information for some Pages
Lecture 115 Querying the Database to display the Main Information
Lecture 116 Printing the Business hours in the front page
Lecture 117 Displaying the Products in the Homepage
Lecture 118 Working with the Make An Appointment Section
Lecture 119 Adding Dynamic Titles to the pages for better SEO
Lecture 120 Taking a Screenshot
Section 20: PROJECT 2 : Building an E-Commerce Website
Lecture 121 Preview of the Finished Project
Lecture 122 Kicking off the Project
Lecture 123 Styling the Sitename
Lecture 124 Adding the Main Navigation
Lecture 125 Styling the Main Nav
Lecture 126 Adding the Main Image
Lecture 127 Adding the Categories with Bootstrap
Lecture 128 Styling the Categories with CSS
Lecture 129 Coding the About Us Section
Lecture 130 CSS for the about us Section
Lecture 131 Adding the Products Section (Working with the main product)
Lecture 132 Adding the second level of products
Lecture 133 Adding the Third Level or Products
Lecture 134 Styling the Products with CSS
Lecture 135 Working with the Footer
Lecture 136 Styling the Footer with CSS & Finishing the Project
Lecture 137 How to use BrowserSync to check the project in your site before uploading
Lecture 138 Emulators and Simulators for Mobile Devices
Section 21: PROJECT 3: Real State Website
Lecture 139 Preview of the Finished Project
Lecture 140 Working with the Top Bar
Lecture 141 Adding the Main Menu with a SubMenu
Lecture 142 Working with the Sider
Lecture 143 Adding extra content to the Slider
Lecture 144 Styling the Slider or Carousel
Lecture 145 Working with the Company Features Section
Lecture 146 First steps with the Properties Section
Lecture 147 Adding the rest of the properties
Lecture 148 Finishing the Properties Section
Lecture 149 Working with the contact us section
Lecture 150 Styling the Contact Us Section
Lecture 151 Working with the Blog Section
Lecture 152 Adding CSS to the Blog
Lecture 153 Adding the Testimonials Section with Carousel (Slider)
Lecture 154 Styling the Testimonials Slider
Lecture 155 Working with the Footer & Finishing the Project
Lecture 156 Checking the project in a mobile device
Section 22: PROJECT 4: Music Festival Website
Lecture 157 Preview of the Finished Project
Lecture 158 Kicking off the Project
Lecture 159 Styling the Top Section
Lecture 160 Styling the Event Name & Date
Lecture 161 Working with the Main Section
Lecture 162 Working with the Lineup HTML
Lecture 163 Styling the Lineup
Lecture 164 Working with the Gallery
Lecture 165 Adding a Countdown with jQuery
Lecture 166 Styling the Countdown
Lecture 167 Adding the Price List
Lecture 168 Styling the Price List
Lecture 169 Adding the Main Navigation
Lecture 170 Styling the Main Navigation
Lecture 171 Changing the Background color of the Top Bar when Scrolling
Lecture 172 Adding ScrollSpy
Lecture 173 Adding Smooth Scroll Effect
Lecture 174 Checking the project in a mobile device
Section 23: PROJECT 5: Architecture / Construction Website
Lecture 175 Preview of the Finished Project
Lecture 176 Working with the Main Navigation
Lecture 177 Adding the Hero Image
Lecture 178 Styling the Sitename and Navigation
Lecture 179 Working with the About Us Section
Lecture 180 Working with the Basic Model House
Lecture 181 Styling the Basic Model
Lecture 182 Working with the Premier Model
Lecture 183 Working with the Elite Model
Lecture 184 Adding the Gallery with Card Columns
Lecture 185 Working with the Footer
Lecture 186 Checking the project in a mobile device
Section 24: PROJECT 6: Building a Fivrr Clone Homepage
Lecture 187 Preview of the Finished Project
Lecture 188 Kicking off the Project
Lecture 189 Building the Header
Lecture 190 Building the Main Nav
Lecture 191 Building the Hero Image and Form
Lecture 192 Building the Main Section
Lecture 193 Adding CSS Animations to the Main Features Section
Lecture 194 Building the PRO Section
Lecture 195 Working with the first steps section
Lecture 196 Adding some Custom Flexbox Code !
Lecture 197 Finishing the first steps section
Lecture 198 Building the "yours..." section
Lecture 199 Adding the Testimonials Carousel
Lecture 200 Styling the Carousel (or Slider)
Lecture 201 Building the Fiverr Guides Section
Lecture 202 Working with the Footer
Lecture 203 Working with the Top Bar Section (a second header)
Lecture 204 Styling the Top Bar
Lecture 205 Adding a CSS Animation when Scrolling
Section 25: PROJECT 7: Creating an Admin Panel
Lecture 206 Preview of the Finished Project
Lecture 207 Kicking off the Project
Lecture 208 Styling the Login Page
Lecture 209 Developing the Clients Page
Lecture 210 Building the Sidebar Menu
Lecture 211 Styling the Topbar and the sidebar
Lecture 212 Adding more content to the Clients Page
Lecture 213 Adding the Add New Client Button
Lecture 214 Adding some clients to the list
Lecture 215 Working with the Add New Client Page
Lecture 216 How to Validate Bootstrap Forms
Lecture 217 Adding a Graph Library
Section 26: PROJECT 8: Website for Culinary School
Lecture 218 Preview of the Finished Project
Lecture 219 Kicking off the Project
Lecture 220 Working with the main section
Lecture 221 Styling the Main Section
Lecture 222 Building the Take a class with us section
Lecture 223 Adding a Graphic after the titles
Lecture 224 Working with the Upcoming Courses Section
Lecture 225 Adding the Rest of the Courses
Lecture 226 Styling the Upcoming Courses
Lecture 227 Working with the Degree Section
Lecture 228 Styling the Degree Section
Lecture 229 Working with the Footer
If you're a web designer that's trying to create responsive websites this course is for you,Bootstrap is really popular, and the new version is amazing, if you want to add bootstrap to your skills this course is for you,If you learn most by building real world projects this course is for you
Homepage