Learn Bootstrap 4 The Complete Guide By Building 8 Projects

Learn Bootstrap 4 The Complete Guide By Building 8 Projects - Druckversion

+- Forum Rockoldies (https://rockoldies.net/forum)
+-- Forum: Fotobearbeitung - Photoshop (https://rockoldies.net/forum/forumdisplay.php?fid=16)
+--- Forum: E-Learning, Tutorials (https://rockoldies.net/forum/forumdisplay.php?fid=18)
+--- Thema: Learn Bootstrap 4 The Complete Guide By Building 8 Projects (/showthread.php?tid=64597)

Learn Bootstrap 4 The Complete Guide By Building 8 Projects - Panter - 13.12.2022

[Bild: jteofntscbwcrhvvjryry95cwu.jpg]

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

Show Content

Show Content