title
Semantic UI In 60 Minutes

description
In this crash course we will talk about all of the basics of Semantic UI including the styling of headings, buttons, lists, icons and much more. We will also look at the build and compile tools with Gulp. CODE: Code for this video http://www.traversymedia.com/downloads/semantic-sandbox.zip SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa EDUONIX COURSES: Please use affiliate links from website below http://www.traversymedia.com/eduonix-courses SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/bradtraversy

detail
{'title': 'Semantic UI In 60 Minutes', 'heatmap': [{'end': 3507.614, 'start': 3474.772, 'weight': 1}], 'summary': "Tutorial 'semantic ui in 60 minutes' covers an overview of semantic ui, its features, and installation using npm, along with web development using semantic ui for creating containers, utilizing classes, and exploring various components. it also includes working with ui segments, ui elements, ui design, grid layout, setting up gulp, semantic ui, and customizing website themes.", 'chapters': [{'end': 282.002, 'segs': [{'end': 31.152, 'src': 'embed', 'start': 0.489, 'weight': 0, 'content': [{'end': 1.37, 'text': "Hey, what's going on, guys?", 'start': 0.489, 'duration': 0.881}, {'end': 9.398, 'text': "In this video, we're going to be taking a look at Semantic UI, which is a front-end framework that's similar to Bootstrap, but a little more advanced.", 'start': 1.41, 'duration': 7.988}, {'end': 13.282, 'text': "It's powered by the LESS CSS Precompiler and jQuery.", 'start': 9.839, 'duration': 3.443}, {'end': 20.149, 'text': 'It has a sleek, flat design, and it allows us to create great-looking, lightweight, and responsive websites and applications.', 'start': 13.722, 'duration': 6.427}, {'end': 28.531, 'text': "so in this video we're going to cover the basics and even look at some of the build tools, themes and some of the the more advanced stuff.", 'start': 20.749, 'duration': 7.782}, {'end': 31.152, 'text': "all right, so let's go ahead and get started.", 'start': 28.531, 'duration': 2.621}], 'summary': 'Introduction to semantic ui, an advanced front-end framework powered by less css and jquery, enabling creation of sleek, lightweight, and responsive websites and applications.', 'duration': 30.663, 'max_score': 0.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40489.jpg'}, {'end': 130.809, 'src': 'embed', 'start': 98.724, 'weight': 2, 'content': [{'end': 102.889, 'text': 'But they do give you much more when it comes to build tools, when it comes to compiling.', 'start': 98.724, 'duration': 4.165}, {'end': 110.698, 'text': "There's 20 plus themes that you can choose from and you can choose different elements from different themes.", 'start': 103.71, 'duration': 6.988}, {'end': 115.604, 'text': 'So you can have a button from one theme and then say a list in another.', 'start': 111.098, 'duration': 4.506}, {'end': 123.166, 'text': 'and then you can compile all that and basically build kind of your, your custom, your own custom version of semantic.', 'start': 116.164, 'duration': 7.002}, {'end': 130.809, 'text': "so what we're going to do in this video is first just include the cdn and we're going to look at most of the elements, such as buttons, lists,", 'start': 123.166, 'duration': 7.643}], 'summary': 'Semantic provides 20+ themes and customizable build tools for elements like buttons and lists.', 'duration': 32.085, 'max_score': 98.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp4098724.jpg'}, {'end': 171.712, 'src': 'embed', 'start': 146.934, 'weight': 4, 'content': [{'end': 154.399, 'text': "After we do that, I'm going to show you how we can install Symantec using NPM and then use the build tools with Gulp,", 'start': 146.934, 'duration': 7.465}, {'end': 157.542, 'text': 'which is a JavaScript-based task runner.', 'start': 154.399, 'duration': 3.143}, {'end': 164.086, 'text': "So I'll show you how we can work with different themes, how we can override styles, create variables, and so on.", 'start': 158.122, 'duration': 5.964}, {'end': 171.712, 'text': "So basically, we'll just build out our own custom version of the framework and then compile it so that we can just include it right in our HTML.", 'start': 164.567, 'duration': 7.145}], 'summary': 'Demonstrating installation of symantec using npm, utilizing gulp for build tools, customizing themes and styles, and compiling for inclusion in html.', 'duration': 24.778, 'max_score': 146.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40146934.jpg'}, {'end': 290.803, 'src': 'embed', 'start': 260.481, 'weight': 3, 'content': [{'end': 261.062, 'text': "Where is it? It's..", 'start': 260.481, 'duration': 0.581}, {'end': 265.638, 'text': 'At the top, Adam, live server.', 'start': 263.998, 'duration': 1.64}, {'end': 270.299, 'text': "okay, we can say start server, and then I'm just gonna grab it.", 'start': 265.638, 'duration': 4.661}, {'end': 273.86, 'text': 'it opened up on a different window or monitor and here it is.', 'start': 270.299, 'duration': 3.561}, {'end': 281.122, 'text': "So now our index HTML is being run on our local host on port 3000, so I'm gonna be using that.", 'start': 273.86, 'duration': 7.262}, {'end': 282.002, 'text': "you don't have to.", 'start': 281.122, 'duration': 0.88}, {'end': 290.803, 'text': 'you can just simply click on the index HTML file and run it, you know, off your file system, and Or you can use some other type of server.', 'start': 282.002, 'duration': 8.801}], 'summary': 'Running index html on local host at port 3000.', 'duration': 30.322, 'max_score': 260.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40260481.jpg'}], 'start': 0.489, 'title': 'Semantic ui framework overview, installation, and customization', 'summary': 'Provides an overview of semantic ui, including its features such as less css precompiler and jquery, and covers the installation using npm, theme customization, and setting up a local server for development.', 'chapters': [{'end': 123.166, 'start': 0.489, 'title': 'Introduction to semantic ui framework', 'summary': 'Explores semantic ui, a front-end framework similar to bootstrap but more advanced, powered by less css precompiler and jquery, offering sleek design, build tools, 20+ themes, and in-depth documentation.', 'duration': 122.677, 'highlights': ['Semantic UI is a front-end framework similar to Bootstrap but more advanced, powered by LESS CSS Precompiler and jQuery. Semantic UI is a more advanced front-end framework than Bootstrap, powered by LESS CSS Precompiler and jQuery.', 'It offers sleek, flat design and allows the creation of great-looking, lightweight, and responsive websites and applications. Semantic UI enables the creation of sleek, lightweight, and responsive websites and applications with a flat design.', 'It provides build tools, 20+ themes, and the ability to choose different elements from different themes to create a custom version of Semantic UI. Semantic UI offers build tools, 20+ themes, and the flexibility to choose elements from different themes to create a custom version.']}, {'end': 282.002, 'start': 123.166, 'title': 'Semantic ui framework installation and customization', 'summary': 'Covers the installation of semantic ui using npm, customization of themes, and creating a custom version of the framework, along with setting up a local server for development.', 'duration': 158.836, 'highlights': ['Setting up a local server using Atom Live Server Demonstrates the use of Atom Live Server for setting up a local server on port 3000 for running the index HTML file.', 'Installing Semantic UI using NPM and using Gulp as a task runner Explains the process of installing Semantic UI through NPM and utilizing Gulp as a JavaScript-based task runner for build tools.', 'Creating a custom version of the Semantic UI framework Describes the process of building a custom version of the Semantic UI framework, including the ability to override styles, create variables, and compile the customized framework for direct inclusion in HTML.']}], 'duration': 281.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40489.jpg', 'highlights': ['Semantic UI is a more advanced front-end framework than Bootstrap, powered by LESS CSS Precompiler and jQuery.', 'Semantic UI enables the creation of sleek, lightweight, and responsive websites and applications with a flat design.', 'Semantic UI offers build tools, 20+ themes, and the flexibility to choose elements from different themes to create a custom version.', 'Demonstrates the use of Atom Live Server for setting up a local server on port 3000 for running the index HTML file.', 'Explains the process of installing Semantic UI through NPM and utilizing Gulp as a JavaScript-based task runner for build tools.', 'Describes the process of building a custom version of the Semantic UI framework, including the ability to override styles, create variables, and compile the customized framework for direct inclusion in HTML.']}, {'end': 1846.529, 'segs': [{'end': 746.647, 'src': 'embed', 'start': 696.638, 'weight': 2, 'content': [{'end': 698.821, 'text': "Let's just see what it gives us by default.", 'start': 696.638, 'duration': 2.183}, {'end': 700.123, 'text': 'If we say read more.', 'start': 698.841, 'duration': 1.282}, {'end': 703.789, 'text': "And it's just a standard button with no style at all.", 'start': 700.143, 'duration': 3.646}, {'end': 705.732, 'text': 'What we need to do is give it a class.', 'start': 704.029, 'duration': 1.703}, {'end': 709.097, 'text': 'And we want to, of course, use the UI.', 'start': 707.354, 'duration': 1.743}, {'end': 710.098, 'text': 'And then we want button.', 'start': 709.257, 'duration': 0.841}, {'end': 716.537, 'text': "Now, one of the selling points of semantic UI is that they don't use abbreviations.", 'start': 711.474, 'duration': 5.063}, {'end': 718.739, 'text': 'In Bootstrap, you see BTN.', 'start': 717.098, 'duration': 1.641}, {'end': 719.94, 'text': "They don't do that.", 'start': 719.339, 'duration': 0.601}, {'end': 723.922, 'text': "They'll use the actual element because I guess it's more semantic.", 'start': 719.98, 'duration': 3.942}, {'end': 727.444, 'text': "So let's save that and see what we get.", 'start': 724.643, 'duration': 2.801}, {'end': 734.109, 'text': 'So you can see the button is much nicer looking, added some padding, gave it a light gray background, and so on.', 'start': 727.544, 'duration': 6.565}, {'end': 738.932, 'text': "All I'm going to do is just make this small so that we can see both.", 'start': 734.729, 'duration': 4.203}, {'end': 746.647, 'text': 'Now when it comes to buttons, Semantic UI has a ton of different options or different classes.', 'start': 740.72, 'duration': 5.927}], 'summary': 'Introduction to using semantic ui for styling buttons, emphasizing its non-abbreviation approach and varied styling options.', 'duration': 50.009, 'max_score': 696.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40696638.jpg'}, {'end': 1011.18, 'src': 'embed', 'start': 941.448, 'weight': 3, 'content': [{'end': 949.753, 'text': "Let's say class button or UI button.", 'start': 941.448, 'duration': 8.305}, {'end': 953.116, 'text': "And let's say basic.", 'start': 952.015, 'duration': 1.101}, {'end': 960.278, 'text': "All right, so if we save that, you can see that it's much lighter.", 'start': 956.917, 'duration': 3.361}, {'end': 962.439, 'text': 'I like this version of it.', 'start': 960.298, 'duration': 2.141}, {'end': 963.819, 'text': 'It looks nice and clean.', 'start': 962.679, 'duration': 1.14}, {'end': 966.76, 'text': 'And you can also add the color classes as well.', 'start': 964.379, 'duration': 2.381}, {'end': 975.282, 'text': "So if we were to copy that, and I'm just going to do a couple colors.", 'start': 967.56, 'duration': 7.722}, {'end': 976.643, 'text': "So we'll say red, green, blue, teal.", 'start': 975.302, 'duration': 1.341}, {'end': 986.707, 'text': 'and brown.', 'start': 985.886, 'duration': 0.821}, {'end': 990.449, 'text': 'All right, so all the colors will work for this as well.', 'start': 986.727, 'duration': 3.722}, {'end': 995.091, 'text': 'Now in Bootstrap we have a class called btnBlock,', 'start': 991.709, 'duration': 3.382}, {'end': 1000.594, 'text': 'which will make the button a block-level element so that it goes across the whole screen or its whole container.', 'start': 995.091, 'duration': 5.503}, {'end': 1006.537, 'text': 'So in Semantic UI, we have a class called, what is it, fluid.', 'start': 1001.134, 'duration': 5.403}, {'end': 1011.18, 'text': "So let's take this first basic button and just add the class of fluid.", 'start': 1007.318, 'duration': 3.862}], 'summary': 'Comparison of button classes in semantic ui and bootstrap, including color options and block-level element feature.', 'duration': 69.732, 'max_score': 941.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40941448.jpg'}, {'end': 1530.05, 'src': 'embed', 'start': 1503.267, 'weight': 0, 'content': [{'end': 1507.191, 'text': 'And each field here is going to be wrapped in a div with the class of field.', 'start': 1503.267, 'duration': 3.924}, {'end': 1512.596, 'text': 'Notice that they use very descriptive classes here, hence semantic UI.', 'start': 1507.772, 'duration': 4.824}, {'end': 1515.419, 'text': 'And then we have a label with an input.', 'start': 1513.337, 'duration': 2.082}, {'end': 1516.68, 'text': 'Very simple.', 'start': 1516.079, 'duration': 0.601}, {'end': 1517.781, 'text': 'Another field here.', 'start': 1516.74, 'duration': 1.041}, {'end': 1519.222, 'text': 'First name, last name.', 'start': 1518.141, 'duration': 1.081}, {'end': 1522.204, 'text': 'And then a checkbox.', 'start': 1519.622, 'duration': 2.582}, {'end': 1526.287, 'text': "It's in a div with the class of UI checkbox.", 'start': 1523.925, 'duration': 2.362}, {'end': 1529.009, 'text': 'And then we have a simple button down here.', 'start': 1526.948, 'duration': 2.061}, {'end': 1530.05, 'text': "So let's save that.", 'start': 1529.109, 'duration': 0.941}], 'summary': 'Transcript discusses the use of semantic ui for form fields and a simple button.', 'duration': 26.783, 'max_score': 1503.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp401503267.jpg'}], 'start': 282.002, 'title': 'Semantic ui for web development', 'summary': 'Explains how to include semantic ui using cdn, create a container, and utilize semantic classes for web development. it covers the usage of header tags and classes, button features, and provides an overview of various semantic ui components, highlighting its flexibility and extensive features.', 'chapters': [{'end': 533.843, 'start': 282.002, 'title': 'Using semantic ui for web development', 'summary': 'Explains how to include semantic ui using cdn, create a container, and utilize semantic classes for web development.', 'duration': 251.841, 'highlights': ['The chapter explains how to include Semantic UI using CDN, create a container, and utilize semantic classes for web development.', 'The chapter demonstrates including the Semantic UI CSS file using an external link and shows the impact on web elements.', 'It explains how to create a container in Semantic UI, similar to the concept in Bootstrap, and its responsive nature by default.']}, {'end': 746.647, 'start': 533.963, 'title': 'Semantic ui - headings and buttons', 'summary': 'Covers the usage of header tags and classes in semantic ui for creating different sizes of headings and buttons, highlighting the benefits of using semantic ui over other frameworks and demonstrating its flexibility and variety in styling options.', 'duration': 212.684, 'highlights': ['Semantic UI offers flexibility in styling headings and buttons by providing classes for different sizes and styles, such as small, tiny, medium, large, and huge, allowing for easy customization. Semantic UI provides classes for different sizes and styles, such as small, tiny, medium, large, and huge, allowing for easy customization of headings and buttons.', "Semantic UI emphasizes using the actual element names rather than abbreviations, such as using 'UI button' instead of 'BTN', for better semantic structure and clarity. Semantic UI emphasizes using the actual element names for better semantic structure and clarity, such as using 'UI button' instead of 'BTN'.", 'Semantic UI offers a wide range of options for buttons, including different colors, sizes, and icons, providing more versatility compared to other frameworks like Bootstrap or Foundation. Semantic UI offers a wide range of options for buttons, including different colors, sizes, and icons, providing more versatility compared to other frameworks like Bootstrap or Foundation.']}, {'end': 1122.83, 'start': 747.027, 'title': 'Semantic ui button features', 'summary': 'Introduces semantic ui button features, including context classes for primary, secondary, positive, and negative, color classes offering various color options, as well as disabled, loading, and size classes, and the basic class that reverses the button color. it also covers the fluid class for block-level elements and basic icon and labeled button features.', 'duration': 375.803, 'highlights': ['Semantic UI provides context classes for primary, secondary, positive, and negative, offering different color options for buttons. Semantic UI introduces context classes for buttons, providing various color options such as blue for primary, black for secondary, green for positive, and red for negative.', 'Color classes in Semantic UI offer a wide range of color options for buttons, such as red, blue, green, purple, yellow, brown, orange, olive, teal, violet, and gray. Semantic UI offers a diverse set of color classes for buttons, including red, blue, green, purple, yellow, brown, orange, olive, teal, violet, and gray, providing a wide range of color options to choose from.', 'Semantic UI features disabled and loading classes for buttons, providing functionality for disabling and displaying a loading spinner within the button. Semantic UI includes disabled and loading classes for buttons, allowing the functionality to disable buttons and display a loading spinner within the button.', 'The size classes in Semantic UI offer various size options for buttons, ranging from mini, tiny, small, medium, large, big, huge, to massive. Semantic UI provides size classes for buttons, offering a wide range of size options, from mini to massive, allowing for flexible button sizing.', 'Semantic UI introduces the basic class, which reverses the button color, making the border the color and the inside white. Semantic UI presents the basic class, which reverses the button color, making the border the color and the inside white, creating a clean and distinct appearance.', "The fluid class in Semantic UI functions similarly to Bootstrap's btnBlock class, allowing the button to become a block-level element spanning the entire width of its container. Semantic UI's fluid class acts similarly to Bootstrap's btnBlock class, enabling the button to become a block-level element that spans the entire width of its container.", 'Semantic UI offers basic icon and labeled button features, allowing for the addition of icons and labels to buttons, providing additional visual and functional elements. Semantic UI provides basic icon and labeled button features, enabling the addition of icons and labels to buttons, enhancing visual and functional elements of the buttons.']}, {'end': 1846.529, 'start': 1122.85, 'title': 'Semantic ui components overview', 'summary': 'Provides an overview of various semantic ui components, including buttons, icons, labels, breadcrumbs, lists, forms, messages, tables, and pagination, explaining their usage with code examples and highlighting the flexibility and extensive features of semantic ui.', 'duration': 723.679, 'highlights': ["Semantic UI components overview The chapter covers various Semantic UI components, including buttons, icons, labels, breadcrumbs, lists, forms, messages, tables, and pagination, providing an introduction to each component's usage.", 'Extensive features and flexibility The chapter demonstrates the flexibility and extensive features of Semantic UI components, showcasing options such as inverting buttons, using different button group styles, incorporating icons and labels, creating breadcrumb navigation, formatting lists, designing forms, displaying messages with context classes, and customizing tables with pagination and styling.']}], 'duration': 1564.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp40282002.jpg', 'highlights': ["The chapter covers various Semantic UI components, including buttons, icons, labels, breadcrumbs, lists, forms, messages, tables, and pagination, providing an introduction to each component's usage.", 'The chapter demonstrates the flexibility and extensive features of Semantic UI components, showcasing options such as inverting buttons, using different button group styles, incorporating icons and labels, creating breadcrumb navigation, formatting lists, designing forms, displaying messages with context classes, and customizing tables with pagination and styling.', 'Semantic UI offers a wide range of options for buttons, including different colors, sizes, and icons, providing more versatility compared to other frameworks like Bootstrap or Foundation.', 'Semantic UI introduces context classes for buttons, providing various color options such as blue for primary, black for secondary, green for positive, and red for negative.', 'Semantic UI provides size classes for buttons, offering a wide range of size options, from mini to massive, allowing for flexible button sizing.', "Semantic UI emphasizes using the actual element names for better semantic structure and clarity, such as using 'UI button' instead of 'BTN'.", 'Semantic UI includes disabled and loading classes for buttons, allowing the functionality to disable buttons and display a loading spinner within the button.', "Semantic UI's fluid class acts similarly to Bootstrap's btnBlock class, enabling the button to become a block-level element that spans the entire width of its container.", 'Semantic UI provides basic icon and labeled button features, enabling the addition of icons and labels to buttons, enhancing visual and functional elements of the buttons.', 'Semantic UI presents the basic class, which reverses the button color, making the border the color and the inside white, creating a clean and distinct appearance.']}, {'end': 2475.423, 'segs': [{'end': 1941.65, 'src': 'embed', 'start': 1915.082, 'weight': 0, 'content': [{'end': 1920.244, 'text': 'I just want you to have this, this cheat sheet with the very basics.', 'start': 1915.082, 'duration': 5.162}, {'end': 1921.724, 'text': 'All right.', 'start': 1921.504, 'duration': 0.22}, {'end': 1925.345, 'text': "So we're going to move on from tables and go to segments.", 'start': 1921.844, 'duration': 3.501}, {'end': 1929.446, 'text': "So let's look up segment.", 'start': 1926.345, 'duration': 3.101}, {'end': 1933.607, 'text': 'And a segment is used to create a grouping of related content.', 'start': 1930.086, 'duration': 3.521}, {'end': 1938.249, 'text': 'So the simplest version would be this, UI and then segment.', 'start': 1933.708, 'duration': 4.541}, {'end': 1941.65, 'text': 'And it just kind of gives it a border and adds some padding to it.', 'start': 1938.269, 'duration': 3.381}], 'summary': 'Training covers basics of using segments to group content with borders and padding.', 'duration': 26.568, 'max_score': 1915.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp401915082.jpg'}, {'end': 2068.237, 'src': 'embed', 'start': 2003.646, 'weight': 3, 'content': [{'end': 2008.17, 'text': "And now if we go down, you can see it's raised up off the page a little bit, has a little bit of a shadow.", 'start': 2003.646, 'duration': 4.524}, {'end': 2010.332, 'text': 'We can also do Stacked.', 'start': 2009.171, 'duration': 1.161}, {'end': 2024.373, 'text': "Take a look at that and you can see right underneath, I don't know if you guys can see that, but there's a couple lines.", 'start': 2017.305, 'duration': 7.068}, {'end': 2026.756, 'text': "So it looks like they're stacked on top of each other.", 'start': 2024.413, 'duration': 2.343}, {'end': 2028.378, 'text': 'We also have piled.', 'start': 2027.377, 'duration': 1.001}, {'end': 2038.133, 'text': "So that basically looks like they're on top of each other, but they're not aligned.", 'start': 2034.148, 'duration': 3.985}, {'end': 2039.815, 'text': 'So it gives it a nice little look.', 'start': 2038.213, 'duration': 1.602}, {'end': 2043.099, 'text': "And let's see what else we can do here.", 'start': 2041.177, 'duration': 1.922}, {'end': 2048.847, 'text': 'We can add, we can basically put different segments together.', 'start': 2044.762, 'duration': 4.085}, {'end': 2051.389, 'text': 'So if we were to put a div here.', 'start': 2048.867, 'duration': 2.522}, {'end': 2059.312, 'text': "And let's give this a class of UISegments.", 'start': 2055.469, 'duration': 3.843}, {'end': 2062.094, 'text': "Okay, notice it's segments with an S.", 'start': 2059.492, 'duration': 2.602}, {'end': 2068.237, 'text': 'And then we could take this and put that inside here.', 'start': 2062.094, 'duration': 6.143}], 'summary': 'Demonstration of different visual effects and segment arrangement in web design.', 'duration': 64.591, 'max_score': 2003.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402003646.jpg'}, {'end': 2165.467, 'src': 'embed', 'start': 2134.633, 'weight': 5, 'content': [{'end': 2137.654, 'text': "All right, so let's look at some of the other stuff in the documentation.", 'start': 2134.633, 'duration': 3.021}, {'end': 2142.275, 'text': 'I want to look at steps, which is right here, steps.', 'start': 2137.674, 'duration': 4.601}, {'end': 2143.614, 'text': 'So this is really cool.', 'start': 2142.813, 'duration': 0.801}, {'end': 2153.319, 'text': 'This is like if you have a shopping cart and your website viewer is going through the shipping and all that the billing process,', 'start': 2143.634, 'duration': 9.685}, {'end': 2157.542, 'text': 'you can add these little groups or steps, which I think is really cool.', 'start': 2153.319, 'duration': 4.223}, {'end': 2160.784, 'text': "And there's a lot of different variations as well.", 'start': 2158.502, 'duration': 2.282}, {'end': 2165.467, 'text': 'So I do want to include one of these in the cheat sheet.', 'start': 2162.165, 'duration': 3.302}], 'summary': 'Documentation includes steps for creating shopping cart process, with various variations.', 'duration': 30.834, 'max_score': 2134.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402134633.jpg'}, {'end': 2230.668, 'src': 'embed', 'start': 2186.163, 'weight': 1, 'content': [{'end': 2193.586, 'text': 'And we just tab that over.', 'start': 2186.163, 'duration': 7.423}, {'end': 2197.538, 'text': 'Alright, save that.', 'start': 2196.457, 'duration': 1.081}, {'end': 2199.521, 'text': 'And there it is, steps.', 'start': 2198.6, 'duration': 0.921}, {'end': 2204.887, 'text': "And whatever page you're on, you just want to have the active class.", 'start': 2200.602, 'duration': 4.285}, {'end': 2207.57, 'text': 'And that will make sure that it sticks out.', 'start': 2205.228, 'duration': 2.342}, {'end': 2212.877, 'text': 'So now I want to look at content blocks or cards.', 'start': 2209.593, 'duration': 3.284}, {'end': 2215.38, 'text': "So let's put in HR.", 'start': 2214.278, 'duration': 1.102}, {'end': 2223.706, 'text': 'All right, so this is going to be a div.', 'start': 2221.525, 'duration': 2.181}, {'end': 2226.587, 'text': "It's going to have a class of UI and then card.", 'start': 2224.086, 'duration': 2.501}, {'end': 2230.668, 'text': "And inside here, let's put the content div.", 'start': 2226.607, 'duration': 4.061}], 'summary': 'Creating steps and content blocks with ui and card classes.', 'duration': 44.505, 'max_score': 2186.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402186163.jpg'}, {'end': 2415.815, 'src': 'embed', 'start': 2378.619, 'weight': 2, 'content': [{'end': 2386.385, 'text': "So there's a lot of stuff here, a lot to choose from as far as design and layout.", 'start': 2378.619, 'duration': 7.766}, {'end': 2396.091, 'text': "Another thing I want to look at is item Which is let's see Right here under views.", 'start': 2388.229, 'duration': 7.862}, {'end': 2402.472, 'text': "So this is for like I don't know a blog, something like that where you have the different articles.", 'start': 2396.631, 'duration': 5.841}, {'end': 2414.755, 'text': 'So I just want to include this In our mark, in our cheat sheet.', 'start': 2402.472, 'duration': 12.283}, {'end': 2415.815, 'text': 'So this is an item.', 'start': 2414.755, 'duration': 1.06}], 'summary': 'The transcript discusses the variety of design and layout options and the inclusion of an item in a blog or similar content.', 'duration': 37.196, 'max_score': 2378.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402378619.jpg'}], 'start': 1846.529, 'title': 'Ui segments and documentation', 'summary': 'Explores working with ui segments, including creating grouping of related content, adding classes like raised, stacked, piled, combining segments, and coloring segments using inverted class. additionally, it delves into ui elements such as steps, content blocks, and items, providing insights into their usage and markup structure, highlighting the ease of implementation for creating engaging user interfaces.', 'chapters': [{'end': 2132.413, 'start': 1846.529, 'title': 'Working with ui segments', 'summary': 'Explores working with ui segments, including creating grouping of related content, adding classes like raised, stacked, piled, combining segments, and coloring segments using inverted class.', 'duration': 285.884, 'highlights': ['Creating grouping of related content A segment is used to create a grouping of related content, providing a border and adding padding.', 'Adding classes like Raised, Stacked, Piled Classes like Raised, Stacked, and Piled are available to modify the appearance of segments, with Raised adding a shadow and Stacked displaying segments on top of each other.', 'Combining segments and adding color classes Segments can be combined and colored using classes like red, green, and inverted to modify their appearance and create visual distinctions.']}, {'end': 2475.423, 'start': 2134.633, 'title': 'Ui documentation overview', 'summary': 'Explores different ui elements such as steps, content blocks, and items, providing insights into their usage and markup structure. it highlights the ease of implementation for creating engaging user interfaces.', 'duration': 340.79, 'highlights': ['Steps can be added to create a seamless shopping process, using a class of UI steps and step to add icons and content, making it user-friendly. Steps provide a seamless shopping process using UI steps and step classes.', 'The creation of content blocks involves using a class of UI card, with options to include headers, meta info, paragraphs, and buttons, allowing for versatile design variations. Content blocks offer versatile design options using UI card class, headers, meta info, paragraphs, and buttons.', "The 'item' element is suitable for blog posts, featuring a simple markup structure with classes for images, content, headers, meta tags, descriptions, and additional content, providing flexibility for blog layouts. The 'item' element provides flexibility for blog layouts with classes for images, content, headers, meta tags, descriptions, and additional content."]}], 'duration': 628.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp401846529.jpg', 'highlights': ['Creating grouping of related content A segment is used to create a grouping of related content, providing a border and adding padding.', 'The creation of content blocks involves using a class of UI card, with options to include headers, meta info, paragraphs, and buttons, allowing for versatile design variations.', "The 'item' element is suitable for blog posts, featuring a simple markup structure with classes for images, content, headers, meta tags, descriptions, and additional content, providing flexibility for blog layouts.", 'Adding classes like Raised, Stacked, Piled Classes like Raised, Stacked, and Piled are available to modify the appearance of segments, with Raised adding a shadow and Stacked displaying segments on top of each other.', 'Combining segments and adding color classes Segments can be combined and colored using classes like red, green, and inverted to modify their appearance and create visual distinctions.', 'Steps can be added to create a seamless shopping process, using a class of UI steps and step to add icons and content, making it user-friendly.', 'Content blocks offer versatile design options using UI card class, headers, meta info, paragraphs, and buttons.', 'Steps provide a seamless shopping process using UI steps and step classes.']}, {'end': 2948.402, 'segs': [{'end': 2512.033, 'src': 'embed', 'start': 2476.543, 'weight': 2, 'content': [{'end': 2481.044, 'text': 'And we can have this kind of look here for a number of downloads or views or something like that.', 'start': 2476.543, 'duration': 4.501}, {'end': 2484.285, 'text': "So what I'll do is just grab this first one.", 'start': 2482.244, 'duration': 2.041}, {'end': 2492.007, 'text': "And let's just put a comment.", 'start': 2490.647, 'duration': 1.36}, {'end': 2498.429, 'text': 'OK, so basically, whoop.', 'start': 2497.469, 'duration': 0.96}, {'end': 2504.487, 'text': 'So we have a class of UI and then statistic.', 'start': 2502.045, 'duration': 2.442}, {'end': 2509.271, 'text': 'And then we have the value, which is going to obviously the font is going to be much bigger.', 'start': 2504.687, 'duration': 4.584}, {'end': 2512.033, 'text': 'And then the label where the font is smaller.', 'start': 2509.611, 'duration': 2.422}], 'summary': 'Designing a ui for tracking downloads/views with different font sizes for value and label.', 'duration': 35.49, 'max_score': 2476.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402476543.jpg'}, {'end': 2578.479, 'src': 'embed', 'start': 2546.326, 'weight': 0, 'content': [{'end': 2550.109, 'text': 'And this is going to have a class of UI, of course, and then grid.', 'start': 2546.326, 'duration': 3.783}, {'end': 2554.853, 'text': "So that's going to start us off with the grid system.", 'start': 2551.971, 'duration': 2.882}, {'end': 2559.197, 'text': "And then we're going to have columns, each div with a class of column.", 'start': 2555.294, 'duration': 3.903}, {'end': 2572.535, 'text': "Now, by default, in Semantic UI, it's a 16-column grid, unlike with Bootstrap and Foundation and most of the others, which is a 12-column.", 'start': 2562.208, 'duration': 10.327}, {'end': 2578.479, 'text': "But you can use 16 in the other frameworks, but by default, it's 12.", 'start': 2572.935, 'duration': 5.544}], 'summary': "Using semantic ui with a 16-column grid system, unlike bootstrap and foundation's 12-column default.", 'duration': 32.153, 'max_score': 2546.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402546326.jpg'}, {'end': 2733.115, 'src': 'embed', 'start': 2700.996, 'weight': 1, 'content': [{'end': 2708.578, 'text': "So under this div, we're going to say div, give it a class of UI and grid.", 'start': 2700.996, 'duration': 7.582}, {'end': 2716.761, 'text': "And then what I'll do is take four of these, one, two, three, four, and paste those in.", 'start': 2709.819, 'duration': 6.942}, {'end': 2722.183, 'text': "And then we're going to add an extra class on this column called four.", 'start': 2718.502, 'duration': 3.681}, {'end': 2733.115, 'text': 'And remember, semantic UI uses the actual labels, the actual word, instead of some strange abbreviation.', 'start': 2726.829, 'duration': 6.286}], 'summary': 'Creating a ui grid with four columns and using semantic ui for labels', 'duration': 32.119, 'max_score': 2700.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402700996.jpg'}, {'end': 2861.293, 'src': 'embed', 'start': 2830.883, 'weight': 5, 'content': [{'end': 2835.967, 'text': "and let's make this a row and then inside here we'll have two columns that will float.", 'start': 2830.883, 'duration': 5.084}, {'end': 2840.892, 'text': "okay, so let's say div and give this a class of let's do left.", 'start': 2835.967, 'duration': 4.925}, {'end': 2843.214, 'text': 'okay, we want to align this one to the left.', 'start': 2840.892, 'duration': 2.322}, {'end': 2850.221, 'text': "it's going to be floated and it's a column, and then in here we'll just put a button.", 'start': 2843.214, 'duration': 7.007}, {'end': 2861.293, 'text': "Okay, then I'll just copy this and then same thing, except we're going to float it to the right.", 'start': 2853.629, 'duration': 7.664}], 'summary': 'Creating a row with two floated columns for alignment.', 'duration': 30.41, 'max_score': 2830.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402830883.jpg'}, {'end': 2930.45, 'src': 'embed', 'start': 2900.155, 'weight': 4, 'content': [{'end': 2905.638, 'text': 'So if we go to usage, you just want to include this little bit of jQuery here.', 'start': 2900.155, 'duration': 5.483}, {'end': 2909.239, 'text': 'Call the accordion function on whatever element you want to use it with.', 'start': 2905.798, 'duration': 3.441}, {'end': 2911.641, 'text': "And let's see what else.", 'start': 2910.52, 'duration': 1.121}, {'end': 2912.481, 'text': 'We have a dimmer.', 'start': 2911.681, 'duration': 0.8}, {'end': 2919.964, 'text': 'So we can basically put like an overlay over a piece of content.', 'start': 2916.323, 'duration': 3.641}, {'end': 2925.167, 'text': 'We have drop down, modals, pop up.', 'start': 2920.705, 'duration': 4.462}, {'end': 2927.408, 'text': 'Progress bars.', 'start': 2926.687, 'duration': 0.721}, {'end': 2928.148, 'text': 'This is pretty cool.', 'start': 2927.428, 'duration': 0.72}, {'end': 2930.45, 'text': 'You can actually interact with the progress bars.', 'start': 2928.168, 'duration': 2.282}], 'summary': 'Usage of jquery for various ui components like accordion, dimmer, drop down, modals, pop up, and progress bars, enabling interaction with the progress bars.', 'duration': 30.295, 'max_score': 2900.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402900155.jpg'}], 'start': 2476.543, 'title': 'Ui design and semantic ui grid layout', 'summary': "Covers ui design elements, including statistics and grid systems such as semantic ui's 16-column grid system, and explains how to use semantic ui to create grid layouts with different column widths and alignments, as well as additional features like progress bars and ratings.", 'chapters': [{'end': 2632.241, 'start': 2476.543, 'title': 'Ui design and grid system', 'summary': "Covers ui design elements including statistics and grid systems, such as semantic ui's 16-column grid system and the usage of ui buttons for a visually appealing layout.", 'duration': 155.698, 'highlights': ['Semantic UI uses a 16-column grid system, unlike Bootstrap and Foundation which typically use a 12-column grid system.', 'Demonstrating the usage of UI buttons to create a visually appealing layout within the grid system.', 'Explanation of the structure of the statistic element including the class, value, and label.']}, {'end': 2948.402, 'start': 2632.241, 'title': 'Semantic ui grid layout', 'summary': 'Explains how to use semantic ui to create grid layouts with different column widths and alignments, including examples of floating columns and additional features like progress bars and ratings.', 'duration': 316.161, 'highlights': ['Explaining how to create grid layouts with different column widths and alignments Demonstrates how to use Semantic UI to create grid layouts with different column widths and alignments.', 'Providing examples of floating columns and additional features like progress bars and ratings Includes examples of floating columns and additional features like progress bars and ratings.', 'Introducing advanced features such as accordion, dimmer, drop down, modals, and pop up Introduces advanced features like accordion, dimmer, drop down, modals, and pop up.']}], 'duration': 471.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402476543.jpg', 'highlights': ['Semantic UI uses a 16-column grid system, unlike Bootstrap and Foundation which typically use a 12-column grid system.', 'Demonstrating the usage of UI buttons to create a visually appealing layout within the grid system.', 'Explanation of the structure of the statistic element including the class, value, and label.', 'Explaining how to create grid layouts with different column widths and alignments Demonstrates how to use Semantic UI to create grid layouts with different column widths and alignments.', 'Introducing advanced features such as accordion, dimmer, drop down, modals, and pop up Introduces advanced features like accordion, dimmer, drop down, modals, and pop up.', 'Providing examples of floating columns and additional features like progress bars and ratings Includes examples of floating columns and additional features like progress bars and ratings.']}, {'end': 3508.916, 'segs': [{'end': 3009.561, 'src': 'embed', 'start': 2977.179, 'weight': 0, 'content': [{'end': 2980.461, 'text': 'So basically what we want to do is make sure Node is installed, which it is for me.', 'start': 2977.179, 'duration': 3.282}, {'end': 2984.904, 'text': "If you don't have Node.js, just go to Node.js.org and download and install it.", 'start': 2980.601, 'duration': 4.303}, {'end': 2988.487, 'text': 'And then you need to install Gulp, okay, and you can do that with NPM.', 'start': 2985.585, 'duration': 2.902}, {'end': 2991.083, 'text': 'Now, Gulp is a task runner.', 'start': 2989.642, 'duration': 1.441}, {'end': 2997.81, 'text': "It's used for anything from minifying code to compiling SAS or less.", 'start': 2991.164, 'duration': 6.646}, {'end': 3001.173, 'text': "And there's a lot of uses for Gulp.", 'start': 2998.731, 'duration': 2.442}, {'end': 3003.496, 'text': 'So we need to install that.', 'start': 3001.894, 'duration': 1.602}, {'end': 3009.561, 'text': "And the little dash G here, that means that we're installing it globally so that we can run Gulp from anywhere.", 'start': 3004.276, 'duration': 5.285}], 'summary': 'Ensure node.js and gulp are installed for task running and file processing.', 'duration': 32.382, 'max_score': 2977.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402977179.jpg'}, {'end': 3049.228, 'src': 'embed', 'start': 3021.31, 'weight': 1, 'content': [{'end': 3032.138, 'text': "So we're going to cd into where the project is, which is in desktop, and then semantic-sandbox.", 'start': 3021.31, 'duration': 10.828}, {'end': 3036.642, 'text': "So from here, we're going to do an npm install-ggulp.", 'start': 3032.178, 'duration': 4.464}, {'end': 3044.765, 'text': "that'll install the gulp task runner globally so that you can run the gulp command from anywhere.", 'start': 3038.38, 'duration': 6.385}, {'end': 3049.228, 'text': 'now we want to go back over here and you can watch a little video on how to do this.', 'start': 3044.765, 'duration': 4.463}], 'summary': 'Installing gulp task runner globally using npm for project in semantic-sandbox.', 'duration': 27.918, 'max_score': 3021.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp403021310.jpg'}, {'end': 3117.769, 'src': 'embed', 'start': 3086.75, 'weight': 2, 'content': [{'end': 3089.312, 'text': 'Okay, so set up semantic UI.', 'start': 3086.75, 'duration': 2.562}, {'end': 3091.574, 'text': "We want the automatic, so let's choose that.", 'start': 3089.372, 'duration': 2.202}, {'end': 3099.281, 'text': "Enter And then let's see, is this your project folder? Yes, that's the project folder.", 'start': 3091.774, 'duration': 7.507}, {'end': 3104.945, 'text': "Where should we put semantic UI in the project? I'm going to just choose the default, which is a folder called semantic.", 'start': 3099.721, 'duration': 5.224}, {'end': 3113.192, 'text': "So now let's go back into Atom.", 'start': 3108.248, 'duration': 4.944}, {'end': 3117.769, 'text': 'and now we have our semantic folder.', 'start': 3115.908, 'duration': 1.861}], 'summary': 'Set up semantic ui in project folder using automatic installation.', 'duration': 31.019, 'max_score': 3086.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp403086750.jpg'}, {'end': 3210.551, 'src': 'embed', 'start': 3171.464, 'weight': 3, 'content': [{'end': 3185.905, 'text': "and Now, if we want to work with our local installation, what we need to do is go back to the index HTML and we're going to replace the CDN link.", 'start': 3171.464, 'duration': 14.441}, {'end': 3187.966, 'text': "Actually, you know what I'll do is just comment it out.", 'start': 3185.965, 'duration': 2.001}, {'end': 3191.548, 'text': 'All right.', 'start': 3187.986, 'duration': 3.562}, {'end': 3197.331, 'text': "And then we want to point to our local version, which is going to be, let's say, link.", 'start': 3191.708, 'duration': 5.623}, {'end': 3203.455, 'text': 'And then this is going to go to the semantic folder.', 'start': 3199.032, 'duration': 4.423}, {'end': 3210.551, 'text': 'and then to where is it?', 'start': 3207.088, 'duration': 3.463}], 'summary': 'Replace cdn link with local version in index html.', 'duration': 39.087, 'max_score': 3171.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp403171464.jpg'}, {'end': 3333.974, 'src': 'embed', 'start': 3307.24, 'weight': 4, 'content': [{'end': 3315.645, 'text': 'And this basically allows you to set the different themes for the entire site if you want or just certain elements.', 'start': 3307.24, 'duration': 8.405}, {'end': 3321.067, 'text': "Now, if you look over here in the themes folder, there's about 20 themes to choose from.", 'start': 3316.445, 'duration': 4.622}, {'end': 3326.73, 'text': 'Now, I was having some issues with getting the default for the site, for the entire site to work.', 'start': 3321.087, 'duration': 5.643}, {'end': 3333.974, 'text': "I'm not sure if it was just my machine or if it's a bug or what, but what I'm going to do here is just add a theme for the buttons.", 'start': 3326.87, 'duration': 7.104}], 'summary': 'The platform offers a choice of 20 themes for site customization, with the option to set themes for the entire site or specific elements.', 'duration': 26.734, 'max_score': 3307.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp403307240.jpg'}, {'end': 3379.684, 'src': 'embed', 'start': 3354.266, 'weight': 6, 'content': [{'end': 3359.371, 'text': 'What I want to do now is I want to change some of the variables.', 'start': 3354.266, 'duration': 5.105}, {'end': 3366.9, 'text': "So for the form, when we check this box it's just a white background with a black check.", 'start': 3359.471, 'duration': 7.429}, {'end': 3377.524, 'text': "if we go to the documentation here and go down to or up to theming, there's an example for the checkbox right here.", 'start': 3366.9, 'duration': 10.624}, {'end': 3379.684, 'text': 'so we can change component defaults.', 'start': 3377.524, 'duration': 2.16}], 'summary': 'Changing form variables for checkbox theming in the documentation.', 'duration': 25.418, 'max_score': 3354.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp403354266.jpg'}, {'end': 3508.916, 'src': 'heatmap', 'start': 3469.814, 'weight': 7, 'content': [{'end': 3472.217, 'text': 'And now you can see the default buttons are now pink.', 'start': 3469.814, 'duration': 2.403}, {'end': 3474.752, 'text': "So that's going to be it, guys.", 'start': 3473.271, 'duration': 1.481}, {'end': 3477.533, 'text': 'This video went a little longer than I wanted it to.', 'start': 3474.772, 'duration': 2.761}, {'end': 3483.254, 'text': "And I know that there's a lot of stuff here that I didn't cover because I'm still new to this.", 'start': 3478.253, 'duration': 5.001}, {'end': 3491.997, 'text': "But I just wanted to give you kind of an example of what you could do if you're compiling from source rather than just including the CDN.", 'start': 3483.655, 'duration': 8.342}, {'end': 3498.08, 'text': "All right, so it's up to you what you want to do, if you want to keep it simple or if you want to really dive in.", 'start': 3492.438, 'duration': 5.642}, {'end': 3502.001, 'text': "I suggest looking at all the documentation if you're going to do that.", 'start': 3498.68, 'duration': 3.321}, {'end': 3502.906, 'text': 'All right.', 'start': 3502.625, 'duration': 0.281}, {'end': 3504.148, 'text': 'So thanks for watching, guys.', 'start': 3502.966, 'duration': 1.182}, {'end': 3505.791, 'text': 'If you like this, please leave a like.', 'start': 3504.188, 'duration': 1.603}, {'end': 3507.614, 'text': "Subscribe if you're not subscribed.", 'start': 3505.831, 'duration': 1.783}, {'end': 3508.916, 'text': "And I'll see you next time.", 'start': 3507.854, 'duration': 1.062}], 'summary': 'Demo of customizing buttons from source, encourage to explore documentation. like and subscribe if you enjoyed.', 'duration': 39.102, 'max_score': 3469.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp403469814.jpg'}], 'start': 2948.482, 'title': 'Setting up gulp, semantic ui, and customizing website themes', 'summary': 'Covers installing node.js, gulp, and semantic ui using npm, along with setting up semantic ui and running gulp tasks. it also discusses customizing website themes and elements, providing examples and suggestions for further customization.', 'chapters': [{'end': 3307.2, 'start': 2948.482, 'title': 'Installing gulp and semantic ui with npm', 'summary': 'Covers the installation of node.js, gulp, and semantic ui using npm, including setting up semantic ui and running gulp tasks to compile css and js files for local use, and utilizing gulp watch for automatic recompilation of changes.', 'duration': 358.718, 'highlights': ['Node.js must be installed, and Gulp, a task runner, is used for various tasks such as minifying code and compiling SAS or less.', "Installing Gulp globally allows running Gulp commands from anywhere, and Semantic UI can be installed using NPM with the command 'npm install semantic-ui --save'.", "Setting up Semantic UI involves selecting the automatic setup, specifying the project folder, and creating a folder for Semantic UI, followed by running 'gulp build' to compile the source code into a 'dist' folder.", "Replacing the CDN links with local versions of Semantic UI's CSS and JS files, and utilizing 'gulp watch' to automatically recompile changes made to the source files and update the 'dist' folder for local use."]}, {'end': 3508.916, 'start': 3307.24, 'title': 'Customizing website themes and elements', 'summary': 'Discusses customizing website themes and elements, including changing button themes and variables to achieve different visual styles, with examples of updating themes and elements resulting in visual changes and a suggestion to explore documentation for further customization.', 'duration': 201.676, 'highlights': ['The chapter discusses customizing website themes and elements, including changing button themes and variables to achieve different visual styles, with examples of updating themes and elements resulting in visual changes and a suggestion to explore documentation for further customization.', 'The speaker demonstrates changing the default theme for the entire site and for specific elements, such as buttons, in a step-by-step manner, allowing viewers to observe the visual changes in real-time.', 'The speaker highlights the ability to modify variables for elements like checkboxes and buttons, showcasing the process of updating background and text colors, providing viewers with practical examples of customizing visual elements.', 'The speaker encourages viewers to explore the documentation for comprehensive customization, emphasizing the potential for further exploration beyond the demonstrated examples.']}], 'duration': 560.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a9mUH1EWp40/pics/a9mUH1EWp402948482.jpg', 'highlights': ['Node.js must be installed, and Gulp is used for tasks like minifying code and compiling SAS or less.', "Installing Gulp globally allows running commands from anywhere, and Semantic UI can be installed using 'npm install semantic-ui --save'.", "Setting up Semantic UI involves selecting automatic setup, specifying the project folder, and running 'gulp build' to compile source code into a 'dist' folder.", "Replacing CDN links with local versions of Semantic UI's CSS and JS files and using 'gulp watch' for automatic recompilation.", 'Discussing customizing website themes and elements, including changing button themes and variables for different visual styles.', 'Demonstrating changing the default theme for the entire site and specific elements, allowing real-time visual changes.', 'Modifying variables for elements like checkboxes and buttons, showcasing the process of updating colors.', 'Encouraging viewers to explore documentation for comprehensive customization beyond the demonstrated examples.']}], 'highlights': ['Semantic UI offers build tools, 20+ themes, and the flexibility to choose elements from different themes to create a custom version.', 'Semantic UI enables the creation of sleek, lightweight, and responsive websites and applications with a flat design.', 'Semantic UI is a more advanced front-end framework than Bootstrap, powered by LESS CSS Precompiler and jQuery.', "The chapter covers various Semantic UI components, including buttons, icons, labels, breadcrumbs, lists, forms, messages, tables, and pagination, providing an introduction to each component's usage.", "Semantic UI emphasizes using the actual element names for better semantic structure and clarity, such as using 'UI button' instead of 'BTN'.", 'Semantic UI introduces context classes for buttons, providing various color options such as blue for primary, black for secondary, green for positive, and red for negative.', 'Semantic UI provides size classes for buttons, offering a wide range of size options, from mini to massive, allowing for flexible button sizing.', 'Semantic UI includes disabled and loading classes for buttons, allowing the functionality to disable buttons and display a loading spinner within the button.', "Semantic UI's fluid class acts similarly to Bootstrap's btnBlock class, enabling the button to become a block-level element that spans the entire width of its container.", 'Semantic UI provides basic icon and labeled button features, enabling the addition of icons and labels to buttons, enhancing visual and functional elements of the buttons.', 'Semantic UI presents the basic class, which reverses the button color, making the border the color and the inside white, creating a clean and distinct appearance.', 'Creating grouping of related content A segment is used to create a grouping of related content, providing a border and adding padding.', 'The creation of content blocks involves using a class of UI card, with options to include headers, meta info, paragraphs, and buttons, allowing for versatile design variations.', "The 'item' element is suitable for blog posts, featuring a simple markup structure with classes for images, content, headers, meta tags, descriptions, and additional content, providing flexibility for blog layouts.", 'Adding classes like Raised, Stacked, Piled Classes like Raised, Stacked, and Piled are available to modify the appearance of segments, with Raised adding a shadow and Stacked displaying segments on top of each other.', 'Steps can be added to create a seamless shopping process, using a class of UI steps and step to add icons and content, making it user-friendly.', 'Semantic UI uses a 16-column grid system, unlike Bootstrap and Foundation which typically use a 12-column grid system.', 'Demonstrating the usage of UI buttons to create a visually appealing layout within the grid system.', 'Explanation of the structure of the statistic element including the class, value, and label.', 'Explaining how to create grid layouts with different column widths and alignments Demonstrates how to use Semantic UI to create grid layouts with different column widths and alignments.', 'Introducing advanced features such as accordion, dimmer, drop down, modals, and pop up Introduces advanced features like accordion, dimmer, drop down, modals, and pop up.', 'Node.js must be installed, and Gulp is used for tasks like minifying code and compiling SAS or less.', "Installing Gulp globally allows running commands from anywhere, and Semantic UI can be installed using 'npm install semantic-ui --save'.", "Setting up Semantic UI involves selecting automatic setup, specifying the project folder, and running 'gulp build' to compile source code into a 'dist' folder.", "Replacing CDN links with local versions of Semantic UI's CSS and JS files and using 'gulp watch' for automatic recompilation.", 'Discussing customizing website themes and elements, including changing button themes and variables for different visual styles.', 'Demonstrating changing the default theme for the entire site and specific elements, allowing real-time visual changes.', 'Modifying variables for elements like checkboxes and buttons, showcasing the process of updating colors.', 'Encouraging viewers to explore documentation for comprehensive customization beyond the demonstrated examples.']}