title
Twitter Bootstrap For Beginners And HTML Markup Website Conversion [Part 4]

description
Hope you enjoyed this tutorial! Oh and if you want to go in depth, check this guide out (more than 12k word ultimate guide). PSD to HTML Tutorial: The Only Guide You Need in 2015 - http://www.1stwebdesigner.com/psd-to-html/ --- HTML Markup Here, I will walk you through on how easy it is to use Twitter Bootstrap by just linking the appropriate file path to make it work. Then I will guide you step-by-step on how to mark-up properly the HTML base on our design, starting from the header down to the footer. View the original article with working demo and resource files here: http://www.1stwebdesigner.com/psd-to-html/ ----- If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site - 100% Responsive & Flat - http://rockingcode.com/ You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website. We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

detail
{'title': 'Twitter Bootstrap For Beginners And HTML Markup Website Conversion [Part 4]', 'heatmap': [{'end': 854.144, 'start': 753.064, 'weight': 1}], 'summary': 'Discusses the use of twitter bootstrap framework for converting a design into static html and css, covering bootstrap grid system, css layout, image conversion, and html markup with emphasis on accelerating front-end development, responsive design, and visually appealing layouts.', 'chapters': [{'end': 182.489, 'segs': [{'end': 182.489, 'src': 'embed', 'start': 65.69, 'weight': 0, 'content': [{'end': 74.329, 'text': 'Click on the first link and it will take you to this same page and right here.', 'start': 65.69, 'duration': 8.639}, {'end': 92.177, 'text': "so what basically we're doing here is to use this framework to make our coding, or the front-end development, more faster,", 'start': 74.329, 'duration': 17.848}, {'end': 98.94, 'text': 'so that we will not be coding it from from ground up.', 'start': 92.177, 'duration': 6.763}, {'end': 105.126, 'text': 'so what we need to learn from this one is just the basic one.', 'start': 98.94, 'duration': 6.186}, {'end': 113.356, 'text': 'so if you have a knowledge of css and html, you can follow through on this tutorial.', 'start': 105.126, 'duration': 8.23}, {'end': 116.96, 'text': 'so on, get started tab here.', 'start': 113.356, 'duration': 3.604}, {'end': 124.622, 'text': 'what we can see here is just a simple file structure, as usual on the CSS folder.', 'start': 116.96, 'duration': 7.662}, {'end': 133.724, 'text': 'we just need the bootstrap.css, and bootstrap.css is the minified version.', 'start': 124.622, 'duration': 9.102}, {'end': 138.345, 'text': 'since that we will not be using any JS.', 'start': 133.724, 'duration': 4.621}, {'end': 140.466, 'text': 'we will not be using this one.', 'start': 138.345, 'duration': 2.121}, {'end': 151.549, 'text': 'and for the image folder they provided a glyphicon icons which you can see on the base CSS icons.', 'start': 140.466, 'duration': 11.083}, {'end': 157.352, 'text': 'so we are free to use this icon sets right here.', 'start': 151.549, 'duration': 5.803}, {'end': 165.636, 'text': 'so take a look back right here.', 'start': 157.352, 'duration': 8.284}, {'end': 174.62, 'text': 'so the file, the HTML structure, is basically the same, but they provided some classes like here.', 'start': 165.636, 'duration': 8.984}, {'end': 175.701, 'text': 'here are the examples.', 'start': 174.62, 'duration': 1.081}, {'end': 182.489, 'text': 'click on this one.', 'start': 178.127, 'duration': 4.362}], 'summary': 'Using framework to speed up front-end coding, bootstrap css used, html structure same with added classes.', 'duration': 116.799, 'max_score': 65.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI65690.jpg'}], 'start': 19.423, 'title': 'Converting design using twitter bootstrap', 'summary': "Discusses the use of twitter bootstrap framework to convert a design into static html and css, emphasizing the framework's role in accelerating front-end development and providing a structured approach for implementation.", 'chapters': [{'end': 182.489, 'start': 19.423, 'title': 'Converting design using twitter bootstrap', 'summary': 'Discusses converting a design into a static html and css using twitter bootstrap framework to speed up front-end development, providing a file structure and classes for easier implementation.', 'duration': 163.066, 'highlights': ['The tutorial focuses on using Twitter Bootstrap framework to speed up front-end development, reducing the need to code from scratch.', 'The framework provides a simple file structure, including the bootstrap.css for styling and glyphicon icons for use in the design.', 'The tutorial emphasizes that basic knowledge of CSS and HTML is sufficient to follow along with the tutorial.']}], 'duration': 163.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI19423.jpg', 'highlights': ['The tutorial focuses on using Twitter Bootstrap framework to speed up front-end development, reducing the need to code from scratch.', 'The framework provides a simple file structure, including the bootstrap.css for styling and glyphicon icons for use in the design.', 'The tutorial emphasizes that basic knowledge of CSS and HTML is sufficient to follow along with the tutorial.']}, {'end': 724.292, 'segs': [{'end': 226.387, 'src': 'embed', 'start': 182.489, 'weight': 0, 'content': [{'end': 203.256, 'text': 'you can see right here if we inspect element like on this here on the banner part they have a class of hero unit and on the top part they have enough navbar for the navigation.', 'start': 182.489, 'duration': 20.767}, {'end': 208.533, 'text': 'But we will not get into it first.', 'start': 205.41, 'duration': 3.123}, {'end': 214.477, 'text': "Let's take a look at the important thing which is the grid system.", 'start': 208.753, 'duration': 5.724}, {'end': 226.387, 'text': 'So basically the grid system is the same as 960.js if you are familiar with that.', 'start': 216.379, 'duration': 10.008}], 'summary': 'The transcript discusses web elements and mentions the grid system, comparing it to 960.js.', 'duration': 43.898, 'max_score': 182.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI182489.jpg'}, {'end': 624.684, 'src': 'embed', 'start': 275.271, 'weight': 1, 'content': [{'end': 281.594, 'text': "For example, we'll save this for example, index.html.", 'start': 275.271, 'duration': 6.323}, {'end': 308.927, 'text': 'So for example, if we are going to create two columns, we just need to wrap it up in a container.', 'start': 296.178, 'duration': 12.749}, {'end': 323.906, 'text': 'and in order to make the column work, we need to wrap it in a row.', 'start': 316.864, 'duration': 7.042}, {'end': 338.611, 'text': 'so what basically container do is to set this as the main container, equal to 960 or whatever they set it.', 'start': 323.906, 'duration': 14.705}, {'end': 352.685, 'text': 'so for the row in here we can add the class of span.', 'start': 338.611, 'duration': 14.074}, {'end': 355.969, 'text': 'so 12 columns, so span six.', 'start': 352.685, 'duration': 3.284}, {'end': 366.213, 'text': 'so for two column, first column, this is the second column.', 'start': 355.969, 'duration': 10.244}, {'end': 376.48, 'text': "so it's clearly understood that this container has a row, first row, and inside the row there is two columns.", 'start': 366.213, 'duration': 10.267}, {'end': 383.505, 'text': "and if we're going to add another row, you can put it this way another.", 'start': 376.48, 'duration': 7.025}, {'end': 392.478, 'text': 'for example, we have three columns on the second row, so four.', 'start': 383.505, 'duration': 8.973}, {'end': 398.28, 'text': 'change this, the span class, to span four.', 'start': 392.478, 'duration': 5.802}, {'end': 412.724, 'text': "so if we're going to run this on a browser, this will have a two rows and each row will have two row on the first one and the third,", 'start': 398.28, 'duration': 14.444}, {'end': 414.584, 'text': 'and the second one has third column.', 'start': 412.724, 'duration': 1.86}, {'end': 425.181, 'text': 'So, but before we preview it, we need to download the Bootstrap.', 'start': 416.232, 'duration': 8.949}, {'end': 441.569, 'text': "So, since that we're not using jQuery, we will hide this one, and for the components we will just use the scaffolding, which is the grid.", 'start': 427.916, 'duration': 13.653}, {'end': 446.995, 'text': 'system layouts, body types and links, normalize and reset and base CSS.', 'start': 441.569, 'duration': 5.426}, {'end': 452.3, 'text': 'So we can uncheck this one.', 'start': 448.156, 'duration': 4.144}, {'end': 474.087, 'text': "we need the navbar, the hero unit, and then we don't need tables.", 'start': 458.618, 'duration': 15.469}, {'end': 476.788, 'text': "you don't need forms.", 'start': 474.087, 'duration': 2.701}, {'end': 480.07, 'text': "let's see our design.", 'start': 476.788, 'duration': 3.282}, {'end': 487.234, 'text': "we don't have any form, so labels and badges code.", 'start': 480.07, 'duration': 7.164}, {'end': 504.407, 'text': 'so for responsive part we can include it so that on the later video we can turn it into a responsive one.', 'start': 487.234, 'duration': 17.173}, {'end': 505.628, 'text': "who else we don't need it.", 'start': 504.407, 'duration': 1.221}, {'end': 520.155, 'text': 'close icons, component utilities, so this one in scaffolding check all base css, only headings, buttons, icons and components, only navbar, hero unit,', 'start': 505.628, 'duration': 14.527}, {'end': 525.416, 'text': 'miscellaneous utilities and components animation.', 'start': 521.874, 'duration': 3.542}, {'end': 538.281, 'text': 'for responsive part we can check it all and lastly, we can download it.', 'start': 525.416, 'duration': 12.865}, {'end': 549.907, 'text': 'so I will bring this into my desktop and create a new folder.', 'start': 538.281, 'duration': 11.626}, {'end': 550.727, 'text': 'call it tip.', 'start': 549.907, 'duration': 0.82}, {'end': 558.683, 'text': 'We can close this first and drag it over there.', 'start': 553.618, 'duration': 5.065}, {'end': 563.668, 'text': 'Index Extract the bootstrap file.', 'start': 559.684, 'duration': 3.984}, {'end': 575.159, 'text': 'And copy this one into our dip folder.', 'start': 571.375, 'duration': 3.784}, {'end': 598.402, 'text': 'and create another file and name it style.css so that we can override what is the styling on bootstrap.css on the CSS folder.', 'start': 580.129, 'duration': 18.273}, {'end': 605.767, 'text': "So that's basically it for the files and then we will bring it over.", 'start': 599.843, 'duration': 5.924}, {'end': 613.881, 'text': 'right here.', 'start': 612.981, 'duration': 0.9}, {'end': 624.684, 'text': 'Drag it on the projects folder, hit OK and open up index and style.css.', 'start': 616.142, 'duration': 8.542}], 'summary': 'Creating a webpage layout using bootstrap with 12 columns and responsive design.', 'duration': 349.413, 'max_score': 275.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI275271.jpg'}, {'end': 724.292, 'src': 'embed', 'start': 667.513, 'weight': 8, 'content': [{'end': 684.528, 'text': "so let's preview it into a browser, as you can see right here that they have first column, second and the second row, there is three columns.", 'start': 667.513, 'duration': 17.015}, {'end': 712.545, 'text': 'so in order to see it, so for each row, that row we will name it, or i mean add a background of red, And for the span six, the span six,', 'start': 684.528, 'duration': 28.017}, {'end': 724.292, 'text': 'background black, or span four, background yellow.', 'start': 712.545, 'duration': 11.747}], 'summary': 'Previewed a table with 3 columns in a browser, applying color backgrounds based on column span.', 'duration': 56.779, 'max_score': 667.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI667513.jpg'}], 'start': 182.489, 'title': 'Bootstrap grid system and css layout', 'summary': 'Covers the bootstrap grid system with a 12-column layout and class spans, emphasizing containers and rows. it also discusses css layout and component selection, focusing on responsive design and bootstrap css override for specific configurations and styling.', 'chapters': [{'end': 441.569, 'start': 182.489, 'title': 'Understanding bootstrap grid system', 'summary': 'Explains the bootstrap grid system, which uses a 12-column layout and class spans to create responsive web layouts, while emphasizing the use of containers and rows for structuring content.', 'duration': 259.08, 'highlights': ['The grid system is based on a 12-column layout, with the ability to specify column spans from 1 to 12, allowing for flexible and responsive web design.', 'The use of containers and rows is essential for structuring content within the grid system, with containers defining the main layout width and rows containing the specified columns for alignment and organization.', 'The understanding of class spans and their application in creating columns within a row is crucial for designing multi-column layouts, as demonstrated by the example of creating two rows with specific column spans in the provided code snippet.', 'The importance of downloading Bootstrap and utilizing the grid component for creating responsive web layouts is highlighted, emphasizing the significance of scaffolding and grid for structuring the web content.']}, {'end': 558.683, 'start': 441.569, 'title': 'Css layout and component selection', 'summary': 'Covers the selection of system layouts, body types, and links for css, while emphasizing the inclusion of navbar and hero unit, and the exclusion of tables and forms, with a focus on making the design responsive for later implementation.', 'duration': 117.114, 'highlights': ['The chapter emphasizes the selection of system layouts, body types, and links for CSS, and the inclusion of navbar and hero unit, and the exclusion of tables and forms.', 'It highlights the focus on making the design responsive for later implementation.', 'The chapter also mentions the inclusion of labels and badges code and the download of selected components.']}, {'end': 724.292, 'start': 559.684, 'title': 'Bootstrap css override', 'summary': 'Explains how to extract and override the bootstrap file, create a custom style.css file, and link it to the index file, resulting in a web layout with specific column and row configurations, and background color assignments for each column.', 'duration': 164.608, 'highlights': ['The process involves extracting the bootstrap file and creating a style.css file to override the default styling, resulting in a custom web layout. (Relevance: 5)', 'The layout consists of a container with two rows, where the first row contains two columns, and the second row contains three columns. (Relevance: 4)', 'Specific background color assignments are made for the columns, with the first row having a red background, and the columns within the second row having black or yellow backgrounds based on their span values. (Relevance: 3)']}], 'duration': 541.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI182489.jpg', 'highlights': ['The grid system is based on a 12-column layout, allowing for flexible and responsive web design.', 'The use of containers and rows is essential for structuring content within the grid system.', 'The understanding of class spans and their application in creating columns within a row is crucial for designing multi-column layouts.', 'The importance of downloading Bootstrap and utilizing the grid component for creating responsive web layouts is highlighted.', 'The chapter emphasizes the selection of system layouts, body types, and links for CSS, and the inclusion of navbar and hero unit.', 'The chapter also mentions the inclusion of labels and badges code and the download of selected components.', 'The process involves extracting the bootstrap file and creating a style.css file to override the default styling, resulting in a custom web layout.', 'The layout consists of a container with two rows, where the first row contains two columns, and the second row contains three columns.', 'Specific background color assignments are made for the columns, with the first row having a red background, and the columns within the second row having black or yellow backgrounds based on their span values.']}, {'end': 1607.145, 'segs': [{'end': 854.144, 'src': 'heatmap', 'start': 753.064, 'weight': 1, 'content': [{'end': 761.513, 'text': "so let's start by importing the image that we will be using.", 'start': 753.064, 'duration': 8.449}, {'end': 763.395, 'text': 'first. one is the logo.', 'start': 761.513, 'duration': 1.882}, {'end': 775.787, 'text': 'so select the logo by hitting control and click to select the layer, and what I can do is to control alt E on the keyboard.', 'start': 763.395, 'duration': 12.392}, {'end': 782.716, 'text': 'So from the logo, create a new layer.', 'start': 779.855, 'duration': 2.861}, {'end': 790.019, 'text': 'Select both layer and the logo and CTRL ALT E to merge it.', 'start': 784.117, 'duration': 5.902}, {'end': 793.961, 'text': 'Then select all.', 'start': 792.84, 'duration': 1.121}, {'end': 796.182, 'text': "As you can see I'm selecting all.", 'start': 794.581, 'duration': 1.601}, {'end': 803.993, 'text': 'and then Ctrl X to cut it.', 'start': 799.952, 'duration': 4.041}, {'end': 806.374, 'text': 'hit File New.', 'start': 803.993, 'duration': 2.381}, {'end': 813.797, 'text': 'Photoshop will automatically recognize what are the dimensions, so hit OK and Ctrl V to paste it.', 'start': 806.374, 'duration': 7.423}, {'end': 818.839, 'text': 'make sure you hide the background and save this as.', 'start': 813.797, 'duration': 5.042}, {'end': 846.522, 'text': 'PNG. hit save, place it into the image folder and name this brand.png.', 'start': 818.839, 'duration': 27.683}, {'end': 854.144, 'text': 'close it now and the second one is so here.', 'start': 846.522, 'duration': 7.622}], 'summary': 'Import and merge logo in photoshop. save as brand.png.', 'duration': 101.08, 'max_score': 753.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI753064.jpg'}, {'end': 818.839, 'src': 'embed', 'start': 779.855, 'weight': 1, 'content': [{'end': 782.716, 'text': 'So from the logo, create a new layer.', 'start': 779.855, 'duration': 2.861}, {'end': 790.019, 'text': 'Select both layer and the logo and CTRL ALT E to merge it.', 'start': 784.117, 'duration': 5.902}, {'end': 793.961, 'text': 'Then select all.', 'start': 792.84, 'duration': 1.121}, {'end': 796.182, 'text': "As you can see I'm selecting all.", 'start': 794.581, 'duration': 1.601}, {'end': 803.993, 'text': 'and then Ctrl X to cut it.', 'start': 799.952, 'duration': 4.041}, {'end': 806.374, 'text': 'hit File New.', 'start': 803.993, 'duration': 2.381}, {'end': 813.797, 'text': 'Photoshop will automatically recognize what are the dimensions, so hit OK and Ctrl V to paste it.', 'start': 806.374, 'duration': 7.423}, {'end': 818.839, 'text': 'make sure you hide the background and save this as.', 'start': 813.797, 'duration': 5.042}], 'summary': 'In photoshop, merge layers, cut, paste, and save with specific commands.', 'duration': 38.984, 'max_score': 779.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI779855.jpg'}, {'end': 1245.971, 'src': 'embed', 'start': 1185.986, 'weight': 0, 'content': [{'end': 1186.546, 'text': 'read more.', 'start': 1185.986, 'duration': 0.56}, {'end': 1189.109, 'text': 'we can do this on css.', 'start': 1186.546, 'duration': 2.563}, {'end': 1194.914, 'text': 'so this sample image right here we can do it.', 'start': 1189.109, 'duration': 5.805}, {'end': 1207.413, 'text': 'so go ahead and cut this one.', 'start': 1204.952, 'duration': 2.461}, {'end': 1213.612, 'text': 'So select the layer.', 'start': 1209.631, 'duration': 3.981}, {'end': 1216.033, 'text': 'control, click to make a selection.', 'start': 1213.612, 'duration': 2.421}, {'end': 1218.353, 'text': 'control, shift C again to copy it.', 'start': 1216.033, 'duration': 2.32}, {'end': 1221.934, 'text': 'New layer, paste it right there.', 'start': 1219.694, 'duration': 2.24}, {'end': 1228.736, 'text': 'Save We will create a new folder and name this thumbnail.', 'start': 1223.515, 'duration': 5.221}, {'end': 1245.971, 'text': 'Inside the thumbnail, we will create, or we will name this as So thumb one.', 'start': 1230.136, 'duration': 15.835}], 'summary': "Creating a thumbnail with css, copying and pasting layers, and naming the folder and file as 'thumbnail' and 'thumb one' respectively.", 'duration': 59.985, 'max_score': 1185.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1185986.jpg'}, {'end': 1442.843, 'src': 'embed', 'start': 1331.96, 'weight': 4, 'content': [{'end': 1336.643, 'text': 'Change it to 50%.', 'start': 1331.96, 'duration': 4.683}, {'end': 1341.186, 'text': 'Partner 2.', 'start': 1336.643, 'duration': 4.543}, {'end': 1343.747, 'text': 'Do the same for this.', 'start': 1341.186, 'duration': 2.561}, {'end': 1359.477, 'text': 'Partner 3.', 'start': 1352.333, 'duration': 7.144}, {'end': 1360.418, 'text': 'And last one.', 'start': 1359.477, 'duration': 0.941}, {'end': 1376.644, 'text': 'partner four.', 'start': 1368.217, 'duration': 8.427}, {'end': 1419.584, 'text': 'so this one as well just small thumb one, then small thumb 2 and for this one, Facebook and Twitter.', 'start': 1376.644, 'duration': 42.94}, {'end': 1428.829, 'text': "so let's just make this 16 by 16 and place it on the center.", 'start': 1419.584, 'duration': 9.245}, {'end': 1442.843, 'text': "So, to show you what's happening there is basically, we centered it out and has an equal width and height of 16,", 'start': 1431.858, 'duration': 10.985}], 'summary': 'Adjust images to 16x16, center, and share on facebook and twitter.', 'duration': 110.883, 'max_score': 1331.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1331960.jpg'}, {'end': 1607.145, 'src': 'embed', 'start': 1516.642, 'weight': 3, 'content': [{'end': 1521.183, 'text': 'wait, control C, I mean control.', 'start': 1516.642, 'duration': 4.541}, {'end': 1527.261, 'text': 'merge this first and then control.', 'start': 1522.958, 'duration': 4.303}, {'end': 1537.668, 'text': 'cut it, paste it on this one.', 'start': 1527.261, 'duration': 10.407}, {'end': 1544.153, 'text': "let's see we did it wrong.", 'start': 1537.668, 'duration': 6.485}, {'end': 1545.594, 'text': "what's happening there?", 'start': 1544.153, 'duration': 1.441}, {'end': 1551.618, 'text': 'we can do is to control.', 'start': 1545.594, 'duration': 6.024}, {'end': 1569.585, 'text': 'transform, Merged it again, file new and save this as JPEG.', 'start': 1551.618, 'duration': 17.967}, {'end': 1574.128, 'text': 'The quality is 80 will be good.', 'start': 1572.287, 'duration': 1.841}, {'end': 1584.434, 'text': 'Save this and we will name this one as HeroUnit.jpg.', 'start': 1574.848, 'duration': 9.586}, {'end': 1607.145, 'text': "So I think we don't miss anything and we actually export the images.", 'start': 1595.742, 'duration': 11.403}], 'summary': 'Instructions given for merging, cutting, pasting, and saving images as jpeg at 80% quality, resulting in export of images.', 'duration': 90.503, 'max_score': 1516.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1516642.jpg'}], 'start': 728.135, 'title': 'Image conversion, css styling, sprite images, and thumbnails', 'summary': 'Covers image conversion and saving in photoshop, css usage for styling, including steps for image merging, trimming, and saving in png format, as well as creating sprite images and thumbnails using various tools and techniques, resulting in the generation of multiple images and sprites for web development.', 'chapters': [{'end': 958.44, 'start': 728.135, 'title': 'Image conversion and css styling', 'summary': 'Outlines the process of converting and saving images in photoshop and the usage of css for styling, including steps for image merging, trimming, and saving in png format.', 'duration': 230.305, 'highlights': ['The process of converting and saving images in Photoshop involves selecting the logo, merging layers, cutting, and saving the image as a PNG format, with the file named as brand.png.', 'Instructions for using CSS for styling, including cutting the browser, merging layers, hiding the background, trimming the image, and saving it.']}, {'end': 1607.145, 'start': 958.44, 'title': 'Creating sprite images and thumbnails', 'summary': 'Demonstrates creating sprite images and thumbnails by using various tools and techniques, including resizing, copying, and merging, resulting in the generation of multiple images and sprites for web development.', 'duration': 648.705, 'highlights': ["Using the elliptical marquee tool, holding shift and dragging to create a 100x100 selection, then copying it using the keyboard shortcut 'control shift c'.", "Resizing the canvas size by adding 100 pixels, pasting the selection, and using the move tool to position it, followed by saving the image as 'process sprite dot png'.", "Creating multiple thumbnail images by copying and pasting the selection, then organizing them into a folder and adjusting the opacity for each image, resulting in the creation of 'thumb' and 'partner' images.", "Aligning and centering the Facebook and Twitter icons, resizing them to 16x16, merging them, and saving the image as 'social sprite'.", "Merging the background, cutting it, and saving it as 'HeroUnit.jpg' with a quality of 80, completing the image export process."]}], 'duration': 879.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI728135.jpg', 'highlights': ['Instructions for using CSS for styling, including cutting the browser, merging layers, hiding the background, trimming the image, and saving it.', 'The process of converting and saving images in Photoshop involves selecting the logo, merging layers, cutting, and saving the image as a PNG format, with the file named as brand.png.', "Creating multiple thumbnail images by copying and pasting the selection, then organizing them into a folder and adjusting the opacity for each image, resulting in the creation of 'thumb' and 'partner' images.", "Merging the background, cutting it, and saving it as 'HeroUnit.jpg' with a quality of 80, completing the image export process.", "Aligning and centering the Facebook and Twitter icons, resizing them to 16x16, merging them, and saving the image as 'social sprite'."]}, {'end': 2609.148, 'segs': [{'end': 1746.454, 'src': 'embed', 'start': 1716.989, 'weight': 0, 'content': [{'end': 1725.892, 'text': 'so what we are focusing is to mark up the HTML properly and style the elements.', 'start': 1716.989, 'duration': 8.903}, {'end': 1733.135, 'text': 'so if you have the basic knowledge of CSS and HTML, we can do this easily.', 'start': 1725.892, 'duration': 7.243}, {'end': 1735.295, 'text': "so let's.", 'start': 1733.135, 'duration': 2.16}, {'end': 1746.454, 'text': 'and for this example, as you can see in this right here they are using a class of hero unit.', 'start': 1735.295, 'duration': 11.159}], 'summary': 'Focusing on marking up html and styling elements using css, with a class of hero unit.', 'duration': 29.465, 'max_score': 1716.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1716989.jpg'}, {'end': 1852.757, 'src': 'embed', 'start': 1798.968, 'weight': 2, 'content': [{'end': 1800.749, 'text': 'So div class container.', 'start': 1798.968, 'duration': 1.781}, {'end': 1811.06, 'text': 'and this is a hero unit.', 'start': 1804.514, 'duration': 6.546}, {'end': 1815.264, 'text': "let's see what we have here.", 'start': 1811.06, 'duration': 4.204}, {'end': 1819.468, 'text': 'so, as you can see, they have this styling of the hero unit.', 'start': 1815.264, 'duration': 4.204}, {'end': 1829.757, 'text': 'if we will make this h1, as you can see right there that this is the hero unit part.', 'start': 1819.468, 'duration': 10.289}, {'end': 1834.694, 'text': "so we're good.", 'start': 1832.373, 'duration': 2.321}, {'end': 1852.757, 'text': 'the next is to add the navbar based on the bootstrap markup, so you can actually go to their documentation by going to the base css,', 'start': 1834.694, 'duration': 18.063}], 'summary': 'Discussion on styling hero unit and adding navbar based on bootstrap markup.', 'duration': 53.789, 'max_score': 1798.968, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1798968.jpg'}, {'end': 2017.096, 'src': 'embed', 'start': 1945.472, 'weight': 1, 'content': [{'end': 1950.795, 'text': 'So here are the list and the first link will be home.', 'start': 1945.472, 'duration': 5.323}, {'end': 1954.018, 'text': 'You can actually copy this.', 'start': 1952.878, 'duration': 1.14}, {'end': 1957.999, 'text': 'Home about as services blog.', 'start': 1956.239, 'duration': 1.76}, {'end': 1977.125, 'text': 'Home about us services blog and contact us.', 'start': 1959.2, 'duration': 17.925}, {'end': 1990.548, 'text': 'as an active state, we just need to add a class on the list item active.', 'start': 1982.345, 'duration': 8.203}, {'end': 2006.453, 'text': "That's it for the navbar and for the content itself.", 'start': 1992.769, 'duration': 13.684}, {'end': 2013.792, 'text': 'we will create another div outside navbar right here.', 'start': 2006.453, 'duration': 7.339}, {'end': 2017.096, 'text': "so we're going to place it under it.", 'start': 2013.792, 'duration': 3.304}], 'summary': 'Creating a navbar with links to home, about, services, and blog.', 'duration': 71.624, 'max_score': 1945.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1945472.jpg'}, {'end': 2390.753, 'src': 'embed', 'start': 2340.783, 'weight': 3, 'content': [{'end': 2349.39, 'text': 'And for the image itself, I think we will be using that as a background on the CSS part.', 'start': 2340.783, 'duration': 8.607}, {'end': 2353.454, 'text': 'And also for the background of this one.', 'start': 2351.272, 'duration': 2.182}, {'end': 2362.021, 'text': 'But the markup of this one is already set, I think.', 'start': 2354.154, 'duration': 7.867}, {'end': 2365.244, 'text': "Let's move on to the next one.", 'start': 2363.042, 'duration': 2.202}, {'end': 2374.93, 'text': 'Or maybe we can actually add the image.', 'start': 2371.209, 'duration': 3.721}, {'end': 2385.792, 'text': 'So on this hero unit right here, we can place the image.', 'start': 2377.63, 'duration': 8.162}, {'end': 2390.753, 'text': 'So what is the name of the image? We call it browser, I think.', 'start': 2386.292, 'duration': 4.461}], 'summary': 'Discussion on using an image as a background in css and adding it to the hero unit.', 'duration': 49.97, 'max_score': 2340.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI2340783.jpg'}], 'start': 1609.185, 'title': 'Html markup and styling with bootstrap', 'summary': 'Covers marking up html, styling elements, creating a navbar and hero unit, and adding images, emphasizing the use of classes like hero unit and navbar, and demonstrating the creation of a navbar, hero unit with bootstrap, and image placement.', 'chapters': [{'end': 1887.494, 'start': 1609.185, 'title': 'Marking up html and styling elements', 'summary': 'Focuses on marking up the html properly and styling the elements, emphasizing the use of classes like hero unit and navbar for layout and content positioning.', 'duration': 278.309, 'highlights': ['The chapter emphasizes marking up the HTML properly and styling the elements using classes like hero unit and navbar for layout and content positioning.', 'Emphasizes the use of classes like hero unit and navbar for layout and content positioning.', 'Testing the styles by marking up the HTML and using classes like hero unit and navbar for layout and content positioning.']}, {'end': 2017.096, 'start': 1887.494, 'title': 'Creating a navbar with html and css', 'summary': 'Explains how to create a navbar in html using a div with a class of navbar, a div with a class of navbar inner, and an unordered list with list items for home, about, services, blog, and contact us, while also mentioning the addition of an active state class.', 'duration': 129.602, 'highlights': ['Creating a div with a class of navbar and a div with a class of navbar inner, and an unordered list with list items for home, about, services, blog, and contact us, while also mentioning the addition of an active state class.', 'Using HTML5 to create a nav element and placing list items inside it.', 'Adding an active state class to the list item.']}, {'end': 2335.275, 'start': 2017.096, 'title': 'Creating hero unit with bootstrap', 'summary': 'Demonstrates creating a hero unit with bootstrap, including adding headings, buttons, centering text, and positioning elements using bootstrap classes.', 'duration': 318.179, 'highlights': ['Demonstrates creating a hero unit with Bootstrap The chapter covers creating a hero unit using Bootstrap, showcasing the process of adding headings, buttons, centering text, and positioning elements.', "Adding headings, buttons, and learn more link The process includes adding an h1, h4 or h5, and a button with a 'get started' class, as well as creating an anchor tag with a 'button' class for the 'learn more' link.", "Centering text using Bootstrap classes Bootstrap's special class 'text center' is used to center the text within the hero unit inner div, providing a visual demonstration of the centered content.", "Positioning elements using Bootstrap classes The chapter demonstrates the use of Bootstrap classes like 'pull right' and 'brand' for positioning the navigation to the right and adding a logo to the left."]}, {'end': 2609.148, 'start': 2340.783, 'title': 'Website design markup and image placement', 'summary': "Discusses the process of adding an image as a background in css, creating div elements and columns, and naming the image 'browser.png'. it also outlines the steps for centering the container and creating rows and columns.", 'duration': 268.365, 'highlights': ["The chapter discusses the process of adding an image as a background in CSS, creating div elements and columns, and naming the image 'browser.png'.", 'It outlines the steps for centering the container, creating rows, and dividing them into columns with specific class names.', "The chapter highlights the specific steps for naming the image as 'browser.png' and placing it as a background in CSS."]}], 'duration': 999.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI1609185.jpg', 'highlights': ['The chapter emphasizes marking up the HTML properly and styling the elements using classes like hero unit and navbar for layout and content positioning.', 'Creating a div with a class of navbar and a div with a class of navbar inner, and an unordered list with list items for home, about, services, blog, and contact us, while also mentioning the addition of an active state class.', 'Demonstrates creating a hero unit with Bootstrap The chapter covers creating a hero unit using Bootstrap, showcasing the process of adding headings, buttons, centering text, and positioning elements.', "The chapter discusses the process of adding an image as a background in CSS, creating div elements and columns, and naming the image 'browser.png'."]}, {'end': 3422.161, 'segs': [{'end': 2715.538, 'src': 'embed', 'start': 2609.148, 'weight': 2, 'content': [{'end': 2618.81, 'text': 'yup, what we can actually do is make the button large on the hearer unit part.', 'start': 2609.148, 'duration': 9.662}, {'end': 2621.671, 'text': 'so get started button large.', 'start': 2618.81, 'duration': 2.861}, {'end': 2632.516, 'text': 'And also we can change the button to primary so that,', 'start': 2624.033, 'duration': 8.483}, {'end': 2640.759, 'text': 'since it is unique right here that it has a color red and for the normal buttons will have this color.', 'start': 2632.516, 'duration': 8.243}, {'end': 2649.803, 'text': 'so if you look at here buttons, they have this button button primary.', 'start': 2643.801, 'duration': 6.002}, {'end': 2654.564, 'text': 'the default one is button only.', 'start': 2649.803, 'duration': 4.761}, {'end': 2656.305, 'text': "so let's just use it.", 'start': 2654.564, 'duration': 1.741}, {'end': 2658.906, 'text': "let's see.", 'start': 2656.305, 'duration': 2.601}, {'end': 2670.149, 'text': 'so we have it right button primary, and for this is normal one only have white one.', 'start': 2658.906, 'duration': 11.243}, {'end': 2682.816, 'text': 'so continue can actually do is add a class of text center to center it out,', 'start': 2670.149, 'duration': 12.667}, {'end': 2701.731, 'text': "and for the icon itself we will just wrap it in a span with a class of let's see, let's name this process icon.", 'start': 2682.816, 'duration': 18.915}, {'end': 2715.538, 'text': 'So the process icon will contain the sprite images.', 'start': 2708.872, 'duration': 6.666}], 'summary': 'Make the button large and primary with red color, and center the text and icon.', 'duration': 106.39, 'max_score': 2609.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI2609148.jpg'}, {'end': 3017.829, 'src': 'embed', 'start': 2785.284, 'weight': 0, 'content': [{'end': 2794.909, 'text': 'name this as well launch, develop, design plan, design, preview it.', 'start': 2785.284, 'duration': 9.625}, {'end': 2800.397, 'text': "So for now, let's leave it blank on the CSS part.", 'start': 2796.934, 'duration': 3.463}, {'end': 2801.738, 'text': 'you know, adding that icon.', 'start': 2800.397, 'duration': 1.341}, {'end': 2808.884, 'text': "So yeah, that's basically it for this part.", 'start': 2802.939, 'duration': 5.945}, {'end': 2812.927, 'text': "So let's move to the portfolio part.", 'start': 2810.445, 'duration': 2.482}, {'end': 2823.937, 'text': 'So the same structure again, just need to create a div with an ID of portfolio.', 'start': 2815.45, 'duration': 8.487}, {'end': 2831.301, 'text': 'div with a class of container.', 'start': 2827.159, 'duration': 4.142}, {'end': 2850.729, 'text': 'div with a class of row and portfolio and inside this row we have the same structure.', 'start': 2831.301, 'duration': 19.428}, {'end': 2853.07, 'text': "so let's go ahead.", 'start': 2850.729, 'duration': 2.341}, {'end': 2865.447, 'text': 'so div with a class of span three.', 'start': 2853.07, 'duration': 12.377}, {'end': 2900.886, 'text': 'for the first span, what we can do is so h3 to have a.', 'start': 2865.447, 'duration': 35.439}, {'end': 2910.072, 'text': "I'm thinking they have the same plan and portfolio heading size, what we can actually check.", 'start': 2900.886, 'duration': 9.186}, {'end': 2925.249, 'text': "so if it's h2 31 and h3 will be 24, I think 24 to 23, and for h4 will be 18 or 17.", 'start': 2916.346, 'duration': 8.903}, {'end': 2960.378, 'text': "so let's make everything h4, H4, H4, H4, H4, H4, H4..", 'start': 2925.249, 'duration': 35.129}, {'end': 2973.406, 'text': 'So portfolio text, copy the text and a link.', 'start': 2960.478, 'duration': 12.928}, {'end': 2987.668, 'text': "so basically, i mean what the browser i'm using is in type.", 'start': 2980.743, 'duration': 6.925}, {'end': 2990.39, 'text': 'so this is my browser.', 'start': 2987.668, 'duration': 2.722}, {'end': 3004.96, 'text': "if you can see the old tutorials of me, i've introduced this this browser, which is in type, which is a like, it's free on windows.", 'start': 2990.39, 'duration': 14.57}, {'end': 3008.082, 'text': 'so target, you can delete that.', 'start': 3004.96, 'duration': 3.122}, {'end': 3017.829, 'text': 'our portfolio for the this one.', 'start': 3009.827, 'duration': 8.002}], 'summary': 'Developing and designing a website with specific html and css structure and font sizes.', 'duration': 232.545, 'max_score': 2785.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI2785284.jpg'}, {'end': 3277.092, 'src': 'embed', 'start': 3200.408, 'weight': 5, 'content': [{'end': 3224.99, 'text': 'so div, id, partners do the same div class container, div, class of row, and so again it has a four columns.', 'start': 3200.408, 'duration': 24.582}, {'end': 3231.301, 'text': 'or what we can actually do is to do this.', 'start': 3226.96, 'duration': 4.341}, {'end': 3243.585, 'text': 'we can do it this way image thumbnail, thumbnail, and we name it as partner1.png.', 'start': 3231.301, 'duration': 12.284}, {'end': 3254.208, 'text': 'you can copy this one, beat it to four times.', 'start': 3243.585, 'duration': 10.623}, {'end': 3277.092, 'text': 'so in each row we will have a div class of span 12 and make this text center, something like that.', 'start': 3256.94, 'duration': 20.152}], 'summary': 'Creating a layout with four columns using div classes and centering text.', 'duration': 76.684, 'max_score': 3200.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI3200408.jpg'}], 'start': 2609.148, 'title': 'Web portfolio design', 'summary': 'Covers designing web buttons and portfolio structure with specific styles. it also demonstrates building a web portfolio using html and css, highlighting the use of divs, images, and classes for a visually appealing layout.', 'chapters': [{'end': 2925.249, 'start': 2609.148, 'title': 'Web design button and portfolio structure', 'summary': 'Discusses making the button large and changing its color, adding a class of text center, and creating a portfolio structure with specific heading sizes.', 'duration': 316.101, 'highlights': ['The chapter discusses making the button large and changing its color, adding a class of text center, and creating a portfolio structure with specific heading sizes.', 'The button can be changed to primary to make it unique with a color red, while normal buttons will have a different color.', 'Adding a class of text center to center the button.', 'Creating a portfolio structure with specific heading sizes: h2 (31), h3 (24), and h4 (18).']}, {'end': 3422.161, 'start': 2925.249, 'title': 'Building web portfolio with html and css', 'summary': 'Focuses on building a web portfolio using html and css, demonstrating the use of divs, images, and classes to create a structured and visually appealing layout for the portfolio, while highlighting the ease of use and helpful classes in the framework.', 'duration': 496.912, 'highlights': ['The chapter demonstrates the process of building a web portfolio using HTML and CSS, emphasizing the use of divs, images, and classes to create a structured layout for the portfolio, showcasing the ease of use and helpful classes in the framework.', "The tutorial introduces the 'in type' browser for Windows and showcases its features, highlighting its free availability and suitability for web development.", 'It includes instructions on creating a partners section with four columns, utilizing image thumbnails and div classes for alignment, providing practical insights into creating visually appealing content.', 'The transcript emphasizes the simplicity and ease of use of the framework, highlighting its helpful classes and the clear vision it provides for coding, promoting efficient and faster development.']}], 'duration': 813.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI2609148.jpg', 'highlights': ['The chapter demonstrates building a web portfolio using HTML and CSS, emphasizing the use of divs, images, and classes for a structured layout.', 'Creating a portfolio structure with specific heading sizes: h2 (31), h3 (24), and h4 (18).', 'The button can be changed to primary to make it unique with a color red, while normal buttons will have a different color.', 'Adding a class of text center to center the button.', "The tutorial introduces the 'in type' browser for Windows, highlighting its free availability and suitability for web development.", 'Instructions on creating a partners section with four columns, utilizing image thumbnails and div classes for alignment.']}, {'end': 4457.721, 'segs': [{'end': 3497.35, 'src': 'embed', 'start': 3423.782, 'weight': 0, 'content': [{'end': 3442.654, 'text': 'So do it the same as well, div with the class of span3 and inside this span, we will create class of testimonials blog latest tweets.', 'start': 3423.782, 'duration': 18.872}, {'end': 3455.898, 'text': 'So testimonials blog And inside the testimonials, there will be an image.', 'start': 3443.735, 'duration': 12.163}, {'end': 3462.021, 'text': 'Image, thumbnail, if you can remember.', 'start': 3457.619, 'duration': 4.402}, {'end': 3469.025, 'text': 'Thumbnail, we name it smallthumb.', 'start': 3462.041, 'duration': 6.984}, {'end': 3480.551, 'text': 'Smallthumb.png Smallthumb1.', 'start': 3473.067, 'duration': 7.484}, {'end': 3497.35, 'text': 'dot png and there will be a block code and a paragraph.', 'start': 3481.567, 'duration': 15.783}], 'summary': 'Create a div with class span3, including testimonials, image, smallthumb.png, and a block code and paragraph inside.', 'duration': 73.568, 'max_score': 3423.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI3423782.jpg'}, {'end': 3729.319, 'src': 'embed', 'start': 3643.476, 'weight': 1, 'content': [{'end': 3673.461, 'text': 'do the same tweet tweets and we can create, and there will be the class of post list.', 'start': 3643.476, 'duration': 29.985}, {'end': 3691.484, 'text': "or let's see blog list, or you can actually create an article for that so that it makes sense article, Or let's just do it div.", 'start': 3673.461, 'duration': 18.023}, {'end': 3699.886, 'text': 'Then inside it, there will be a list.', 'start': 3696.946, 'duration': 2.94}, {'end': 3713.889, 'text': 'Or we can just change this to ul and there will be a list of posts.', 'start': 3705.867, 'duration': 8.022}, {'end': 3715.95, 'text': 'Makes sense.', 'start': 3715.329, 'duration': 0.621}, {'end': 3723.814, 'text': 'just a title.', 'start': 3719.691, 'duration': 4.123}, {'end': 3729.319, 'text': "let's make this h4 so it's lower than h4.", 'start': 3723.814, 'duration': 5.505}], 'summary': 'Creating a tweet list, blog list, and article list, with options for post and title formatting.', 'duration': 85.843, 'max_score': 3643.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI3643476.jpg'}, {'end': 4407.399, 'src': 'embed', 'start': 4348.149, 'weight': 2, 'content': [{'end': 4362.096, 'text': "as you can see the partners, the widget section it's correctly marked up and for the footer one, the navigation, the button and the copyright.", 'start': 4348.149, 'duration': 13.947}, {'end': 4395.036, 'text': 'what we can actually do is to make this section section, section, section, section, section, And then as well as that one.', 'start': 4363.7, 'duration': 31.336}, {'end': 4401.178, 'text': "So we've done it right.", 'start': 4399.617, 'duration': 1.561}, {'end': 4407.399, 'text': "So on the next part, we'll be styling this out using CSS.", 'start': 4401.338, 'duration': 6.061}], 'summary': 'Correctly marked up widget section, footer navigation, button, and copyright. next, styling with css.', 'duration': 59.25, 'max_score': 4348.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI4348149.jpg'}], 'start': 3423.782, 'title': 'Web design elements', 'summary': 'Covers creating a testimonials section, styling and structuring web pages, and setting up a footer using bootstrap. it emphasizes html structure, classes, and bootstrap utilization for faster development.', 'chapters': [{'end': 3567.619, 'start': 3423.782, 'title': 'Creating testimonials section in html', 'summary': 'Explains creating a testimonials section in html, specifying the structure and content, including the use of classes and image placement.', 'duration': 143.837, 'highlights': ['The chapter demonstrates creating a div with the class of span3 and the content structure for testimonials blog and latest tweets, along with specifying the image name and link for the section.', 'The speaker highlights the use of block code for codes and specifies the link for the site, 9gag.com.', 'The chapter emphasizes the use of the pull left class for the image placement within the testimonials section.']}, {'end': 3899.051, 'start': 3567.619, 'title': 'Web design: styling and structuring', 'summary': 'Explains the process of styling and structuring a web page, including the use of html tags and classes, with a focus on creating a blog section with a list of posts and latest tweets.', 'duration': 331.432, 'highlights': ['The process of styling and structuring a web page, including the use of HTML tags and classes, is discussed, with a focus on creating a blog section with a list of posts and latest tweets.', 'The importance of applying overflow hidden to align elements is highlighted.', 'Creating a blog section with a list of posts and latest tweets, including the use of HTML tags such as h4, h5, ul, li, and a, is detailed.', 'The need for proper structuring using div or article tags is mentioned, emphasizing the importance of semantic HTML structure.']}, {'end': 4457.721, 'start': 3899.051, 'title': 'Web design footer setup with bootstrap', 'summary': 'Highlights the process of setting up a web design footer using bootstrap, including the structure, elements, and styling, emphasizing the ease of use for faster development and the importance of utilizing bootstrap classes.', 'duration': 558.67, 'highlights': ['The chapter demonstrates the process of setting up a web design footer with Bootstrap, including the structure, elements, and styling.', 'Emphasizes the ease of use for faster development by leveraging Bootstrap classes.', 'Stresses the importance of knowledge of basic CSS and HTML for easy following in the Bootstrap framework.']}], 'duration': 1033.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CUoTqF_duxI/pics/CUoTqF_duxI3423782.jpg', 'highlights': ['The chapter emphasizes the use of the pull left class for the image placement within the testimonials section.', 'The process of styling and structuring a web page, including the use of HTML tags and classes, is discussed, with a focus on creating a blog section with a list of posts and latest tweets.', 'The chapter demonstrates the process of setting up a web design footer with Bootstrap, including the structure, elements, and styling.']}], 'highlights': ['The tutorial focuses on using Twitter Bootstrap framework to speed up front-end development, reducing the need to code from scratch.', 'The framework provides a simple file structure, including the bootstrap.css for styling and glyphicon icons for use in the design.', 'The tutorial emphasizes that basic knowledge of CSS and HTML is sufficient to follow along with the tutorial.', 'The grid system is based on a 12-column layout, allowing for flexible and responsive web design.', 'The use of containers and rows is essential for structuring content within the grid system.', 'The understanding of class spans and their application in creating columns within a row is crucial for designing multi-column layouts.', 'The importance of downloading Bootstrap and utilizing the grid component for creating responsive web layouts is highlighted.', 'The chapter emphasizes the selection of system layouts, body types, and links for CSS, and the inclusion of navbar and hero unit.', 'The process involves extracting the bootstrap file and creating a style.css file to override the default styling, resulting in a custom web layout.', 'The layout consists of a container with two rows, where the first row contains two columns, and the second row contains three columns.', 'Specific background color assignments are made for the columns, with the first row having a red background, and the columns within the second row having black or yellow backgrounds based on their span values.', 'Instructions for using CSS for styling, including cutting the browser, merging layers, hiding the background, trimming the image, and saving it.', 'The process of converting and saving images in Photoshop involves selecting the logo, merging layers, cutting, and saving the image as a PNG format, with the file named as brand.png.', "Creating multiple thumbnail images by copying and pasting the selection, then organizing them into a folder and adjusting the opacity for each image, resulting in the creation of 'thumb' and 'partner' images.", "Merging the background, cutting it, and saving it as 'HeroUnit.jpg' with a quality of 80, completing the image export process.", "Aligning and centering the Facebook and Twitter icons, resizing them to 16x16, merging them, and saving the image as 'social sprite'.", 'The chapter emphasizes marking up the HTML properly and styling the elements using classes like hero unit and navbar for layout and content positioning.', 'Creating a div with a class of navbar and a div with a class of navbar inner, and an unordered list with list items for home, about, services, blog, and contact us, while also mentioning the addition of an active state class.', 'Demonstrates creating a hero unit with Bootstrap The chapter covers creating a hero unit using Bootstrap, showcasing the process of adding headings, buttons, centering text, and positioning elements.', "The chapter discusses the process of adding an image as a background in CSS, creating div elements and columns, and naming the image 'browser.png'.", 'The chapter demonstrates building a web portfolio using HTML and CSS, emphasizing the use of divs, images, and classes for a structured layout.', 'Creating a portfolio structure with specific heading sizes: h2 (31), h3 (24), and h4 (18).', 'The button can be changed to primary to make it unique with a color red, while normal buttons will have a different color.', 'Adding a class of text center to center the button.', "The tutorial introduces the 'in type' browser for Windows, highlighting its free availability and suitability for web development.", 'Instructions on creating a partners section with four columns, utilizing image thumbnails and div classes for alignment.', 'The chapter emphasizes the use of the pull left class for the image placement within the testimonials section.', 'The process of styling and structuring a web page, including the use of HTML tags and classes, is discussed, with a focus on creating a blog section with a list of posts and latest tweets.', 'The chapter demonstrates the process of setting up a web design footer with Bootstrap, including the structure, elements, and styling.']}