title
Create a Website using HTML and CSS Under 30 Minutes | HTML Tutorial | CSS Tutorial | Edureka

description
🔥 Full Stack Web Development Training (Use code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎"): https://www.edureka.co/masters-program/full-stack-developer-training In this Edureka Video, you’ll witness the creation of a website using HTML and CSS in less than 30 minutes. The following topics are covered in this video: 1. (00:45) What is HTML? 2. (02:20) What is CSS? 3. (03:20) Create a Website -------------------------------------------------------------------------------------------------------- 🔥 Full-Stack Web Development Internship Program: http://bit.ly/fs-internship As explained by the instructor in this video, below are the links to other tutorials which will help you learn the other aspects of web development. HTML tutorial: https://www.youtube.com/watch?v=a2L8ra2TOMg CSS tutorial: https://www.youtube.com/watch?v=3_9znKVNe5g&list=PL9ooVrP1hQOH2k1SANK5rvq_EAgUKTPoK JavaScript tutorial: https://www.youtube.com/watch?v=J4UKL355sUo&list=PL9ooVrP1hQOH2k1SANK5rvq_EAgUKTPoK jQuery tutorial: https://www.youtube.com/watch?v=2OMzGhlIZpg&list=PL9ooVrP1hQOH2k1SANK5rvq_EAgUKTPoK ---------------- Web Development Certification Training ----------------- 🔵 Edureka Web Development Training: https://bit.ly/2XKfTlA 🔵 Edureka Angular Training: http://bit.ly/38mi3sw 🔵 Edureka ReactJS Training: http://bit.ly/2DVP6Wz 🔵 Edureka NodeJS Training: http://bit.ly/35ehwXX 🔵 Edureka Full Stack Training: http://bit.ly/2YveVpL 🔵 Edureka Python Django Training: http://bit.ly/2RAk6Do Subscribe to our Edureka YouTube channel and hit the bell icon to get video updates: https://goo.gl/6ohpTV #HTML #CSS #HTMLCSS #CreatingAWebsite #Edureka -------------------------------------------------------------------------------------------------------- Instagram: https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Community: https://www.edureka.co/community ------------------------------------------------------------------------------------------------------- About The Course: Full Stack Web Development Masters Program will make you proficient in skills to work with back-end and front-end web technologies. It includes training on the following: 1. Web Development, 2. jQuery, 3. Angular, 4. NodeJS, 5. ExpressJS, and 6. MongoDB. The curriculum has been determined by extensive research on 5000+ job descriptions across the globe. ------------------------------------------------------------------------------------------------------- How It Works? 1. This is a 21 Week Instructor-led Online Course, 125 hours of assignment and 125 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of each course, there will be a project, post completion of that project you will be given a certificate ---------------------------------------------------------------------------------------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at sales@edureka.in or call us at IND: 9606058406 / US: 18338555775 (toll free).

detail
{'title': 'Create a Website using HTML and CSS Under 30 Minutes | HTML Tutorial | CSS Tutorial | Edureka', 'heatmap': [{'end': 436.234, 'start': 417.184, 'weight': 0.703}, {'end': 502.362, 'start': 471.402, 'weight': 0.743}], 'summary': "Learn to create a website using html and css, emphasizing the basics and front-end development, organizing code in a single folder, styling navigation menu, and enhancing the website with tagline and interactive 'adopt now' button, all in under 30 minutes.", 'chapters': [{'end': 133.096, 'segs': [{'end': 43.213, 'src': 'embed', 'start': 11.351, 'weight': 0, 'content': [{'end': 13.512, 'text': 'Hi guys, this is Zulekha from Edureka.', 'start': 11.351, 'duration': 2.161}, {'end': 18.093, 'text': "In today's session, we're going to create a website by using HTML and CSS.", 'start': 13.852, 'duration': 4.241}, {'end': 23.335, 'text': "Now even though creating a website may seem like a complex thing to do, it actually isn't.", 'start': 18.693, 'duration': 4.642}, {'end': 27.196, 'text': "It's quite easy and today we'll be doing it in less than 15 minutes.", 'start': 23.515, 'duration': 3.681}, {'end': 29.857, 'text': "So let's move ahead and take a look at today's agenda.", 'start': 27.516, 'duration': 2.341}, {'end': 32.646, 'text': "We're going to begin with what is HTML.", 'start': 30.464, 'duration': 2.182}, {'end': 37.029, 'text': "We're going to see what it is used for and then we'll briefly discuss about CSS.", 'start': 32.726, 'duration': 4.303}, {'end': 43.213, 'text': "Once we're done with that, we'll finally get on with the demo where I'll be showing you how to create a website from scratch.", 'start': 37.629, 'duration': 5.584}], 'summary': 'Zulekha will demonstrate creating a website using html and css in less than 15 minutes.', 'duration': 31.862, 'max_score': 11.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax0011351.jpg'}, {'end': 93.036, 'src': 'embed', 'start': 49.998, 'weight': 1, 'content': [{'end': 57.283, 'text': 'Now just like how we humans need a language to communicate with each other, computers also need a language to communicate with the internet.', 'start': 49.998, 'duration': 7.285}, {'end': 64.444, 'text': 'This language is HTML to be more specific HTML is used to create the structure of the web without it.', 'start': 57.862, 'duration': 6.582}, {'end': 67.227, 'text': 'The web would be as shapeless as a lump of clay.', 'start': 64.504, 'duration': 2.723}, {'end': 69.928, 'text': 'So it basically forms the skeleton of the web.', 'start': 67.647, 'duration': 2.281}, {'end': 72.99, 'text': "Now, let's look at how HTML structures the web.", 'start': 70.468, 'duration': 2.522}, {'end': 80.814, 'text': 'So by using HTML you can tell the browser how you want your content to be structured by defining the different parts of a web page.', 'start': 73.47, 'duration': 7.344}, {'end': 85.236, 'text': 'So for example, you define the content of your web page within HTML tags.', 'start': 81.394, 'duration': 3.842}, {'end': 93.036, 'text': 'These tags tell the browser which parts are headings title body paragraphs and so on now in the below example over here.', 'start': 85.834, 'duration': 7.202}], 'summary': 'Html is the language that structures the web, defining its content and forming its skeleton.', 'duration': 43.038, 'max_score': 49.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax0049998.jpg'}], 'start': 11.351, 'title': 'Creating a website with html and css', 'summary': 'Discusses creating a website using html and css, emphasizing the importance of html in defining web structure and demonstrating html tag usage to define content, with a promise of completing the website creation in less than 15 minutes.', 'chapters': [{'end': 133.096, 'start': 11.351, 'title': 'Creating a website with html and css', 'summary': 'Discusses creating a website using html and css, highlighting the importance of html in defining the structure of the web and demonstrating how to use html tags to define content, with a promise to complete the website creation in less than 15 minutes.', 'duration': 121.745, 'highlights': ['HTML is used to create the structure of the web and defines the content of a web page using tags. HTML is used to create the structure of the web and define the content of a web page using tags, such as title, body, and paragraphs.', 'Importance of HTML in shaping the web and its role in forming the skeleton of the web. HTML plays a crucial role in shaping the web and forms the skeleton of the web, providing the structure for the content.', 'Promise to complete the website creation in less than 15 minutes. The session promises to complete the website creation using HTML and CSS in less than 15 minutes, highlighting the ease and efficiency of the process.']}], 'duration': 121.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax0011351.jpg', 'highlights': ['Promise to complete the website creation in less than 15 minutes. The session promises to complete the website creation using HTML and CSS in less than 15 minutes, highlighting the ease and efficiency of the process.', 'Importance of HTML in shaping the web and its role in forming the skeleton of the web. HTML plays a crucial role in shaping the web and forms the skeleton of the web, providing the structure for the content.', 'HTML is used to create the structure of the web and defines the content of a web page using tags. HTML is used to create the structure of the web and define the content of a web page using tags, such as title, body, and paragraphs.']}, {'end': 278.457, 'segs': [{'end': 259.077, 'src': 'embed', 'start': 155.333, 'weight': 0, 'content': [{'end': 160.494, 'text': 'Now, this is probably how a web page would look before CSS, and this is after CSS.', 'start': 155.333, 'duration': 5.161}, {'end': 168.117, 'text': 'it can even look 10 times better than this, because CSS provides thousands of styling functions in order to make your web pages look more attractive.', 'start': 160.494, 'duration': 7.623}, {'end': 168.937, 'text': 'All right.', 'start': 168.657, 'duration': 0.28}, {'end': 173.398, 'text': "Now, let's look at an analogy to understand how HTML and CSS work.", 'start': 169.357, 'duration': 4.041}, {'end': 182.171, 'text': 'All right, you all need to understand the relationship between HTML and CSS in order to understand how a website can be built using HTML and CSS.', 'start': 173.968, 'duration': 8.203}, {'end': 185.673, 'text': 'Now guys think of HTML as a skeleton of your web.', 'start': 182.591, 'duration': 3.082}, {'end': 188.174, 'text': 'It basically defines the structure of the web.', 'start': 186.033, 'duration': 2.141}, {'end': 191.115, 'text': 'On the other hand CSS is like our clothes.', 'start': 188.774, 'duration': 2.341}, {'end': 193.616, 'text': 'We put on fashionable clothes to look better.', 'start': 191.435, 'duration': 2.181}, {'end': 197.037, 'text': 'Similarly the web uses CSS for styling purpose.', 'start': 193.956, 'duration': 3.081}, {'end': 201.359, 'text': "So guys before we start creating the website, let's look at the prerequisites.", 'start': 197.557, 'duration': 3.802}, {'end': 202.1, 'text': 'All right.', 'start': 201.88, 'duration': 0.22}, {'end': 204.042, 'text': 'So first of all, you need a code editor.', 'start': 202.12, 'duration': 1.922}, {'end': 209.147, 'text': "I'll be using Visual Studio code to type the entire code, but you can use any code editor.", 'start': 204.503, 'duration': 4.644}, {'end': 213.771, 'text': "You're comfortable with I personally switch between sublime text and Visual Studio code.", 'start': 209.167, 'duration': 4.604}, {'end': 215.092, 'text': 'All right now.', 'start': 214.212, 'duration': 0.88}, {'end': 218.676, 'text': 'apart from that, you must have a good understanding about HTML and CSS.', 'start': 215.092, 'duration': 3.584}, {'end': 223.139, 'text': "If you guys aren't familiar with these languages, I suggest you go and read about them.", 'start': 219.236, 'duration': 3.903}, {'end': 230.985, 'text': "I'll also leave a link in the description so you can go and check out our content on HTML and CSS and then you can come back and create this website.", 'start': 223.459, 'duration': 7.526}, {'end': 235.568, 'text': "Okay, so guys it's important for you all to have a basic understanding of HTML and CSS.", 'start': 231.345, 'duration': 4.223}, {'end': 241.012, 'text': 'So please do check out the link in our description in order to learn more about HTML and CSS.', 'start': 236.148, 'duration': 4.864}, {'end': 246.22, 'text': "Guys, you don't have to be a master in CSS and HTML in order to build a website.", 'start': 241.753, 'duration': 4.467}, {'end': 252.248, 'text': 'You just require the basic functions and the basic concepts of HTML and CSS to create a simple website.', 'start': 246.68, 'duration': 5.568}, {'end': 256.855, 'text': "Alright, so guys I'll be creating a website for you dog lovers out there.", 'start': 252.809, 'duration': 4.046}, {'end': 259.077, 'text': "Let's take a look at how the website looks.", 'start': 257.235, 'duration': 1.842}], 'summary': 'Css enhances webpage appearance with thousands of styling functions. html defines structure, css provides styling, basic understanding of html and css is necessary to create a simple website.', 'duration': 103.744, 'max_score': 155.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00155333.jpg'}], 'start': 133.396, 'title': 'Html and css basics', 'summary': 'Focuses on the basics of html and css, emphasizing their relationship and the prerequisites for creating a website. it highlights the importance of understanding html and css and the simplicity of building a website with basic functions.', 'chapters': [{'end': 278.457, 'start': 133.396, 'title': 'Html, css basics & website creation', 'summary': 'Discusses the basics of html and css, emphasizing the relationship between the two and the prerequisites for creating a website, while highlighting the importance of understanding html and css and the simplicity of building a website with basic functions.', 'duration': 145.061, 'highlights': ["Importance of Understanding HTML and CSS It's important for beginners to have a basic understanding of HTML and CSS, as mastering these languages is not necessary to build a website.", 'Analogizing HTML and CSS to Skeleton and Clothes Describes HTML as the skeleton of the web, defining its structure, while comparing CSS to clothes that make the web look better.', 'Styling Functions in CSS CSS provides thousands of styling functions to make web pages look more attractive, potentially improving the appearance by ten times.', 'Prerequisites for Creating a Website The prerequisites for creating a website include using a code editor and having a good understanding of HTML and CSS.', 'Overview of Website Creation The speaker plans to create a dog adoption website, demonstrating the process of building a simple website using HTML and CSS.']}], 'duration': 145.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00133396.jpg', 'highlights': ["Importance of Understanding HTML and CSS It's important for beginners to have a basic understanding of HTML and CSS, as mastering these languages is not necessary to build a website.", 'Prerequisites for Creating a Website The prerequisites for creating a website include using a code editor and having a good understanding of HTML and CSS.', 'Analogizing HTML and CSS to Skeleton and Clothes Describes HTML as the skeleton of the web, defining its structure, while comparing CSS to clothes that make the web look better.', 'Styling Functions in CSS CSS provides thousands of styling functions to make web pages look more attractive, potentially improving the appearance by ten times.', 'Overview of Website Creation The speaker plans to create a dog adoption website, demonstrating the process of building a simple website using HTML and CSS.']}, {'end': 616.607, 'segs': [{'end': 302.901, 'src': 'embed', 'start': 278.977, 'weight': 1, 'content': [{'end': 286.043, 'text': "So we're gonna do all of this from scratch in less than 15 minutes, okay? So guys, without any further ado, let's get started.", 'start': 278.977, 'duration': 7.066}, {'end': 290.118, 'text': "All right, so guys we're going to begin with creating a new folder.", 'start': 287.111, 'duration': 3.007}, {'end': 294.227, 'text': "It's always a good practice to store your entire code in a single folder.", 'start': 290.599, 'duration': 3.628}, {'end': 302.901, 'text': "So I'm just going to name this folder as website and we have this image of a puppy which I'll be using as a background image for my website.", 'start': 294.875, 'duration': 8.026}], 'summary': 'Creating a website folder with a puppy background image in less than 15 minutes', 'duration': 23.924, 'max_score': 278.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00278977.jpg'}, {'end': 406.218, 'src': 'embed', 'start': 363.23, 'weight': 0, 'content': [{'end': 364.971, 'text': 'This is just the title of the website.', 'start': 363.23, 'duration': 1.741}, {'end': 369.332, 'text': "I'm also going to link my CSS file in my HTML file.", 'start': 365.931, 'duration': 3.401}, {'end': 373.373, 'text': "So for that, let's just give the name of the file which is style.css.", 'start': 369.652, 'duration': 3.721}, {'end': 379.181, 'text': 'and style sheet.', 'start': 376.739, 'duration': 2.442}, {'end': 386.004, 'text': "So, for those of you who know CSS and HTML, know what exactly I'm doing now, like I mentioned before,", 'start': 380.121, 'duration': 5.883}, {'end': 393.849, 'text': "if you're not familiar with the basic concepts of HTML and CSS, please look up the courses that I leave in the description box below,", 'start': 386.004, 'duration': 7.845}, {'end': 400.353, 'text': 'go through them and then come back to this video, because you only require the basics of HTML and CSS in this website.', 'start': 393.849, 'duration': 6.504}, {'end': 400.733, 'text': 'All right.', 'start': 400.453, 'duration': 0.28}, {'end': 406.218, 'text': "Okay, so I've created head tags over here title tags and I'm also linked my CSS file.", 'start': 401.696, 'duration': 4.522}], 'summary': "Linking css file 'style.css' to html, emphasizes need for basic html & css knowledge.", 'duration': 42.988, 'max_score': 363.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00363230.jpg'}, {'end': 451.812, 'src': 'heatmap', 'start': 417.184, 'weight': 0.703, 'content': [{'end': 418.544, 'text': "So that's what I'm doing here.", 'start': 417.184, 'duration': 1.36}, {'end': 420.925, 'text': 'All right margin and padding.', 'start': 418.564, 'duration': 2.361}, {'end': 427.229, 'text': "Okay Now, let's define body tags over here within body tags.", 'start': 421.946, 'duration': 5.283}, {'end': 428.909, 'text': "I'm going to define header tag.", 'start': 427.349, 'duration': 1.56}, {'end': 436.234, 'text': "Okay, let's just leave this empty for a while and let's style the header now.", 'start': 428.929, 'duration': 7.305}, {'end': 440.039, 'text': "sorry for the spelling mistake, so I've just selected the header.", 'start': 436.234, 'duration': 3.805}, {'end': 445.725, 'text': "now what I'm going to do is I'm going to add the puppy image as the background image over here.", 'start': 440.039, 'duration': 5.686}, {'end': 451.812, 'text': 'so background image and you have to mention the URL all right.', 'start': 445.725, 'duration': 6.087}], 'summary': 'Styling header with puppy image as background.', 'duration': 34.628, 'max_score': 417.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00417184.jpg'}, {'end': 517.255, 'src': 'heatmap', 'start': 471.402, 'weight': 5, 'content': [{'end': 479.164, 'text': "Now I'm just gonna fix the height and background size of the image, all right? And let's fix the background size.", 'start': 471.402, 'duration': 7.762}, {'end': 486.487, 'text': "Similarly, I'm going to Fix the background position as center.", 'start': 481.005, 'duration': 5.482}, {'end': 489.453, 'text': "All right, let's save this.", 'start': 487.85, 'duration': 1.603}, {'end': 497.818, 'text': "And let's see how our website looks so far, okay? So I'm gonna reveal an explorer and Open this file.", 'start': 490.615, 'duration': 7.203}, {'end': 500.46, 'text': 'So guys, this is how our website looks for now.', 'start': 498.398, 'duration': 2.062}, {'end': 502.362, 'text': 'Like. the image is quite clear,', 'start': 500.921, 'duration': 1.441}, {'end': 508.307, 'text': "but what we wanna do is we wanna make it blurry because it's a background image or we wanna decrease the opacity of the image.", 'start': 502.362, 'duration': 5.945}, {'end': 509.968, 'text': "So we'll be doing that later on.", 'start': 508.687, 'duration': 1.281}, {'end': 512.049, 'text': "For now, let's add the navigation menus.", 'start': 510.009, 'duration': 2.04}, {'end': 517.255, 'text': 'So guys, when I showed you all the website, there was home button and there was about button and all of that.', 'start': 512.471, 'duration': 4.784}], 'summary': 'Adjusting image properties and planning navigation menus for the website.', 'duration': 45.853, 'max_score': 471.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00471402.jpg'}, {'end': 586.53, 'src': 'embed', 'start': 561.173, 'weight': 3, 'content': [{'end': 566.637, 'text': 'All right, so what I did here was I added an empty link over here called home, okay.', 'start': 561.173, 'duration': 5.464}, {'end': 571.941, 'text': "Now I'm just gonna copy paste this because we have around five such links, okay.", 'start': 567.277, 'duration': 4.664}, {'end': 573.622, 'text': "Let's name this about.", 'start': 572.421, 'duration': 1.201}, {'end': 581.587, 'text': 'So usually in all the websites you see these navigation menus which have home, about, or which have contact services and so on.', 'start': 574.403, 'duration': 7.184}, {'end': 582.868, 'text': "That's exactly what I'm doing here.", 'start': 581.627, 'duration': 1.241}, {'end': 586.53, 'text': "Let's name this one as breeds.", 'start': 584.409, 'duration': 2.121}], 'summary': 'Added 5 navigation links including home, about, and breeds.', 'duration': 25.357, 'max_score': 561.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00561173.jpg'}], 'start': 278.977, 'title': 'Front-end website development', 'summary': "Covers creating a website from scratch in less than 15 minutes using html and css, focusing on organizing code in a single folder, linking css to html, and setting background image properties. it also discusses adding navigation menus to a website, creating an unordered list of links for home, about, breeds, adoption, and contact, and considering future adjustments to the website's background image.", 'chapters': [{'end': 489.453, 'start': 278.977, 'title': 'Creating a website in 15 minutes', 'summary': 'Covers creating a website from scratch in less than 15 minutes using html and css, focusing on organizing code in a single folder, linking css to html, and setting background image properties.', 'duration': 210.476, 'highlights': ['The chapter emphasizes creating a website from scratch in less than 15 minutes using HTML and CSS. The speaker aims to complete the website setup within a short timeframe, showcasing efficiency and proficiency in web development.', 'Organizing code in a single folder is recommended as a good practice. Emphasizing the importance of organizing all code files in a single folder to maintain a structured and manageable development environment.', 'Linking the CSS file to the HTML file is demonstrated as part of the website creation process. Demonstrating the process of linking the CSS file to the HTML file, a fundamental step in styling web pages effectively.']}, {'end': 616.607, 'start': 490.615, 'title': 'Front-end website development', 'summary': "Discusses adding navigation menus to a website, creating an unordered list of links for home, about, breeds, adoption, and contact, and considering future adjustments to the website's background image.", 'duration': 125.992, 'highlights': ["The chapter covers adding navigation menus to a website, creating an unordered list of links for home, about, breeds, adoption, and contact, and considering future adjustments to the website's background image.", 'The speaker demonstrates adding a class to a div for the navigation menu, and then proceeds to add a list of links for home, about, breeds, adoption, and contact.', "The speaker discusses the intention to make the website's background image blurry or decrease its opacity in the future to enhance its appearance.", 'The speaker mentions the addition of empty links for home, about, breeds, adoption, and contact, emphasizing the focus on front-end website development and not backend coding.']}], 'duration': 337.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00278977.jpg', 'highlights': ['The chapter emphasizes creating a website from scratch in less than 15 minutes using HTML and CSS, showcasing efficiency and proficiency in web development.', 'Organizing code in a single folder is recommended as a good practice to maintain a structured and manageable development environment.', 'Linking the CSS file to the HTML file is demonstrated as a fundamental step in styling web pages effectively.', 'The chapter covers adding navigation menus to a website, creating an unordered list of links for home, about, breeds, adoption, and contact.', 'The speaker demonstrates adding a class to a div for the navigation menu and then proceeds to add a list of links for home, about, breeds, adoption, and contact.', "The speaker discusses the intention to make the website's background image blurry or decrease its opacity in the future to enhance its appearance."]}, {'end': 958.546, 'segs': [{'end': 700.301, 'src': 'embed', 'start': 669.065, 'weight': 0, 'content': [{'end': 670.085, 'text': "So let's change that.", 'start': 669.065, 'duration': 1.02}, {'end': 676.249, 'text': "Now going back to the CSS file, what we're gonna do is we're gonna select the navigation menu.", 'start': 670.706, 'duration': 5.543}, {'end': 680.211, 'text': "In that, we're gonna select all the list items.", 'start': 677.069, 'duration': 3.142}, {'end': 685.554, 'text': "What I'm gonna do is I'm going to set the display as inline block.", 'start': 680.351, 'duration': 5.203}, {'end': 688.153, 'text': "let's see what happens when we do this.", 'start': 686.252, 'duration': 1.901}, {'end': 691.275, 'text': "okay, let's save the file, let's open this up.", 'start': 688.153, 'duration': 3.122}, {'end': 693.477, 'text': 'so, guys, I made a small mistake over here.', 'start': 691.275, 'duration': 2.202}, {'end': 697.139, 'text': "I'm supposed to add dot because I'm selecting a class.", 'start': 693.477, 'duration': 3.662}, {'end': 700.301, 'text': 'in order to select a class, you add this dot notation.', 'start': 697.139, 'duration': 3.162}], 'summary': 'Css file modified to set display as inline block for navigation menu list items.', 'duration': 31.236, 'max_score': 669.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00669065.jpg'}, {'end': 749.463, 'src': 'embed', 'start': 717.106, 'weight': 2, 'content': [{'end': 718.187, 'text': "Let's add some padding.", 'start': 717.106, 'duration': 1.081}, {'end': 720.489, 'text': "Let's change the font size font color and all of that.", 'start': 718.227, 'duration': 2.262}, {'end': 724.093, 'text': "Okay, so let's go back to our CSS file.", 'start': 720.729, 'duration': 3.364}, {'end': 734.462, 'text': "Now what I'm going to do is I'm going to select navigation menu class after that and select the list items within which I select the anchor tags.", 'start': 724.353, 'duration': 10.109}, {'end': 737.965, 'text': "Okay, so basically all the links now I'm going to change the color.", 'start': 734.642, 'duration': 3.323}, {'end': 739.527, 'text': "I'll set it to turquoise.", 'start': 738.105, 'duration': 1.422}, {'end': 743.1, 'text': 'So guys, you can change this and you can do whatever you want.', 'start': 740.379, 'duration': 2.721}, {'end': 749.463, 'text': 'If you want to have a different color or if you want to have a formal business kind of a website, you can do that as well.', 'start': 743.82, 'duration': 5.643}], 'summary': 'Changing font color and size in css for navigation menu links.', 'duration': 32.357, 'max_score': 717.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00717106.jpg'}, {'end': 846.033, 'src': 'embed', 'start': 812.599, 'weight': 1, 'content': [{'end': 818.484, 'text': "Go here where you added your image and what I'm gonna do is I'm gonna add an opacity function to this.", 'start': 812.599, 'duration': 5.885}, {'end': 821.167, 'text': "So I'm basically gonna make it a little bit transparent.", 'start': 818.885, 'duration': 2.282}, {'end': 826.741, 'text': 'RGBA where A is for opacity.', 'start': 824.199, 'duration': 2.542}, {'end': 828.742, 'text': 'All right.', 'start': 828.382, 'duration': 0.36}, {'end': 837.507, 'text': 'All right, so basically trying to set the opacity of the image.', 'start': 834.325, 'duration': 3.182}, {'end': 841.51, 'text': "Y'all can do this or y'all can set it according to your needs.", 'start': 838.388, 'duration': 3.122}, {'end': 846.033, 'text': "So I'm just gonna save this and now let's look at our website.", 'start': 842.17, 'duration': 3.863}], 'summary': 'Adding opacity function to the image for transparency.', 'duration': 33.434, 'max_score': 812.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00812599.jpg'}, {'end': 906.013, 'src': 'embed', 'start': 875.124, 'weight': 3, 'content': [{'end': 878.527, 'text': "Now that I've added a class to this home link, let's style it.", 'start': 875.124, 'duration': 3.403}, {'end': 881.189, 'text': "So let's go to style.css.", 'start': 879.868, 'duration': 1.321}, {'end': 886.783, 'text': "i'm going to select the home button class and let's add some border to it.", 'start': 882.401, 'duration': 4.382}, {'end': 898.97, 'text': "okay, so i'm going to add a border of one pixel solid gray and similarly i'm going to add a background color, background color.", 'start': 886.783, 'duration': 12.187}, {'end': 900.41, 'text': "i'll set it to white.", 'start': 898.97, 'duration': 1.44}, {'end': 906.013, 'text': "now let's save the file and let's see if these changes are visible.", 'start': 900.41, 'duration': 5.603}], 'summary': 'Styling the home button class with 1px solid gray border and white background color.', 'duration': 30.889, 'max_score': 875.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00875124.jpg'}], 'start': 616.687, 'title': 'Styling navigation menu', 'summary': 'Discusses aligning and styling a navigation menu, covering horizontal link alignment, font color and size changes, padding addition, and transparent background image, resulting in a visually attractive website.', 'chapters': [{'end': 958.546, 'start': 616.687, 'title': 'Styling navigation menu', 'summary': 'Discusses the process of aligning and styling a navigation menu, including aligning links horizontally, changing font color and size, adding padding, and making the background image transparent, resulting in a visually attractive website.', 'duration': 341.859, 'highlights': ['The process involves aligning the list items of the navigation menu horizontally by setting the display as inline block, resulting in all the links being aligned next to each other.', 'The speaker demonstrates changing the font color to turquoise and adding a padding of five pixels by 20 pixels to the anchor tags, allowing for customization and aesthetic improvement of the website.', "The background image's opacity is adjusted using the RGBA function to make it slightly transparent, ensuring the visibility of the navigation menu and enhancing the overall website appearance.", "The home link is highlighted by adding a class 'home button' and styling it with a one-pixel solid gray border and a white background color, indicating the current page to the user."]}], 'duration': 341.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00616687.jpg', 'highlights': ['The process involves aligning the list items of the navigation menu horizontally by setting the display as inline block, resulting in all the links being aligned next to each other.', "The background image's opacity is adjusted using the RGBA function to make it slightly transparent, ensuring the visibility of the navigation menu and enhancing the overall website appearance.", 'The speaker demonstrates changing the font color to turquoise and adding a padding of five pixels by 20 pixels to the anchor tags, allowing for customization and aesthetic improvement of the website.', "The home link is highlighted by adding a class 'home button' and styling it with a one-pixel solid gray border and a white background color, indicating the current page to the user."]}, {'end': 1389.889, 'segs': [{'end': 990.733, 'src': 'embed', 'start': 958.686, 'weight': 2, 'content': [{'end': 964.669, 'text': 'This is exactly what I wanted, okay? Now what I wanna do is I wanna add a tagline to my website.', 'start': 958.686, 'duration': 5.983}, {'end': 968.932, 'text': "Since it's a dog adoption website, I wanna add a cute tagline.", 'start': 965.05, 'duration': 3.882}, {'end': 971.573, 'text': "So I'm going back to my HTML file.", 'start': 969.592, 'duration': 1.981}, {'end': 973.014, 'text': "I'm creating a div.", 'start': 971.853, 'duration': 1.161}, {'end': 975.982, 'text': "and let's give it a class.", 'start': 973.9, 'duration': 2.082}, {'end': 982.447, 'text': "let's say tagline alright, and let me define my tagline now.", 'start': 975.982, 'duration': 6.465}, {'end': 990.733, 'text': 'so my tagline is share your home with a cute dog, all right.', 'start': 982.447, 'duration': 8.286}], 'summary': "Adding a tagline 'share your home with a cute dog' to a dog adoption website.", 'duration': 32.047, 'max_score': 958.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00958686.jpg'}, {'end': 1088.342, 'src': 'embed', 'start': 1020.213, 'weight': 3, 'content': [{'end': 1023.554, 'text': "I'll set the position to absolute.", 'start': 1020.213, 'duration': 3.341}, {'end': 1025.234, 'text': "I'll also adjust the width.", 'start': 1023.754, 'duration': 1.48}, {'end': 1035.517, 'text': "Okay, 1200 pixels and I'll set the margin on the left and margin top.", 'start': 1026.553, 'duration': 8.964}, {'end': 1038.618, 'text': 'Now I also want to style this text.', 'start': 1036.738, 'duration': 1.88}, {'end': 1041.44, 'text': 'All right, now this text is within H1 tags.', 'start': 1038.759, 'duration': 2.681}, {'end': 1044.982, 'text': "So let's select the H1 tags first and let's style it.", 'start': 1041.9, 'duration': 3.082}, {'end': 1053.566, 'text': "Okay, H1 and let's set the color to white and I also want to change the font size.", 'start': 1045.521, 'duration': 8.045}, {'end': 1062.364, 'text': "I'll set this to 50 pixels and similarly font family, set it to Verdana.", 'start': 1054.801, 'duration': 7.563}, {'end': 1069.967, 'text': "all right, and I'll also align the text at the center, because this is a tagline and I want it at the center.", 'start': 1062.364, 'duration': 7.603}, {'end': 1073.869, 'text': 'okay, I also want to set the margin.', 'start': 1069.967, 'duration': 3.902}, {'end': 1078.691, 'text': "okay, so we'll select 275 pixels.", 'start': 1073.869, 'duration': 4.822}, {'end': 1083.999, 'text': "okay, so let me save this and let's see if it brings changes to the website.", 'start': 1078.691, 'duration': 5.308}, {'end': 1086.061, 'text': 'Okay, so refresh and yes.', 'start': 1084.119, 'duration': 1.942}, {'end': 1088.342, 'text': 'Okay, this is exactly how I want it.', 'start': 1086.701, 'duration': 1.641}], 'summary': 'Styled h1 tags with white color, 50px font size, verdana font family, and 275px margin. success.', 'duration': 68.129, 'max_score': 1020.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax001020213.jpg'}, {'end': 1249.916, 'src': 'embed', 'start': 1162.408, 'weight': 1, 'content': [{'end': 1165.351, 'text': 'Now I want it exactly at the center below this line.', 'start': 1162.408, 'duration': 2.943}, {'end': 1166.912, 'text': "Okay, let's style that.", 'start': 1165.771, 'duration': 1.141}, {'end': 1174.498, 'text': 'So go back to your CSS file and select the adopt class, okay, adopt.', 'start': 1167.913, 'duration': 6.585}, {'end': 1179.843, 'text': "And let's add some margin to this, okay.", 'start': 1175.759, 'duration': 4.084}, {'end': 1183.326, 'text': "So I'm adding a 30 pixel margin.", 'start': 1180.483, 'duration': 2.843}, {'end': 1187.369, 'text': 'Also adding margin to the left, okay.', 'start': 1184.567, 'duration': 2.802}, {'end': 1191.499, 'text': 'all. right now i want to style this link.', 'start': 1188.717, 'duration': 2.782}, {'end': 1192.72, 'text': 'adopt now.', 'start': 1191.499, 'duration': 1.221}, {'end': 1197.303, 'text': "so i'm going to select this bttn class and i'll style that class now.", 'start': 1192.72, 'duration': 4.583}, {'end': 1205.849, 'text': "okay, so dot button and what i'm going to do is i'm going to set a border for this.", 'start': 1197.303, 'duration': 8.546}, {'end': 1211.893, 'text': 'okay, so one pixel solid white.', 'start': 1205.849, 'duration': 6.044}, {'end': 1214.415, 'text': "okay, i'll also add padding.", 'start': 1211.893, 'duration': 2.522}, {'end': 1220.23, 'text': "okay, we'll set this to 10 pixels by 30..", 'start': 1214.415, 'duration': 5.815}, {'end': 1223.351, 'text': "Okay, apart from this, I'll make the text as yellow.", 'start': 1220.23, 'duration': 3.121}, {'end': 1229.612, 'text': "Okay, so I'm setting the color of the text to yellow and I'll also change the font.", 'start': 1223.951, 'duration': 5.661}, {'end': 1233.993, 'text': "It's always good to know different functions in CSS.", 'start': 1230.653, 'duration': 3.34}, {'end': 1236.094, 'text': 'There are hundreds of styling functions.', 'start': 1234.074, 'duration': 2.02}, {'end': 1243.196, 'text': "Okay, the more you know, the better it is because that way your website, it'll look more interactive because it'll have a lot more styling.", 'start': 1236.734, 'duration': 6.462}, {'end': 1245.454, 'text': "So guys, don't add too much of style.", 'start': 1243.894, 'duration': 1.56}, {'end': 1248.255, 'text': "It might look too congested, but it's totally up to you.", 'start': 1245.534, 'duration': 2.721}, {'end': 1249.916, 'text': "I mean, y'all can do whatever you like.", 'start': 1248.375, 'duration': 1.541}], 'summary': 'Styling css with margin, padding, border and text color for interactive website design.', 'duration': 87.508, 'max_score': 1162.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax001162408.jpg'}, {'end': 1344.969, 'src': 'embed', 'start': 1307.438, 'weight': 0, 'content': [{'end': 1308.842, 'text': "It's just like what we did over here.", 'start': 1307.438, 'duration': 1.404}, {'end': 1315.274, 'text': 'So guys, this is exactly how the website looks, all right? So you can go ahead and change anything you want.', 'start': 1309.611, 'duration': 5.663}, {'end': 1316.235, 'text': 'You can change the font.', 'start': 1315.294, 'duration': 0.941}, {'end': 1320.697, 'text': 'You can have a website of cars, or you can have a website about cats.', 'start': 1316.735, 'duration': 3.962}, {'end': 1324.219, 'text': "It's up to you, but this is how you create a simple website.", 'start': 1321.138, 'duration': 3.081}, {'end': 1331.304, 'text': 'I hope all of you enjoyed coding with me, and also if you want to make your website more interactive, for that we use JavaScript.', 'start': 1324.68, 'duration': 6.624}, {'end': 1335.426, 'text': 'So if you want to add any motion in your website, then you would use JavaScript.', 'start': 1331.624, 'duration': 3.802}, {'end': 1339.743, 'text': 'You can check out our content on JavaScript and jQuery now.', 'start': 1335.979, 'duration': 3.764}, {'end': 1343.988, 'text': 'jQuery is basically a JavaScript library, which makes it very easy to use.', 'start': 1339.743, 'duration': 4.245}, {'end': 1344.969, 'text': 'JavaScript functions.', 'start': 1343.988, 'duration': 0.981}], 'summary': 'Creating a simple website with the option to customize, using javascript and jquery for interactivity.', 'duration': 37.531, 'max_score': 1307.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax001307438.jpg'}, {'end': 1389.889, 'src': 'embed', 'start': 1383.201, 'weight': 6, 'content': [{'end': 1388.687, 'text': 'Do look out for more videos in our playlist and subscribe to Edureka channel to learn more.', 'start': 1383.201, 'duration': 5.486}, {'end': 1389.889, 'text': 'Happy learning!.', 'start': 1389.248, 'duration': 0.641}], 'summary': 'Subscribe to edureka channel for more learning videos.', 'duration': 6.688, 'max_score': 1383.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax001383201.jpg'}], 'start': 958.686, 'title': 'Website enhancement', 'summary': "Involves adding a tagline and 'adopt now' button to a dog adoption website, utilizing html, css, and javascript for improved visual appeal and interactivity. it also emphasizes the use of jquery for website enhancement.", 'chapters': [{'end': 1088.342, 'start': 958.686, 'title': 'Adding tagline to dog adoption website', 'summary': "Involves adding a tagline 'share your home with a cute dog' to a dog adoption website by creating a div with class 'tagline', setting its position to absolute, adjusting width and margins, styling the h1 tags for color, font size, font family, alignment, and margin to achieve the desired appearance.", 'duration': 129.656, 'highlights': ["Creating a div with class 'tagline' and defining the tagline as 'Share your home with a cute dog'", 'Setting the position of the tagline to absolute, adjusting width to 1200 pixels, and setting margins', 'Styling the H1 tags by setting the color to white, font size to 50 pixels, font family to Verdana, and aligning the text at the center', 'Refreshing the website to see the changes']}, {'end': 1249.916, 'start': 1088.362, 'title': "Web design: adding an 'adopt now' button", 'summary': "Discusses the process of adding an 'adopt now' button to a website, including defining the html and css for the button, and providing tips for effective styling and positioning, in order to make the website more interactive and visually appealing.", 'duration': 161.554, 'highlights': ["Explaining the process of defining an HTML element for the 'adopt now' button and adding a link with a defined class. N/A", "Providing instructions for styling the 'adopt now' button using CSS, including setting border, padding, text color, and font. Setting the border to one pixel solid white, adding padding of 10 pixels by 30, and setting the text color to yellow.", 'Emphasizing the importance of knowing different CSS styling functions to make the website more interactive and visually appealing. N/A']}, {'end': 1389.889, 'start': 1250.156, 'title': 'Creating simple website with html and css', 'summary': 'Demonstrates the process of creating a simple website using html and css, including setting font size and text decoration, adding hover functions, and emphasizing the use of javascript and jquery for website interactivity.', 'duration': 139.733, 'highlights': ['Demonstrating the process of creating a simple website using HTML and CSS The speaker guides through setting font size, text decoration, adding hover functions, and providing options for customizing the website.', 'Emphasizing the use of JavaScript and jQuery for website interactivity The speaker highlights the importance of using JavaScript and jQuery for adding motion and interactivity to the website, along with providing resources for further learning.', 'Encouraging engagement and learning through comments and subscriptions The speaker encourages viewers to leave comments, queries, and subscribe to the channel for more learning content, creating an interactive and engaged community.']}], 'duration': 431.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Tm3pEiRax00/pics/Tm3pEiRax00958686.jpg', 'highlights': ['Emphasizing the use of JavaScript and jQuery for website interactivity', "Providing instructions for styling the 'adopt now' button using CSS", "Creating a div with class 'tagline' and defining the tagline as 'Share your home with a cute dog'", 'Styling the H1 tags by setting the color to white, font size to 50 pixels, font family to Verdana, and aligning the text at the center', 'Demonstrating the process of creating a simple website using HTML and CSS', 'Setting the position of the tagline to absolute, adjusting width to 1200 pixels, and setting margins', 'Encouraging engagement and learning through comments and subscriptions', 'Setting the border to one pixel solid white, adding padding of 10 pixels by 30, and setting the text color to yellow', 'Refreshing the website to see the changes', 'Emphasizing the importance of knowing different CSS styling functions to make the website more interactive and visually appealing']}], 'highlights': ['The session promises to complete the website creation using HTML and CSS in less than 15 minutes, highlighting the ease and efficiency of the process.', 'HTML plays a crucial role in shaping the web and forms the skeleton of the web, providing the structure for the content.', 'HTML is used to create the structure of the web and define the content of a web page using tags, such as title, body, and paragraphs.', "Importance of Understanding HTML and CSS It's important for beginners to have a basic understanding of HTML and CSS, as mastering these languages is not necessary to build a website.", 'Prerequisites for Creating a Website The prerequisites for creating a website include using a code editor and having a good understanding of HTML and CSS.', 'Analogizing HTML and CSS to Skeleton and Clothes Describes HTML as the skeleton of the web, defining its structure, while comparing CSS to clothes that make the web look better.', 'Styling Functions in CSS CSS provides thousands of styling functions to make web pages look more attractive, potentially improving the appearance by ten times.', 'The speaker plans to create a dog adoption website, demonstrating the process of building a simple website using HTML and CSS.', 'The chapter emphasizes creating a website from scratch in less than 15 minutes using HTML and CSS, showcasing efficiency and proficiency in web development.', 'Organizing code in a single folder is recommended as a good practice to maintain a structured and manageable development environment.', 'Linking the CSS file to the HTML file is demonstrated as a fundamental step in styling web pages effectively.', 'The chapter covers adding navigation menus to a website, creating an unordered list of links for home, about, breeds, adoption, and contact.', 'The speaker demonstrates adding a class to a div for the navigation menu and then proceeds to add a list of links for home, about, breeds, adoption, and contact.', "The speaker discusses the intention to make the website's background image blurry or decrease its opacity in the future to enhance its appearance.", 'The process involves aligning the list items of the navigation menu horizontally by setting the display as inline block, resulting in all the links being aligned next to each other.', "The background image's opacity is adjusted using the RGBA function to make it slightly transparent, ensuring the visibility of the navigation menu and enhancing the overall website appearance.", 'The speaker demonstrates changing the font color to turquoise and adding a padding of five pixels by 20 pixels to the anchor tags, allowing for customization and aesthetic improvement of the website.', "The home link is highlighted by adding a class 'home button' and styling it with a one-pixel solid gray border and a white background color, indicating the current page to the user.", 'Emphasizing the use of JavaScript and jQuery for website interactivity', "Providing instructions for styling the 'adopt now' button using CSS", "Creating a div with class 'tagline' and defining the tagline as 'Share your home with a cute dog'", 'Styling the H1 tags by setting the color to white, font size to 50 pixels, font family to Verdana, and aligning the text at the center', 'Demonstrating the process of creating a simple website using HTML and CSS', 'Setting the position of the tagline to absolute, adjusting width to 1200 pixels, and setting margins', 'Encouraging engagement and learning through comments and subscriptions', 'Setting the border to one pixel solid white, adding padding of 10 pixels by 30, and setting the text color to yellow', 'Refreshing the website to see the changes', 'Emphasizing the importance of knowing different CSS styling functions to make the website more interactive and visually appealing']}