title
Wordpress Theme With Bootstrap [1] - Intro and HTML

description
In this video we will discuss the Wordpress theme project and create the HTML template including Twitter Bootstrap. Project Files - https://github.com/bradtraversy/wpbootstrap_theme 10 PROJECT WORDPRESS THEME COURSE: https://www.eduonix.com/affiliates/id/16-10405 SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH: http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia

detail
{'title': 'Wordpress Theme With Bootstrap [1] - Intro and HTML', 'heatmap': [{'end': 321.288, 'start': 229.378, 'weight': 0.731}, {'end': 411.207, 'start': 397.736, 'weight': 0.701}, {'end': 741.69, 'start': 708.684, 'weight': 0.706}, {'end': 1017.512, 'start': 1003.046, 'weight': 0.756}], 'summary': 'Learn to create a wordpress theme using twitter bootstrap, implement the framework, and utilize wordpress theme customizer api. cover creating custom templates, optimizing css references, and styling showcases and boxes with custom css, for a comprehensive understanding of wordpress theme development.', 'chapters': [{'end': 145.08, 'segs': [{'end': 71.269, 'src': 'embed', 'start': 0.748, 'weight': 0, 'content': [{'end': 2.969, 'text': 'Hey guys, welcome to another Tech Guy mini-series.', 'start': 0.748, 'duration': 2.221}, {'end': 10.37, 'text': "In this series of videos we'll be creating a WordPress theme that uses Twitter Bootstrap.", 'start': 3.169, 'duration': 7.201}, {'end': 13.871, 'text': "Here's a brief summary of what you'll learn in this series.", 'start': 11.07, 'duration': 2.801}, {'end': 23.393, 'text': "You'll learn how to build a WordPress theme front to back and how to customize certain areas, such as the main post, loop pages, archived posts,", 'start': 14.511, 'duration': 8.882}, {'end': 25.234, 'text': 'search results, comments and more.', 'start': 23.393, 'duration': 1.841}, {'end': 31.938, 'text': "You'll learn how to implement the Twitter Bootstrap framework into WordPress, including the NavWalker class,", 'start': 25.854, 'duration': 6.084}, {'end': 34.039, 'text': 'which will allow us to have drop-down menus.', 'start': 31.938, 'duration': 2.101}, {'end': 40.043, 'text': "You'll also learn how to implement the WordPress Theme Customizer API into your projects,", 'start': 34.62, 'duration': 5.423}, {'end': 43.125, 'text': 'and you might even pick up some extra PHP skills along the way.', 'start': 40.043, 'duration': 3.082}, {'end': 50.151, 'text': 'So what you should know before actually attempting this, you should definitely know HTML and CSS.', 'start': 44.466, 'duration': 5.685}, {'end': 58.318, 'text': 'You should know some basic WordPress skills, how to set up WordPress, how to create posts and pages, real minimal stuff.', 'start': 50.631, 'duration': 7.687}, {'end': 60.88, 'text': 'Basic PHP.', 'start': 59.279, 'duration': 1.601}, {'end': 67.245, 'text': "if you don't know any PHP, you still can get by, because we're pretty much going to be using just snippets,", 'start': 60.88, 'duration': 6.365}, {'end': 71.269, 'text': "and I'll explain the functionality as we go along.", 'start': 67.245, 'duration': 4.024}], 'summary': 'Create a wordpress theme using twitter bootstrap, implement navwalker class, theme customizer api, and pick up extra php skills.', 'duration': 70.521, 'max_score': 0.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk748.jpg'}, {'end': 145.08, 'src': 'embed', 'start': 99.156, 'weight': 3, 'content': [{'end': 103.957, 'text': "So what we'll be doing is taking that and converting it into a WordPress theme.", 'start': 99.156, 'duration': 4.801}, {'end': 107.678, 'text': 'And then this page here is actually, I created this.', 'start': 104.457, 'duration': 3.221}, {'end': 116.701, 'text': "in addition to this, it's going to be a custom front page, because we can have a custom front page that different than the rest of the website.", 'start': 107.678, 'duration': 9.023}, {'end': 119.964, 'text': "so I'll show you how to implement that.", 'start': 116.701, 'duration': 3.263}, {'end': 123.587, 'text': "if you look over here, we have the different features that we'll be getting into.", 'start': 119.964, 'duration': 3.623}, {'end': 133.575, 'text': 'the nav Walker class is something that we can download and use to give us drop-down menus so that if we create a WordPress page that has a parent,', 'start': 123.587, 'duration': 9.988}, {'end': 139.097, 'text': "it'll actually get put in as a, as a sub item.", 'start': 133.575, 'duration': 5.522}, {'end': 145.08, 'text': "We'll also be working with the WordPress post loop comment functionality.", 'start': 140.078, 'duration': 5.002}], 'summary': 'Creating a custom wordpress theme with a custom front page and implementing features like nav walker class and post loop comment functionality.', 'duration': 45.924, 'max_score': 99.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk99156.jpg'}], 'start': 0.748, 'title': 'Creating a wordpress theme with twitter bootstrap', 'summary': 'Covers building a wordpress theme using twitter bootstrap, implementing the twitter bootstrap framework, wordpress theme customizer api, and necessary skills. it also involves creating a custom front page and working with features such as the navwalker class and wordpress post loop comment functionality.', 'chapters': [{'end': 145.08, 'start': 0.748, 'title': 'Wordpress theme with twitter bootstrap', 'summary': 'Covers building a wordpress theme using twitter bootstrap, including implementing the twitter bootstrap framework, wordpress theme customizer api, and necessary skills. it also involves creating a custom front page and working with features such as the navwalker class and wordpress post loop comment functionality.', 'duration': 144.332, 'highlights': ['The chapter covers building a WordPress theme using Twitter Bootstrap The series will teach how to create a WordPress theme using Twitter Bootstrap framework, including customizing main post, loop pages, archived posts, search results, and comments.', 'Implementing the Twitter Bootstrap framework into WordPress The course includes implementation of Twitter Bootstrap framework into WordPress, with a focus on the NavWalker class for creating drop-down menus.', 'Implementing the WordPress Theme Customizer API into projects The series will also demonstrate implementing the WordPress Theme Customizer API into projects, offering potential to gain extra PHP skills.', 'Necessary skills and prerequisites for the course Before attempting the course, one should have knowledge of HTML, CSS, basic WordPress skills, and fundamental programming concepts such as variables, loops, and arrays.', 'Creating a custom front page and converting a Bootstrap template into a WordPress theme The course involves converting an example starter template available at getbootstrap.com into a WordPress theme, as well as creating a custom front page.', 'Working with features such as the NavWalker class and WordPress post loop comment functionality The chapter includes working with features like the NavWalker class for drop-down menus and WordPress post loop comment functionality.']}], 'duration': 144.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk748.jpg', 'highlights': ['The chapter covers building a WordPress theme using Twitter Bootstrap framework, including customizing main post, loop pages, archived posts, search results, and comments.', 'Implementing the Twitter Bootstrap framework into WordPress, with a focus on the NavWalker class for creating drop-down menus.', 'Implementing the WordPress Theme Customizer API into projects, offering potential to gain extra PHP skills.', 'Creating a custom front page and converting a Bootstrap template into a WordPress theme.', 'Working with features such as the NavWalker class and WordPress post loop comment functionality.', 'Before attempting the course, one should have knowledge of HTML, CSS, basic WordPress skills, and fundamental programming concepts.']}, {'end': 348.857, 'segs': [{'end': 321.288, 'src': 'heatmap', 'start': 145.08, 'weight': 0, 'content': [{'end': 154.646, 'text': "custom header and footer files, sidebar widgets, homepage widgets I didn't write that post thumbs and metadata.", 'start': 145.08, 'duration': 9.566}, {'end': 155.746, 'text': 'custom templates.', 'start': 154.646, 'duration': 1.1}, {'end': 157.607, 'text': 'post formats.', 'start': 155.746, 'duration': 1.861}, {'end': 160.189, 'text': 'archive and search page layouts.', 'start': 157.607, 'duration': 2.582}, {'end': 163.551, 'text': 'custom front page and theme customizer API.', 'start': 160.189, 'duration': 3.362}, {'end': 166.754, 'text': 'All right, so enough of these slides.', 'start': 164.827, 'duration': 1.927}, {'end': 170.206, 'text': "Let's go ahead and get started and start to create our WordPress theme.", 'start': 166.774, 'duration': 3.432}, {'end': 177.687, 'text': 'All right, so before we jump into WordPress and creating a theme, I want to get the HTML down first.', 'start': 171.243, 'duration': 6.444}, {'end': 184.331, 'text': "So we're going to create a basic HTML template based off the example template from getbootstrap.com,", 'start': 177.747, 'duration': 6.584}, {'end': 187.633, 'text': "and then we'll go ahead and convert that into a WordPress theme.", 'start': 184.331, 'duration': 3.302}, {'end': 190.774, 'text': "So for my text editor, I'm using Atom.", 'start': 188.513, 'duration': 2.261}, {'end': 192.796, 'text': "Of course, you can use whatever you'd like.", 'start': 191.034, 'duration': 1.762}, {'end': 196.258, 'text': 'Atom is really nice, as well as Sublime Text.', 'start': 193.376, 'duration': 2.882}, {'end': 199.92, 'text': "You've probably seen me use that if you've watched other videos as well.", 'start': 196.718, 'duration': 3.202}, {'end': 204.961, 'text': "So I'm at getbootstrap.com, and what we're going to do is go to Getting Started.", 'start': 200.98, 'duration': 3.981}, {'end': 209.163, 'text': "And we're first going to go ahead and download Bootstrap.", 'start': 206.422, 'duration': 2.741}, {'end': 214.224, 'text': "So we're going to grab that zip file, and let's open that up.", 'start': 210.763, 'duration': 3.461}, {'end': 219.826, 'text': "And then I'm going to create a folder on my desktop for our HTML template.", 'start': 215.584, 'duration': 4.242}, {'end': 221.986, 'text': "And we'll just call this..", 'start': 220.626, 'duration': 1.36}, {'end': 226.548, 'text': "We'll say Bootstrap.", 'start': 221.986, 'duration': 4.562}, {'end': 227.128, 'text': "Let's call this..", 'start': 226.588, 'duration': 0.54}, {'end': 233.838, 'text': 'WP Bootstrap underscore HTML.', 'start': 229.378, 'duration': 4.46}, {'end': 239.814, 'text': "Okay, and then let's open that up, and we're going to create a couple things here.", 'start': 235.413, 'duration': 4.401}, {'end': 241.875, 'text': "We're going to want a CSS folder.", 'start': 239.854, 'duration': 2.021}, {'end': 245.436, 'text': "We're going to want a JS folder.", 'start': 241.895, 'duration': 3.541}, {'end': 253.138, 'text': "Okay, and then from the zip file that we downloaded, let's bring over bootstrap.css.", 'start': 246.756, 'duration': 6.382}, {'end': 258.339, 'text': "We're going to bring that to our CSS folder, and same thing with the JavaScript file.", 'start': 253.218, 'duration': 5.121}, {'end': 260.279, 'text': 'We want to bring over bootstrap.js.', 'start': 258.858, 'duration': 1.421}, {'end': 268.443, 'text': "Alright, and then in our HTML folder, we're going to create our index.html.", 'start': 262.737, 'duration': 5.706}, {'end': 279.734, 'text': "Okay, so now what I'm going to do is in my Atom text editor, I'm just going to add that folder as a project.", 'start': 272.387, 'duration': 7.347}, {'end': 286.328, 'text': 'So now we have access to it over here.', 'start': 284.606, 'duration': 1.722}, {'end': 289.192, 'text': "Let's go ahead and open up index.html.", 'start': 286.749, 'duration': 2.443}, {'end': 294.057, 'text': "And then let's go back to get bootstrap and go back to getting started.", 'start': 290.433, 'duration': 3.624}, {'end': 297.141, 'text': 'And actually let me make this a little bigger.', 'start': 294.838, 'duration': 2.303}, {'end': 306.418, 'text': 'on the side over here, we want to go to Examples and go down to this blog template right here.', 'start': 298.573, 'duration': 7.845}, {'end': 311.241, 'text': "We're going to click on that and it's going to show us the theme or the template.", 'start': 307.279, 'duration': 3.962}, {'end': 316.845, 'text': "What we're going to do is view the source code with Control-U and just grab everything that's in there.", 'start': 311.281, 'duration': 5.564}, {'end': 321.288, 'text': "Then we'll paste that in our index.html file.", 'start': 318.446, 'duration': 2.842}], 'summary': 'Creating a wordpress theme from basic html using bootstrap, customizing files, and using atom text editor.', 'duration': 113.259, 'max_score': 145.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk145080.jpg'}, {'end': 323.449, 'src': 'embed', 'start': 294.838, 'weight': 2, 'content': [{'end': 297.141, 'text': 'And actually let me make this a little bigger.', 'start': 294.838, 'duration': 2.303}, {'end': 306.418, 'text': 'on the side over here, we want to go to Examples and go down to this blog template right here.', 'start': 298.573, 'duration': 7.845}, {'end': 311.241, 'text': "We're going to click on that and it's going to show us the theme or the template.", 'start': 307.279, 'duration': 3.962}, {'end': 316.845, 'text': "What we're going to do is view the source code with Control-U and just grab everything that's in there.", 'start': 311.281, 'duration': 5.564}, {'end': 321.288, 'text': "Then we'll paste that in our index.html file.", 'start': 318.446, 'duration': 2.842}, {'end': 323.449, 'text': "I'm going to have to make this a little bigger as well.", 'start': 321.468, 'duration': 1.981}], 'summary': 'Tutorial on accessing and using a blog template from examples, including code extraction and file pasting.', 'duration': 28.611, 'max_score': 294.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk294838.jpg'}], 'start': 145.08, 'title': 'Creating and modifying wordpress themes and bootstrap setup', 'summary': 'Covers creating a custom wordpress theme with custom templates, post formats, and html conversion. it also demonstrates setting up bootstrap for html and modifying a blog template.', 'chapters': [{'end': 196.258, 'start': 145.08, 'title': 'Creating a wordpress theme', 'summary': 'Covers the process of creating a custom wordpress theme, including topics such as custom templates, post formats, and using html as a basis before conversion, and mentions tools like atom and sublime text.', 'duration': 51.178, 'highlights': ['Creating a basic HTML template based off the example template from getbootstrap.com', 'Mentioning the use of Atom and Sublime Text as text editors', 'Topics such as custom templates, post formats, and custom front page and theme customizer API are covered']}, {'end': 294.057, 'start': 196.718, 'title': 'Setting up bootstrap for html', 'summary': 'Demonstrates the process of setting up bootstrap for html by downloading the zip file from getbootstrap.com, creating necessary folders, and adding the bootstrap.css and bootstrap.js files to the respective folders.', 'duration': 97.339, 'highlights': ['The process begins with downloading the zip file from getbootstrap.com and creating a folder for the HTML template on the desktop.', 'The next step involves creating CSS and JS folders, followed by transferring the bootstrap.css and bootstrap.js files from the downloaded zip file to their respective folders.', 'The chapter concludes with the creation of the index.html file in the HTML folder and adding the folder as a project in the Atom text editor.']}, {'end': 348.857, 'start': 294.838, 'title': 'Blog template modification', 'summary': 'Covers modifying a blog template by obtaining the source code, making necessary changes, and viewing the updated template in a browser.', 'duration': 54.019, 'highlights': ['The process involves going to the Examples section, selecting a blog template, viewing its source code, and copying it into the index.html file.', 'The next step is to make necessary changes in the source code and then view the modified template in a browser to ensure the changes are applied.', 'The modification process includes dealing with HTML and CSS elements.']}], 'duration': 203.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk145080.jpg', 'highlights': ['Topics such as custom templates, post formats, and custom front page and theme customizer API are covered', 'Creating a basic HTML template based off the example template from getbootstrap.com', 'The process involves going to the Examples section, selecting a blog template, viewing its source code, and copying it into the index.html file', 'The next step involves creating CSS and JS folders, followed by transferring the bootstrap.css and bootstrap.js files from the downloaded zip file to their respective folders', 'The process begins with downloading the zip file from getbootstrap.com and creating a folder for the HTML template on the desktop']}, {'end': 826.814, 'segs': [{'end': 411.207, 'src': 'heatmap', 'start': 348.857, 'weight': 0, 'content': [{'end': 356.802, 'text': "registering yet so let's fix that So in the head area, you have this bootstrap CSS reference.", 'start': 348.857, 'duration': 7.945}, {'end': 359.464, 'text': "It's not pointing to the right place.", 'start': 357.463, 'duration': 2.001}, {'end': 361.326, 'text': 'What we want to do is just get rid of this.', 'start': 359.524, 'duration': 1.802}, {'end': 364.328, 'text': "So it's going right to the CSS folder.", 'start': 362.066, 'duration': 2.262}, {'end': 367.951, 'text': "And we're not using the minified version, so I'm just going to get rid of that.", 'start': 364.969, 'duration': 2.982}, {'end': 370.253, 'text': "So it's just bootstrap.css.", 'start': 368.171, 'duration': 2.082}, {'end': 371.674, 'text': 'All right.', 'start': 371.354, 'duration': 0.32}, {'end': 375.417, 'text': "And then there's a lot of stuff that we don't need here.", 'start': 372.054, 'duration': 3.363}, {'end': 379.38, 'text': "We don't need from here this IE10.", 'start': 376.058, 'duration': 3.322}, {'end': 380.821, 'text': "I don't really care about IE10.", 'start': 379.42, 'duration': 1.401}, {'end': 389.449, 'text': 'And then this blog.css, this is referring to this file here.', 'start': 383.904, 'duration': 5.545}, {'end': 397.696, 'text': 'If we go to the source code and you look at this right here, link href blog.css.', 'start': 389.489, 'duration': 8.207}, {'end': 399.758, 'text': "Let's go ahead and open that in another tab.", 'start': 397.736, 'duration': 2.022}, {'end': 405.323, 'text': "And it's just some extra styles in addition to the main bootstrap CSS.", 'start': 400.859, 'duration': 4.464}, {'end': 406.484, 'text': "So let's grab all this.", 'start': 405.383, 'duration': 1.101}, {'end': 411.207, 'text': "And then what we're going to do is in our CSS folder, we're going to create a new file.", 'start': 407.705, 'duration': 3.502}], 'summary': 'Removing unnecessary references and creating a new css file.', 'duration': 57.627, 'max_score': 348.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk348857.jpg'}, {'end': 526.858, 'src': 'embed', 'start': 499.269, 'weight': 2, 'content': [{'end': 506.191, 'text': "Now, we're going to have a custom front page, so I figured that we'd get that out of the way, that HTML out of the way.", 'start': 499.269, 'duration': 6.922}, {'end': 512.352, 'text': "So let's go ahead and create another index, I'm sorry, another HTML file.", 'start': 506.811, 'duration': 5.541}, {'end': 515.712, 'text': "And we're going to call this one front.html.", 'start': 512.371, 'duration': 3.341}, {'end': 522.414, 'text': "And let's grab everything that's in the index page for now and paste that into front.", 'start': 516.852, 'duration': 5.562}, {'end': 526.858, 'text': "All right, and then we're going to change a few things here.", 'start': 523.755, 'duration': 3.103}], 'summary': 'Creating a custom front page, copying content from index to front.html.', 'duration': 27.589, 'max_score': 499.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk499269.jpg'}, {'end': 741.69, 'src': 'heatmap', 'start': 708.684, 'weight': 0.706, 'content': [{'end': 718.651, 'text': "Okay, so we'll just grab this link here and let's go include that up here.", 'start': 708.684, 'duration': 9.967}, {'end': 741.69, 'text': 'paste that in rel stylesheet and now we should have access to the icons.', 'start': 729.738, 'duration': 11.952}], 'summary': 'Adding a link to access icons in a stylesheet.', 'duration': 33.006, 'max_score': 708.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk708684.jpg'}], 'start': 348.857, 'title': 'Optimizing css references and creating custom bootstrap wordpress theme', 'summary': 'Discusses optimizing css references by removing unnecessary files and pointing to the correct folder, and creating custom html templates for a wordpress theme, including modifying the index page, creating a custom front page, and adding showcase area with a big heading and background image using the bootstrap grid system.', 'chapters': [{'end': 406.484, 'start': 348.857, 'title': 'Optimizing css references', 'summary': 'Discusses optimizing the css references by removing unnecessary files and pointing to the correct folder, including removing the minified version and extraneous styles, such as those for ie10 and additional blog.css.', 'duration': 57.627, 'highlights': ['Removing unnecessary bootstrap CSS references and pointing to the correct folder, resulting in improved page loading speed.', 'Getting rid of the minified version of bootstrap.css, reducing file size and potentially improving website performance.', 'Discarding styles for IE10, optimizing the CSS files for modern browsers and reducing unnecessary code.', 'Identifying and removing extra styles from blog.css, streamlining the CSS files and improving website performance.']}, {'end': 826.814, 'start': 407.705, 'title': 'Creating custom bootstrap wordpress theme', 'summary': 'Discusses creating custom html templates for wordpress theme, including modifying the index page and creating a custom front page, with details on cleaning up static html, adding showcase area with a big heading and background image, and including three boxes with icons using the bootstrap grid system.', 'duration': 419.109, 'highlights': ['Modifying the index page and creating a custom front page for the WordPress theme. Creating custom HTML templates, cleaning up static HTML, adding showcase area with a big heading and background image, and including three boxes with icons using the Bootstrap grid system.', 'Including three boxes with icons using the Bootstrap grid system. Adding three four-column divs with icons using the Bootstrap grid system and font awesome for the WordPress theme.', 'Cleaning up static HTML and adding showcase area with a big heading and background image. Cleaning up static HTML and adding showcase area with a big heading and background image for the WordPress theme.']}], 'duration': 477.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk348857.jpg', 'highlights': ['Removing unnecessary bootstrap CSS references and pointing to the correct folder, resulting in improved page loading speed.', 'Getting rid of the minified version of bootstrap.css, reducing file size and potentially improving website performance.', 'Modifying the index page and creating a custom front page for the WordPress theme. Creating custom HTML templates, cleaning up static HTML, adding showcase area with a big heading and background image, and including three boxes with icons using the Bootstrap grid system.', 'Discarding styles for IE10, optimizing the CSS files for modern browsers and reducing unnecessary code.']}, {'end': 1104.015, 'segs': [{'end': 1104.015, 'src': 'heatmap', 'start': 1003.046, 'weight': 0, 'content': [{'end': 1011.35, 'text': "Okay, so we'll have a folder called IMG and paste that in, reload, and there we go.", 'start': 1003.046, 'duration': 8.304}, {'end': 1013.351, 'text': "Okay, so that's our showcase area.", 'start': 1011.37, 'duration': 1.981}, {'end': 1017.512, 'text': "Now for the boxes down here, let's style those.", 'start': 1014.611, 'duration': 2.901}, {'end': 1019.954, 'text': "Okay, we don't have much to do there.", 'start': 1017.532, 'duration': 2.422}, {'end': 1026.136, 'text': "We're gonna take the boxes class and we're going to align to the center.", 'start': 1020.294, 'duration': 5.842}, {'end': 1038.555, 'text': "We're gonna give a background of white And let's set margin-bottom to 30 pixels.", 'start': 1029.137, 'duration': 9.418}, {'end': 1043.038, 'text': 'All right, now the icons themselves are way too small.', 'start': 1039.715, 'duration': 3.323}, {'end': 1048.281, 'text': "So we're going to take, we'll say box and then .fa.", 'start': 1043.598, 'duration': 4.683}, {'end': 1055.947, 'text': "And let's set the font size to 45 pixels.", 'start': 1050.243, 'duration': 5.704}, {'end': 1057.508, 'text': "And I'm going to make that important.", 'start': 1056.007, 'duration': 1.501}, {'end': 1061.77, 'text': "And then we'll set a margin-bottom of 10 pixels.", 'start': 1059.449, 'duration': 2.321}, {'end': 1067.166, 'text': 'Alright, and then finally we have the box class.', 'start': 1064.622, 'duration': 2.544}, {'end': 1070.23, 'text': 'And we just want to set some padding.', 'start': 1068.427, 'duration': 1.803}, {'end': 1071.311, 'text': "We'll say 15.", 'start': 1070.29, 'duration': 1.021}, {'end': 1073.955, 'text': 'And I also want to set a border.', 'start': 1071.311, 'duration': 2.644}, {'end': 1080.058, 'text': "that'll be gray, one pixel solid, alright.", 'start': 1076.536, 'duration': 3.522}, {'end': 1081.8, 'text': "so let's take a look.", 'start': 1080.058, 'duration': 1.742}, {'end': 1082.62, 'text': 'and there we go.', 'start': 1081.8, 'duration': 0.82}, {'end': 1085.042, 'text': "so that's our front page.", 'start': 1082.62, 'duration': 2.422}, {'end': 1088.164, 'text': 'so we have the HTML in the CSS,', 'start': 1085.042, 'duration': 3.122}, {'end': 1097.03, 'text': "and it's nice to just get that out of the way so that we can now focus on our WordPress theme and the PHP code and all that.", 'start': 1088.164, 'duration': 8.866}, {'end': 1104.015, 'text': "alright. so in the next video we're gonna get WordPress set up and start to turn this into a WordPress theme.", 'start': 1097.03, 'duration': 6.985}], 'summary': 'Styling showcase area, boxes, icons, and front page with html and css for wordpress theme setup.', 'duration': 240.391, 'max_score': 1003.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk1003046.jpg'}], 'start': 830.862, 'title': 'Styling the showcase and boxes with custom css', 'summary': 'Covers styling the showcase section of a webpage, adding custom css styles with specific pixel values and image url. it addresses styling the showcase div, paragraph, adding an image, and briefly mentions styling the boxes below. additionally, it demonstrates styling html boxes for the front page, adjusting alignment, background, font size, padding, and border properties, and preparing to work on a wordpress theme.', 'chapters': [{'end': 939.795, 'start': 830.862, 'title': 'Styling the showcase section', 'summary': 'Covers styling the showcase section of a webpage by adding custom css styles, including setting height, padding, alignment, border, margin, color, background image, and positioning, with specific pixel values and image url.', 'duration': 108.933, 'highlights': ['Adding custom styles to the showcase section, including setting height, padding, alignment, border, margin, color, and background image with specific pixel values and image URL', 'Setting the height of the showcase section to six hundred pixels and adding padding of a hundred pixels on the top and bottom, and twenty pixels on the left and right', 'Aligning everything to the center and adding a gray one pixel solid border at the bottom, with a margin bottom of 30 pixels', "Specifying the color as white and setting a background image using the URL 'img/showcase.jpeg' with properties 'no repeat' and centered positioning"]}, {'end': 1019.954, 'start': 939.795, 'title': 'Styling showcase and boxes', 'summary': 'Covers styling the showcase div with a font size of 55 pixels, padding bottom of 20 pixels, and white color, as well as styling the showcase paragraph with a font size of 20 and margin bottom of 50. additionally, it addresses adding an image to the showcase area and briefly mentions styling the boxes below.', 'duration': 80.159, 'highlights': ['Styling the showcase div with a font size of 55 pixels, padding bottom of 20 pixels, and white color.', 'Styling the showcase paragraph with a font size of 20 and margin bottom of 50.', 'Adding an image to the showcase area.', 'Briefly mentioning styling the boxes below.']}, {'end': 1104.015, 'start': 1020.294, 'title': 'Styling html boxes for front page', 'summary': 'Demonstrates styling html boxes for the front page, adjusting alignment, background, font size, padding, and border properties, and preparing to work on a wordpress theme.', 'duration': 83.721, 'highlights': ['Adjusting alignment, background, font size, padding, and border properties for HTML boxes on the front page', 'Setting font size to 45 pixels for the box icons', 'Setting margin-bottom to 30 pixels for the boxes class', 'Preparing to work on a WordPress theme and PHP code']}], 'duration': 273.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2Zt8va_6HRk/pics/2Zt8va_6HRk830862.jpg', 'highlights': ['Adding custom styles to the showcase section, including setting height, padding, alignment, border, margin, color, and background image with specific pixel values and image URL', 'Setting the height of the showcase section to 600 pixels and adding padding of 100 pixels on the top and bottom, and 20 pixels on the left and right', 'Aligning everything to the center and adding a gray 1px solid border at the bottom, with a margin bottom of 30 pixels', "Specifying the color as white and setting a background image using the URL 'img/showcase.jpeg' with properties 'no repeat' and centered positioning", 'Styling the showcase div with a font size of 55 pixels, padding bottom of 20 pixels, and white color', 'Styling the showcase paragraph with a font size of 20 and margin bottom of 50', 'Adjusting alignment, background, font size, padding, and border properties for HTML boxes on the front page', 'Setting font size to 45 pixels for the box icons', 'Setting margin-bottom to 30 pixels for the boxes class', 'Preparing to work on a WordPress theme and PHP code', 'Adding an image to the showcase area', 'Briefly mentioning styling the boxes below']}], 'highlights': ['The chapter covers building a WordPress theme using Twitter Bootstrap framework, including customizing main post, loop pages, archived posts, search results, and comments.', 'Implementing the Twitter Bootstrap framework into WordPress, with a focus on the NavWalker class for creating drop-down menus.', 'Implementing the WordPress Theme Customizer API into projects, offering potential to gain extra PHP skills.', 'Creating a custom front page and converting a Bootstrap template into a WordPress theme.', 'Working with features such as the NavWalker class and WordPress post loop comment functionality.', 'Removing unnecessary bootstrap CSS references and pointing to the correct folder, resulting in improved page loading speed.', 'Getting rid of the minified version of bootstrap.css, reducing file size and potentially improving website performance.', 'Modifying the index page and creating a custom front page for the WordPress theme. Creating custom HTML templates, cleaning up static HTML, adding showcase area with a big heading and background image, and including three boxes with icons using the Bootstrap grid system.', 'Adding custom styles to the showcase section, including setting height, padding, alignment, border, margin, color, and background image with specific pixel values and image URL', 'Setting the height of the showcase section to 600 pixels and adding padding of 100 pixels on the top and bottom, and 20 pixels on the left and right', 'Aligning everything to the center and adding a gray 1px solid border at the bottom, with a margin bottom of 30 pixels', "Specifying the color as white and setting a background image using the URL 'img/showcase.jpeg' with properties 'no repeat' and centered positioning", 'Styling the showcase div with a font size of 55 pixels, padding bottom of 20 pixels, and white color', 'Styling the showcase paragraph with a font size of 20 and margin bottom of 50', 'Adjusting alignment, background, font size, padding, and border properties for HTML boxes on the front page', 'Setting font size to 45 pixels for the box icons', 'Setting margin-bottom to 30 pixels for the boxes class', 'Preparing to work on a WordPress theme and PHP code', 'Adding an image to the showcase area', 'Briefly mentioning styling the boxes below']}