title
1. Social Network Website Building Tutorial Series Intro and Template Production

description
Code: https://www.adamkhoury.com/PHP/video/Introduction-and-Building-the-Design-Template Web Intersect 2.0 part 1. Learn to build a social networking website from scratch. All new software systems and scripting approaches for 2013. All of the technologies we are using are free and open source(HTML, CSS, JavaScript, PHP and MySQL). This first video in the series runs through a quick introduction then jumps right into constructing your website design template system.

detail
{'title': '1. Social Network Website Building Tutorial Series Intro and Template Production', 'heatmap': [{'end': 396.279, 'start': 363.557, 'weight': 0.819}, {'end': 517.148, 'start': 424.657, 'weight': 0.704}, {'end': 851.42, 'start': 756.087, 'weight': 0.747}, {'end': 1003.401, 'start': 910.062, 'weight': 0.885}, {'end': 1156.414, 'start': 1123.001, 'weight': 0.725}, {'end': 1490.799, 'start': 1450.03, 'weight': 0.792}, {'end': 2279.063, 'start': 2244.734, 'weight': 0.728}, {'end': 2554.256, 'start': 2457.709, 'weight': 0.791}], 'summary': 'Tutorial series covers web intersect 2.0, html5, css3, and mysqli transition, with a focus on building a social site with 100% validation, friend system, conversation system, notification system, photo gallery system, and block member system. it also discusses vector graphic tools, creating a custom search engine, styling divs, validating website elements, and php website design and management.', 'chapters': [{'end': 263.672, 'segs': [{'end': 76.619, 'src': 'embed', 'start': 18.334, 'weight': 0, 'content': [{'end': 23.335, 'text': "I'm going to talk for just a quick minute about some important things you may want to know before this series begins.", 'start': 18.334, 'duration': 5.001}, {'end': 25.536, 'text': "then we'll jump right into production of the site.", 'start': 23.335, 'duration': 2.201}, {'end': 31.261, 'text': 'This series will move faster than the last social community series we offered three or four years ago.', 'start': 26.056, 'duration': 5.205}, {'end': 37.006, 'text': 'This series will also replace and completely deprecate the older series of videos,', 'start': 31.641, 'duration': 5.365}, {'end': 42.451, 'text': 'because three or four years ago we were using standard code that was standard then.', 'start': 37.006, 'duration': 5.445}, {'end': 47.935, 'text': "that has now been replaced by cool things like HTML5 and CSS3 that weren't available back then.", 'start': 42.451, 'duration': 5.484}, {'end': 52.78, 'text': "We're also going to use MySQL I this time around instead of MySQL.", 'start': 48.356, 'duration': 4.424}, {'end': 56.443, 'text': "and that'll give you better database performance in your scripts.", 'start': 53.4, 'duration': 3.043}, {'end': 60.586, 'text': "Alright, now let's take a look at the hot points of what we're going to be covering.", 'start': 56.943, 'duration': 3.643}, {'end': 68.532, 'text': "We'll be covering a little bit more than what you see here, but these are just the major applications that we'll be showing you how to produce.", 'start': 60.946, 'duration': 7.586}, {'end': 76.619, 'text': "Now, in this first video, I'm going to start with the HTML5 plus PHP website template design and construction,", 'start': 69.633, 'duration': 6.986}], 'summary': 'New series will cover html5, css3, and mysqli for better performance and replaces older videos. faster pace than previous series.', 'duration': 58.285, 'max_score': 18.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c18334.jpg'}, {'end': 123.739, 'src': 'embed', 'start': 94.29, 'weight': 1, 'content': [{'end': 100.111, 'text': "We'll also have register, login, logout, and all of the initial forms that you'll need for your site.", 'start': 94.29, 'duration': 5.821}, {'end': 109.79, 'text': 'And these next five things are things that were highly requested by you guys, the viewers who had gone through the last lesson series,', 'start': 100.971, 'duration': 8.819}, {'end': 115.994, 'text': 'you asking for things that were not shown in that lesson series, like a new type of friend system.', 'start': 109.79, 'duration': 6.204}, {'end': 123.739, 'text': 'then another thing that is really highly requested by you guys is the conversation system really the blab system, completed.', 'start': 115.994, 'duration': 7.745}], 'summary': 'The transcript mentions the addition of new features including register, login, logout forms, and a new friend system, as well as the completion of the conversation system.', 'duration': 29.449, 'max_score': 94.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c94290.jpg'}, {'end': 263.672, 'src': 'embed', 'start': 218.63, 'weight': 4, 'content': [{'end': 227.053, 'text': "So those are the major things that we'll show throughout the lesson series, and by no means will it be a complete, super-polished, ready-to-go site,", 'start': 218.63, 'duration': 8.423}, {'end': 231.254, 'text': "but it'll show you the foundations of building your own social site from scratch,", 'start': 227.053, 'duration': 4.201}, {'end': 237.596, 'text': 'so you can get your own custom applications and have a really unique feel to your social adventure that you offer to people.', 'start': 231.254, 'duration': 6.342}, {'end': 239.133, 'text': "All right, let's rock and roll.", 'start': 238.092, 'duration': 1.041}, {'end': 243.176, 'text': "We're going to start with the website template design and construction.", 'start': 239.153, 'duration': 4.023}, {'end': 247.539, 'text': "We're going to use HTML5, CSS or CSS3,", 'start': 243.516, 'duration': 4.023}, {'end': 259.289, 'text': 'whatever you fancy and PHP to make smart region templates for the header of the site and the footer and any other sections that might be the same on all the pages.', 'start': 247.539, 'duration': 11.75}, {'end': 263.672, 'text': "And we'll make sure that it validates 100% all through production.", 'start': 259.668, 'duration': 4.004}], 'summary': 'Lesson series on building a social site using html5, css/css3, and php with 100% validation.', 'duration': 45.042, 'max_score': 218.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c218630.jpg'}], 'start': 0.309, 'title': 'Web intersect 2.0 series and building social site features', 'summary': 'Introduces the web intersect 2.0 series, covering html5, css3, and mysqli transition and php website template design with 100% validation. it also explains the implementation of social site features including friend system, conversation system, notification system, photo gallery system, and block member system for building custom applications.', 'chapters': [{'end': 93.389, 'start': 0.309, 'title': 'Web intersect 2.0 series', 'summary': 'Introduces the web intersect 2.0 series, highlighting the transition from standard code to html5, css3, and mysqli for improved database performance, as well as the coverage of html5, php website template design, and database creation with 100% validation.', 'duration': 93.08, 'highlights': ['The series will move faster than the last social community series offered three or four years ago, replacing the older series of videos and adopting HTML5, CSS3, and MySQLi for better database performance.', 'The chapter will cover the production of major applications, starting with HTML5 plus PHP website template design and construction, ensuring 100% validation throughout production to display proficient coding skills to viewers or site users.', 'Transition to using MySQLi instead of MySQL for improved database performance in scripts.']}, {'end': 263.672, 'start': 94.29, 'title': 'Building social site features', 'summary': 'Covers the implementation of highly requested features such as friend system, conversation system, notification system, photo gallery system, and block member system for a social site, providing a foundational understanding for building custom applications.', 'duration': 169.382, 'highlights': ['Covering highly requested features such as friend system, conversation system, notification system, photo gallery system, and block member system for a social site. Highly requested by the viewers who had gone through the last lesson series.', 'Demonstrating the implementation of website template design using HTML5, CSS or CSS3, and PHP to create smart region templates. Ensuring 100% validation throughout production.', 'Providing foundations for building custom applications and creating a unique social adventure for users. Enabling users to have a unique feel to their social adventure.']}], 'duration': 263.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c309.jpg', 'highlights': ['The series will move faster than the last social community series, adopting HTML5, CSS3, and MySQLi for better database performance.', 'Covering highly requested features such as friend system, conversation system, notification system, photo gallery system, and block member system for a social site.', 'Transition to using MySQLi instead of MySQL for improved database performance in scripts.', 'The chapter will cover the production of major applications, starting with HTML5 plus PHP website template design and construction, ensuring 100% validation throughout production.', 'Demonstrating the implementation of website template design using HTML5, CSS or CSS3, and PHP to create smart region templates, ensuring 100% validation throughout production.', 'Providing foundations for building custom applications and creating a unique social adventure for users.']}, {'end': 663.102, 'segs': [{'end': 303.477, 'src': 'embed', 'start': 264.261, 'weight': 0, 'content': [{'end': 267.283, 'text': 'OK, I have my header graphics already created for the site.', 'start': 264.261, 'duration': 3.022}, {'end': 275.285, 'text': 'And if you need video tutorials about how to make vector graphics for the web, You can check out my fireworks playlist on YouTube.', 'start': 267.763, 'duration': 7.522}, {'end': 279.306, 'text': "It'll show you how to use fireworks to create vector graphics the way I do.", 'start': 276.025, 'duration': 3.281}, {'end': 283.867, 'text': "And it's important for you guys to realize that you don't have to use fireworks.", 'start': 280.126, 'duration': 3.741}, {'end': 289.929, 'text': 'You can use Photoshop, Illustrator, GIMP or any graphics editor that you feel most comfortable with.', 'start': 283.927, 'duration': 6.002}, {'end': 293.79, 'text': "okay?. So don't give me a hard time about what graphics editor I choose to use.", 'start': 289.929, 'duration': 3.861}, {'end': 298.911, 'text': 'Just use whatever the hell you want and leave me be with the graphics editor that I enjoy using.', 'start': 293.83, 'duration': 5.081}, {'end': 300.415, 'text': 'You can use whatever you want.', 'start': 299.434, 'duration': 0.981}, {'end': 303.477, 'text': "I'm not trying to push any Adobe tools on you guys or anything, alright?", 'start': 300.435, 'duration': 3.042}], 'summary': 'Creator offers video tutorials on vector graphics, emphasizing freedom to use preferred graphics editor.', 'duration': 39.216, 'max_score': 264.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c264261.jpg'}, {'end': 418.134, 'src': 'heatmap', 'start': 363.557, 'weight': 3, 'content': [{'end': 369.978, 'text': "I'm going to take them just as they're sitting there, Control-C, go to File, New, OK, and Paste.", 'start': 363.557, 'duration': 6.421}, {'end': 382.161, 'text': "Now, Fit Canvas, and then go to Canvas Size, and let's go ahead and change the width to, you can make it as small as four pixels if you want.", 'start': 370.659, 'duration': 11.502}, {'end': 384.096, 'text': "I'll just make it 10 pixels.", 'start': 382.856, 'duration': 1.24}, {'end': 393.098, 'text': "Okay And so you can see I have just a sliver now that I'm going to use CSS code to make it repeat.", 'start': 385.036, 'duration': 8.062}, {'end': 396.279, 'text': "I'm going to make that sliver repeat all throughout my header.", 'start': 393.338, 'duration': 2.941}, {'end': 403.18, 'text': "That way I can have really light loading graphics that'll load really fast, take up a lot of space in the page.", 'start': 396.579, 'duration': 6.601}, {'end': 409.181, 'text': "Basically it'll repeat all through the width of the user's browser window in the header.", 'start': 403.26, 'duration': 5.921}, {'end': 413.572, 'text': "Now go to your desktop real quick because you're going to need a new folder for your website.", 'start': 409.69, 'duration': 3.882}, {'end': 414.652, 'text': 'You can just name it.', 'start': 413.792, 'duration': 0.86}, {'end': 418.134, 'text': 'Name that folder whatever your website is named.', 'start': 415.373, 'duration': 2.761}], 'summary': 'Creating a small repeating graphic for fast loading, to be utilized in the header of a website.', 'duration': 54.577, 'max_score': 363.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c363557.jpg'}, {'end': 517.148, 'src': 'heatmap', 'start': 424.657, 'weight': 0.704, 'content': [{'end': 427.438, 'text': "And then double click inside of that folder and you'll see it's empty.", 'start': 424.657, 'duration': 2.781}, {'end': 431.74, 'text': 'And the first thing you want to do is put a new folder inside of it called root.', 'start': 427.799, 'duration': 3.941}, {'end': 439.164, 'text': "And that's going to be your root or like your public HTML folder where your index file will live inside of that root folder.", 'start': 432.061, 'duration': 7.103}, {'end': 446.165, 'text': "And then we'll make another folder next to the root folder and we'll name that source imagery.", 'start': 439.861, 'duration': 6.304}, {'end': 455.47, 'text': "And you can save the imagery that you're working on, maybe all the PNG source for the imagery that you're working on inside of this folder.", 'start': 447.366, 'duration': 8.104}, {'end': 459.913, 'text': "That way you never lose the initial files that you're working with for your graphics and stuff.", 'start': 455.711, 'duration': 4.202}, {'end': 461.414, 'text': 'You can save them all right there.', 'start': 459.933, 'duration': 1.481}, {'end': 466.237, 'text': 'And then your root system will be right here where your index file and everything will live in there.', 'start': 462.255, 'duration': 3.982}, {'end': 472.816, 'text': "okay, you got it, so now let's go to file and export this little sliver for the header.", 'start': 466.812, 'duration': 6.004}, {'end': 476.019, 'text': 'continue the web, continue,', 'start': 472.816, 'duration': 3.203}, {'end': 489.388, 'text': "exit and then I'm gonna save mine as a PNG 32 export and you go into your site folder for your new website and in the root folder where your index file and all your pages are gonna live.", 'start': 476.019, 'duration': 13.369}, {'end': 491.47, 'text': "basically, we're gonna have a new folder.", 'start': 489.388, 'duration': 2.082}, {'end': 493.481, 'text': 'call that style.', 'start': 492.441, 'duration': 1.04}, {'end': 498.863, 'text': "That's going to be all your CSS style sheets and all your style graphics.", 'start': 493.982, 'duration': 4.881}, {'end': 503.805, 'text': "So you double click inside of style now and you're going to save this as header sliver.", 'start': 499.083, 'duration': 4.722}, {'end': 509.387, 'text': "So it'll be header sliver dot PNG save and you can actually close that now.", 'start': 504.325, 'duration': 5.062}, {'end': 517.148, 'text': "Now let's check what the height of these shapes are going to be for the header sliver and that's going to be 90.", 'start': 510.087, 'duration': 7.061}], 'summary': "Create folders 'root' and 'source imagery' for organizing website files. save imagery and css in respective folders. header sliver height: 90.", 'duration': 92.491, 'max_score': 424.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c424657.jpg'}, {'end': 455.47, 'src': 'embed', 'start': 432.061, 'weight': 4, 'content': [{'end': 439.164, 'text': "And that's going to be your root or like your public HTML folder where your index file will live inside of that root folder.", 'start': 432.061, 'duration': 7.103}, {'end': 446.165, 'text': "And then we'll make another folder next to the root folder and we'll name that source imagery.", 'start': 439.861, 'duration': 6.304}, {'end': 455.47, 'text': "And you can save the imagery that you're working on, maybe all the PNG source for the imagery that you're working on inside of this folder.", 'start': 447.366, 'duration': 8.104}], 'summary': "Set up root folder for index file and create 'source imagery' folder for png files.", 'duration': 23.409, 'max_score': 432.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c432061.jpg'}], 'start': 264.261, 'title': 'Vector graphic tools and tutorials', 'summary': 'Covers creating vector graphics for the web using tools like fireworks, photoshop, illustrator, and gimp, emphasizing freedom of choice in selecting a graphics editor, and discusses creating vector graphics in fireworks with tips on color palette selection, creating shapes, and file organization for efficient website development.', 'chapters': [{'end': 303.477, 'start': 264.261, 'title': 'Vector graphics tools and tutorials', 'summary': 'Discusses creating vector graphics for the web, emphasizing the use of different tools like fireworks, photoshop, illustrator, and gimp, and highlights the freedom of choice in selecting a graphics editor.', 'duration': 39.216, 'highlights': ['The importance of using different graphics editors like Fireworks, Photoshop, Illustrator, and GIMP is emphasized, promoting freedom of choice. (Relevance: 5)', 'The availability of video tutorials for creating vector graphics using Fireworks is mentioned, pointing to the YouTube fireworks playlist. (Relevance: 4)', 'Emphasizing the freedom of choice in using any graphics editor that one feels most comfortable with, without pushing any specific Adobe tools. (Relevance: 3)']}, {'end': 663.102, 'start': 303.978, 'title': 'Creating vector graphics in fireworks', 'summary': 'Discusses creating vector graphics in fireworks, with tips on color palette selection, creating shapes, and organizing files into folders for efficient website development.', 'duration': 359.124, 'highlights': ['The chapter discusses creating vector graphics in Fireworks, with tips on color palette selection, creating shapes, and organizing files into folders for efficient website development. The chapter provides insights into creating vector graphics in Fireworks, including tips on color palette selection, creating shapes, and organizing files into folders for efficient website development.', "The graphics are created using shades of white, gray, green, and blue, with the intention to use CSS code to make a sliver repeat throughout the header for efficient loading and space utilization on the user's browser window. The graphics are created using shades of white, gray, green, and blue, with the intention to use CSS code to make a sliver repeat throughout the header for efficient loading and space utilization on the user's browser window.", 'The chapter emphasizes the organization of files into specific folders, including a root folder for the index file, a source imagery folder for saving PNG files, a style folder for CSS style sheets and graphics, and an images folder for storing images. The chapter emphasizes the organization of files into specific folders, including a root folder for the index file, a source imagery folder for saving PNG files, a style folder for CSS style sheets and graphics, and an images folder for storing images.']}], 'duration': 398.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c264261.jpg', 'highlights': ['The importance of using different graphics editors like Fireworks, Photoshop, Illustrator, and GIMP is emphasized, promoting freedom of choice. (Relevance: 5)', 'The availability of video tutorials for creating vector graphics using Fireworks is mentioned, pointing to the YouTube fireworks playlist. (Relevance: 4)', 'The chapter discusses creating vector graphics in Fireworks, with tips on color palette selection, creating shapes, and organizing files into folders for efficient website development. (Relevance: 3)', "The graphics are created using shades of white, gray, green, and blue, with the intention to use CSS code to make a sliver repeat throughout the header for efficient loading and space utilization on the user's browser window.", 'The chapter emphasizes the organization of files into specific folders, including a root folder for the index file, a source imagery folder for saving PNG files, a style folder for CSS style sheets and graphics, and an images folder for storing images.']}, {'end': 1541.339, 'segs': [{'end': 713.413, 'src': 'embed', 'start': 687.177, 'weight': 0, 'content': [{'end': 691.56, 'text': 'And Google search is a really smart search with nice algorithms.', 'start': 687.177, 'duration': 4.383}, {'end': 696.543, 'text': 'It really indexes your site well and pulls the appropriate data out when people search.', 'start': 691.58, 'duration': 4.963}, {'end': 702.366, 'text': 'It works really well on developphp.com, adamcorey.com, anywhere I have it in place.', 'start': 697.043, 'duration': 5.323}, {'end': 703.627, 'text': 'It works really well.', 'start': 702.887, 'duration': 0.74}, {'end': 705.008, 'text': 'I might show you guys how to do that, whatever.', 'start': 703.667, 'duration': 1.341}, {'end': 713.413, 'text': 'And another important aspect of this whole training series is that you have to be on a live server with your website online.', 'start': 705.648, 'duration': 7.765}], 'summary': 'Google search indexes sites well, works on various domains, and requires live server for training.', 'duration': 26.236, 'max_score': 687.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c687177.jpg'}, {'end': 852.721, 'src': 'heatmap', 'start': 749.066, 'weight': 3, 'content': [{'end': 756.087, 'text': "when it comes time to migrate the site from local to the real live server, you're gonna be working on the live server the whole time.", 'start': 749.066, 'duration': 7.021}, {'end': 761.909, 'text': "there won't be any conflicts, no migration issues, okay, and that's why we do that.", 'start': 756.087, 'duration': 5.822}, {'end': 766.15, 'text': "okay, so that takes care of all the work we'll have to do in a graphics editor for now.", 'start': 761.909, 'duration': 4.241}, {'end': 768.685, 'text': 'now you want to open up your code editor.', 'start': 766.15, 'duration': 2.535}, {'end': 772.168, 'text': 'And whichever code editor you choose to use is just fine.', 'start': 769.125, 'duration': 3.043}, {'end': 774.891, 'text': 'I happen to be using Adobe Dreamweaver CS5.', 'start': 772.649, 'duration': 2.242}, {'end': 779.455, 'text': "I don't care what code editor you use, and I don't recommend any over any others.", 'start': 775.111, 'duration': 4.344}, {'end': 784.06, 'text': 'You can use Notepad++, BVEdit, whatever the hell you want to use.', 'start': 779.796, 'duration': 4.264}, {'end': 787.323, 'text': 'Alright, so create a new PHP file.', 'start': 784.76, 'duration': 2.563}, {'end': 790.358, 'text': "And we're going to just save this right off the bat.", 'start': 788.177, 'duration': 2.181}, {'end': 792.84, 'text': 'In your website folder, go to root.', 'start': 790.378, 'duration': 2.462}, {'end': 799.223, 'text': "And right here in the root folder with the images folder and the styles folder, you're going to name this index.", 'start': 793.38, 'duration': 5.843}, {'end': 800.804, 'text': 'This is your home page.', 'start': 799.803, 'duration': 1.001}, {'end': 803.895, 'text': 'So you have index.php ready to go.', 'start': 801.394, 'duration': 2.501}, {'end': 812.178, 'text': "Go ahead and just remove all of that code because if you look at that code, it's using XHTML 1.0 transitional.", 'start': 804.395, 'duration': 7.783}, {'end': 814.758, 'text': "So that's like HTML 4.", 'start': 812.738, 'duration': 2.02}, {'end': 818.84, 'text': "And we're able to use HTML 5 now and everything validate.", 'start': 814.758, 'duration': 4.082}, {'end': 823.361, 'text': 'So we might as well use HTML 5 and get rid of this HTML 4.', 'start': 818.96, 'duration': 4.401}, {'end': 828.543, 'text': 'In order to do that, we can just run to developphp.com.', 'start': 823.361, 'duration': 5.182}, {'end': 832.708, 'text': 'So you go to developphp.com in the HTML section.', 'start': 829.386, 'duration': 3.322}, {'end': 840.173, 'text': 'I have a couple of pages that have a skeleton for an HTML web page before you put any content in it.', 'start': 832.748, 'duration': 7.425}, {'end': 841.834, 'text': "So I'm going to grab that right here.", 'start': 840.473, 'duration': 1.361}, {'end': 846.617, 'text': 'And this is under the HTML primary elements page.', 'start': 842.695, 'duration': 3.922}, {'end': 851.42, 'text': 'So under the HTML primary elements page, just grab that code right there.', 'start': 847.137, 'duration': 4.283}, {'end': 852.721, 'text': 'Control C.', 'start': 851.62, 'duration': 1.101}], 'summary': 'Migrate site to live server without conflicts or migration issues; create new php file and update to html 5.', 'duration': 103.655, 'max_score': 749.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c749066.jpg'}, {'end': 846.617, 'src': 'embed', 'start': 818.96, 'weight': 4, 'content': [{'end': 823.361, 'text': 'So we might as well use HTML 5 and get rid of this HTML 4.', 'start': 818.96, 'duration': 4.401}, {'end': 828.543, 'text': 'In order to do that, we can just run to developphp.com.', 'start': 823.361, 'duration': 5.182}, {'end': 832.708, 'text': 'So you go to developphp.com in the HTML section.', 'start': 829.386, 'duration': 3.322}, {'end': 840.173, 'text': 'I have a couple of pages that have a skeleton for an HTML web page before you put any content in it.', 'start': 832.748, 'duration': 7.425}, {'end': 841.834, 'text': "So I'm going to grab that right here.", 'start': 840.473, 'duration': 1.361}, {'end': 846.617, 'text': 'And this is under the HTML primary elements page.', 'start': 842.695, 'duration': 3.922}], 'summary': 'Transition from html 4 to html 5 using developphp.com for templates.', 'duration': 27.657, 'max_score': 818.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c818960.jpg'}, {'end': 1003.401, 'src': 'heatmap', 'start': 910.062, 'weight': 0.885, 'content': [{'end': 913.922, 'text': 'Open the curly brace, go down, close with the closing curly brace.', 'start': 910.062, 'duration': 3.86}, {'end': 923.104, 'text': 'The first thing we know that it must have a height of 90 pixels because that is the size that our little sliver was.', 'start': 914.462, 'duration': 8.642}, {'end': 926.412, 'text': "And let's make sure that sliver is in there as a background.", 'start': 924.031, 'duration': 2.381}, {'end': 935.016, 'text': 'So background, URL, go to your style folder and header sliver, PNG.', 'start': 926.572, 'duration': 8.444}, {'end': 939.378, 'text': "Put space, repeat, and let's make sure we repeat X.", 'start': 935.296, 'duration': 4.082}, {'end': 942.78, 'text': 'Repeat X is repeat across the horizontal plane.', 'start': 939.378, 'duration': 3.402}, {'end': 947.482, 'text': 'Repeat Y is repeating a graphic on the vertical plane.', 'start': 943.38, 'duration': 4.102}, {'end': 949.107, 'text': 'So we just wanted to make sure.', 'start': 947.927, 'duration': 1.18}, {'end': 952.829, 'text': "It'll do it by default, but we just put this in here to make sure it repeats.", 'start': 949.448, 'duration': 3.381}, {'end': 954.89, 'text': 'It will do it by default, though.', 'start': 953.649, 'duration': 1.241}, {'end': 957.811, 'text': "You really don't even need that there, and it will repeat by itself.", 'start': 954.91, 'duration': 2.901}, {'end': 958.411, 'text': 'All right.', 'start': 958.171, 'duration': 0.24}, {'end': 963.213, 'text': 'so we press Control S and if you want to view this in your favorite browser now,', 'start': 958.411, 'duration': 4.802}, {'end': 967.395, 'text': 'you can look at it and you can see that the header graphics are in place that sliver.', 'start': 963.213, 'duration': 4.182}, {'end': 968.856, 'text': 'Now, we want to make sure.', 'start': 967.915, 'duration': 0.941}, {'end': 974.238, 'text': 'You saw how that space was around the page, that marginal space around my header graphics?', 'start': 968.936, 'duration': 5.302}, {'end': 974.978, 'text': "I don't like that.", 'start': 974.318, 'duration': 0.66}, {'end': 976.959, 'text': "so what I'm going to do is make the body.", 'start': 974.978, 'duration': 1.981}, {'end': 984.527, 'text': "I'm going to target the body element and make it have a margin of 0 pixels all the way around top, right, bottom and left.", 'start': 977.722, 'duration': 6.805}, {'end': 988.19, 'text': "That way when I look at it in the browser now, it's perfect.", 'start': 985.007, 'duration': 3.183}, {'end': 990.511, 'text': 'It goes all the way and it fills all the space there.', 'start': 988.25, 'duration': 2.261}, {'end': 993.914, 'text': 'Now all I have to do is put my little logo in place where I want it.', 'start': 990.952, 'duration': 2.962}, {'end': 997.256, 'text': "We're going to need a new div inside of page top.", 'start': 994.674, 'duration': 2.582}, {'end': 1000.239, 'text': "It's going to be 1, 000 pixels wide.", 'start': 997.837, 'duration': 2.402}, {'end': 1003.401, 'text': "And what will happen is, let's look at this in the browser.", 'start': 1000.919, 'duration': 2.482}], 'summary': 'Set header sliver background with 90px height, remove marginal space, and add 1000px wide div for logo.', 'duration': 93.339, 'max_score': 910.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c910062.jpg'}, {'end': 1064.604, 'src': 'embed', 'start': 1038.525, 'weight': 5, 'content': [{'end': 1044.93, 'text': "And by the way we'll be taking all of this CSS within this style element and we'll be putting it in a .", 'start': 1038.525, 'duration': 6.405}, {'end': 1048.372, 'text': "css style sheet to externalize it when we're done.", 'start': 1044.93, 'duration': 3.442}, {'end': 1055.257, 'text': "So inside of the page top, let's indent with two spaces and then let's put div and close the div.", 'start': 1048.772, 'duration': 6.485}, {'end': 1059.92, 'text': "Let's give it an ID equal to page top wrap.", 'start': 1055.557, 'duration': 4.363}, {'end': 1064.604, 'text': 'So all we need is CSS rule for that page top wrap.', 'start': 1060.381, 'duration': 4.223}], 'summary': 'Transcript: moving css to external stylesheet for page top wrap.', 'duration': 26.079, 'max_score': 1038.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1038525.jpg'}, {'end': 1156.414, 'src': 'heatmap', 'start': 1123.001, 'weight': 0.725, 'content': [{'end': 1128.205, 'text': "And let's give it a height of 90 pixels, just like the page top div.", 'start': 1123.001, 'duration': 5.204}, {'end': 1138.12, 'text': "Now if we go to our browser and we refresh the page, you can see it's a div 1, 000 pixels wide directly in the center of my header graphics.", 'start': 1128.752, 'duration': 9.368}, {'end': 1142.843, 'text': 'And I want my logo right about here and I want my search over here,', 'start': 1138.4, 'duration': 4.443}, {'end': 1149.729, 'text': "login links here and I'm going to want my main menu links to be next to my logo here on this bottom bar.", 'start': 1142.843, 'duration': 6.886}, {'end': 1156.414, 'text': "So I can remove that dashed line because I just wanted to show you guys how it's going to show up there or where it's going to be positioned.", 'start': 1150.009, 'duration': 6.405}], 'summary': 'Div is 1000px wide, centered in the header, with specific placement for logo, search, and login links.', 'duration': 33.413, 'max_score': 1123.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1123001.jpg'}, {'end': 1490.799, 'src': 'heatmap', 'start': 1450.03, 'weight': 0.792, 'content': [{'end': 1458.004, 'text': 'Now since our wrap is 1, 000 pixels wide, And the logo within it is 108 pixels wide.', 'start': 1450.03, 'duration': 7.974}, {'end': 1464.391, 'text': 'This width could be 892, I think.', 'start': 1458.524, 'duration': 5.867}, {'end': 1469.396, 'text': "Now let's just give it a background color temporarily just to see where we're working.", 'start': 1465.052, 'duration': 4.344}, {'end': 1471.619, 'text': "Let's give it this light gray.", 'start': 1469.416, 'duration': 2.203}, {'end': 1473.541, 'text': "Now let's view this in the browser.", 'start': 1471.979, 'duration': 1.562}, {'end': 1476.106, 'text': "Refresh That's just about right.", 'start': 1473.881, 'duration': 2.225}, {'end': 1482.171, 'text': "Now I know everything that I put in there will be just right, because I'm going to have two divs inside of this container,", 'start': 1476.346, 'duration': 5.825}, {'end': 1484.874, 'text': 'that little gray container there, that new one we just put in.', 'start': 1482.171, 'duration': 2.703}, {'end': 1490.799, 'text': 'One div is going to rest in that top bar, and the other div is going to rest right under it.', 'start': 1485.714, 'duration': 5.085}], 'summary': 'Web design: container width 1000px, logo width 108px, background color light gray, 2 divs inside container.', 'duration': 40.769, 'max_score': 1450.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1450030.jpg'}], 'start': 664.377, 'title': 'Creating custom search engine and setting up live server for website development', 'summary': 'Explains creating custom search engine using google, with smart search and effective site indexing, along with setting up live server for website development to avoid conflicts and migration issues, providing guidance on html 5 and css.', 'chapters': [{'end': 705.008, 'start': 664.377, 'title': 'Creating custom search engine', 'summary': 'Explains how to create custom search engine using google, highlighting its smart search with nice algorithms, effective site indexing, and no programming required.', 'duration': 40.631, 'highlights': ['Google search is a really smart search with nice algorithms.', 'It really indexes your site well and pulls the appropriate data out when people search.', 'It works really well on developphp.com, adamcorey.com, anywhere I have it in place.']}, {'end': 1541.339, 'start': 705.648, 'title': 'Setting up a live server for website development', 'summary': 'Emphasizes the importance of working directly online on the live server for website development, avoiding conflicts and migration issues, and provides detailed guidance on creating the home page layout using html 5 and css.', 'duration': 835.691, 'highlights': ['Emphasize working directly online on the live server for website development The chapter stresses the importance of working on the live server to avoid conflicts and migration issues when migrating the site from local to the real live server.', 'Guidance on creating the home page layout using HTML 5 Detailed guidance is provided on creating the home page layout using HTML 5, including obtaining code from developphp.com and incorporating it into the PHP file.', 'Guidance on using CSS to create the home page layout Step-by-step instructions are given on using CSS to create the home page layout, including setting the height and background of page elements and targeting divs with CSS properties.']}], 'duration': 876.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c664377.jpg', 'highlights': ['Google search is a really smart search with nice algorithms.', 'It really indexes your site well and pulls the appropriate data out when people search.', 'It works really well on developphp.com, adamcorey.com, anywhere I have it in place.', 'Emphasize working directly online on the live server for website development The chapter stresses the importance of working on the live server to avoid conflicts and migration issues when migrating the site from local to the real live server.', 'Guidance on creating the home page layout using HTML 5 Detailed guidance is provided on creating the home page layout using HTML 5, including obtaining code from developphp.com and incorporating it into the PHP file.', 'Guidance on using CSS to create the home page layout Step-by-step instructions are given on using CSS to create the home page layout, including setting the height and background of page elements and targeting divs with CSS properties.']}, {'end': 2221.772, 'segs': [{'end': 1772.97, 'src': 'embed', 'start': 1738.164, 'weight': 1, 'content': [{'end': 1740.045, 'text': 'You just put the address right there, any page.', 'start': 1738.164, 'duration': 1.881}, {'end': 1748.33, 'text': "Now in order to push all of those links down without attempting to give them padding or anything like that silly, I'm just going to put a div.", 'start': 1740.745, 'duration': 7.585}, {'end': 1754.48, 'text': 'to wrap around those three links, indent them into that div.', 'start': 1749.798, 'duration': 4.682}, {'end': 1763.545, 'text': 'And then I can use this sort of rule, menu tool, div.', 'start': 1755.621, 'duration': 7.924}, {'end': 1771.989, 'text': "And let's give that a border of a bright color, dashed line.", 'start': 1766.306, 'duration': 5.683}, {'end': 1772.97, 'text': "Let's give it a height.", 'start': 1772.009, 'duration': 0.961}], 'summary': 'Adding a div to wrap the three links and applying styling with a border and height.', 'duration': 34.806, 'max_score': 1738.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1738164.jpg'}, {'end': 1931.344, 'src': 'embed', 'start': 1875.526, 'weight': 2, 'content': [{'end': 1883.712, 'text': 'So to get marginal space between those and not padding to separate them like that, you can just make them all float and be block.', 'start': 1875.526, 'duration': 8.186}, {'end': 1889.476, 'text': 'So you can say display, block, which makes them a block level display element.', 'start': 1883.872, 'duration': 5.604}, {'end': 1891.377, 'text': 'And then you can float them.', 'start': 1890.057, 'duration': 1.32}, {'end': 1894.98, 'text': 'Left, float, left.', 'start': 1892.478, 'duration': 2.502}, {'end': 1900.501, 'text': 'And then all you do is remove this padding and just make it margin space.', 'start': 1895.598, 'duration': 4.903}, {'end': 1906.484, 'text': 'And top bottom 0 pixels, left right 24 pixels.', 'start': 1901.881, 'duration': 4.603}, {'end': 1914.588, 'text': "So now if you refresh, you'll have pretty much the same thing, but they won't be extending the links into area where they're not residing.", 'start': 1906.964, 'duration': 7.624}, {'end': 1918.39, 'text': "The links is just the word or the button, whatever you're using.", 'start': 1915.128, 'duration': 3.262}, {'end': 1926.92, 'text': "You can make these turn different colors when the user's mouse goes over it as well by just giving the A element a hover state.", 'start': 1919.295, 'duration': 7.625}, {'end': 1929.242, 'text': 'So you go A colon hover.', 'start': 1927.181, 'duration': 2.061}, {'end': 1931.344, 'text': 'And then you can change.', 'start': 1930.063, 'duration': 1.281}], 'summary': 'Using display:block and float:left creates margin space and prevents link extension.', 'duration': 55.818, 'max_score': 1875.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1875526.jpg'}, {'end': 2016.208, 'src': 'embed', 'start': 1958.655, 'weight': 0, 'content': [{'end': 1959.175, 'text': 'Sorry about that.', 'start': 1958.655, 'duration': 0.52}, {'end': 1960.916, 'text': 'Yeah, that looks good to me.', 'start': 1960.076, 'duration': 0.84}, {'end': 1966.82, 'text': "And at this point, you'll want to choose your font now that you have text on the page.", 'start': 1961.657, 'duration': 5.163}, {'end': 1969.241, 'text': "So let's go to our body element.", 'start': 1967.42, 'duration': 1.821}, {'end': 1973.764, 'text': 'And you can target the body element if you want and just choose a font family.', 'start': 1969.362, 'duration': 4.402}, {'end': 1975.746, 'text': "And I'll choose Tahoma.", 'start': 1974.545, 'duration': 1.201}, {'end': 1980.956, 'text': 'And a default font size for all the regular fonts on the page.', 'start': 1976.766, 'duration': 4.19}, {'end': 1984.478, 'text': "Let's make it, I guess 14 would be good.", 'start': 1981.476, 'duration': 3.002}, {'end': 1989.381, 'text': "You can make it whatever size you want and then refresh and you'll see how everything looks.", 'start': 1984.738, 'duration': 4.643}, {'end': 1997.986, 'text': 'And you can change the size, the fonts on these independently using this rule right here.', 'start': 1989.881, 'duration': 8.105}, {'end': 2004.33, 'text': "You can just put an extra property of font size in that rule and you'll affect just those menu items.", 'start': 1999.027, 'duration': 5.303}, {'end': 2008.233, 'text': "Okay, now let's go into the menu one div.", 'start': 2004.931, 'duration': 3.302}, {'end': 2016.208, 'text': "And let's also give that the inner structure that this menu 2 has.", 'start': 2009.284, 'duration': 6.924}], 'summary': 'Choose font tahoma, size 14 for body text, customize menu fonts independently.', 'duration': 57.553, 'max_score': 1958.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1958655.jpg'}, {'end': 2228.887, 'src': 'embed', 'start': 2198.412, 'weight': 6, 'content': [{'end': 2200.493, 'text': 'So this is what I started with in Fireworks.', 'start': 2198.412, 'duration': 2.081}, {'end': 2204.776, 'text': "And this is how it's translated to the web using code, all custom code.", 'start': 2200.773, 'duration': 4.003}, {'end': 2213.304, 'text': "We're not using any code that fireworks outputs, which is using fireworks for make our separated graphics,", 'start': 2205.277, 'duration': 8.027}, {'end': 2218.528, 'text': "and then we're using CSS to position everything correctly, and it's all hands-on custom code.", 'start': 2213.304, 'duration': 5.224}, {'end': 2221.772, 'text': "that way you can make sure it all validates and it's all proper.", 'start': 2218.528, 'duration': 3.244}, {'end': 2223.813, 'text': 'all right now, up in the head element.', 'start': 2221.772, 'duration': 2.041}, {'end': 2228.887, 'text': "let's go ahead and link to our fav icon, And you know what the fav icon is.", 'start': 2223.813, 'duration': 5.074}], 'summary': 'Translating fireworks design to web using custom code, css for positioning, ensuring validation and proper display.', 'duration': 30.475, 'max_score': 2198.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2198412.jpg'}], 'start': 1541.639, 'title': 'Styling divs and custom web design', 'summary': 'Covers styling two divs using css, including borders, colors, padding, and margins, with a focus on creating a navigation bar. it also includes custom web design and styling techniques such as hover effects, font styling, and menu structuring using css.', 'chapters': [{'end': 1906.484, 'start': 1541.639, 'title': 'Styling two divs with css', 'summary': 'Covers the process of styling two divs using css, including setting borders, colors, and adjusting padding and margins to achieve the desired layout, with specific focus on creating a navigation bar.', 'duration': 364.845, 'highlights': ['Setting borders, colors, and adjusting padding and margins to achieve the desired layout The speaker discusses setting borders, colors, and adjusting padding and margins to achieve the desired layout for the two divs, emphasizing the use of a dashed line border and specifying pixel values for padding and margin.', 'Creating a navigation bar with specific styling for menu items The chapter focuses on creating a navigation bar with specific styling for menu items, including using unique identifiers for different divs, specifying the height and color of the border, and setting the text color and text decoration for the menu items.', 'Utilizing CSS to modify the display and float properties of elements The speaker demonstrates the use of CSS to modify the display and float properties of elements, specifically making the elements block level display and floating them left, while adjusting padding and margin to control the layout.']}, {'end': 2221.772, 'start': 1906.964, 'title': 'Custom web design and styling', 'summary': 'Covers custom web design and styling techniques including creating hover effects for links, setting font families and sizes, and structuring menu items using css.', 'duration': 314.808, 'highlights': ["Creating hover effects for links The A element can be given a hover state to change colors when the user's mouse goes over it.", 'Setting font families and sizes Targeting the body element to choose a font family and default font size for regular fonts on the page.', 'Structuring menu items using CSS Structuring menu items within divs using custom CSS, including setting borders, padding, and text alignment.', 'Custom web design using CSS and Fireworks Using Fireworks for creating separated graphics and translating them to the web using custom CSS code.']}], 'duration': 680.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c1541639.jpg', 'highlights': ['Creating a navigation bar with specific styling for menu items The chapter focuses on creating a navigation bar with specific styling for menu items, including using unique identifiers for different divs, specifying the height and color of the border, and setting the text color and text decoration for the menu items.', 'Setting borders, colors, and adjusting padding and margins to achieve the desired layout The speaker discusses setting borders, colors, and adjusting padding and margins to achieve the desired layout for the two divs, emphasizing the use of a dashed line border and specifying pixel values for padding and margin.', 'Utilizing CSS to modify the display and float properties of elements The speaker demonstrates the use of CSS to modify the display and float properties of elements, specifically making the elements block level display and floating them left, while adjusting padding and margin to control the layout.', "Creating hover effects for links The A element can be given a hover state to change colors when the user's mouse goes over it.", 'Setting font families and sizes Targeting the body element to choose a font family and default font size for regular fonts on the page.', 'Structuring menu items using CSS Structuring menu items within divs using custom CSS, including setting borders, padding, and text alignment.', 'Custom web design using CSS and Fireworks Using Fireworks for creating separated graphics and translating them to the web using custom CSS code.']}, {'end': 2463.754, 'segs': [{'end': 2279.063, 'src': 'heatmap', 'start': 2221.772, 'weight': 1, 'content': [{'end': 2223.813, 'text': 'all right now, up in the head element.', 'start': 2221.772, 'duration': 2.041}, {'end': 2228.887, 'text': "let's go ahead and link to our fav icon, And you know what the fav icon is.", 'start': 2223.813, 'duration': 5.074}, {'end': 2232.769, 'text': "That's the little graphic you get up in the browser address bar and stuff like that.", 'start': 2228.907, 'duration': 3.862}, {'end': 2235.67, 'text': "Okay, now let's start to modulate this template.", 'start': 2233.049, 'duration': 2.621}, {'end': 2244.174, 'text': "So what we'll do is add another link element to our style sheet, which will be in our style folder, and it'll be named style.css.", 'start': 2235.73, 'duration': 8.444}, {'end': 2247.716, 'text': 'So all we have to do is go and create that file now.', 'start': 2244.734, 'duration': 2.982}, {'end': 2250.437, 'text': 'So go to New, CSS.', 'start': 2248.116, 'duration': 2.321}, {'end': 2253.999, 'text': 'You can get rid of all that.', 'start': 2253.038, 'duration': 0.961}, {'end': 2256.04, 'text': 'Press Control-S to save it.', 'start': 2254.299, 'duration': 1.741}, {'end': 2259.109, 'text': "and you can see we're in our folder system here.", 'start': 2256.907, 'duration': 2.202}, {'end': 2264.192, 'text': 'go to style inside of the style folder, style.css.', 'start': 2259.109, 'duration': 5.083}, {'end': 2265.914, 'text': "that'll be the name of it.", 'start': 2264.192, 'duration': 1.722}, {'end': 2267.975, 'text': 'so you can see we have style.css here.', 'start': 2265.914, 'duration': 2.061}, {'end': 2275.381, 'text': "now all we have to do is grab all of our css that's within our style element, control x and remove it,", 'start': 2267.975, 'duration': 7.406}, {'end': 2279.063, 'text': 'and you can also backspace that style element if you want.', 'start': 2275.381, 'duration': 3.682}], 'summary': 'Modulating the template by adding a link to style.css in the style folder.', 'duration': 46.203, 'max_score': 2221.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2221772.jpg'}, {'end': 2337.181, 'src': 'embed', 'start': 2315.597, 'weight': 0, 'content': [{'end': 2326.084, 'text': "now. if we make another page or fifty or a hundred thousand different other pages, we don't have to change our style on all of those pages in the head tag.", 'start': 2315.597, 'duration': 10.487}, {'end': 2335.6, 'text': 'we can just change the style inside the style sheet And all of our thousands of pages will reflect those changes that we make in one little place.', 'start': 2326.084, 'duration': 9.516}, {'end': 2337.181, 'text': "Okay, that's why it's good to do that.", 'start': 2335.88, 'duration': 1.301}], 'summary': 'Using a style sheet allows easy updating across thousands of pages.', 'duration': 21.584, 'max_score': 2315.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2315597.jpg'}, {'end': 2463.754, 'src': 'embed', 'start': 2385.199, 'weight': 3, 'content': [{'end': 2388.322, 'text': 'This document was successfully checked as HTML5.', 'start': 2385.199, 'duration': 3.123}, {'end': 2392.665, 'text': "That means everything is clean and as it should be within the file's code so far.", 'start': 2388.782, 'duration': 3.883}, {'end': 2395.067, 'text': 'The doc type is HTML5.', 'start': 2393.186, 'duration': 1.881}, {'end': 2397.029, 'text': 'Our encoding type was detected.', 'start': 2395.448, 'duration': 1.581}, {'end': 2402.314, 'text': 'So you have to have an encoding type and your doc type to make sure it all validates as HTML5.', 'start': 2397.369, 'duration': 4.945}, {'end': 2411.061, 'text': "And you can also just go directly to index.php if you want to make sure it's targeting the right file that you want to check and revalidate.", 'start': 2402.554, 'duration': 8.507}, {'end': 2413.012, 'text': "You can see everything's good.", 'start': 2412.011, 'duration': 1.001}, {'end': 2415.154, 'text': "Let's check a CSS validation.", 'start': 2413.372, 'duration': 1.782}, {'end': 2420.298, 'text': 'Congratulations, no errors found in our CSS so far.', 'start': 2416.995, 'duration': 3.303}, {'end': 2420.818, 'text': "That's great.", 'start': 2420.338, 'duration': 0.48}, {'end': 2422.099, 'text': "So we're doing really good.", 'start': 2420.898, 'duration': 1.201}, {'end': 2430.366, 'text': "So now when you finish your site, or as you're working on it, you can have in your footer, you can have a link to check the page's validation.", 'start': 2423.48, 'duration': 6.886}, {'end': 2433.548, 'text': 'That way, people, visitors, come to your site.', 'start': 2431.267, 'duration': 2.281}, {'end': 2436.03, 'text': "they'll know that your page is validated, okay?", 'start': 2433.548, 'duration': 2.482}, {'end': 2441.515, 'text': "Okay, now I'm going to use HTML and CSS pretty much the same way I did for the header.", 'start': 2436.371, 'duration': 5.144}, {'end': 2445.379, 'text': 'just to customize my little page bottom footer.', 'start': 2442.196, 'duration': 3.183}, {'end': 2449.182, 'text': "And I'm not going to show that on video because I feel it'll be redundant.", 'start': 2445.939, 'duration': 3.243}, {'end': 2457.428, 'text': "You guys should have a good grasp on how HTML and CSS works if you're venturing into building a social network for Christ's sake.", 'start': 2449.682, 'duration': 7.746}, {'end': 2463.754, 'text': "You better have a good grasp on basic HTML and CSS if you're trying to build a social network or I'll punch you in the face.", 'start': 2457.709, 'duration': 6.045}], 'summary': 'Html and css code successfully validated, no errors found. visitors can check page validation through a footer link.', 'duration': 78.555, 'max_score': 2385.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2385199.jpg'}], 'start': 2221.772, 'title': 'Creating and validating website elements', 'summary': 'Discusses linking a fav icon and modulating css, enabling centralized style changes, and validating site design for html5, emphasizing the importance of validation for visitors and focusing on css and html validation.', 'chapters': [{'end': 2337.181, 'start': 2221.772, 'title': 'Linking fav icon and modulating css', 'summary': 'Discusses linking a fav icon in the head element and modulating the template by creating a style.css file, enabling centralized style changes that reflect across all pages.', 'duration': 115.409, 'highlights': ['Creating a centralized style sheet allows changes to reflect across all pages By linking to a style sheet, changes made in one place reflect across all pages, saving time and effort in managing multiple pages.', 'Linking a fav icon in the head element for browser display The process involves linking a fav icon in the head element to display a graphic in the browser address bar, enhancing user experience.', 'Creating a style.css file to modulate the template The process involves creating a style.css file to modulate the template, allowing for organized management of CSS and facilitating centralized style changes.']}, {'end': 2463.754, 'start': 2337.621, 'title': 'Validating design and layout for html5', 'summary': 'Discusses the process of putting the site design online, ensuring it passes html5 validation, and the importance of having a validated site for visitors, with a focus on css and html validation.', 'duration': 126.133, 'highlights': ["The document was successfully checked as HTML5, ensuring the code's cleanliness and compliance with HTML5 standards.", 'CSS validation was also successful, with no errors found, indicating a well-structured stylesheet.', 'Emphasizing the importance of having a validated site for visitors to know the page is validated, creating a link in the footer for easy access to validation checks.', 'Highlighting the significance of having a good grasp on basic HTML and CSS when venturing into building a social network.']}], 'duration': 241.982, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2221772.jpg', 'highlights': ['Creating a centralized style sheet allows changes to reflect across all pages', 'Linking a fav icon in the head element for browser display', 'Creating a style.css file to modulate the template', "The document was successfully checked as HTML5, ensuring the code's cleanliness and compliance with HTML5 standards", 'CSS validation was also successful, with no errors found, indicating a well-structured stylesheet', 'Emphasizing the importance of having a validated site for visitors to know the page is validated, creating a link in the footer for easy access to validation checks', 'Highlighting the significance of having a good grasp on basic HTML and CSS when venturing into building a social network']}, {'end': 3035.861, 'segs': [{'end': 2682.358, 'src': 'embed', 'start': 2636.196, 'weight': 1, 'content': [{'end': 2639.378, 'text': "you don't want to have to change it in all 50 or 100 pages.", 'start': 2636.196, 'duration': 3.182}, {'end': 2650.506, 'text': 'So what you can do to help you is use a PHP template which can just really basically hold all of the HTML code that you want it to,', 'start': 2639.858, 'duration': 10.648}, {'end': 2651.607, 'text': 'or whatever code you want.', 'start': 2650.506, 'duration': 1.101}, {'end': 2653.208, 'text': 'You can have PHP in here as well.', 'start': 2651.627, 'duration': 1.581}, {'end': 2663.049, 'text': 'But now, if you go to your index.php and you run it in your favorite browser locally, I turned PHP off just to demonstrate this on my local machine.', 'start': 2654.226, 'duration': 8.823}, {'end': 2665.35, 'text': 'You see? I get nothing.', 'start': 2663.989, 'duration': 1.361}, {'end': 2673.833, 'text': "So you can't really test your design locally, but you can if you're using Dreamweaver by going into design view.", 'start': 2666.01, 'duration': 7.823}, {'end': 2682.358, 'text': 'What you can do is put this whole thing online along with template page top.php and see what happens.', 'start': 2675.251, 'duration': 7.107}], 'summary': 'Use php template to streamline html code, enabling easier testing and online deployment.', 'duration': 46.162, 'max_score': 2636.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2636196.jpg'}, {'end': 3001.8, 'src': 'embed', 'start': 2974.329, 'weight': 0, 'content': [{'end': 2978.051, 'text': "So if it's going to be a PHP driven website and have PHP script in it,", 'start': 2974.329, 'duration': 3.722}, {'end': 2981.692, 'text': 'you might as well use some includes like this to make yourself some handy templates.', 'start': 2978.051, 'duration': 3.641}, {'end': 2984.293, 'text': "That way you don't have to change things in multiple files.", 'start': 2981.792, 'duration': 2.501}, {'end': 2987.575, 'text': "OK So I think in part two, we'll do just that.", 'start': 2984.773, 'duration': 2.802}, {'end': 2994.037, 'text': "We'll create a sign up page, a registration page using this template.", 'start': 2987.655, 'duration': 6.382}, {'end': 3001.8, 'text': "And then we'll just put a form within the page middle section that people can use to register their credentials to the site.", 'start': 2994.537, 'duration': 7.263}], 'summary': 'Use php includes for handy templates to create a sign-up page with a registration form.', 'duration': 27.471, 'max_score': 2974.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2974329.jpg'}], 'start': 2464.254, 'title': 'Php website design and management', 'summary': 'Covers enhancing website design with php, including setting div heights and creating templates, emphasizing the need for local php. it also discusses using php templates for efficient website management, allowing easy updates across pages, creating a lean code structure, and enabling dynamic website creation.', 'chapters': [{'end': 2611.341, 'start': 2464.254, 'title': 'Php website design enhancement', 'summary': 'Discusses enhancing website design using php, including setting div heights and creating php templates, emphasizing the need for php to be running locally for proper display.', 'duration': 147.087, 'highlights': ['The chapter discusses enhancing website design using PHP, including setting div heights and creating PHP templates.', 'The page middle div is temporarily set to a height of 900 pixels due to the lack of content.', "Creating a new PHP file named 'template_page_top.php' next to 'index.php' and using the 'include_once' function to include the file in 'index.php'.", 'Emphasizing the need for PHP to be running locally for proper display in the browser.']}, {'end': 3035.861, 'start': 2612.101, 'title': 'Using php templates for efficient website management', 'summary': 'Explains the use of php templates to efficiently manage website content, allowing for easy updates across multiple pages, creating a lean and organized code structure, and enabling dynamic website creation.', 'duration': 423.76, 'highlights': ['Using PHP templates enables easy updates across multiple pages, reducing the need to change content individually, and creating a lean code structure. PHP templates allow for easy updates across multiple pages, reducing the need to change content individually, and creating a lean code structure.', 'Demonstrating the use of PHP includes to set up a dynamic website, allowing for easy differentiation of pages by changing the page middle content. Demonstrates the use of PHP includes to set up a dynamic website, allowing for easy differentiation of pages by changing the page middle content.', 'Planning to create a sign-up page and a registration page using the PHP template method, enhancing efficiency in website development. Planning to create a sign-up page and a registration page using the PHP template method, enhancing efficiency in website development.']}], 'duration': 571.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UaWN7gObv-c/pics/UaWN7gObv-c2464254.jpg', 'highlights': ['The chapter discusses enhancing website design using PHP, including setting div heights and creating PHP templates.', 'Emphasizing the need for PHP to be running locally for proper display in the browser.', 'Using PHP templates enables easy updates across multiple pages, reducing the need to change content individually, and creating a lean code structure.', 'Demonstrating the use of PHP includes to set up a dynamic website, allowing for easy differentiation of pages by changing the page middle content.', 'Planning to create a sign-up page and a registration page using the PHP template method, enhancing efficiency in website development.']}], 'highlights': ['Covering highly requested features such as friend system, conversation system, notification system, photo gallery system, and block member system for a social site.', 'The series will move faster than the last social community series, adopting HTML5, CSS3, and MySQLi for better database performance.', 'Transition to using MySQLi instead of MySQL for improved database performance in scripts.', 'The chapter will cover the production of major applications, starting with HTML5 plus PHP website template design and construction, ensuring 100% validation throughout production.', 'Providing foundations for building custom applications and creating a unique social adventure for users.', 'The importance of using different graphics editors like Fireworks, Photoshop, Illustrator, and GIMP is emphasized, promoting freedom of choice.', 'The availability of video tutorials for creating vector graphics using Fireworks is mentioned, pointing to the YouTube fireworks playlist.', 'The chapter discusses creating vector graphics in Fireworks, with tips on color palette selection, creating shapes, and organizing files into folders for efficient website development.', 'Emphasize working directly online on the live server for website development The chapter stresses the importance of working on the live server to avoid conflicts and migration issues when migrating the site from local to the real live server.', 'Guidance on creating the home page layout using HTML 5 Detailed guidance is provided on creating the home page layout using HTML 5, including obtaining code from developphp.com and incorporating it into the PHP file.', 'Creating a navigation bar with specific styling for menu items The chapter focuses on creating a navigation bar with specific styling for menu items, including using unique identifiers for different divs, specifying the height and color of the border, and setting the text color and text decoration for the menu items.', 'Creating a centralized style sheet allows changes to reflect across all pages', 'Linking a fav icon in the head element for browser display', "The document was successfully checked as HTML5, ensuring the code's cleanliness and compliance with HTML5 standards", 'Emphasizing the importance of having a validated site for visitors to know the page is validated, creating a link in the footer for easy access to validation checks', 'The chapter discusses enhancing website design using PHP, including setting div heights and creating PHP templates.', 'Emphasizing the need for PHP to be running locally for proper display in the browser.', 'Using PHP templates enables easy updates across multiple pages, reducing the need to change content individually, and creating a lean code structure.', 'Demonstrating the use of PHP includes to set up a dynamic website, allowing for easy differentiation of pages by changing the page middle content.', 'Planning to create a sign-up page and a registration page using the PHP template method, enhancing efficiency in website development.']}