پیشنهاد فرادرس

آموزش Bootstrap 4 از ابتدا به همراه 5 پروژه

دسته بندی ها: آموزش بوت استرپ (Bootstrap) ، آموزش طراحی وب ، آموزش HTML ، آموزش CSS

در این دوره با فرض اینکه شما هیچ چیز از بوت استرپ نمی دانید، با تمام utilities، کامپوننت ها، ویدجت ها و شبکه ها و ایجاد تم های جهان واقعی و وب سایت، آشنایی با بوت استرپ 3 و 4 و غیره آشنا می شوید.

سرفصل:

  • معرفی و شروع کار
  • بوت استرپ چیست؟
  • ویژگی های جدید Bootstrap 4
  • تنظیم محیط اولیه
  • راه اندازی Bootstrap Sandbox
  • تایپوگرافی و Utilities
  • Text Alignment و Display
  • رنگ ها و زمینه ها
  • حاشیه و Padding Spacing
  • Sizing و Borders
  • CSS Breakpoints
  • کامپوننت های CSS
  • Buttons، Navbar و Navs
  • List Groups و  Badges
  • فرم ها و ورودی
  • گروه های ورودی
  • هشدارها و بارهای پیشرفت
  • جداول و صفحه بندی
  • کار با کارت
  • آبجکت های رسانه ای
  • سیستم شبکه و Flexbox
  • ویجت های جاوا اسکریپت
  • راه اندازی Bootstrap Starter Pack
  • پروژه 1 - تم اجتماعی LoopLab
  • پروژه 2 - تم Mizuxe Book
  • پروژه 3 - Blogen Admin UI
  • پروژه 4 - تم چند صفحه Glozzom
  • و غیره
آیا این نوشته را دوست داشتید؟
Bootstrap 4 From Scratch With 5 Projects Publisher:Udemy Author:Brad Traversy Duration:09:19:23

Master the latest version of Bootstrap (4.0.0 Beta) and build 5 real world themes while learning HTML5 semantics & CSS3
This course will literally take you from knowing nothing about Bootstrap 3 or 4 to learning all of the utilities, components, widgets and grids and building real world themes and websites. You do NOT need to know Bootstrap 3 for this course. Even if you already know Bootstrap 4, skip the learning sections and head right for section 6 to create the custom workflow and start the projects. Everything is completely modular!
Custom Bootstrap Sandbox
I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Bootstrap 4 offers including helpers/utilities, components, widgets, flexbox and more.
Bootstrap Starter Pack
Once you get through the sandbox, we will setup the starter pack which I also created for this course. This will give us a real development workflow to compile Bootstrap 4 from source and compile Sass. It will even give us a dev server with autoload. This is what we will use for the 5 projects
5 Real Projects/Themes
We will use the Starter pack to create 5 real world themes including
LoopLap - A social UI ThemeMizuxe - A Book/Product Showcase ThemeBlogen - A blog admin area UIGlozzom - A multi page theme with a carousel and some 3rd party scriptsPortfoligrid - A portfolio theme using the grid, flexbox and the collapse widget
Who is the target audience?
Anyone that wants to learn & master Bootstrap 4 and build real world themes

Intro & Getting Started
5 Lectures
26:27
In this intro video we will talk about what you can expect from this course. We will also talk about the Bootstrap 4 projects included
Welcome To The Course
Preview
04:52
What Is Bootstrap?
Preview
03:42
What's New In Bootstrap 4?
05:59
Initial Environment Setup
06:08
In this video we will setup the custom Bootstrap Sandbox UI that I have created. This sandbox will be used in the next few sections to learn about utilities, components, grids, widgets, etc. Make sure you follow along and unzip the files to your machine
Bootstrap Sandbox Setup
Preview
05:46

Typography & Utilities
8 Lectures
39:55
Section Introduction
Preview
01:46
Headings & Basic Typography
Preview
05:37
Text Alignment & Display
Preview
06:41
Floats & Fixed Positions
04:32
Colors & Background
04:33
Margin & Padding Spacing
08:26
Sizing & Borders
05:07
CSS Breakpoints
03:13

CSS Components
10 Lectures
01:28:21
Section Intro
Preview
01:52
Buttons & Button Groups
Preview
12:18
Navbar & Navs
14:44
List Groups & Badges
11:28
Forms & Input
09:37
Input Groups
05:00
Alerts & Progress Bars
07:28
Tables & Pagination
04:57
Working With Cards
15:36
Media Objects
05:21

Grid System & Flexbox
5 Lectures
31:43
Section Introduction
01:31
Grid System
14:27
Grid Alignment
04:28
Flexbox Classes
07:30
Auto Margin, Wrap & Ordering
03:47

JavaScript Widgets
6 Lectures
38:22
Section Introduction
01:05
Carousel Slider
11:37
Collapse & Accordion
05:14
Tooltips
08:00
Popovers
06:55
Modals
05:31

Bootstrap Starter Pack Setup
4 Lectures
30:36
Section Introduction
03:13
Install NPM Dependencies
05:44
Creating The Gulpfile.js
15:30
Completing The Starter Pack
06:09

Project 1 - LoopLab Social Theme
6 Lectures
47:28
Project Intro
01:34
Setup & Navbar
08:37
Home Section Area
15:57
Explore Section Area
07:33
Create & Share Section Areas
07:01
Footer, Contact Modal & Responsiveness
06:46

Project 2 - Mizuxe Book Theme
7 Lectures
55:04
Project Intro
01:28
Custom Navbar & Logo
10:45
Showcase & Primary Color Change
11:04
Newsletter & Boxes
06:57
About Section With Accordion
08:42
Authors Area
09:04
Contact & Footer
07:04

Project 3 - Blogen Admin UI
7 Lectures
01:05:44
Project Intro
01:57
Navbar & Main Header
10:24
Add Buttons & Modals
12:36
Finishing The Dashboard
09:00
Resource Table Pages
09:59
Details & Settings Pages
11:05
Profile & Login Page
10:43

Project 4 - Glozzom Multi Page Theme
10 Lectures
01:35:02
Project Intro
02:01
Navbar & Carousel
16:17
Home Icons, Heading & Info Sections
11:21
Video Section With Autoplay Modal
08:06
Photo Gallery & Newsletter
12:29
Page Header & About Section
06:42
Icon Boxes & Testimonial Slider
09:26
Services Page
11:26
Blog Page With Cards
06:22
Contact & Staff Sections
10:52
1 More Section

پیشنهاد فرادرس

نیما در 1397/04/05 ساعت 06:16

سلام این قدیمیه لطفا اپدیتش رو بذارید