[Udemy] Продвинутое создание "Отзывчивых" дизайнов с Foundation 6 и SASS (Eng)

[Udemy] Продвинутое создание "Отзывчивых" дизайнов с Foundation 6 и SASS (Eng)

Изучи самый продвинутый в мире фронтенд фреймворк для создания отзывчивых сайтов, создав 4 проекта от начала и до конца

Лекций: 224
Продолжительность: 18,5 часов
Язык: английский

Спойлер: О курсе

Course Description
If you wanna build AMAZING websites that look great in smartphones, tablets, laptops, desktop computers and TV`s, you have to make your website RESPONSIVE.

In this course you will be able to build 4 Websites from Start to Finish, adding more complexity, functionality and different versions of Foundation.

We'll Build 4 AMAZING PROJECTS, Two Websites for a Hotel, a Single Page Website for an Online Store and an AMAZING WORDPRESS THEME.

Foundation is the most advanced Responsive Web Design framework in the WORLD! and in this Course you will LEARN EVERYTHING you need to know to start DEVELOPING amazing RESPONSIVE WEBSITES.

You will Learn the newest version FOUNDATION 6 with SASS, Foundation 6 is powerful and the syntax is really easy. Also you will learn version 5.

You WILL LEARN ZURB Foundation 6 in this course, and we´re gonna learn it with his best friend SASS!

SASS is a really powerful CSS preprocessor and we´re gonna be using Mixins, extending classes, so you can really take advantage of the most powerful features of Foundation 6 and SASS.

Responsive Web Design is HOT, SASS and Foundation 6 are the best tools that you can choose to start building websites right away.

COURSE UPDATE AUGUST 2016:

I have Added 52 new Videos where you will learn how to develop a WordPress Theme using Foundation 6, Underscores, Gulp & SASS.

COURSE UPDATE MAY 2016:

I have added 36 new videos where you will Learn the new Flex Grid, ZURB Template, Panini, Handlebars, and much more!

What are the requirements?

• We´re gonna write all the HTML, CSS and JS by ourselves
• Also we´re gonna install all the tools need such as git, NodeJS and Ruby
• The Only thing that you need is a Text Editor, i´m gonna be using Sublime Text 3

What am I going to get from this course?

• Create AMAZING full featured Responsive Websites with the most POWERFUL Front End Framework
• Learn the Most Advanced Responsive Web Design Framework in the world, ZURB Foundation 5 and 6
• Learn about Foundation 5 & 6 Components for adding complex functionality and eye catching User Interfaces to your websites
• Learn how to customize the looking of your website with SASS, Mixins and Variables
• Learn by building 3 Real World Projects from start to finish

What is the target audience?

• If you´re the kind of person who learn best by building real world projects, this course is for you
• We´re gonna be writing all the HTML by ourselves, so let's get cracking!
• If you´re learning Responsive Web Design, you can´t go wrong with ZURB Foundation!
• If you´re trying to learn a CSS preprocessor, SASS is the way to go!
• If you want to speed up your workflow: SASS & Foundation are the perfect combination
• Are you looking for the BEST Foundation & SASS COURSE on the internet? this is for you!

Спойлер: Содержание курса

Раздел 1 -- Course Introduction

Лекция 1roject 1: Tour of the finished Website
Лекция 2roject 2: Tour of the Finished Project
Лекция 3roject 3: WordPress Theme with Foundation 6, SASS and Underscores
Лекция 4roject 4: Tour of the Finished Project (Foundation 5 & SASS)
Лекция 5:Foundation Projects 1st : A Dashboard Using ZURB Template & Foundation Icons --- 03:17
Лекция 6SD Files for the first Project
Лекция 7:The Assets for this Course

Раздел 2 -- Foundation 6: Setting up the Development Environment (MAC)

Лекция 8:Yeti Launch - The easiest way to manage your Foundation 6 and SASS Projects --- 02:15
Лекция 9:Understanding Yeti Launch
Лекция 10:Installing Foundation 6 for the very first time in MAC
Лекция 11:How to Upgrade to Foundation 6 if you already have Foundation 5 installed --- 05:33

Раздел 3 -- Foundation 6: Setting up the Development Environment (Windows)

Лекция 12:Windows 7 - Installing Foundation 6 for the very first time --- 09:48
Лекция 13:Windows 7 - Upgrading to Foundation 6 if you already have Foundation 4 or 5 --- 04:23
Лекция 14:Windows 10 - Installing Foundation 6 for the very first time --- 10:41

Раздел 4 -- Foundation 6: Up and Running with Foundation 6

Лекция 15:The Foundation 6 Grid (Video 1 of 2) --- 06:26
Лекция 16:The Foundation 6 Grid (Video 2 of 2) --- 03:35
Лекция 17:Text Utilities for Fast Development --- 03:59
Лекция 18:Menu Classes in Foundation 6 --- 03:17

Раздел 5 -- Foundation 6: First Steps in Foundation 6

Лекция 19:Reviewing the file structure --- 04:03
Лекция 20:How to update your projects in Foundation 6 --- 01:59

Раздел 6 -- Foundation 6: Working with the Index Page

Лекция 21:Adding HTML5 Video to use as a Background --- 05:00
Лекция 22:Adding the Logo and the Menu Button --- 02:35
Лекция 23:Adding some Foundation Classes to our Header --- 02:35

Раздел 7 -- Foundation 6: Working with SASS

Лекция 24:Adding a Custom File for our SASS and working with our first styles --- 09:13
Лекция 25:Styling the header of our index page --- 08:13
Лекция 26:Finishing the Header --- 08:53
Лекция 27:Adding the Rooms Section so we can practice more Grids on our Project --- 05:24
Лекция 28:Styling the Rooms Section with SASS --- 04:40
Лекция 29:Using Mixins with Foundation 6 and SASS --- 05:38
Лекция 30:Finishing the Rooms Section --- 05:22
Лекция 31:Adding Background Images in our Design --- 04:23
Лекция 32:Working with Media Queries in SASS and Foundation 6 --- 06:02
Лекция 33:Working with About Us and Gallery section on the main page --- 06:35
Лекция 34:Styling the About Us section and Gallery with SASS --- 05:18
Лекция 35:Adding Media Queries in the About Us & Gallery --- 05:28
Лекция 36:Adding the Second Background Image in the Index --- 01:59
Лекция 37:Working with the Booking Section --- 04:11
Лекция 38:Working with the Footer in our Website and adding the basic HTML --- 06:48
Лекция 39:Adding Foundation Icons to our Project --- 06:04
Лекция 40:Adding the Styles to our Footer --- 08:58

Раздел 8 -- Foundation 6: Working with Components

Лекция 41:Adding the Off Canvas Component --- 04:45
Лекция 42:Adding an Advanced Menu inside the Off Canvas --- 03:45
Лекция 43:Styling the Off Canvas Menu with SASS --- 04:25
Лекция 44:Adding Reveal (Modal) to our Project --- 03:33
Лекция 45:Adding Modals to all our Gallery with jQuery --- 07:16
Лекция 46:Implementing Motion UI to our project --- 04:15
Лекция 47:Adding a Form inside Reveal (Modal) --- 05:02
Лекция 48:Advantage of using the new HTML5 Input types --- 02:35
Лекция 49:Adding Abide Validation to our Form --- 08:38

Раздел 9 -- Foundation 6: Working with Internal Pages

Лекция 50:Creating a Template and Adding the About Us Page --- 05:02
Лекция 51:Adding an Overlay to our About Us Page --- 05:08
Лекция 52:Finishing the About Us Page --- 06:32
Лекция 53:Adding a function in jQuery to resize our Overlay when Windows Resize --- 03:06
Лекция 54:Working with the Services Page --- 09:59
Лекция 55:Adding Classes to align text in Services --- 01:55
Лекция 56:Using the Equalizer Component in Services --- 04:25
Лекция 57:Working with the Rooms Section --- 08:55
Лекция 58:Working with the Single Room Template --- 08:50
Лекция 59:Adding Data Magellan Component to our Single Room Section --- 04:37
Лекция 60:Working with the Contact Us section (1 of 2) --- 07:52
Лекция 61:Working with the Contact Us Section (2 of 2) --- 07:13
Лекция 62eploy to FTP Server --- 08:28
Лекция 63:The Foundation Docs --- 02:26

Раздел 10 -- Project: Single Page Website with Flex-Grid, Gulp, SASS and the ZURB Template

Лекция 64:Creating the Project --- 06:39
Лекция 65:First steps with the ZURB Template and Gulp Tasks --- 06:20
Лекция 66:Working with Panini
Лекция 67:Working with variables in Handlebars
Лекция 68:Built in functions in Handlebars and ZURB Template (Reading a JSON File and YML) --- 07:27
Лекция 69:Looking our PSD File for this section --- 02:21
Лекция 70:Enabling Flexbox Mode in Foundation for Sites (Foundation 6)
Лекция 71:Adding our Logo to the Website --- 05:25
Лекция 72:Adding the Main Navigation --- 06:47
Лекция 73:Making our Main Menu Responsive with JavaScript methods --- 08:41
Лекция 74:Adding a Slider to show latest promos --- 06:04
Лекция 75:Finishing the slider --- 02:52
Лекция 76:Adding Motion UI to our Slider --- 04:28
Лекция 77:Adding a Custom file to the stylesheet --- 03:51
Лекция 78:Styling the Main Navigation (Desktop Version) --- 06:41
Лекция 79:Styling the Main Navigation (Responsive Version) --- 06:18
Лекция 80:Styling our Slider with SASS --- 03:31
Лекция 81:Working with the About Us section --- 06:21
Лекция 82:Adding Foundation Icons to our Project --- 04:56
Лекция 83:Where we need to add our files and libraries ? --- 04:04
Лекция 84:Styling the About Us section with SASS --- 06:52
Лекция 85:Adding a Social Menu to the Header --- 06:20
Лекция 86:Showing the Products using a JSON file --- 05:28
Лекция 87:Adding Foundation classes to our Products --- 06:54
Лекция 88:Styling the Products section --- 10:12
Лекция 89:Working with the Testimonials section --- 06:42
Лекция 90:Styling our Slider for Testimonials --- 04:35
Лекция 91:Flexbox classes to re-order elements based on screen size
Лекция 92:Creating a Form --- 07:48
Лекция 93:Styling our Form --- 09:18
Лекция 94:Adding a Footer --- 03:14
Лекция 95:Styling our Footer --- 03:26
Лекция 96:Tracking scrolling on website to animate our main navigation
Лекция 97:Adding Magellan to tell our visitors which section they´re visiting --- 05:09
Лекция 98:Final adjustments for mobile devices --- 08:08

Раздел 11 -- Project: Building a WordPress Theme with Foundation 6 & SASS

Лекция 99review of the Final Project --- 05:41
Лекция 100:Image Files and PSD's for this Chapter --- 01:23
Лекция 101:Code Snippets for This Section --- 01:58
Лекция 102ownloading and Installing WordPress with Bitnami in Windows --- 03:30
Лекция 103:Up And Running with Bitnami in Windows --- 04:13
Лекция 104ownloading and Installing WordPress with Bitnami in Mac --- 03:28
Лекция 105:Up And Running with Bitnami in MAC --- 03:24
Лекция 106ownloading and Activating Underscores --- 03:26
Лекция 107:Understanding the Structure of Underscores --- 05:41
Лекция 108:Installing Foundation 6 for the WordPress Theme --- 04:40
Лекция 109:Modifying the Gulpfile: Adding BrowserSync --- 07:15
Лекция 110:Modifying the Gulpfile Moving Libraries --- 04:16
Лекция 111:Enqueuing the Foundation Stylesheet and JavaScript Files --- 09:04
Лекция 112:Adding a custom.scss file to our app.scss --- 01:58
Лекция 113:Adding an Image with Theme Customizer --- 05:09
Лекция 114:Working with the Header file and Styling --- 04:33
Лекция 115:Adding a Font from Google Fonts --- 02:29
Лекция 116:Finishing the Header --- 05:26
Лекция 117:Creating all the Pages and Categories --- 01:44
Лекция 118:Associating the Pages to the Main Navigation --- 02:14
Лекция 119:Styling the Main Menu --- 06:05
Лекция 120:Making our Menu Mobile Friendly --- 08:17
Лекция 121:Adding Foundation Icons to our Theme --- 03:17
Лекция 122:Adding Icons to the Main Navigation --- 03:20
Лекция 123:Adding some Posts for Dummy data --- 02:49
Лекция 124:Adding Orbit Slider to Print the Latest Entries --- 10:07
Лекция 125:Registering Image Size and Regenerate Thumbnails for the Slider Images --- 04:00
Лекция 126:Styling the Slider --- 02:14
Лекция 127:Changing the Slider Animation --- 04:46
Лекция 128:Adding The Main Foundation Classes for the Grid --- 01:48
Лекция 129:Working with the Posts Area --- 04:28
Лекция 130:Finishing the Posts Area --- 05:51
Лекция 131:Adding Icons to the Main Area --- 04:19
Лекция 132:Styling the Main Content Area with SASS --- 07:29
Лекция 133:Working with the Sidebar and Adding an Image --- 03:58
Лекция 134:Adding a Custom Widget for Recipes --- 09:05
Лекция 135:Adjusting our Widget --- 02:30
Лекция 136:Creating Two More Menus --- 02:54
Лекция 137rinting a Menu in the Footer --- 03:55
Лекция 138:Adding a Social Media Menu in the Footer --- 04:25
Лекция 139:Styling the Footer --- 01:36
Лекция 140:Add Icons to our Social Media Menu --- 04:01
Лекция 141:Working with Page Templates --- 05:54
Лекция 142:Working with Category Templates --- 04:46
Лекция 143:Working with Single Templates --- 03:09
Лекция 144:Styling the Featured Image of the Single File and CSS --- 02:44
Лекция 145:Working with The Blog Template --- 03:11
Лекция 146:Adding a Contact Form --- 05:01
Лекция 147:Styling the Contact Form --- 03:47
Лекция 148:Adding a Form (Mailchimp) Inside a Modal in the Sidebar --- 03:06
Лекция 149:What to do when there´s no Image on the Header --- 03:44
Лекция 150:Extending the Customizer --- 05:22
Лекция 151:Exploring others Foundation + WordPress Themes --- 02:56

Раздел 12 -- Foundation Projects 1: A Dashboard Using ZURB Template, SASS & Foundation Icons

Лекция 152:Tour of the Final Project --- 03:17
Лекция 153:Creating the Project --- 02:26
Лекция 154:Adding the Sidebar and the Main Content --- 02:49
Лекция 155:Adding Foundation Icons to our Project --- 02:54
Лекция 156:Creating the Accordion Menu --- 05:40
Лекция 157:Finishing the Accordion Menu --- 03:46
Лекция 158:Adding the Top Bar with a Menu to our Dashboard --- 04:31
Лекция 159:Working with the Main Content of the Dashboard --- 02:32
Лекция 160:Adding a Custom SCSS File and First Styling --- 05:48
Лекция 161:Styling the Main Menu --- 05:03
Лекция 162:Changing the Menu Based on the Screen Size --- 08:29
Лекция 163:Styling the Top Bar --- 03:24
Лекция 164:Final Adjustments and some Words --- 04:31

Раздел 13 -- Foundation Projects 2: A Menu with Sticky Navigation and Magellan

Лекция 165:First Steps: creating the projects and files --- 03:58
Лекция 166:Adding the Main Menu & Content --- 03:38
Лекция 167:Adding Sticky Navigation --- 01:52
Лекция 168:Adding Magellan and some Styles --- 04:05

Раздел 14 -- Foundation 5: Introduction

Лекция 169:Introduction Video
Лекция 170:About the Exercise files --- 01:08

Раздел 15 -- Foundation 5: Installing the Development Environment for Windows

Лекция 171:Installing Ruby, NodeJS and Git --- 05:32
Лекция 172:Installing our Gems --- 02:11
Лекция 173:Creating our Foundation Project from scratch --- 04:58
Лекция 174:Installing RubyDevKit --- 03:28

Раздел 16 -- Foundation 5: Installing the Development Environment for Mac

Лекция 175:Installing NodeJS and Git --- 02:37
Лекция 176:Installing our Gems --- 03:46
Лекция 177:Creating our Project --- 03:54
Лекция 178:Updating our Gems --- 02:03

Раздел 17 -- Foundation 5: Before we start our project, some things you´ve to check.

Лекция 179:Getting to know the config.rb file --- 05:22
Лекция 180:Viewing / Checking the Photoshop Files for this Project. --- 03:24

Раздел 18 -- Foundation 5: HTML for structure our website

Лекция 181:Building the Main Navigation, adding our logo and Building the Footer Navigation --- 08:26
Лекция 182:Adding Foundation Classes for main Navigation and Building a Responsive Menu --- 06:50
Лекция 183:Adding a Dropdown menu to the Main Navigation
Лекция 184:Start working with Foundation Grid. --- 05:17
Лекция 185:Finishing our footer. --- 04:56

Раздел 19 -- Foundation 5: Building all the internal pages for our website

Лекция 186:Creating all the internal pages for our website. --- 04:50
Лекция 187:Viewing the images for our website --- 01:52
Лекция 188:Adding a Orbit Slider for our Home Page (Part 1) --- 02:30
Лекция 189:Adding Orbit Slide for our Home Page (Part 2) --- 02:21
Лекция 190:Using Panels in the Home Page to show the Rooms in our hotel --- 07:09
Лекция 191:Understanding the Foundation Grid
Лекция 192:Finishing the Home Page and Adding a Gallery --- 06:03

Раздел 20 -- Foundation 5: Working with Internal Sections of our Website and Components

Лекция 193:Building services.html page
Лекция 194:Using Push & Pull Columns --- 04:19
Лекция 195:Working with Data Interchange Component in Services.html --- 04:22
Лекция 196:More Practice with Data Interchange Component --- 04:21
Лекция 197:Working with our Section gallery.html --- 03:42
Лекция 198:Adding Clearing / Modal to our Gallery --- 03:27
Лекция 199:Building the main rooms.html page for our Hotel Website --- 04:32
Лекция 200:Building Single room page for our Hotel Site, using Accordion Component --- 06:17
Лекция 201:Adding a Gallery to our single room page and a Contact Form --- 03:20
Лекция 202:Building a Contact Form HTML with ZURB Foundation --- 06:21
Лекция 203:Building the Contact.html page --- 05:44

Раздел 21 -- Foundation 5: Working with SASS

Лекция 204:Creating a Custom SCSS file --- 03:53
Лекция 205:Adding Primary and Secondary Color to our Top Bar --- 05:00
Лекция 206oing a Full Customization in our Top Bar and Dropdowns --- 05:48
Лекция 207:What´s the rem-calc function in ZURB Foundation? --- 05:07
Лекция 208:Customizing Orbit Slider with SASS --- 02:49
Лекция 209:Working with our Heading Tags --- 03:58
Лекция 210:Styling panels with Mixins --- 05:48
Лекция 211:Styling buttons with Mixins --- 03:44
Лекция 212:Building our Footer with SASS and more Mixins (Part 1/2) --- 09:47
Лекция 213:Building our Footer with SASS and more Mixins (Part 2/2) --- 10:18
Лекция 214:Working with Media Queries in SASS & Foundation 5 --- 05:34
Лекция 215:Styling our Featured Image with SASS --- 06:02
Лекция 216:Styling our Accordion with SASS and Mixins --- 05:05
Лекция 217:Styling our Form with SASS --- 05:59
Лекция 218:Building a Social Menu with Foundation Icons --- 07:17
Лекция 219etecting Current Page with jQuery --- 05:54
Лекция 220:Adding Google Fonts to our SASS Project --- 03:04
Лекция 221:Advanced Customizations for Mobile and Desktop Website (Part 1 / 2 ) --- 05:00
Лекция 222:Advanced Customizations for Mobile and Desktop Website (Part 2 / 2 ) --- 06:53
Лекция 223:SASS Advantages: Changing Color Scheme just by changing 2 lines of code. --- 03:55
Лекция 224:Final Mobile Adjustments to Our Project --- 08:21