title
HTML Tutorial for Beginners: HTML Crash Course

description
HTML Tutorial for Beginners - Learn HTML for a career in web development. This HTML tutorial teaches you everything you need to get started. 🔥 Get the complete HTML/CSS course (zero to hero): https://bit.ly/3rUpjG4 👍 Subscribe for more HTML tutorials like this: https://goo.gl/6PYaGF ⭐️ Want to learn more from me? Check out these links: Courses: https://codewithmosh.com Twitter: https://twitter.com/moshhamedani Facebook: https://www.facebook.com/programmingwithmosh/ Blog: https://programmingwithmosh.com TABLE OF CONTENT 0:00:00 Introduction 0:01:09 What You Need 0:03:42 Languages and Tools of Web Development 0:09:36 How the Web Works 0:14:27 Inspecting HTTP Requests and Responses 0:18:30 HTML Basics 0:25:41 CSS Basics 0:30:35 Formatting Code 0:32:51 Inspecting Pages Using DevTools 0:35:04 Validating Web Pages 0:39:45 The Head Section 0:43:33 Text 0:50:13 Entities 0:53:42 Hyperlinks 1:03:12 Images #HTML #WebDevelopment #Coding HTML is the language behind every website on the Internet! It's a markup language used to define the structure and content of web pages. It's the first language you need to learn if you want to become a web developer.

