title
Contact Form HTML Tutorial: How To Create Simple Contact Form

description
Today I will teach you how to create a simple contact form in HTML5 and CSS3 that you can download for free. Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore today’s video will focus on how to create, but mainly how to style, your contact form using CSS3. There is not much HTML5 in this video tutorial, unfortunately, as the contact form is built with code available in previous versions of HTML, but you can use today’s tutorial as a way to reinforce many of the things we learned together in the previous tutorials. Here is the original article with download files, links and live demo - http://www.1stwebdesigner.com/contact-form-html-php/ You will learn: - the basics of CSS3 styling - how to create an HTML form - how to create an elegant CSS3 contact form To make form functional you will need to add PHP to it, here is tutorial how to do it - http://www.1stwebdesigner.com/custom-... ----- If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site - 100% Responsive & Flat - http://rockingcode.com/ You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website. We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

detail
{'title': 'Contact Form HTML Tutorial: How To Create Simple Contact Form', 'heatmap': [{'end': 571.486, 'start': 539.226, 'weight': 0.717}], 'summary': 'This tutorial series covers css 3 and html 4.0.1/5 contact form styling, web page element styling, and css3 effects, emphasizing design, user experience, and code efficiency with practical demonstrations.', 'chapters': [{'end': 168.123, 'segs': [{'end': 129.584, 'src': 'embed', 'start': 14.366, 'weight': 0, 'content': [{'end': 23.089, 'text': "hi guys, this is Christian from first web designer, and I'm here again with a new video tutorial for you on HTML 5 or CSS 3,", 'start': 14.366, 'duration': 8.723}, {'end': 35.172, 'text': "and this time it's mostly a CSS 3 tutorial, because we're gonna work with HTML 4, 0, 1 and we're gonna create what you can see here on my screen,", 'start': 23.089, 'duration': 12.083}, {'end': 39.453, 'text': "which is this contact form, and it's not functional.", 'start': 35.172, 'duration': 4.281}, {'end': 52.236, 'text': "it's not something that you can use right away, but what I want to teach you about is how to code or how to style a contact form,", 'start': 39.453, 'duration': 12.783}, {'end': 59.637, 'text': 'because there are many plugins out there for WordPress or Joomla or whatever content management system you use.', 'start': 52.236, 'duration': 7.401}, {'end': 67.679, 'text': 'there are also many PHP plugins you can find, and they all are functional and they work as they should,', 'start': 59.637, 'duration': 8.042}, {'end': 69.899, 'text': "but they don't look as good as you would like them to.", 'start': 67.679, 'duration': 2.22}, {'end': 78.604, 'text': 'So in this tutorial I will teach you how to style a contact form and I already have the code here,', 'start': 70.459, 'duration': 8.145}, {'end': 85.748, 'text': "but I'm going to delete it and the same in style CSS.", 'start': 78.604, 'duration': 7.144}, {'end': 94.834, 'text': "I'm going to delete the CSS as well and we go back to HTML as you can see it's nothing here anymore if we refresh it.", 'start': 85.768, 'duration': 9.066}, {'end': 114.642, 'text': "and we're gonna start coding, as you already learned in the previous tutorials with me, with creating this, this frame you can say of HTML head,", 'start': 95.976, 'duration': 18.666}, {'end': 118.844, 'text': 'and then we close the head and then we have body and we close the body.', 'start': 114.642, 'duration': 4.202}, {'end': 120.384, 'text': 'this is basic.', 'start': 118.844, 'duration': 1.54}, {'end': 125.419, 'text': "and now we're gonna start working on the header, where you add a title.", 'start': 120.384, 'duration': 5.035}, {'end': 129.584, 'text': "we want to add a title, let's say css3 contact form.", 'start': 125.419, 'duration': 4.165}], 'summary': 'Css 3 tutorial to style a contact form using html 4, 0, 1, emphasizing on visual aesthetics over functionality.', 'duration': 115.218, 'max_score': 14.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM14366.jpg'}], 'start': 14.366, 'title': 'Css 3 contact form tutorial', 'summary': 'Covers a css 3 tutorial to style a contact form in html, emphasizing the importance of design over functionality and the need to code or style a contact form for better aesthetics.', 'chapters': [{'end': 168.123, 'start': 14.366, 'title': 'Css 3 contact form tutorial', 'summary': 'Covers a css 3 tutorial to style a contact form in html, emphasizing the importance of design over functionality and the need to code or style a contact form for better aesthetics.', 'duration': 153.757, 'highlights': ['The tutorial focuses on styling a contact form in HTML using CSS 3, highlighting the importance of design over functionality in web development.', 'The speaker emphasizes the need to code or style a contact form for better aesthetics, as existing plugins for content management systems may lack the desired visual appeal.', 'The speaker demonstrates the process of deleting existing HTML and CSS code to start from scratch, providing a hands-on approach to learning web design.', 'The tutorial includes step-by-step guidance on creating the HTML framework, adding a title, setting meta charset, and linking the stylesheet for styling.', 'The chapter aims to teach viewers how to enhance the visual appeal of contact forms, offering practical knowledge for web designers and developers.']}], 'duration': 153.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM14366.jpg', 'highlights': ['The tutorial focuses on styling a contact form in HTML using CSS 3, highlighting the importance of design over functionality in web development.', 'The speaker emphasizes the need to code or style a contact form for better aesthetics, as existing plugins for content management systems may lack the desired visual appeal.', 'The tutorial includes step-by-step guidance on creating the HTML framework, adding a title, setting meta charset, and linking the stylesheet for styling.', 'The chapter aims to teach viewers how to enhance the visual appeal of contact forms, offering practical knowledge for web designers and developers.', 'The speaker demonstrates the process of deleting existing HTML and CSS code to start from scratch, providing a hands-on approach to learning web design.']}, {'end': 571.486, 'segs': [{'end': 192.104, 'src': 'embed', 'start': 168.123, 'weight': 0, 'content': [{'end': 181.938, 'text': 'we want to add a contact form title, which we already have here, and we want to start working on the contact form and HTML 4.0.1.', 'start': 168.123, 'duration': 13.815}, {'end': 192.104, 'text': "as I told you, that's what we're going to work with today has some different variables which we're going to use today, like form or input,", 'start': 181.938, 'duration': 10.166}], 'summary': 'Adding a contact form title, working on html 4.0.1, and using different variables like form and input.', 'duration': 23.981, 'max_score': 168.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM168123.jpg'}, {'end': 571.486, 'src': 'heatmap', 'start': 539.226, 'weight': 1, 'content': [{'end': 543.108, 'text': 'Input type equals submit is a predefined button.', 'start': 539.226, 'duration': 3.882}, {'end': 555.96, 'text': "a html5 variable which will add a button and we're going to give it a value of send.", 'start': 544.955, 'duration': 11.005}, {'end': 560.341, 'text': 'and now you see, it adds this button and we have the html5 already.', 'start': 555.96, 'duration': 4.381}, {'end': 564.643, 'text': "it's that simple to code a contact form in html5.", 'start': 560.341, 'duration': 4.302}, {'end': 571.486, 'text': 'now we move to the style and we want to start with the body and make this contact form look nice.', 'start': 564.643, 'duration': 6.843}], 'summary': 'Creating a contact form in html5 with a submit button and styling the form to look nice.', 'duration': 32.26, 'max_score': 539.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM539226.jpg'}], 'start': 168.123, 'title': 'Contact form in html 4.0.1 and html5', 'summary': 'Covers working with contact form in html 4.0.1, explaining form, input, label, text area, and creating an html5 contact form with input types, labels, and the advantage of text area for user experience.', 'chapters': [{'end': 220.635, 'start': 168.123, 'title': 'Contact form html 4.0.1', 'summary': 'Covers the addition of a contact form title, working with the contact form in html 4.0.1, and the explanation of various variables including form, input, label, and text area.', 'duration': 52.512, 'highlights': ['The chapter covers the addition of a contact form title, working with the contact form in HTML 4.0.1, and the explanation of various variables including form, input, label, and text area.', 'The chapter explains the different variables like form, input, label, and text area, and their functionalities in HTML 4.0.1.', 'The form is given a class of four and creates a framework.']}, {'end': 571.486, 'start': 220.635, 'title': 'Creating html5 contact form', 'summary': 'Discusses creating an html5 contact form, covering the usage of different input types such as text and submit, labels, placeholders, and the advantage of using text area over input for user experience, to make the form look nice.', 'duration': 350.851, 'highlights': ['The chapter discusses creating an HTML5 contact form, covering the usage of different input types such as text and submit, labels, placeholders, and the advantage of using text area over input for user experience, to make the form look nice. The transcript covers creating an HTML5 contact form, utilizing various input types like text and submit, adding labels and placeholders for user guidance, and emphasizing the benefits of using text area over input for better user experience.', 'The text area is preferred over input for offering the user a larger field to write in, thus improving usability and user experience. The use of text area over input is preferred to offer the user a larger field for writing, enhancing usability and user experience.', "Adding a button is demonstrated using the predefined html5 variable 'submit' with the value 'send'. The addition of a button is shown using the predefined html5 variable 'submit' with the value 'send', illustrating how to incorporate a button in the form."]}], 'duration': 403.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM168123.jpg', 'highlights': ['The chapter covers the addition of a contact form title, working with the contact form in HTML 4.0.1, and the explanation of various variables including form, input, label, and text area.', 'The chapter discusses creating an HTML5 contact form, covering the usage of different input types such as text and submit, labels, placeholders, and the advantage of using text area over input for user experience, to make the form look nice.']}, {'end': 877.685, 'segs': [{'end': 617.701, 'src': 'embed', 'start': 573.518, 'weight': 0, 'content': [{'end': 578, 'text': 'so we style the body and we say we give it a padding.', 'start': 573.518, 'duration': 4.482}, {'end': 580.922, 'text': "so it's not so much to the left.", 'start': 578, 'duration': 2.922}, {'end': 598.49, 'text': "we will want some margins look nicer, much better, and a font size of, let's say, 13 pixels and a font, let's say Verdana,", 'start': 580.922, 'duration': 17.568}, {'end': 602.212, 'text': 'Tahoma and then all sans serifs.', 'start': 598.49, 'duration': 3.722}, {'end': 608.555, 'text': 'it looks much better right now.', 'start': 604.813, 'duration': 3.742}, {'end': 617.701, 'text': 'and we also want to style the h2, the title want to give it a margin of of on the bottom of 20 pixels.', 'start': 608.555, 'duration': 9.146}], 'summary': 'Styling includes padding, margins, 13px font size, and 20px bottom margin for h2.', 'duration': 44.183, 'max_score': 573.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM573518.jpg'}, {'end': 672.451, 'src': 'embed', 'start': 643.524, 'weight': 2, 'content': [{'end': 650.549, 'text': 'summer want to start working on this 3 input and the text area.', 'start': 643.524, 'duration': 7.025}, {'end': 654.591, 'text': 'make it a bit bigger and give you the maybe a font size.', 'start': 650.549, 'duration': 4.042}, {'end': 664.461, 'text': "and so we're gonna start input and text area together this time and we're gonna give you padding of, let's say, 10 pixels, uh.", 'start': 654.591, 'duration': 9.87}, {'end': 664.882, 'text': 'what do you mean?', 'start': 664.461, 'duration': 0.421}, {'end': 672.451, 'text': 'the border, one pixel solid of e, five, e, five, e, five and the with.', 'start': 664.882, 'duration': 7.569}], 'summary': 'Plan to work on 3 inputs and text area, increase size and font, add padding of 10 pixels, and set border to one pixel solid.', 'duration': 28.927, 'max_score': 643.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM643524.jpg'}, {'end': 877.685, 'src': 'embed', 'start': 724.967, 'weight': 3, 'content': [{'end': 736.537, 'text': "you can go here to box shadow and play with it, add all kinds of variables and so on, but I don't want that right now.", 'start': 724.967, 'duration': 11.57}, {'end': 751.129, 'text': "so I'm gonna go back and make it, as I made it when I created this contact form 0 pixel and 8 pixel.", 'start': 736.537, 'duration': 14.592}, {'end': 760.857, 'text': 'and what I want to do is copy it two times and add those vendor prefixes which you learned, chat thought you about in the previous tutorials.', 'start': 751.129, 'duration': 9.728}, {'end': 764.814, 'text': 'as you can see, they have a border shadow or a box shadow.', 'start': 760.857, 'duration': 3.957}, {'end': 767.536, 'text': 'sorry, all the boxes, all the fields have a shadow.', 'start': 764.814, 'duration': 2.722}, {'end': 769.037, 'text': 'right now.', 'start': 767.536, 'duration': 1.501}, {'end': 775.841, 'text': 'we also want to modify the text area, which is this one because usually you want it to be bigger than than the rest,', 'start': 769.037, 'duration': 6.804}, {'end': 780.345, 'text': "because that's where paragraphs of text can be written.", 'start': 775.841, 'duration': 4.504}, {'end': 787.99, 'text': 'so this time we also modify text area and we make it with a 400 pixels and a height of 150 pixels.', 'start': 780.345, 'duration': 7.645}, {'end': 796.448, 'text': "it's nice for user to be able to play with this.", 'start': 793.007, 'duration': 3.441}, {'end': 803.89, 'text': 'however, if you have some content here, in case you do, you might not want the user to be able to do this,', 'start': 796.448, 'duration': 7.442}, {'end': 816.993, 'text': 'and what you can do about it is go here and say and give it a max width of 400 pixels, which means that the user can still play with this,', 'start': 803.89, 'duration': 13.103}, {'end': 820.721, 'text': 'but only with the height, but he cannot drag.', 'start': 816.993, 'duration': 3.728}, {'end': 828.284, 'text': "you see, i try to track to the right, but i cannot dragon because it's already at the maximum with uh.", 'start': 820.721, 'duration': 7.563}, {'end': 834.006, 'text': "but that's something you might not want to do whatever it's up to you uh..", 'start': 828.284, 'duration': 5.722}, {'end': 839.408, 'text': "i'll show also wants to add line height, let's say twenty pixels.", 'start': 834.006, 'duration': 5.402}, {'end': 840.368, 'text': "so it's a bit.", 'start': 839.408, 'duration': 0.96}, {'end': 843.45, 'text': "it's, it's a bit too much, i think.", 'start': 840.368, 'duration': 3.082}, {'end': 844.19, 'text': "that's it eighteen.", 'start': 843.45, 'duration': 0.74}, {'end': 851.636, 'text': 'only for the user to be able to, you know, read.', 'start': 848.234, 'duration': 3.402}, {'end': 861.943, 'text': 'if you write a lot of text here, he should be able to read again before submitting it and you should be able, or you should offer him a nice design,', 'start': 851.636, 'duration': 10.307}, {'end': 871.549, 'text': 'some light hide, you know, beautiful typeface, in order for him to to easier to read this text easier, not have difficulties.', 'start': 861.943, 'duration': 9.606}, {'end': 877.685, 'text': "But that's more about styling and you already know those concepts, so I cannot teach you much more there.", 'start': 872.981, 'duration': 4.704}], 'summary': 'Modifying box shadow, text area, and line height for contact form.', 'duration': 152.718, 'max_score': 724.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM724967.jpg'}], 'start': 573.518, 'title': 'Web page styling', 'summary': 'Covers styling web page elements such as body, h2, and contact forms with properties like padding, margins, font size, font type, color, border, width, and box shadows. it also emphasizes user interaction restrictions, maximum width, line height, and visually appealing design for improved readability.', 'chapters': [{'end': 699.154, 'start': 573.518, 'title': 'Styling web page elements', 'summary': 'Discusses styling the body with padding, margins, font size, and font type, along with styling specific elements like h2 and contact forms with specific properties like color, padding, border, and width.', 'duration': 125.636, 'highlights': ['Styling the body with padding, margins, font size, and font type, resulting in improved appearance and readability.', 'Applying specific styling to h2 elements, including margin and color properties.', 'Styling contact forms by adjusting input and text area properties such as padding, border, width, and color.']}, {'end': 787.99, 'start': 699.154, 'title': 'Styling contact form with box shadow', 'summary': 'Discusses adding box shadows to the contact form, using a 0 pixel and 8 pixel shadow, and modifying the text area to have a width of 400 pixels and a height of 150 pixels.', 'duration': 88.836, 'highlights': ['Adding box shadows to the contact form using a 0 pixel and 8 pixel shadow.', 'Modifying the text area to have a width of 400 pixels and a height of 150 pixels.', 'Using vendor prefixes for box shadow and modifying all fields with a shadow.']}, {'end': 877.685, 'start': 793.007, 'title': 'User interaction and styling guidelines', 'summary': 'Discusses how to restrict user interaction by setting a maximum width of 400 pixels, along with adding line height for improved readability, and emphasizes the importance of providing a visually appealing design for easier text readability.', 'duration': 84.678, 'highlights': ['Set a maximum width of 400 pixels to restrict user interaction. 400 pixels', 'Emphasize the importance of adding line height for improved readability. 20 pixels, 18 pixels', 'Highlight the significance of providing a visually appealing design for easier text readability. Importance of offering a nice design, beautiful typeface for easier reading.']}], 'duration': 304.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM573518.jpg', 'highlights': ['Styling the body with padding, margins, font size, and font type, resulting in improved appearance and readability.', 'Applying specific styling to h2 elements, including margin and color properties.', 'Styling contact forms by adjusting input and text area properties such as padding, border, width, and color.', 'Adding box shadows to the contact form using a 0 pixel and 8 pixel shadow.', 'Modifying the text area to have a width of 400 pixels and a height of 150 pixels.', 'Set a maximum width of 400 pixels to restrict user interaction.', 'Emphasize the importance of adding line height for improved readability.', 'Highlight the significance of providing a visually appealing design for easier text readability.']}, {'end': 1331.674, 'segs': [{'end': 917.56, 'src': 'embed', 'start': 879.767, 'weight': 3, 'content': [{'end': 886.813, 'text': 'As you can see now if we come here and hover on this fields.', 'start': 879.767, 'duration': 7.046}, {'end': 889.986, 'text': 'nothing happens.', 'start': 888.866, 'duration': 1.12}, {'end': 901.41, 'text': "so I want to teach you a new variable of HTML or of CSS, and that's that there's not that much of a variable that I teach you,", 'start': 889.986, 'duration': 11.424}, {'end': 905.091, 'text': "but it's something that I teach you how to use it's.", 'start': 901.41, 'duration': 3.681}, {'end': 917.56, 'text': 'we have the hover and then we want this to modify on the hover for the texture as well, and we want to use focus,', 'start': 905.091, 'duration': 12.469}], 'summary': 'Teaching about using hover and focus in html and css.', 'duration': 37.793, 'max_score': 879.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM879767.jpg'}, {'end': 1008.172, 'src': 'embed', 'start': 978.676, 'weight': 5, 'content': [{'end': 993.463, 'text': 'unfortunately, on Safari this focus will not be able to be seen, because on Safari this blue border is on default.', 'start': 978.676, 'duration': 14.787}, {'end': 1004.77, 'text': "so whenever you click here it's gonna look like no, it is already active, but other browsers and maybe in PC I think you'll be able to see it.", 'start': 993.463, 'duration': 11.307}, {'end': 1008.172, 'text': 'and we all also want to go here and work on this.', 'start': 1004.77, 'duration': 3.402}], 'summary': "Safari doesn't show focus, other browsers may show blue border on click.", 'duration': 29.496, 'max_score': 978.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM978676.jpg'}, {'end': 1077.318, 'src': 'embed', 'start': 1039.278, 'weight': 4, 'content': [{'end': 1045.048, 'text': "the last thing we want to work on is the Submit button, Because I don't think it looks so good.", 'start': 1039.278, 'duration': 5.77}, {'end': 1049.134, 'text': "So let's make it a bit more visible.", 'start': 1046.51, 'duration': 2.624}, {'end': 1054.541, 'text': "Let's give it a width of, I'm sorry, submit input.", 'start': 1050.355, 'duration': 4.186}, {'end': 1059.268, 'text': "Let's give it a width of 100 pixels.", 'start': 1058.287, 'duration': 0.981}, {'end': 1063.364, 'text': 'yes, whites, submit input.', 'start': 1061.502, 'duration': 1.862}, {'end': 1077.318, 'text': "if we go back to here, it's because you only work with the input of submit and I suddenly open Photoshop and I do not know why that should have great.", 'start': 1063.364, 'duration': 13.954}], 'summary': 'Improving the submit button by making it more visible with a width of 100 pixels.', 'duration': 38.04, 'max_score': 1039.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM1039278.jpg'}, {'end': 1244.422, 'src': 'embed', 'start': 1186.6, 'weight': 0, 'content': [{'end': 1188.621, 'text': 'as I told in the beginning, this is not.', 'start': 1186.6, 'duration': 2.021}, {'end': 1197.888, 'text': 'it will never be a fully functional and Contact form, because you need PHP scripts behind it or javascript or whatever it is you want to work with.', 'start': 1188.621, 'duration': 9.267}, {'end': 1206.534, 'text': "so today I didn't thought you how to create a contact form, a fully functional contact form, but how to style a contact form,", 'start': 1197.888, 'duration': 8.646}, {'end': 1213.078, 'text': 'and again now you will be able to use all those, uh.', 'start': 1208.755, 'duration': 4.323}, {'end': 1216.92, 'text': 'plugins wordpress plugins for example uh..', 'start': 1213.078, 'duration': 3.842}, {'end': 1224.084, 'text': "which offer you fully functional contact forms that don't look so good as you might want them to now you uh..", 'start': 1216.92, 'duration': 7.164}, {'end': 1226.506, 'text': 'you learn how to modify them uh..', 'start': 1224.084, 'duration': 2.422}, {'end': 1230.328, 'text': 'to make them look nice and how to use some uh..', 'start': 1226.506, 'duration': 3.822}, {'end': 1242.661, 'text': 'some fields or some new variables of html and css, for example the placeholder um or the um text area, or the input types, and so on.', 'start': 1230.328, 'duration': 12.333}, {'end': 1244.422, 'text': 'or, uh, the submit button.', 'start': 1242.661, 'duration': 1.761}], 'summary': 'The tutorial explains how to style a contact form using html and css, enabling modification of existing forms and learning new html and css variables.', 'duration': 57.822, 'max_score': 1186.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM1186600.jpg'}, {'end': 1292.583, 'src': 'embed', 'start': 1268.568, 'weight': 1, 'content': [{'end': 1283.299, 'text': "then I'm gonna write the links in the article so you can go to the HTML5 CSS3 theme that we created together with a video tutorial and then to a CSS3 drop down navigation,", 'start': 1268.568, 'duration': 14.731}, {'end': 1285.26, 'text': 'which was also very nice tutorial.', 'start': 1283.299, 'duration': 1.961}, {'end': 1286.441, 'text': 'got a lot of good feedback on it.', 'start': 1285.26, 'duration': 1.181}, {'end': 1289.941, 'text': 'That was from me today.', 'start': 1288.46, 'duration': 1.481}, {'end': 1292.583, 'text': 'I always look forward to your feedback.', 'start': 1289.961, 'duration': 2.622}], 'summary': 'The transcript discusses creating an html5 css3 theme and a css3 drop down navigation tutorial, which received positive feedback.', 'duration': 24.015, 'max_score': 1268.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM1268568.jpg'}], 'start': 879.767, 'title': 'Css3 styling effects and form design', 'summary': 'Covers css hover and focus effects, such as adding borders and box shadows, and addresses the focus effect issue in safari. it also provides a comprehensive tutorial on styling a contact form using css3, modifying labels, adjusting the submit button, and incorporating various html and css elements within 100 lines of code.', 'chapters': [{'end': 1008.172, 'start': 879.767, 'title': 'Css hover and focus', 'summary': 'Discusses the use of hover and focus in css to modify the appearance of elements, including adding a border and box shadow, and the issue with the focus effect in safari.', 'duration': 128.405, 'highlights': ['The chapter explains the use of hover and focus in CSS to modify the appearance of elements, with the addition of a border and a box shadow to create a more visible effect, such as increasing the box shadow to 0.2 for better visibility.', 'The focus effect in Safari is noted as problematic, as the default blue border in Safari makes the focus effect indiscernible, impacting the user experience.']}, {'end': 1331.674, 'start': 1008.172, 'title': 'Styling a contact form with css3', 'summary': 'Demonstrates the process of styling a contact form using css3, including modifying labels, adjusting the submit button, and incorporating various html and css elements, in a concise tutorial that spans over 100 lines of code.', 'duration': 323.502, 'highlights': ['The chapter demonstrates the process of styling a contact form using CSS3. The tutorial focuses on styling a contact form using CSS3.', 'The tutorial spans over 100 lines of code. The tutorial entails styling a contact form in a concise manner, encompassing over 100 lines of code.', "Modifying labels and adjusting the submit button. The tutorial covers the modification of labels and the adjustment of the submit button's appearance.", 'Incorporating various HTML and CSS elements. The tutorial includes the incorporation of various HTML and CSS elements, such as placeholder, text area, input types, and the submit button.']}], 'duration': 451.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Flz5YJ_uSHM/pics/Flz5YJ_uSHM879767.jpg', 'highlights': ['The tutorial spans over 100 lines of code. The tutorial entails styling a contact form in a concise manner, encompassing over 100 lines of code.', 'The chapter demonstrates the process of styling a contact form using CSS3. The tutorial focuses on styling a contact form using CSS3.', 'Incorporating various HTML and CSS elements. The tutorial includes the incorporation of various HTML and CSS elements, such as placeholder, text area, input types, and the submit button.', 'The chapter explains the use of hover and focus in CSS to modify the appearance of elements, with the addition of a border and a box shadow to create a more visible effect, such as increasing the box shadow to 0.2 for better visibility.', "Modifying labels and adjusting the submit button. The tutorial covers the modification of labels and the adjustment of the submit button's appearance.", 'The focus effect in Safari is noted as problematic, as the default blue border in Safari makes the focus effect indiscernible, impacting the user experience.']}], 'highlights': ['The tutorial spans over 100 lines of code. The tutorial entails styling a contact form in a concise manner, encompassing over 100 lines of code.', 'The chapter demonstrates the process of styling a contact form using CSS3. The tutorial focuses on styling a contact form using CSS3.', 'Incorporating various HTML and CSS elements. The tutorial includes the incorporation of various HTML and CSS elements, such as placeholder, text area, input types, and the submit button.', 'The chapter explains the use of hover and focus in CSS to modify the appearance of elements, with the addition of a border and a box shadow to create a more visible effect, such as increasing the box shadow to 0.2 for better visibility.', "Modifying labels and adjusting the submit button. The tutorial covers the modification of labels and the adjustment of the submit button's appearance.", 'The focus effect in Safari is noted as problematic, as the default blue border in Safari makes the focus effect indiscernible, impacting the user experience.', 'Styling the body with padding, margins, font size, and font type, resulting in improved appearance and readability.', 'Applying specific styling to h2 elements, including margin and color properties.', 'Styling contact forms by adjusting input and text area properties such as padding, border, width, and color.', 'Adding box shadows to the contact form using a 0 pixel and 8 pixel shadow.', 'Modifying the text area to have a width of 400 pixels and a height of 150 pixels.', 'Set a maximum width of 400 pixels to restrict user interaction.', 'Emphasize the importance of adding line height for improved readability.', 'Highlight the significance of providing a visually appealing design for easier text readability.', 'The chapter covers the addition of a contact form title, working with the contact form in HTML 4.0.1, and the explanation of various variables including form, input, label, and text area.', 'The chapter discusses creating an HTML5 contact form, covering the usage of different input types such as text and submit, labels, placeholders, and the advantage of using text area over input for user experience, to make the form look nice.', 'The tutorial focuses on styling a contact form in HTML using CSS 3, highlighting the importance of design over functionality in web development.', 'The speaker emphasizes the need to code or style a contact form for better aesthetics, as existing plugins for content management systems may lack the desired visual appeal.', 'The tutorial includes step-by-step guidance on creating the HTML framework, adding a title, setting meta charset, and linking the stylesheet for styling.', 'The chapter aims to teach viewers how to enhance the visual appeal of contact forms, offering practical knowledge for web designers and developers.', 'The speaker demonstrates the process of deleting existing HTML and CSS code to start from scratch, providing a hands-on approach to learning web design.']}