title
Build An HTML5 Template With Bootstrap and SASS - Part 1

description
In this mini-series we will build a complete HTML5 Bootstrap template with SASS. It is a bit long but that is because it is from scratch and typed out line by line. --------------------------------------------------------------------------------------- Project Files - https://github.com/bradtraversy/skyapp_bootstrap For video courses like this check out - http://codeskillet.com

detail
{'title': 'Build An HTML5 Template With Bootstrap and SASS - Part 1', 'heatmap': [{'end': 262.391, 'start': 241.312, 'weight': 0.763}, {'end': 1022.394, 'start': 960.564, 'weight': 0.738}], 'summary': 'Learn to build a bootstrap html5 sass template emphasizing scss and sass for styling, web development techniques, and organizing files into base, modules, and layouts directories, with practical implementations of components like footer, search bar, and slogan.', 'chapters': [{'end': 49.696, 'segs': [{'end': 49.696, 'src': 'embed', 'start': 0.933, 'weight': 0, 'content': [{'end': 7.199, 'text': "in this miniseries, we're going to build a bootstrap html5 sass template.", 'start': 0.933, 'duration': 6.266}, {'end': 17.428, 'text': "alright, so we're going to use bootstrap, and sass is a css preprocessor and it allows us to do a lot of different things, like use variables, mixins,", 'start': 7.199, 'duration': 10.229}, {'end': 22.693, 'text': 'which are like functions, importing stylesheets and just a whole bunch of cool stuff.', 'start': 17.428, 'duration': 5.265}, {'end': 35.804, 'text': "so if you don't have SAS installed on your computer or you don't even know what it is, then I suggest watching my Getting Started with SAS video,", 'start': 22.693, 'duration': 13.111}, {'end': 38.426, 'text': 'which you can find on my YouTube page.', 'start': 35.804, 'duration': 2.622}, {'end': 44.952, 'text': "Now this template, I'm kind of modeling it after this Skype template or the Skype website.", 'start': 39.187, 'duration': 5.765}, {'end': 49.696, 'text': 'You see I have kind of the same navigation, the big showcase area.', 'start': 45.372, 'duration': 4.324}], 'summary': 'Building a bootstrap html5 sass template inspired by skype website.', 'duration': 48.763, 'max_score': 0.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8933.jpg'}], 'start': 0.933, 'title': 'Building bootstrap html5 sass template', 'summary': "Focuses on creating a bootstrap html5 sass template, emphasizing the use of bootstrap and sass. it suggests watching a 'getting started with sass' video on youtube for those new to sass.", 'chapters': [{'end': 49.696, 'start': 0.933, 'title': 'Building bootstrap html5 sass template', 'summary': "Focuses on building a bootstrap html5 sass template, highlighting the use of bootstrap and sass, and recommends watching a 'getting started with sass' video on youtube for those unfamiliar with sass.", 'duration': 48.763, 'highlights': ['The chapter emphasizes the use of Bootstrap and SASS in building the template, showcasing the capabilities of SASS such as variables, mixins, and importing stylesheets.', "It suggests watching a 'Getting Started with SASS' video on YouTube for those unfamiliar with SASS.", 'The template is modeled after the Skype website, featuring a similar navigation and a big showcase area.']}], 'duration': 48.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8933.jpg', 'highlights': ['The template is modeled after the Skype website, featuring a similar navigation and a big showcase area.', 'The chapter emphasizes the use of Bootstrap and SASS in building the template, showcasing the capabilities of SASS such as variables, mixins, and importing stylesheets.', "It suggests watching a 'Getting Started with SASS' video on YouTube for those unfamiliar with SASS."]}, {'end': 421.176, 'segs': [{'end': 127.946, 'src': 'embed', 'start': 51.437, 'weight': 0, 'content': [{'end': 54.721, 'text': 'Not exactly copying it, but just used it kind of as a reference.', 'start': 51.437, 'duration': 3.284}, {'end': 58.106, 'text': 'You can see theirs is very different down here.', 'start': 55.663, 'duration': 2.443}, {'end': 62.952, 'text': "We're just going to have a couple blocks here styled differently.", 'start': 58.847, 'duration': 4.105}, {'end': 66.276, 'text': "And we're going to use Sass because I want to create.", 'start': 63.733, 'duration': 2.543}, {'end': 74.444, 'text': 'So basically an SCSS file for all the objects on the site, for instance blocks.', 'start': 67.097, 'duration': 7.347}, {'end': 77.808, 'text': 'call these blocks for the buttons.', 'start': 74.444, 'duration': 3.364}, {'end': 83.173, 'text': "we'll have our own button SCSS file and then we'll combine all those into one style sheet.", 'start': 77.808, 'duration': 5.365}, {'end': 91.096, 'text': 'All right, so if you go down, basically this template is selling a fictional application called SkyApp.', 'start': 84.488, 'duration': 6.608}, {'end': 93.179, 'text': 'All right, so we have an image here.', 'start': 91.697, 'duration': 1.482}, {'end': 96.904, 'text': "And the images I'm just going to include in SkyApp.", 'start': 93.199, 'duration': 3.705}, {'end': 101.687, 'text': 'the source files.', 'start': 100.646, 'duration': 1.041}, {'end': 108.094, 'text': "I'm not going to go through in Photoshop and show you how I created the screen here and the monitor.", 'start': 102.008, 'duration': 6.086}, {'end': 111.678, 'text': "That's just a different tutorial altogether.", 'start': 108.735, 'duration': 2.943}, {'end': 114.181, 'text': "So I'll just include those images.", 'start': 111.958, 'duration': 2.223}, {'end': 115.482, 'text': 'Okay, we have another one here.', 'start': 114.201, 'duration': 1.281}, {'end': 119.224, 'text': 'Simple footer a couple unordered lists.', 'start': 116.543, 'duration': 2.681}, {'end': 125.746, 'text': "So that's the home page the about page Basically, we got rid of the big showcase area.", 'start': 119.924, 'duration': 5.822}, {'end': 127.946, 'text': 'We have the search bar up top.', 'start': 126.446, 'duration': 1.5}], 'summary': 'Using scss to style blocks and buttons for skyapp website.', 'duration': 76.509, 'max_score': 51.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq851437.jpg'}, {'end': 187.839, 'src': 'embed', 'start': 158.12, 'weight': 4, 'content': [{'end': 168.263, 'text': 'so that we can have just classes we can punch in and make the background blue or green or or gray services.', 'start': 158.12, 'duration': 10.143}, {'end': 173.346, 'text': 'We have the tab bootstrap widget over here.', 'start': 169.482, 'duration': 3.864}, {'end': 176.008, 'text': 'Got a quick quote form.', 'start': 173.366, 'duration': 2.642}, {'end': 178.69, 'text': 'Some more accordions.', 'start': 176.849, 'duration': 1.841}, {'end': 182.394, 'text': 'We have this little area where we have icons.', 'start': 179.931, 'duration': 2.463}, {'end': 187.839, 'text': "We're going to be using Font Awesome, which is just a great source for icons.", 'start': 182.414, 'duration': 5.425}], 'summary': 'Web development includes classes, widgets, forms, accordions, and font awesome icons.', 'duration': 29.719, 'max_score': 158.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8158120.jpg'}, {'end': 267.312, 'src': 'heatmap', 'start': 241.312, 'weight': 0.763, 'content': [{'end': 245.417, 'text': "we're just using bootstrap, we're not using sass and i can show you the files here.", 'start': 241.312, 'duration': 4.105}, {'end': 254.206, 'text': 'basically, we have our html files, a css folder with the bootstrap and font awesome and custom style sheet, uh.', 'start': 245.417, 'duration': 8.789}, {'end': 262.391, 'text': 'fonts images and JavaScript, where we have our jQuery file and Bootstrap JavaScript.', 'start': 254.206, 'duration': 8.185}, {'end': 265.092, 'text': "So we're not going to be building this exact thing.", 'start': 262.971, 'duration': 2.121}, {'end': 267.312, 'text': "We're going to be implementing SAS.", 'start': 265.112, 'duration': 2.2}], 'summary': 'Using bootstrap, not sass. includes html, css, fonts, images, javascript with jquery and bootstrap.', 'duration': 26, 'max_score': 241.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8241312.jpg'}, {'end': 357.82, 'src': 'embed', 'start': 318.46, 'weight': 1, 'content': [{'end': 323.842, 'text': "All right, so in this folder, we're going to create a few more folders.", 'start': 318.46, 'duration': 5.382}, {'end': 329.264, 'text': 'Okay, we want our SCSS folder, which is going to hold all of our SAS files.', 'start': 323.862, 'duration': 5.402}, {'end': 332.19, 'text': 'Okay, we want a CSS folder.', 'start': 330.609, 'duration': 1.581}, {'end': 347.676, 'text': "We want an images folder, a JavaScript folder, and I'm gonna go ahead and open up Scout.", 'start': 334.591, 'duration': 13.085}, {'end': 350.997, 'text': 'All right.', 'start': 350.697, 'duration': 0.3}, {'end': 352.998, 'text': 'so what we wanna do is create a new project.', 'start': 350.997, 'duration': 2.001}, {'end': 357.82, 'text': 'so you wanna click this little plus sign and go to your project folder.', 'start': 352.998, 'duration': 4.822}], 'summary': 'Creating multiple folders including scss, css, images, and javascript in a project.', 'duration': 39.36, 'max_score': 318.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8318460.jpg'}], 'start': 51.437, 'title': 'Web development techniques', 'summary': 'Covers web development techniques using scss and sass for styling, bootstrap for website design, and implementing sas for web development including components such as footer, search bar, slogan, carousel, and the importance of using ruby and dev kit for installation.', 'chapters': [{'end': 101.687, 'start': 51.437, 'title': 'Web development styling with scss and sass', 'summary': 'Explains the usage of scss and sass to style different components on a website, and the incorporation of image files for a fictional application called skyapp.', 'duration': 50.25, 'highlights': ['The template involves creating different styled blocks and buttons using SCSS for objects on the site.', 'Incorporating image files for a fictional application called SkyApp is part of the development process.']}, {'end': 245.417, 'start': 102.008, 'title': 'Bootstrap website design tutorial', 'summary': 'Discusses the creation of a bootstrap website design tutorial, covering the layout and components including the footer, search bar, slogan, carousel, accordion, team section, testimonial, scss file, tab widget, quote form, icons, blog post format, contact page, and file usage.', 'duration': 143.409, 'highlights': ['The tutorial covers the creation of a bootstrap website design, including components like footer, search bar, slogan, carousel, accordion, team section, testimonial, scss file, tab widget, quote form, icons, blog post format, contact page, and file usage.', 'The tutorial explains the addition of various components such as the bootstrap carousel, accordion, team section, testimonial, scss file, tab widget, quote form, icons, blog post format, contact page, and file usage.', 'The tutorial mentions the usage of Font Awesome for icons, and the formatting of blog posts with date, author, and category, as well as the inclusion of a featured video and comments section.', 'The tutorial also discusses the inclusion of a quick form, location block, team members, and testimonial in boxes, as well as the absence of a register and login page in the current template.', 'The tutorial points out that the current template is based on using bootstrap and not using sass, and the possibility of incorporating a register and login page in the future.']}, {'end': 421.176, 'start': 245.417, 'title': 'Implementing sas for web development', 'summary': 'Covers setting up a project folder, installing sas, and using scout to compile sas files into css, emphasizing the importance of using ruby and dev kit for installation and explaining the differences between development and production output modes.', 'duration': 175.759, 'highlights': ['The chapter covers setting up a project folder, installing SAS, and using Scout to compile SAS files into CSS', 'Explains the importance of using Ruby and dev kit for installation', 'Explains the differences between development and production output modes']}], 'duration': 369.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq851437.jpg', 'highlights': ['The tutorial covers the creation of a bootstrap website design with various components like footer, search bar, slogan, carousel, and more.', 'The chapter covers setting up a project folder, installing SAS, and using Scout to compile SAS files into CSS.', 'The template involves creating different styled blocks and buttons using SCSS for objects on the site.', 'Incorporating image files for a fictional application called SkyApp is part of the development process.', 'The tutorial mentions the usage of Font Awesome for icons and the formatting of blog posts with date, author, and category.']}, {'end': 1109.14, 'segs': [{'end': 489.139, 'src': 'embed', 'start': 458.681, 'weight': 0, 'content': [{'end': 463.844, 'text': "So if we want to style all the links or all the h1 tags, we'll put that in a file.", 'start': 458.681, 'duration': 5.163}, {'end': 465.645, 'text': "Actually, let's go ahead and create that.", 'start': 464.264, 'duration': 1.381}, {'end': 470.688, 'text': 'Underscore base.scss.', 'start': 467.986, 'duration': 2.702}, {'end': 481.076, 'text': "Now the underscore is important, because if you don't include that, then Scout, or whatever your compiler is,", 'start': 473.953, 'duration': 7.123}, {'end': 485.177, 'text': "is going to go ahead and create a base.css file, and we don't want that.", 'start': 481.076, 'duration': 4.101}, {'end': 489.139, 'text': 'All we want is a main.css file.', 'start': 486.057, 'duration': 3.082}], 'summary': 'Creating a base.scss file to style links and h1 tags for a main.css file.', 'duration': 30.458, 'max_score': 458.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8458681.jpg'}, {'end': 627.114, 'src': 'embed', 'start': 587.908, 'weight': 1, 'content': [{'end': 595.971, 'text': "Next, for layouts, I'm going to create a header.scss.", 'start': 587.908, 'duration': 8.063}, {'end': 601.092, 'text': "So if you have code that is, or CSS that's specific to your header, you can put it there.", 'start': 596.451, 'duration': 4.641}, {'end': 613.87, 'text': "Footer And I'm also going to put my navigation file here.", 'start': 603.573, 'duration': 10.297}, {'end': 615.231, 'text': 'So nav.', 'start': 614.591, 'duration': 0.64}, {'end': 620.812, 'text': "All right, so that's the layouts.", 'start': 615.251, 'duration': 5.561}, {'end': 627.114, 'text': 'Now modules is usually where you have the most files, well, where I usually have most of my files.', 'start': 620.932, 'duration': 6.182}], 'summary': 'Creating header.scss for header-specific code and nav file for navigation in layouts and modules respectively.', 'duration': 39.206, 'max_score': 587.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8587908.jpg'}, {'end': 828.287, 'src': 'embed', 'start': 802.025, 'weight': 2, 'content': [{'end': 811.072, 'text': "if you're familiar with CSS, then this should look pretty familiar, because it's the same way that you can import using standard CSS.", 'start': 802.025, 'duration': 9.047}, {'end': 821.141, 'text': "The difference here is when we import it through SAS, we're not making an additional HTTP request for every SCSS file.", 'start': 811.733, 'duration': 9.408}, {'end': 828.287, 'text': "We're making one for the actual CSS file that gets generated or however many that you want generated.", 'start': 822.002, 'duration': 6.285}], 'summary': 'Sas allows importing scss files without additional http requests for every file.', 'duration': 26.262, 'max_score': 802.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8802025.jpg'}, {'end': 1022.394, 'src': 'heatmap', 'start': 960.564, 'weight': 0.738, 'content': [{'end': 979.157, 'text': 'Styles Okay, so we have navigation, header, and footer.', 'start': 960.564, 'duration': 18.593}, {'end': 981.939, 'text': 'You could also do a sidebar here if you want.', 'start': 979.337, 'duration': 2.602}, {'end': 985.081, 'text': 'All right, so that looks good.', 'start': 984.12, 'duration': 0.961}, {'end': 986.542, 'text': "Let's go ahead and save that.", 'start': 985.321, 'duration': 1.221}, {'end': 990.325, 'text': 'And now we want to go back to our scout.', 'start': 987.303, 'duration': 3.022}, {'end': 992.247, 'text': "And let's see.", 'start': 991.566, 'duration': 0.681}, {'end': 995.93, 'text': "If we go to our CSS directory, you can see that there's nothing there.", 'start': 992.267, 'duration': 3.663}, {'end': 1006.428, 'text': "And if we go ahead and press the play button, you can see that it's now created a CSS file.", 'start': 996.47, 'duration': 9.958}, {'end': 1013.731, 'text': "Now, if we didn't have underscores on our other SCSS files, it would have generated all those as well.", 'start': 1006.488, 'duration': 7.243}, {'end': 1022.394, 'text': "Now, if we open this up, take a look at it, basically we don't have anything in it except comments, so that's all we see.", 'start': 1013.831, 'duration': 8.563}], 'summary': 'Created css file with comments, no content.', 'duration': 61.83, 'max_score': 960.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8960564.jpg'}, {'end': 1109.14, 'src': 'embed', 'start': 1092.871, 'weight': 3, 'content': [{'end': 1094.792, 'text': "it's a little more complicated.", 'start': 1092.871, 'duration': 1.921}, {'end': 1098.494, 'text': 'um, this is kind of geared towards beginners.', 'start': 1094.792, 'duration': 3.702}, {'end': 1109.14, 'text': "so in the next video or in the next part, we'll grab bootstrap, we'll grab font awesome and we'll create our our index html file.", 'start': 1098.494, 'duration': 10.646}], 'summary': 'Beginner-focused tutorial on grabbing bootstrap and font awesome for creating an html file.', 'duration': 16.269, 'max_score': 1092.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq81092871.jpg'}], 'start': 421.757, 'title': 'Organizing scss and sass files for web development', 'summary': 'Discusses organizing scss and sass files into base, modules, and layouts directories, emphasizing the use of variables, mixins, functions, and the import process, and the efficiency gained. it also covers setting up a css file, discussing folder structure for scss, and planning to implement bootstrap and font awesome for icons.', 'chapters': [{'end': 518.892, 'start': 421.757, 'title': 'Organizing scss files for web development', 'summary': 'Discusses organizing scss files by creating folders for base, modules, and layouts, and underscores in file names to avoid generating unwanted css files, including a normalize.scss file for reset.', 'duration': 97.135, 'highlights': ['Creating folders for Base, Modules, and Layouts in SCSS directory to organize styles.', 'Using underscores in file names, like underscore base.scss, to prevent generation of unwanted CSS files.', 'Including a normalize.scss file for resetting styles.']}, {'end': 979.157, 'start': 518.892, 'title': 'Organizing sass files for web development', 'summary': 'Outlines the process of organizing sass files into base, layouts, and modules directories, and explains the use of variables, mixins, functions, and the import process, emphasizing the efficiency gained by using sass for managing css files.', 'duration': 460.265, 'highlights': ['The chapter explains the organization of Sass files into base, layouts, and modules directories, with emphasis on the purpose of each directory in managing CSS files efficiently.', 'It describes the use of variables to store primary color, secondary color, margin values, and other customizable elements, providing a structured approach to managing design elements.', 'The transcript also highlights the creation of mixins.scss, a file for storing functions that can easily insert blocks of code into the CSS, improving code reusability and maintainability.', 'The speaker discusses the import process in Sass, highlighting the efficiency gained by importing multiple SCSS files without affecting performance, emphasizing the advantage of minimizing HTTP requests for improved website performance.']}, {'end': 1109.14, 'start': 979.337, 'title': 'Implementing bootstrap and font awesome', 'summary': 'Covers setting up a css file, discussing folder structure for scss, and planning to implement bootstrap and font awesome for icons in the next session.', 'duration': 129.803, 'highlights': ['The chapter discusses setting up a CSS file and generating SCSS files, with a focus on the folder structure for SCSS.', 'The instructor plans to implement Bootstrap and Font Awesome for icons in the next session, emphasizing the importance of keeping the main CSS file separate from third-party code.', 'The instructor mentions the option of creating a Vendors folder for third-party services like Bootstrap and Font Awesome, but expresses a preference for keeping them separate in the CSS folder.']}], 'duration': 687.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mu74UmFBAq8/pics/Mu74UmFBAq8421757.jpg', 'highlights': ['Using underscores in file names, like underscore base.scss, to prevent generation of unwanted CSS files.', 'The chapter explains the organization of Sass files into base, layouts, and modules directories, with emphasis on the purpose of each directory in managing CSS files efficiently.', 'The speaker discusses the import process in Sass, highlighting the efficiency gained by importing multiple SCSS files without affecting performance, emphasizing the advantage of minimizing HTTP requests for improved website performance.', 'The instructor plans to implement Bootstrap and Font Awesome for icons in the next session, emphasizing the importance of keeping the main CSS file separate from third-party code.']}], 'highlights': ['The tutorial covers the creation of a bootstrap website design with various components like footer, search bar, slogan, carousel, and more.', 'The chapter emphasizes the use of Bootstrap and SASS in building the template, showcasing the capabilities of SASS such as variables, mixins, and importing stylesheets.', 'The chapter explains the organization of Sass files into base, layouts, and modules directories, with emphasis on the purpose of each directory in managing CSS files efficiently.', 'Using underscores in file names, like underscore base.scss, to prevent generation of unwanted CSS files.', 'Incorporating image files for a fictional application called SkyApp is part of the development process.']}