detail
{'title': 'HTML Tutorial for Beginners: HTML Crash Course', 'heatmap': [{'end': 1173.873, 'start': 1125.665, 'weight': 0.895}, {'end': 1471.18, 'start': 1420.431, 'weight': 0.726}, {'end': 1721.692, 'start': 1667.502, 'weight': 1}], 'summary': 'This html tutorial covers fundamental web development concepts, tools, and skills, including html & css fundamentals, front-end web development, understanding http requests and responses, html and css basics, code formatting, html validation, meta elements, text markup, html entities, linking, and image selection and optimization tips, with 13 hours of comprehensive learning material and a 30-day money-back guarantee.', 'chapters': [{'end': 154.278, 'segs': [{'end': 47.517, 'src': 'embed', 'start': 21.889, 'weight': 0, 'content': [{'end': 27.271, 'text': "So in the first part of this series, we're going to talk about the fundamentals of web development with HTML and CSS.", 'start': 21.889, 'duration': 5.382}, {'end': 30.292, 'text': "In the second part, we'll explore the advanced concepts.", 'start': 27.831, 'duration': 2.461}, {'end': 34.813, 'text': "And in the third part we'll put everything together and build a beautiful,", 'start': 30.852, 'duration': 3.961}, {'end': 40.595, 'text': 'responsive and blazingly fast website for an imaginary cloud hosting company called Moshify.', 'start': 34.813, 'duration': 5.782}, {'end': 45.316, 'text': 'If you want to play with this website, just head over to moshify.com and see it for yourself.', 'start': 41.135, 'duration': 4.181}, {'end': 47.517, 'text': "This is what you're going to build in this series.", 'start': 45.816, 'duration': 1.701}], 'summary': 'Series covers fundamentals, advanced concepts, building a responsive website for moshify.', 'duration': 25.628, 'max_score': 21.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU21889.jpg'}, {'end': 92.263, 'src': 'embed', 'start': 60.438, 'weight': 1, 'content': [{'end': 62.001, 'text': "Now let's jump in and get started.", 'start': 60.438, 'duration': 1.563}, {'end': 75.955, 'text': "Alright, let's talk about the tools you need to take this course.", 'start': 73.814, 'duration': 2.141}, {'end': 78.696, 'text': 'For the starter, you need a code editor.', 'start': 76.535, 'duration': 2.161}, {'end': 85.339, 'text': 'There are so many code editors out there, like Visual Studio Code or VS Code, Sublime Text, Atom, and so on.', 'start': 79.217, 'duration': 6.122}, {'end': 92.263, 'text': "In this course, I'm going to use VS Code, along with a few extensions for starting a web server and formatting our code.", 'start': 86.04, 'duration': 6.223}], 'summary': 'Course requires code editor like vs code, and specific extensions for web server and code formatting', 'duration': 31.825, 'max_score': 60.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU60438.jpg'}, {'end': 172.372, 'src': 'embed', 'start': 140.413, 'weight': 2, 'content': [{'end': 141.873, 'text': 'This is a very popular extension.', 'start': 140.413, 'duration': 1.46}, {'end': 145.915, 'text': "It's been downloaded almost 8 million times Now.", 'start': 142.294, 'duration': 3.621}, {'end': 150.397, 'text': "in addition to these, we're going to use a browser to view and test our web pages.", 'start': 145.915, 'duration': 4.482}, {'end': 154.278, 'text': "again, You can use your favorite browser, But in this course I'm going to use Google Chrome,", 'start': 150.397, 'duration': 3.881}, {'end': 167.127, 'text': "and I encourage you to use the same browser so you can easily follow the course and We're going to start our web development journey here.", 'start': 154.278, 'duration': 12.849}, {'end': 172.372, 'text': 'In every section you will learn something new about web development and by the end of this course,', 'start': 167.727, 'duration': 4.645}], 'summary': 'A popular extension with 8 million downloads, using google chrome for web development journey.', 'duration': 31.959, 'max_score': 140.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU140413.jpg'}], 'start': 4.755, 'title': 'Html & css fundamentals', 'summary': 'Covers the fundamental concepts of web development using html and css, along with essential tools such as vs code, prettier code formatter, and live server extension, and recommends the use of google chrome as the primary browser for web page testing.', 'chapters': [{'end': 154.278, 'start': 4.755, 'title': 'Html & css fundamentals', 'summary': 'Covers the fundamentals of web development with html and css, the tools needed for the course including vs code, prettier code formatter, and live server extension, and the use of google chrome as the preferred browser for viewing and testing web pages.', 'duration': 149.523, 'highlights': ['The chapter covers the fundamentals of web development with HTML and CSS.', 'The tools needed for the course include VS Code, Prettier code formatter, and live server extension.', 'The use of Google Chrome as the preferred browser for viewing and testing web pages.']}], 'duration': 149.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU4755.jpg', 'highlights': ['The chapter covers the fundamentals of web development with HTML and CSS.', 'The tools needed for the course include VS Code, Prettier code formatter, and live server extension.', 'The use of Google Chrome as the preferred browser for viewing and testing web pages.']}, {'end': 568.414, 'segs': [{'end': 229.958, 'src': 'embed', 'start': 198.454, 'weight': 2, 'content': [{'end': 205.638, 'text': 'You will also learn how to inspect network traffic using Chrome DevTools, which is a very powerful tool used by front-end developers.', 'start': 198.454, 'duration': 7.184}, {'end': 213.223, 'text': "We'll also talk about the basics of HTML and CSS, and validating web pages, which is something a lot of developers miss.", 'start': 206.359, 'duration': 6.864}, {'end': 216.986, 'text': "This is going to be an awesome journey, so let's jump in and get started.", 'start': 213.784, 'duration': 3.202}, {'end': 229.958, 'text': 'This course is your first step towards becoming a web developer.', 'start': 226.977, 'duration': 2.981}], 'summary': 'Learn network traffic inspection, html/css basics, and start web development journey.', 'duration': 31.504, 'max_score': 198.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU198454.jpg'}, {'end': 274.366, 'src': 'embed', 'start': 246.542, 'weight': 1, 'content': [{'end': 251.843, 'text': "It's behind the scenes and it's mainly about storing data in databases and providing it to the front end.", 'start': 246.542, 'duration': 5.301}, {'end': 255.786, 'text': 'So web development jobs fall into three main categories.', 'start': 252.683, 'duration': 3.103}, {'end': 262.873, 'text': 'Front end development, back end development, and full stack development, which involves both front end and back end development.', 'start': 256.387, 'duration': 6.486}, {'end': 268.099, 'text': 'Front end developers use html, css, and javascript to build front ends.', 'start': 263.574, 'duration': 4.525}, {'end': 274.366, 'text': 'Backend developers have different sets of tools available to them, which is outside the scope of this course.', 'start': 268.739, 'duration': 5.627}], 'summary': 'Web development involves front end, back end, and full stack development using html, css, and javascript.', 'duration': 27.824, 'max_score': 246.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU246542.jpg'}, {'end': 423.293, 'src': 'embed', 'start': 398.195, 'weight': 0, 'content': [{'end': 403.637, 'text': 'so the better you learn and understand these languages and their features, the better you will be at front-end development.', 'start': 398.195, 'duration': 5.442}, {'end': 409.338, 'text': 'So your front end development journey starts with HTML and CSS.', 'start': 405.854, 'duration': 3.484}, {'end': 414.644, 'text': 'I would say, if you spend three to five hours every day studying and coding,', 'start': 409.939, 'duration': 4.705}, {'end': 419.93, 'text': 'you should be able to have a reasonable understanding of these two languages in about a month or a month and a half.', 'start': 414.644, 'duration': 5.286}, {'end': 423.293, 'text': 'Once you learn these languages, then you need to learn JavaScript.', 'start': 420.59, 'duration': 2.703}], 'summary': 'Spending 3-5 hours daily, one can grasp html and css in about a month or a month and a half, leading to better front-end development.', 'duration': 25.098, 'max_score': 398.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU398195.jpg'}], 'start': 154.278, 'title': 'Front-end web development', 'summary': 'Covers web development fundamentals, including languages, tools, key concepts, and the use of chrome devtools, with a focus on html and css. it also explains the roadmap for front-end web development, emphasizing the importance of html, css, and javascript, and provides time estimates for learning each skill.', 'chapters': [{'end': 229.958, 'start': 154.278, 'title': 'Web development fundamentals', 'summary': 'Introduces the fundamentals of web development, covering languages and tools used, key concepts such as url, http, dom, website functioning, and the use of chrome devtools, with a focus on html and css, aiming to enable the learners to build a beautiful web page by the end of the course.', 'duration': 75.68, 'highlights': ['You will learn something new about web development in every section and by the end of this course, you will put all of this together to build a beautiful web page.', 'The section covers the fundamentals of web development, including languages and tools used, key concepts and vocabulary such as URL, HTTP, DOM, and website functioning under the hood.', 'The course introduces the basics of HTML and CSS, and validating web pages, aiming to equip learners with essential web development skills.', 'The use of Chrome DevTools for inspecting network traffic is emphasized as a powerful tool used by front-end developers.']}, {'end': 568.414, 'start': 230.458, 'title': 'Front-end web development roadmap', 'summary': 'Explains the roadmap for front-end web development, emphasizing the importance of html, css, and javascript, followed by learning front-end frameworks and version control systems, with time estimates for learning each skill.', 'duration': 337.956, 'highlights': ['The front end and back end are the two main parts of a website, with web development jobs falling into three categories: front end, back end, and full stack development.', 'HTML, CSS, and JavaScript are fundamental for front-end development, with an estimated learning time of 3-5 hours daily for a month or a month and a half for HTML and CSS, and an additional six weeks for JavaScript.', 'Front-end frameworks and libraries like React, Angular, and Vue help in accelerating web development, with React being the most popular tool, requiring one to two months for learning.', 'Version control systems, particularly Git, are essential for keeping track of project history and are used in over 70% of software companies, requiring an estimated two weeks for learning.']}], 'duration': 414.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU154278.jpg', 'highlights': ['HTML, CSS, and JavaScript are fundamental for front-end development, with an estimated learning time of 3-5 hours daily for a month or a month and a half for HTML and CSS, and an additional six weeks for JavaScript.', 'The front end and back end are the two main parts of a website, with web development jobs falling into three categories: front end, back end, and full stack development.', 'The use of Chrome DevTools for inspecting network traffic is emphasized as a powerful tool used by front-end developers.', 'The course introduces the basics of HTML and CSS, and validating web pages, aiming to equip learners with essential web development skills.']}, {'end': 1343.132, 'segs': [{'end': 619.44, 'src': 'embed', 'start': 591.25, 'weight': 3, 'content': [{'end': 596.956, 'text': "As part of this, we're going to talk about a few important concepts and terms that you need to know as a web developer.", 'start': 591.25, 'duration': 5.706}, {'end': 601.381, 'text': "So let's say we launch our browser and head over to a website like codewithmosh.com.", 'start': 597.337, 'duration': 4.044}, {'end': 608.649, 'text': 'Now this address that we have in the browser address bar is called a URL, which is short for Uniform Resource Locator.', 'start': 602.202, 'duration': 6.447}, {'end': 611.872, 'text': "Basically it's a way to locate a resource on the internet.", 'start': 609.21, 'duration': 2.662}, {'end': 619.44, 'text': 'Resources can be web pages, also called HTML documents, they can be images, video files, fonts, and so on.', 'start': 612.333, 'duration': 7.107}], 'summary': 'Important web development concepts and terms, including url and resource types.', 'duration': 28.19, 'max_score': 591.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU591250.jpg'}, {'end': 666.869, 'src': 'embed', 'start': 635.612, 'weight': 2, 'content': [{'end': 638.934, 'text': 'for short, this is what we call the client server model.', 'start': 635.612, 'duration': 3.322}, {'end': 643.237, 'text': 'the client requests a service, the server provides that service.', 'start': 638.934, 'duration': 4.303}, {'end': 648.24, 'text': 'so our browser sends a message to the server and says hey, give me the home page of this website.', 'start': 643.237, 'duration': 5.003}, {'end': 652.022, 'text': 'This is kind of similar to how you send your friend a text message.', 'start': 648.72, 'duration': 3.302}, {'end': 658.565, 'text': "You can think of your phone as the client sending the message and your friend's phone as the server receiving the message.", 'start': 652.482, 'duration': 6.083}, {'end': 660.126, 'text': 'Now back to our example.', 'start': 659.165, 'duration': 0.961}, {'end': 666.869, 'text': 'This message is formatted based on a protocol called HTTP or hypertext transfer protocol.', 'start': 660.426, 'duration': 6.443}], 'summary': 'Client-server model: client requests service, server provides. browser sends http message for website page, akin to texting.', 'duration': 31.257, 'max_score': 635.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU635612.jpg'}, {'end': 789.685, 'src': 'embed', 'start': 742.395, 'weight': 0, 'content': [{'end': 748.059, 'text': 'Every data exchange using the HTTP protocol involves two messages, a request and a response.', 'start': 742.395, 'duration': 5.664}, {'end': 751.68, 'text': "Now what is in the response? Here's a simplified example.", 'start': 748.819, 'duration': 2.861}, {'end': 759.162, 'text': 'On the first line, we see the version of HTTP protocol used, followed by a number which is the status code.', 'start': 752.38, 'duration': 6.782}, {'end': 760.703, 'text': '200 means successful or ok.', 'start': 759.182, 'duration': 1.521}, {'end': 764.624, 'text': 'Right below that, we can see the date and time of the response.', 'start': 761.523, 'duration': 3.101}, {'end': 779.015, 'text': 'Next we can see the type of content the server is sending back to the client in this case text slash html and after that we can see the html code or the html document that represents the homepage of codewithmosh.com.', 'start': 765.284, 'duration': 13.731}, {'end': 781.878, 'text': 'Of course, the actual html code is way longer.', 'start': 779.516, 'duration': 2.362}, {'end': 789.685, 'text': 'Now, as the browser reads this HTML document, it constructs what we call a DOM or a document object model.', 'start': 782.498, 'duration': 7.187}], 'summary': 'Http response includes status code, date, content type, and html code. 200 means success.', 'duration': 47.29, 'max_score': 742.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU742395.jpg'}, {'end': 880.121, 'src': 'embed', 'start': 828.815, 'weight': 4, 'content': [{'end': 834.198, 'text': 'Many of these HTTP requests are sent in parallel, so we can see the page as quickly as possible.', 'start': 828.815, 'duration': 5.383}, {'end': 839.6, 'text': 'Once the browser has all the necessary resources, it will render the HTML document.', 'start': 834.878, 'duration': 4.722}, {'end': 842.461, 'text': 'Rendering an HTML document means displaying it.', 'start': 840.18, 'duration': 2.281}, {'end': 844.822, 'text': "It's a fancy technical term we use often.", 'start': 842.801, 'duration': 2.021}, {'end': 851.785, 'text': 'So in a nutshell, our browser sends an HTTP request to the server and receives an HTTP response.', 'start': 845.502, 'duration': 6.283}, {'end': 855.106, 'text': 'This HTTP response contains an HTML document.', 'start': 852.365, 'duration': 2.741}, {'end': 861.229, 'text': 'The browser reads that HTML document to construct a document object model and render the page.', 'start': 855.546, 'duration': 5.683}, {'end': 864.68, 'text': "In the next lesson I'm going to show you all of these steps in action.", 'start': 862.01, 'duration': 2.67}, {'end': 874.437, 'text': "Alright, let's see HTTP requests and responses in action.", 'start': 871.755, 'duration': 2.682}, {'end': 877.839, 'text': 'So open up chrome and head over to google.com.', 'start': 875.197, 'duration': 2.642}, {'end': 880.121, 'text': 'Now we need to access chrome dev tools.', 'start': 878.4, 'duration': 1.721}], 'summary': 'Http requests are sent in parallel to render html document, browser constructs document object model.', 'duration': 51.306, 'max_score': 828.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU828815.jpg'}, {'end': 1178.756, 'src': 'heatmap', 'start': 1125.665, 'weight': 6, 'content': [{'end': 1129.568, 'text': "Now, let's go back to vs code, and open the explorer panel.", 'start': 1125.665, 'duration': 3.903}, {'end': 1135.011, 'text': 'Then we go to open folder, and open the folder that we just created.', 'start': 1130.548, 'duration': 4.463}, {'end': 1144.926, 'text': "good, now, this folder is currently empty, so let's add a new file here called index.html.", 'start': 1137.278, 'duration': 7.648}, {'end': 1152.274, 'text': "as I told you before, index.html often represents the homepage of websites, so let's go with that.", 'start': 1144.926, 'duration': 7.348}, {'end': 1157.8, 'text': 'now we can close the explorer panel by pressing command and b on mac or control and b on windows.', 'start': 1152.274, 'duration': 5.526}, {'end': 1165.346, 'text': 'good?. Now the first thing we need to do here is to tell the browser that this is an html5 document.', 'start': 1158.621, 'duration': 6.725}, {'end': 1173.873, 'text': 'So we type a left angle bracket, now look at this suggestion list, the first item here is doc type or document type.', 'start': 1166.047, 'duration': 7.826}, {'end': 1178.756, 'text': "Let's press enter or tab, VS code generated this piece of code for us.", 'start': 1174.453, 'duration': 4.303}], 'summary': 'Using vs code to create an empty folder, add index.html, and define it as an html5 document.', 'duration': 26.482, 'max_score': 1125.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1125665.jpg'}], 'start': 568.614, 'title': 'How the web works and understanding http requests and responses', 'summary': 'Covers the process of how a browser communicates with a web server using the http protocol, involving requests, responses, and the client-server model, as well as understanding http requests and responses with a focus on practical demonstrations and chrome devtools.', 'chapters': [{'end': 764.624, 'start': 568.614, 'title': 'How the web works', 'summary': 'Explains the process of how a browser communicates with a web server using the http protocol, involving the exchange of requests and responses, and also introduces the concept of a url and the client-server model.', 'duration': 196.01, 'highlights': ['The browser sends a message to the server formatted based on the HTTP protocol, requesting the home page of a website, and the server responds with an HTTP response message containing status code 200 for a successful request.', 'The address in the browser address bar is called a URL, which is short for Uniform Resource Locator, used to locate resources on the internet such as web pages, images, video files, and fonts.', 'Introduces the concept of the client-server model, where the client, or browser, requests a service from the server, which then provides the service, demonstrating the interaction between the two in the context of web communication.']}, {'end': 1343.132, 'start': 765.284, 'title': 'Understanding http requests and responses', 'summary': 'Explains the process of browser rendering an html document, sending http requests for resources, and creating an html5 document, with a focus on the chrome devtools and practical demonstrations.', 'duration': 577.848, 'highlights': ['The browser constructs a DOM from the HTML document, representing elements like paragraphs, images, and links, and reads HTML documents returned from the server.', 'The browser sends multiple HTTP requests in parallel to fetch resources, aiming to render the HTML document and display the page as quickly as possible.', 'Demonstration of using Chrome DevTools to inspect network traffic, including HTTP requests and responses, with detailed information such as headers, status codes, and data transferred.', 'Step-by-step guidance on creating an HTML5 document using VS Code, including defining the structure with HTML elements and using live server for preview.']}], 'duration': 774.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU568614.jpg', 'highlights': ['The browser sends a message to the server formatted based on the HTTP protocol, requesting the home page of a website, and the server responds with an HTTP response message containing status code 200 for a successful request.', 'The browser constructs a DOM from the HTML document, representing elements like paragraphs, images, and links, and reads HTML documents returned from the server.', 'Introduces the concept of the client-server model, where the client, or browser, requests a service from the server, which then provides the service, demonstrating the interaction between the two in the context of web communication.', 'The address in the browser address bar is called a URL, which is short for Uniform Resource Locator, used to locate resources on the internet such as web pages, images, video files, and fonts.', 'The browser sends multiple HTTP requests in parallel to fetch resources, aiming to render the HTML document and display the page as quickly as possible.', 'Demonstration of using Chrome DevTools to inspect network traffic, including HTTP requests and responses, with detailed information such as headers, status codes, and data transferred.', 'Step-by-step guidance on creating an HTML5 document using VS Code, including defining the structure with HTML elements and using live server for preview.']}, {'end': 1832.664, 'segs': [{'end': 1412.368, 'src': 'embed', 'start': 1386.58, 'weight': 2, 'content': [{'end': 1393.721, 'text': 'Now in the previous versions of HTML, we used to add a forward slash here, and this represents a self-closing tag.', 'start': 1386.58, 'duration': 7.141}, {'end': 1397.802, 'text': "but we don't have to do this in HTML5, so I'm going to keep the code simpler.", 'start': 1394.341, 'duration': 3.461}, {'end': 1404.025, 'text': 'Now, here we have two attributes, source and alt.', 'start': 1399.143, 'duration': 4.882}, {'end': 1408.307, 'text': 'With these attributes, we can supply additional information about an element.', 'start': 1404.625, 'duration': 3.682}, {'end': 1412.368, 'text': 'So we use the source element to specify the path to our image.', 'start': 1409.087, 'duration': 3.281}], 'summary': 'In html5, self-closing tags no longer require a forward slash, simplifying the code. attributes such as source and alt provide additional information about an element, with the source element specifying the image path.', 'duration': 25.788, 'max_score': 1386.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1386580.jpg'}, {'end': 1471.18, 'src': 'heatmap', 'start': 1420.431, 'weight': 0.726, 'content': [{'end': 1424.556, 'text': "Here I'm going to create a new folder, called images.", 'start': 1420.431, 'duration': 4.125}, {'end': 1432.022, 'text': "Now for this demo I'm going to use my own image, which you can also download right below this video, but you can use any image that you want.", 'start': 1425.917, 'duration': 6.105}, {'end': 1437.326, 'text': "So here's my image, I'm going to drop it onto the images folder.", 'start': 1432.943, 'duration': 4.383}, {'end': 1438.648, 'text': "It's right here.", 'start': 1438.127, 'duration': 0.521}, {'end': 1441.93, 'text': "Now let's close this window, good.", 'start': 1439.808, 'duration': 2.122}, {'end': 1447.156, 'text': 'So where is this image relative to our index.html file?', 'start': 1442.691, 'duration': 4.465}, {'end': 1449.519, 'text': "It's inside the images folder, right?", 'start': 1447.917, 'duration': 1.602}, {'end': 1455.725, 'text': 'So here, in double quotes, we type images slash mosh.jpg.', 'start': 1450.239, 'duration': 5.486}, {'end': 1460.471, 'text': 'Now vs code is suggesting this name, so we can press tab to complete the code.', 'start': 1456.306, 'duration': 4.165}, {'end': 1471.18, 'text': 'Now, alt is short for alternative text, and we use this attribute to give the browser some text to display in case the image cannot be displayed.', 'start': 1462.052, 'duration': 9.128}], 'summary': "Creating a new folder 'images' and adding an image to it in a web development tutorial.", 'duration': 50.749, 'max_score': 1420.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1420431.jpg'}, {'end': 1554.816, 'src': 'embed', 'start': 1527.46, 'weight': 1, 'content': [{'end': 1533.605, 'text': 'As I told you before, we use html to define the structure or the building block of our web pages.', 'start': 1527.46, 'duration': 6.145}, {'end': 1539.089, 'text': "In the next lesson, I'm going to show you how to apply css so our page looks kind of like a real tweet.", 'start': 1534.225, 'duration': 4.864}, {'end': 1549.592, 'text': "Now let's see how we can use CSS to improve the look and feel of this page.", 'start': 1546.05, 'duration': 3.542}, {'end': 1551.274, 'text': 'Look at our head element.', 'start': 1550.333, 'duration': 0.941}, {'end': 1554.816, 'text': 'Currently we have a single element inside the head element.', 'start': 1551.774, 'duration': 3.042}], 'summary': 'Using html to define web page structure, will apply css for a tweet-like look.', 'duration': 27.356, 'max_score': 1527.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1527460.jpg'}, {'end': 1721.692, 'src': 'heatmap', 'start': 1667.502, 'weight': 1, 'content': [{'end': 1670.764, 'text': 'This will push the image element to the left side of our text elements.', 'start': 1667.502, 'duration': 3.262}, {'end': 1671.584, 'text': 'Take a look.', 'start': 1671.144, 'duration': 0.44}, {'end': 1676.327, 'text': "So, that's a lot better, but our image is so close to the text.", 'start': 1672.365, 'duration': 3.962}, {'end': 1679.008, 'text': 'I want to add some space after the image.', 'start': 1676.807, 'duration': 2.201}, {'end': 1684.851, 'text': 'So, here we use another property called margin-right.', 'start': 1679.629, 'duration': 5.222}, {'end': 1686.792, 'text': 'We can set it to 10 pixels.', 'start': 1685.552, 'duration': 1.24}, {'end': 1689.894, 'text': "Save, and that's a lot better.", 'start': 1687.553, 'duration': 2.341}, {'end': 1692.452, 'text': "Now let's make the username bold.", 'start': 1690.851, 'duration': 1.601}, {'end': 1694.293, 'text': "So we're going to repeat one more time.", 'start': 1693.032, 'duration': 1.261}, {'end': 1698.676, 'text': "This time we're going to apply a rule to our paragraph element.", 'start': 1694.874, 'duration': 3.802}, {'end': 1704.18, 'text': "So here we're going to set the font-weight property to bold.", 'start': 1699.437, 'duration': 4.743}, {'end': 1705.981, 'text': 'Take a look.', 'start': 1705.601, 'duration': 0.38}, {'end': 1709.803, 'text': 'See what happened? Both our text elements are bold.', 'start': 1707.262, 'duration': 2.541}, {'end': 1717.168, 'text': 'But what if you want to apply this style only to the username? Well, we have to separate these two paragraph elements.', 'start': 1710.324, 'duration': 6.844}, {'end': 1721.692, 'text': "So I'm going to give the first paragraph element an attribute called class.", 'start': 1717.809, 'duration': 3.883}], 'summary': 'Styling image and text elements, adding space after image, making username bold, applying different styles to paragraph elements.', 'duration': 54.19, 'max_score': 1667.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1667502.jpg'}, {'end': 1827.34, 'src': 'embed', 'start': 1798.229, 'weight': 0, 'content': [{'end': 1804.257, 'text': "I just wanted to let you know that this video you've been watching is the first hour of my ultimate HTML and CSS series.", 'start': 1798.229, 'duration': 6.028}, {'end': 1809.323, 'text': 'So, after you watch this video, if you want to learn more from me, you can enroll in the full course,', 'start': 1804.657, 'duration': 4.666}, {'end': 1815.77, 'text': 'which is about 13 hours long and covers everything you need to know to build professional, quality websites with HTML and CSS.', 'start': 1809.323, 'duration': 6.447}, {'end': 1821.015, 'text': 'It also includes summary notes, exercises, a real project,', 'start': 1816.631, 'duration': 4.384}, {'end': 1827.34, 'text': "a certificate of completion you can add to your resume and a 30-day money-back guarantee to get a refund if you're not satisfied.", 'start': 1821.015, 'duration': 6.325}], 'summary': 'First hour of html and css series, full course is 13 hours long with summary notes, exercises, real project, and certificate.', 'duration': 29.111, 'max_score': 1798.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1798229.jpg'}], 'start': 1343.132, 'title': 'Html and css basics', 'summary': 'Introduces html image element and its attributes, also covers basics of web page creation using html and css, with 13 hours of comprehensive learning material and a 30-day money-back guarantee.', 'chapters': [{'end': 1412.368, 'start': 1343.132, 'title': 'Html image element', 'summary': 'Introduces the process of adding an image element in html, explaining the differences in syntax and attributes, and emphasizing the shift in self-closing tag representation in html5.', 'duration': 69.236, 'highlights': ["The image element in HTML is added using the 'img' tag and doesn't require a closing tag, with attributes like 'src' and 'alt' to provide additional information.", 'In HTML5, the self-closing tag representation using a forward slash is not required for the image element, simplifying the code structure.']}, {'end': 1832.664, 'start': 1413.109, 'title': 'Html & css basics and application', 'summary': "Covers the basics of creating a web page using html and applying css to enhance its appearance, including specific code examples and tips. mosh's ultimate html and css series, about 13 hours long, offers comprehensive learning with a 30-day money-back guarantee.", 'duration': 419.555, 'highlights': ["Mosh's ultimate HTML and CSS series offers a 13-hour comprehensive learning with a 30-day money-back guarantee.", 'Instructions on using CSS to modify the appearance of web elements are provided, including specific code examples and tips.', 'The process of creating a web page using HTML, including adding elements and attributes, is explained with specific code examples and tips.']}], 'duration': 489.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1343132.jpg', 'highlights': ["Mosh's ultimate HTML and CSS series offers a 13-hour comprehensive learning with a 30-day money-back guarantee.", 'The process of creating a web page using HTML, including adding elements and attributes, is explained with specific code examples and tips.', "The image element in HTML is added using the 'img' tag and doesn't require a closing tag, with attributes like 'src' and 'alt' to provide additional information.", 'In HTML5, the self-closing tag representation using a forward slash is not required for the image element, simplifying the code structure.', 'Instructions on using CSS to modify the appearance of web elements are provided, including specific code examples and tips.']}, {'end': 2484.28, 'segs': [{'end': 1889.825, 'src': 'embed', 'start': 1860.855, 'weight': 1, 'content': [{'end': 1865.018, 'text': 'but formatting is very important when it comes to reading and maintaining code.', 'start': 1860.855, 'duration': 4.163}, {'end': 1868.761, 'text': 'we want our code to be beautiful and perfectly formatted, just like an article.', 'start': 1865.018, 'duration': 3.743}, {'end': 1871.063, 'text': 'This is where we use the Prettier plugin.', 'start': 1869.321, 'duration': 1.742}, {'end': 1875.129, 'text': 'With Prettier, we can format our code in a consistent fashion.', 'start': 1871.664, 'duration': 3.465}, {'end': 1880.356, 'text': "This is super important when you're part of a team because different people have different ways of formatting their code.", 'start': 1875.569, 'duration': 4.787}, {'end': 1885.963, 'text': 'But if everyone on the team uses the Prettier plugin, the code will be consistently formatted.', 'start': 1880.656, 'duration': 5.307}, {'end': 1889.825, 'text': 'so let me show you how to use prelier on the top.', 'start': 1886.664, 'duration': 3.161}], 'summary': 'Prettier ensures consistent code formatting for team collaboration.', 'duration': 28.97, 'max_score': 1860.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1860855.jpg'}, {'end': 2096.15, 'src': 'embed', 'start': 2065.838, 'weight': 0, 'content': [{'end': 2070.92, 'text': 'So a lot of front end developers use dev tools to play with these styles and get the look they want.', 'start': 2065.838, 'duration': 5.082}, {'end': 2075.541, 'text': 'Once they figure out the exact styles and their values, then they apply them in the code.', 'start': 2071.3, 'duration': 4.241}, {'end': 2080.543, 'text': 'Now one more thing, over here, you can see where these styles have been applied.', 'start': 2076.241, 'duration': 4.302}, {'end': 2090.005, 'text': 'So, in index.html on line 6, we can click on this link, and this takes us to the exact line of code where we wrote that style.', 'start': 2081.003, 'duration': 9.002}, {'end': 2096.15, 'text': 'that we are currently on the sources tab, so we can go back to elements and inspect other elements.', 'start': 2090.706, 'duration': 5.444}], 'summary': 'Front-end developers use dev tools to apply styles to code, with the ability to track their application.', 'duration': 30.312, 'max_score': 2065.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2065838.jpg'}, {'end': 2156.43, 'src': 'embed', 'start': 2128.067, 'weight': 7, 'content': [{'end': 2134.593, 'text': "Like currently we don't have any problems on this web page, it looks perfectly fine to me, but let's run it by the standard HTML validator.", 'start': 2128.067, 'duration': 6.526}, {'end': 2137.035, 'text': 'So we go to validator.w3.org.', 'start': 2135.253, 'duration': 1.782}, {'end': 2142.763, 'text': 'this is a standard markup validation service.', 'start': 2139.622, 'duration': 3.141}, {'end': 2146.065, 'text': 'we have three methods for validating our html markup.', 'start': 2142.763, 'duration': 3.302}, {'end': 2150.107, 'text': 'we can validate by an address if our website is live on the internet,', 'start': 2146.065, 'duration': 4.042}, {'end': 2156.43, 'text': "but this doesn't work for us because our website is currently hosted locally in our development server.", 'start': 2150.107, 'duration': 6.323}], 'summary': 'Using validator.w3.org to validate html markup with three methods, including live website validation, not applicable for locally hosted website.', 'duration': 28.363, 'max_score': 2128.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2128067.jpg'}, {'end': 2208.282, 'src': 'embed', 'start': 2175.701, 'weight': 5, 'content': [{'end': 2179.544, 'text': "so let's upload our index.html file and check.", 'start': 2175.701, 'duration': 3.843}, {'end': 2183.776, 'text': 'So look, we have one warning and two errors.', 'start': 2181.075, 'duration': 2.701}, {'end': 2189.877, 'text': "The warning is saying that we haven't added the lang or language attribute to the html start tag.", 'start': 2184.396, 'duration': 5.481}, {'end': 2196.239, 'text': 'This is a common best practice because with this we can tell search engines what is the language of this webpage.', 'start': 2190.458, 'duration': 5.781}, {'end': 2199.24, 'text': 'So they can do a better job at displaying the results.', 'start': 2196.559, 'duration': 2.681}, {'end': 2208.282, 'text': "This is very easy to fix, so here's our html tag, we're going to add the lang attribute and set it to en which is short for english.", 'start': 2199.98, 'duration': 8.302}], 'summary': 'Uploading index.html showed 1 warning and 2 errors; added lang attribute to specify english language.', 'duration': 32.581, 'max_score': 2175.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2175701.jpg'}, {'end': 2251.502, 'src': 'embed', 'start': 2224.508, 'weight': 6, 'content': [{'end': 2230.81, 'text': 'So earlier we had this alt attribute, I told you that, use the alt attribute to provide a description for our image.', 'start': 2224.508, 'duration': 6.302}, {'end': 2235.071, 'text': 'So if the image cannot be displayed, the alternative text will be displayed.', 'start': 2231.45, 'duration': 3.621}, {'end': 2238.572, 'text': "Again, we're going to talk about the alt attribute in more detail in the future.", 'start': 2235.731, 'duration': 2.841}, {'end': 2241.994, 'text': "So back to our code, let's fix this error real quick.", 'start': 2239.312, 'duration': 2.682}, {'end': 2251.502, 'text': "Here's our image tag, let's add the alt attribute, and for the description I'm going to say an image of Mosh Hamadani.", 'start': 2242.575, 'duration': 8.927}], 'summary': 'Use alt attribute to describe images for display and code fix.', 'duration': 26.994, 'max_score': 2224.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2224508.jpg'}, {'end': 2369.845, 'src': 'embed', 'start': 2323.453, 'weight': 2, 'content': [{'end': 2325.094, 'text': 'everything is perfect.', 'start': 2323.453, 'duration': 1.641}, {'end': 2326.695, 'text': 'so this is all about validation.', 'start': 2325.094, 'duration': 1.601}, {'end': 2328.256, 'text': 'validation is very important.', 'start': 2326.695, 'duration': 1.561}, {'end': 2336.161, 'text': "if your web pages aren't displayed as expected, always start with a quick validation, because this can often point you in the right direction, right.", 'start': 2328.256, 'duration': 7.905}, {'end': 2338.042, 'text': 'that brings us to the end of this section.', 'start': 2336.161, 'duration': 1.881}, {'end': 2341.024, 'text': "in the next section, we're going to explore html in more detail.", 'start': 2338.042, 'duration': 2.982}, {'end': 2353.858, 'text': "We're going to continue our web development journey and explore HTML in more detail.", 'start': 2349.636, 'duration': 4.222}, {'end': 2359.46, 'text': "So in this section, we're going to cover the essential HTML elements you need to know to build web pages.", 'start': 2354.378, 'duration': 5.082}, {'end': 2369.845, 'text': 'You will learn all the elements used for displaying text, links, images, lists, tables, as well as container and structural or semantic elements.', 'start': 2360.28, 'duration': 9.565}], 'summary': 'Validation is crucial for web development; html elements will be covered in detail in the next section.', 'duration': 46.392, 'max_score': 2323.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2323453.jpg'}, {'end': 2497.576, 'src': 'embed', 'start': 2465.61, 'weight': 4, 'content': [{'end': 2468.792, 'text': 'Asking can only represent the characters in the english language.', 'start': 2465.61, 'duration': 3.182}, {'end': 2469.953, 'text': "So it's very limited.", 'start': 2469.172, 'duration': 0.781}, {'end': 2477.056, 'text': 'So over here, different character sets have been created to represent more characters in international languages.', 'start': 2470.633, 'duration': 6.423}, {'end': 2484.28, 'text': 'The character set that we use most of the time these days is utf-8, which can represent almost all characters in the world.', 'start': 2477.657, 'duration': 6.623}, {'end': 2491.404, 'text': "So back to our code, with this meta element, we're defining the character set used in this html document.", 'start': 2485.041, 'duration': 6.363}, {'end': 2497.576, 'text': 'Now, below that we have a meta element for configuring the viewport.', 'start': 2492.913, 'duration': 4.663}], 'summary': 'Utf-8 allows representing almost all characters in the world in html documents.', 'duration': 31.966, 'max_score': 2465.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2465610.jpg'}], 'start': 1840.939, 'title': 'Importance of code formatting, devtools, html validation, and essential elements', 'summary': 'Emphasizes the significance of code formatting using prettier plugin for consistency, demonstrates chrome devtools for styling, and provides an overview of html validation. it also covers fixing html validation issues, essential html elements, and stresses the importance of validation for web development.', 'chapters': [{'end': 2175.701, 'start': 1840.939, 'title': 'Importance of code formatting and devtools', 'summary': 'Explains the importance of code formatting using prettier plugin to ensure consistent formatting across a team, and also demonstrates the usage of chrome devtools for inspecting and modifying styles, along with a brief overview of html validation.', 'duration': 334.762, 'highlights': ['The importance of code formatting using Prettier plugin for consistent formatting across a team', 'Demonstration of using Chrome DevTools for inspecting and modifying styles', 'Brief overview of HTML validation using validator.w3.org']}, {'end': 2484.28, 'start': 2175.701, 'title': 'Html validation and essential elements', 'summary': 'Covers html validation including fixing warnings and errors, and emphasizes the importance of validation for web development. it also introduces the essential html elements needed for building web pages and encourages thorough understanding even for those familiar with html basics.', 'duration': 308.579, 'highlights': ['HTML validation is important for web development, as it can point out errors and warnings that need to be fixed.', 'Adding the lang attribute to the HTML start tag is a common best practice, as it helps search engines identify the language of the webpage.', 'Use of the alt attribute for image elements is essential, providing a description for the image and allowing for display in case the image cannot be shown.', 'Introduction of essential HTML elements, including text, links, images, lists, tables, and structural or semantic elements, necessary for building web pages.', 'Explanation of character encoding and the significance of using UTF-8 character set, which can represent almost all characters in the world.']}], 'duration': 643.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU1840939.jpg', 'highlights': ['Demonstration of using Chrome DevTools for inspecting and modifying styles', 'The importance of code formatting using Prettier plugin for consistent formatting across a team', 'HTML validation is important for web development, as it can point out errors and warnings that need to be fixed.', 'Introduction of essential HTML elements, including text, links, images, lists, tables, and structural or semantic elements, necessary for building web pages.', 'Explanation of character encoding and the significance of using UTF-8 character set, which can represent almost all characters in the world.', 'Adding the lang attribute to the HTML start tag is a common best practice, as it helps search engines identify the language of the webpage.', 'Use of the alt attribute for image elements is essential, providing a description for the image and allowing for display in case the image cannot be shown.', 'Brief overview of HTML validation using validator.w3.org']}, {'end': 2846.631, 'segs': [{'end': 2527.761, 'src': 'embed', 'start': 2485.041, 'weight': 0, 'content': [{'end': 2491.404, 'text': "So back to our code, with this meta element, we're defining the character set used in this html document.", 'start': 2485.041, 'duration': 6.363}, {'end': 2497.576, 'text': 'Now, below that we have a meta element for configuring the viewport.', 'start': 2492.913, 'duration': 4.663}, {'end': 2501.138, 'text': 'The viewport is the visible area of a webpage.', 'start': 2498.336, 'duration': 2.802}, {'end': 2503.459, 'text': 'So, it is this area over here.', 'start': 2501.538, 'duration': 1.921}, {'end': 2508.162, 'text': 'Obviously, on a mobile device or on a tablet, our viewport is smaller.', 'start': 2504.3, 'duration': 3.862}, {'end': 2513.385, 'text': 'But here on desktop, we can change the size of the viewport by resizing the browser.', 'start': 2508.742, 'duration': 4.643}, {'end': 2515.827, 'text': 'So now, our viewport is smaller.', 'start': 2514.046, 'duration': 1.781}, {'end': 2517.648, 'text': 'Now back to our code.', 'start': 2516.227, 'duration': 1.421}, {'end': 2525.3, 'text': "With this element, we're defining the initial width and zoom factor for the viewport.", 'start': 2518.797, 'duration': 6.503}, {'end': 2527.761, 'text': "We'll talk about this in more detail in the future.", 'start': 2525.881, 'duration': 1.88}], 'summary': 'The transcript discusses defining character set, configuring viewport, and its size on different devices.', 'duration': 42.72, 'max_score': 2485.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2485041.jpg'}, {'end': 2626.669, 'src': 'embed', 'start': 2597.668, 'weight': 2, 'content': [{'end': 2600.89, 'text': 'What you see here comes from this element over here.', 'start': 2597.668, 'duration': 3.222}, {'end': 2603.351, 'text': 'So this is the purpose of meta elements.', 'start': 2601.55, 'duration': 1.801}, {'end': 2607.012, 'text': 'With these meta elements, we can give information about a webpage.', 'start': 2603.791, 'duration': 3.221}, {'end': 2611.234, 'text': "Alright, next we're going to talk about the elements you need to know for working with text.", 'start': 2607.832, 'duration': 3.402}, {'end': 2621.608, 'text': "Alright, now let's talk about the most common elements for working with text.", 'start': 2618.427, 'duration': 3.181}, {'end': 2626.669, 'text': 'So you learn about the p or paragraph element, which we use for displaying some text.', 'start': 2622.288, 'duration': 4.381}], 'summary': 'Meta elements provide information about webpages. common text elements like p are used for displaying text.', 'duration': 29.001, 'max_score': 2597.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2597668.jpg'}, {'end': 2702.025, 'src': 'embed', 'start': 2671.655, 'weight': 3, 'content': [{'end': 2675.937, 'text': "But don't assume that whenever you want to display italic content, you should use the m element.", 'start': 2671.655, 'duration': 4.282}, {'end': 2681.278, 'text': 'Because the purpose of the m element is to emphasize content in our html document.', 'start': 2676.377, 'duration': 4.901}, {'end': 2685.379, 'text': 'And this helps search engines extract important content in our documents.', 'start': 2681.638, 'duration': 3.741}, {'end': 2688.3, 'text': 'Anything to do with styling should be done in CSS.', 'start': 2685.939, 'duration': 2.361}, {'end': 2693.862, 'text': 'For example, here we can change the default style of emphasized elements and remove the italic.', 'start': 2688.72, 'duration': 5.142}, {'end': 2694.582, 'text': 'Let me show you.', 'start': 2694.122, 'duration': 0.46}, {'end': 2702.025, 'text': 'So, in the head section, we add the style element, and here we define a rule for emphasized content.', 'start': 2695.042, 'duration': 6.983}], 'summary': 'Use m element for emphasis, not for styling. use css for styling.', 'duration': 30.37, 'max_score': 2671.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2671655.jpg'}, {'end': 2802.678, 'src': 'embed', 'start': 2778.329, 'weight': 4, 'content': [{'end': 2785.876, 'text': 'Now in the past we had another element called b, which is short for bold, So whenever we wanted to make something bold, we use this element.', 'start': 2778.329, 'duration': 7.547}, {'end': 2792.685, 'text': 'But once again, this element is considered deprecated because styling should be done in CSS and not in HTML.', 'start': 2786.176, 'duration': 6.509}, {'end': 2795.81, 'text': "So don't use B or I elements.", 'start': 2793.807, 'duration': 2.003}, {'end': 2801.157, 'text': "Now I'm going to remove this element and just add html.", 'start': 2796.536, 'duration': 4.621}, {'end': 2802.678, 'text': 'let me show you a cool trick.', 'start': 2801.157, 'duration': 1.521}], 'summary': "The 'b' element for bold text is deprecated in html; use css for styling instead.", 'duration': 24.349, 'max_score': 2778.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2778329.jpg'}], 'start': 2485.041, 'title': 'Html meta elements and text markup', 'summary': 'Covers the usage of meta elements for webpage optimization, emphasizing the purpose of meta elements and the common markup elements for text, highlighting the usage of m element for emphasis and the deprecation of i and b elements.', 'chapters': [{'end': 2527.761, 'start': 2485.041, 'title': 'Html meta elements and viewport configuration', 'summary': 'Explains the usage of meta elements to define character set and configure the viewport in an html document, highlighting the significance of viewport in webpages and its adaptability to different devices.', 'duration': 42.72, 'highlights': ['The importance of defining character set and configuring the viewport in an HTML document is explained. The viewport is highlighted as the visible area of a webpage, adaptable to different devices and browsers.', 'The significance of viewport adaptability to different devices and browsers is emphasized, showcasing how its size can change on mobile devices, tablets, and desktops.']}, {'end': 2846.631, 'start': 2528.202, 'title': 'Html meta elements and text markup', 'summary': 'Introduces the essential meta elements for webpage optimization, emphasizing the purpose of meta elements and the common markup elements for text, highlighting the usage of m element for emphasis and the deprecation of i and b elements.', 'duration': 318.429, 'highlights': ['The purpose of meta elements is to provide information about a webpage, including keywords and descriptions for search engines, as essential best practices for web pages.', 'The m element is utilized to emphasize content in HTML and aid search engines in extracting important content, with the reminder that styling should be done in CSS, not with the deprecated i and b elements.', 'The deprecation of the i and b elements is emphasized, highlighting that styling should be done in CSS, not in HTML.']}], 'duration': 361.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2485041.jpg', 'highlights': ['The importance of defining character set and configuring the viewport in an HTML document is explained.', 'The significance of viewport adaptability to different devices and browsers is emphasized, showcasing how its size can change on mobile devices, tablets, and desktops.', 'The purpose of meta elements is to provide information about a webpage, including keywords and descriptions for search engines, as essential best practices for web pages.', 'The m element is utilized to emphasize content in HTML and aid search engines in extracting important content.', 'The deprecation of the i and b elements is emphasized, highlighting that styling should be done in CSS, not in HTML.']}, {'end': 3800.096, 'segs': [{'end': 2915.195, 'src': 'embed', 'start': 2884.841, 'weight': 1, 'content': [{'end': 2889.625, 'text': 'So if they want to have a heading with this size, they would just use heading 4.', 'start': 2884.841, 'duration': 4.784}, {'end': 2891.566, 'text': "That is not how you're supposed to use headings.", 'start': 2889.625, 'duration': 1.941}, {'end': 2894.367, 'text': 'Because the size can always be changed with CSS.', 'start': 2891.946, 'duration': 2.421}, {'end': 2895.907, 'text': "It's a matter of styling.", 'start': 2894.767, 'duration': 1.14}, {'end': 2898.829, 'text': 'We should use these headings to create a hierarchy.', 'start': 2896.408, 'duration': 2.421}, {'end': 2903.551, 'text': 'So every webpage should have one and only one h1 element.', 'start': 2899.429, 'duration': 4.122}, {'end': 2906.752, 'text': 'This heading represents what this page is all about.', 'start': 2904.091, 'duration': 2.661}, {'end': 2915.195, 'text': 'Now nothing happens if you have multiple h1 elements, for example, I can duplicate this line and say heading 1 plus.', 'start': 2907.312, 'duration': 7.883}], 'summary': 'Proper usage of headings is important. each webpage should have one h1 element.', 'duration': 30.354, 'max_score': 2884.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2884841.jpg'}, {'end': 3261.716, 'src': 'embed', 'start': 3203.678, 'weight': 0, 'content': [{'end': 3211.5, 'text': 'so we type an ampersand nbsb, which is short for non-breaking space, followed by a semicolon.', 'start': 3203.678, 'duration': 7.822}, {'end': 3213.58, 'text': 'now, take a look.', 'start': 3211.5, 'duration': 2.08}, {'end': 3217.281, 'text': 'so both these words are in the second line.', 'start': 3213.58, 'duration': 3.701}, {'end': 3219.382, 'text': 'so this is all about html entities.', 'start': 3217.281, 'duration': 2.101}, {'end': 3220.582, 'text': "next we're going to talk about links.", 'start': 3219.382, 'duration': 1.2}, {'end': 3231.634, 'text': 'Almost every web page on the internet has links to other pages or websites.', 'start': 3227.751, 'duration': 3.883}, {'end': 3234.316, 'text': 'To create these links, we use the anchor element.', 'start': 3232.054, 'duration': 2.262}, {'end': 3238.099, 'text': 'So we type a, that is short for anchor, and then press tab.', 'start': 3234.736, 'duration': 3.363}, {'end': 3242.062, 'text': 'Now every anchor element should have an href attribute.', 'start': 3238.919, 'duration': 3.143}, {'end': 3244.884, 'text': 'Href is short for hypertext reference.', 'start': 3242.862, 'duration': 2.022}, {'end': 3246.285, 'text': "I know, it's a mouthful.", 'start': 3245.224, 'duration': 1.061}, {'end': 3248.606, 'text': 'It basically means a URL or a link.', 'start': 3246.565, 'duration': 2.041}, {'end': 3254.571, 'text': "So for this demo, I'm going to create a second page called about.html, and then link to it over here.", 'start': 3249.147, 'duration': 5.424}, {'end': 3261.716, 'text': "So, here in the explorer panel, let's add a new page called about.html.", 'start': 3255.271, 'duration': 6.445}], 'summary': 'Html entities & links, anchor element, href attribute, creating a second page.', 'duration': 58.038, 'max_score': 3203.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3203678.jpg'}, {'end': 3488.272, 'src': 'embed', 'start': 3461.885, 'weight': 3, 'content': [{'end': 3469.533, 'text': 'here we are linking to an html document, but we can also link to non-html documents like images, pdfs, powerpoints and so on.', 'start': 3461.885, 'duration': 7.648}, {'end': 3480.383, 'text': "So let's add a link to my image, so for the href I'm going to say images slash mosh.jpg, and for the text I'm going to say my photo.", 'start': 3470.033, 'duration': 10.35}, {'end': 3483.348, 'text': 'save, take a look.', 'start': 3481.647, 'duration': 1.701}, {'end': 3488.272, 'text': "So here's our second link, click, my image is displayed in the browser.", 'start': 3484.009, 'duration': 4.263}], 'summary': 'Demonstrating linking to various non-html documents, such as images and pdfs.', 'duration': 26.387, 'max_score': 3461.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3461885.jpg'}, {'end': 3751.799, 'src': 'embed', 'start': 3720.338, 'weight': 4, 'content': [{'end': 3725.88, 'text': 'we set the target attribute to underline blank save.', 'start': 3720.338, 'duration': 5.542}, {'end': 3727.781, 'text': 'now back to the homepage.', 'start': 3725.88, 'duration': 1.901}, {'end': 3730.582, 'text': 'once again, we have to manually refresh to get the latest changes.', 'start': 3727.781, 'duration': 2.801}, {'end': 3736.205, 'text': 'Now, when I click on Google, you see a new tab beautiful.', 'start': 3732.602, 'duration': 3.603}, {'end': 3739.608, 'text': 'And one last thing, we can also link to emails.', 'start': 3736.826, 'duration': 2.782}, {'end': 3749.657, 'text': "So I'm going to add an anchor, and for href I'm going to say mail to colon programming with mosh at gmail.com.", 'start': 3740.209, 'duration': 9.448}, {'end': 3751.799, 'text': 'Email me.', 'start': 3751.459, 'duration': 0.34}], 'summary': 'Setting target attribute, linking to email, and refreshing for latest changes.', 'duration': 31.461, 'max_score': 3720.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3720338.jpg'}], 'start': 2847.311, 'title': 'Html elements, entities, and linking', 'summary': 'Emphasizes the importance of using html heading elements for creating a hierarchy, covers the use of special characters using html entities, explains html entities, linking, relative and absolute urls, image linking, and attribute addition, and demonstrates creating internal and external page links with unique identifiers and mailto protocol.', 'chapters': [{'end': 3131.608, 'start': 2847.311, 'title': 'Html heading elements and special characters', 'summary': 'Explains the importance of using heading elements to create a hierarchy in html, emphasizing the significance of using h1 only once and not based on size, followed by a detailed explanation of displaying special characters using html entities.', 'duration': 284.297, 'highlights': ['The importance of using heading elements to create a hierarchy in HTML', 'Explanation of displaying special characters using HTML entities']}, {'end': 3529.277, 'start': 3132.549, 'title': 'Html entities and linking', 'summary': 'Explains html entities, including the use of non-breaking space, and the creation of links in html, covering relative and absolute urls, image linking, and attribute addition, with examples and demonstrations.', 'duration': 396.728, 'highlights': ['The chapter explains HTML entities, including the use of non-breaking space', 'The creation of links in HTML, covering relative and absolute URLs, image linking, and attribute addition', 'The speaker demonstrates the use of non-breaking space in HTML to prevent line breaks between specific words', 'The chapter illustrates the creation of links in HTML, explaining relative and absolute URLs, image linking, and the addition of attributes like the download attribute', 'The creation of links in HTML, covering relative and absolute URLs']}, {'end': 3800.096, 'start': 3529.597, 'title': 'Creating links and anchors', 'summary': 'Covers creating internal page links, linking to external websites, opening links in new tabs, and linking to emails, demonstrating the use of unique identifiers, absolute urls, target attributes, and mailto protocol, with examples of internal and external linking.', 'duration': 270.499, 'highlights': ['The chapter covers creating internal page links, linking to external websites, opening links in new tabs, and linking to emails.', 'Demonstrating the use of unique identifiers, absolute URLs, target attributes, and mailto protocol.', 'Examples of internal and external linking.']}], 'duration': 952.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU2847311.jpg', 'highlights': ['The chapter covers creating internal page links, linking to external websites, opening links in new tabs, and linking to emails. (3)', 'The importance of using heading elements to create a hierarchy in HTML (1)', 'The chapter explains HTML entities, including the use of non-breaking space (2)', 'The creation of links in HTML, covering relative and absolute URLs, image linking, and attribute addition (2)', 'Demonstrating the use of unique identifiers, absolute URLs, target attributes, and mailto protocol. (3)']}, {'end': 4166.975, 'segs': [{'end': 3826.013, 'src': 'embed', 'start': 3800.696, 'weight': 2, 'content': [{'end': 3807.726, 'text': "For this lesson, I'm going to grab an image from unsplash.com, which is where we can find a lot of beautiful and freely usable images.", 'start': 3800.696, 'duration': 7.03}, {'end': 3815.676, 'text': "So, let's search for coffee, there are tons of coffee pictures here, I'm going to grab this picture.", 'start': 3808.527, 'duration': 7.149}, {'end': 3818.051, 'text': 'we can download it for free.', 'start': 3817.011, 'duration': 1.04}, {'end': 3823.052, 'text': 'Now look, this image comes in different sizes, small, medium, and large.', 'start': 3818.891, 'duration': 4.161}, {'end': 3826.013, 'text': "For now, we're going to grab this image in a small size,", 'start': 3823.633, 'duration': 2.38}], 'summary': 'Lesson on grabbing a free coffee image from unsplash.com in small size.', 'duration': 25.317, 'max_score': 3800.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3800696.jpg'}, {'end': 3891.55, 'src': 'embed', 'start': 3864.383, 'weight': 0, 'content': [{'end': 3869.985, 'text': 'When we provide descriptive names for our images, search engines can better understand and index our pages.', 'start': 3864.383, 'duration': 5.602}, {'end': 3879.565, 'text': "So, here's our image, now Let's add an image element, we set the source to images slash coffee.jpg.", 'start': 3871.305, 'duration': 8.26}, {'end': 3887.689, 'text': 'Now, what about the alt attribute? Well, I briefly mentioned that we use this attribute to provide textual description of the image.', 'start': 3880.566, 'duration': 7.123}, {'end': 3891.55, 'text': "It's not compulsory, but it's highly recommended for a number of reasons.", 'start': 3888.109, 'duration': 3.441}], 'summary': 'Descriptive image names and alt attributes improve search engine understanding and indexing of web pages.', 'duration': 27.167, 'max_score': 3864.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3864383.jpg'}, {'end': 3938.536, 'src': 'embed', 'start': 3910.7, 'weight': 1, 'content': [{'end': 3914.602, 'text': "don't write something like image or image, one that is pointless now.", 'start': 3910.7, 'duration': 3.902}, {'end': 3922.387, 'text': "the second benefit of providing an alternative text is that we help search engines read this text and understand what we're providing here.", 'start': 3914.602, 'duration': 7.785}, {'end': 3928.69, 'text': 'and there is one more benefit if this image cannot be loaded for some reason, the alternative text is shown.', 'start': 3923.007, 'duration': 5.683}, {'end': 3929.891, 'text': 'Let me show you what I mean.', 'start': 3929.19, 'duration': 0.701}, {'end': 3938.536, 'text': "So, I'm going to add a typo here, now, back to the browser, look, the image is not loaded, but we see the alternative text.", 'start': 3930.351, 'duration': 8.185}], 'summary': 'Adding alternative text to images helps search engines and provides a fallback if images cannot be loaded.', 'duration': 27.836, 'max_score': 3910.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3910700.jpg'}, {'end': 4095.126, 'src': 'embed', 'start': 4068.875, 'weight': 3, 'content': [{'end': 4075.757, 'text': "So here we have a box with this dimension 200x200, and in this box we're trying to insert this image right?", 'start': 4068.875, 'duration': 6.882}, {'end': 4084.681, 'text': 'Now, when we set object fit to cover, our image will get resized and potentially cropped, so it covers the entire containing box.', 'start': 4076.457, 'duration': 8.224}, {'end': 4086.001, 'text': "Let's verify this.", 'start': 4085.261, 'duration': 0.74}, {'end': 4095.126, 'text': 'So save the changes, and back in the browser, look, our coffee mug is around, but if I disable the object fit property, it gets squashed again.', 'start': 4086.502, 'duration': 8.624}], 'summary': 'Using object fit: cover resizes and potentially crops the image to cover the entire 200x200 box, as seen with the coffee mug.', 'duration': 26.251, 'max_score': 4068.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU4068875.jpg'}], 'start': 3800.696, 'title': 'Image selection, embedding and optimization tips', 'summary': 'Covers selecting and downloading images from unsplash.com, focusing on grabbing a small-sized coffee image, serving images at different sizes, providing descriptive names and alternative text for images, and the use of css properties for image resizing.', 'chapters': [{'end': 3842.937, 'start': 3800.696, 'title': 'Image selection and embedding', 'summary': 'Covers selecting and downloading images from unsplash.com, focusing on grabbing a small-sized coffee image and discussing serving images at different sizes depending on devices, with a future section planned for more complexities.', 'duration': 42.241, 'highlights': ['The chapter focuses on grabbing a small-sized coffee image from unsplash.com, which offers freely usable images.', 'It mentions serving images at different sizes depending on devices, with plans for a future section on this topic.', 'The lesson discusses the availability of images in different sizes on unsplash.com and the intention to cover embedding images at different sizes depending on the device in a future section.']}, {'end': 4166.975, 'start': 3843.677, 'title': 'Image optimization tips', 'summary': 'Highlights the importance of providing descriptive names and alternative text for images, the benefits of doing so for accessibility and search engine optimization, and the use of css properties like object fit for image resizing.', 'duration': 323.298, 'highlights': ['By providing descriptive names for images, search engines can better understand and index our pages, leading to improved visibility and potential traffic. This is crucial for SEO optimization.', 'The use of alternative text for images is highly recommended as it enhances accessibility for visually impaired individuals using screen readers, and also helps search engines understand the content of the images, contributing to improved SEO. Not providing alternative text can hinder accessibility and SEO efforts.', "The CSS property object fit is introduced as a solution for resizing images, with 'cover' being the recommended value to ensure images cover their containing box, maintaining aspect ratio and preventing distortion. This demonstrates practical application of CSS for image optimization.", 'The provided link offers an opportunity to enroll in a comprehensive HTML and CSS course, featuring 13 hours of content, exercises, a real project, and a certificate of completion with a 30-day money-back guarantee, emphasizing the value of further learning in web development.']}], 'duration': 366.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qz0aGYrrlhU/pics/qz0aGYrrlhU3800696.jpg', 'highlights': ['By providing descriptive names for images, search engines can better understand and index our pages, leading to improved visibility and potential traffic.', 'The use of alternative text for images enhances accessibility for visually impaired individuals using screen readers and improves SEO.', 'The chapter focuses on grabbing a small-sized coffee image from unsplash.com, which offers freely usable images.', "The CSS property object fit is introduced as a solution for resizing images, with 'cover' being the recommended value to ensure images cover their containing box."]}], 'highlights': ['The course offers 13 hours of comprehensive learning with a 30-day money-back guarantee', 'HTML, CSS, and JavaScript are fundamental for front-end development, with an estimated learning time of 3-5 hours daily for a month', 'The browser sends a message to the server formatted based on the HTTP protocol, requesting the home page of a website', 'Demonstration of using Chrome DevTools for inspecting and modifying styles', 'HTML validation is important for web development, as it can point out errors and warnings that need to be fixed', 'The importance of defining character set and configuring the viewport in an HTML document is explained', 'By providing descriptive names for images, search engines can better understand and index our pages', 'The use of alternative text for images enhances accessibility for visually impaired individuals using screen readers and improves SEO', 'The chapter covers creating internal page links, linking to external websites, opening links in new tabs, and linking to emails', 'The importance of using heading elements to create a hierarchy in HTML']}