{"id":4,"name":"Web Development Basics (Urdu/Hindi)","description":"Are you trying to find the best web development course in Urdu or Hindi? You've come to the right place. In this course, you'll learn the basics of web development as a beginner. You'll learn HTML5 basics, the core concepts of CSS3, and the core concepts of JavaScript with the latest standards of javascript like ES6, ES 2021, ES 2022, etc. This course is in Urdu or Hindi so you should understand it very well if you're familiar with these languages.\n","outline":"","publishedAt":"2023-01-12T03:39:07.202Z","duration":null,"resources":[{"id":6,"label":"Visual Studio Code (as the IDE/Code Editor)","url":"https://code.visualstudio.com/download"},{"id":7,"label":"Git (Version Control System)","url":"https://git-scm.com/downloads"},{"id":30,"label":"Starter files","url":"https://github.com/code-with-ahsan/web-dev-basics-urdu"},{"id":29,"label":"W3Schools","url":"https://www.w3schools.com"}],"introVideoUrl":"https://youtu.be/Knn0TN2j8vc","slug":"web-dev-basics","isExternal":null,"externalCourseUrl":null,"externalStudentsCount":null,"chapters":[{"id":4,"name":"Introduction","description":null,"posts":[{"id":43,"title":"Course Introduction","type":"video","description":"Are you trying to find the best web development course in Urdu or Hindi? You've come to the right place. In this course, you'll learn the basics of web development as a beginner. You'll learn HTML5 basics, the core concepts of CSS3, and the core concepts of JavaScript with the latest standards of javascript like ES6, ES 2021, ES 2022, etc. This course is in Urdu or Hindi so you should understand it very well if you're familiar with these languages.","videoUrl":null,"order":"1","slug":"course-introduction","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/Knn0TN2j8vc","title":"Web Development Basics Course | Introduction","thumbnail":"https://i.ytimg.com/vi/Knn0TN2j8vc/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Web Development Basics Course | Introduction","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/Knn0TN2j8vc/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/Knn0TN2j8vc?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"Knn0TN2j8vc","ts":0},"hasAssignment":null},{"id":44,"title":"What is Web Development","type":"video","description":"In this lecture, you're going to learn bout what is web development and what a web developer usually does. Also, you'll learn what your goal is at the end of this web development basics course for beginners.","videoUrl":null,"order":"2","slug":"what-is-web-development","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/cKfuls25sLk","title":"What is Web Development | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/cKfuls25sLk/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"What is Web Development | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/cKfuls25sLk/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/cKfuls25sLk?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"cKfuls25sLk","ts":0},"hasAssignment":null},{"id":45,"title":"Activity: Set up your PC for Web Development","type":"video","description":"In this activity, you're going to set up your PC for web development as a beginner. You're going to install NodeJS, Git, VSCode, and Chrome. The video shows how you can install them and how to identify your PC configuration for web development set up.","videoUrl":"https://youtu.be/laIbRl3TfkM","order":"3","slug":"set-up-pc-environment","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/laIbRl3TfkM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"laIbRl3TfkM","ts":0},"hasAssignment":null},{"id":46,"title":"How to ask questions or get help?","type":"video","description":"In this video, I'll let you know how to ask questions and make the most out of this web development basics course for beginners in which you'll learn javascript, HTML and CSS.\nHere's the link to the discord community:\nhttps://codewithahsan.dev/discord","videoUrl":null,"order":"4","slug":"how-to-ask-question","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/fBSx-AOcqT8","title":"How to ask questions & get help | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/fBSx-AOcqT8/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"How to ask questions & get help | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/fBSx-AOcqT8/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/fBSx-AOcqT8?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"fBSx-AOcqT8","ts":0},"hasAssignment":null}],"showName":true},{"id":5,"name":"HTML5","description":null,"posts":[{"id":47,"title":"Section Introduction - HTML5","type":"video","description":"In this video you'll learn about what we'll learn in Section 1 of this course. Which is about HTML5. In this course of web development basics for beginners, you'll learn JavaScript, HTML and CSS and a lot of cool tools and techniques to use as a Web Developer.","videoUrl":null,"order":"1","slug":"section-1-intro","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/jBxtk2XLGlw","title":"Section 1 Intro - HTML5 | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/jBxtk2XLGlw/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Section 1 Intro - HTML5 | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/jBxtk2XLGlw/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/jBxtk2XLGlw?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"jBxtk2XLGlw","ts":0},"hasAssignment":null},{"id":48,"title":"Your first Web Application","type":"video","description":"In this video, you'll create your very first web application. You'll learn how to use VSCode to write your first web app and how to run it on Chrome.","videoUrl":null,"order":"2","slug":"your-first-web-app","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/J9rTYU01-QQ","title":"Your first Web Application | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/J9rTYU01-QQ/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Your first Web Application | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/J9rTYU01-QQ/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/J9rTYU01-QQ?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"J9rTYU01-QQ","ts":0},"hasAssignment":null},{"id":49,"title":"Structure of a Web Page","type":"video","description":"In this video, you'll learn how web pages are built with HTML, what is the purpose of the `head`, `body and other related HTML tags as well. We'll go through an example webpage in this video","videoUrl":null,"order":"3","slug":"structure-of-web-page","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/5e4AL_bTxiM","title":"Structure of Web Page | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/5e4AL_bTxiM/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Structure of Web Page | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/5e4AL_bTxiM/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/5e4AL_bTxiM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"5e4AL_bTxiM","ts":0},"hasAssignment":null},{"id":50,"title":"Headings","type":"video","description":"In this video, you'll learn about Heading Tags and how to use them. You'll also learn why they are important for search engines and how to structure your code with proper heading levels.","videoUrl":null,"order":"4","slug":"html-headings","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/GPFbGUB6Hs8","title":"HTML Headings | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/GPFbGUB6Hs8/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Headings | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/GPFbGUB6Hs8/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/GPFbGUB6Hs8?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"GPFbGUB6Hs8","ts":0},"hasAssignment":null},{"id":51,"title":"Activity: Use VSCode Live Preview Extension","type":"video","description":"In this video, you're going to learn how to set up VSCode's Live Preview server so we don't have to switch between applications (chrome and VSCode) for simple things.","videoUrl":null,"order":"5","slug":"use-vscode-live-preview-extension","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/wuqLzwFYUC0","title":"Use VSCode Live Preview Extension | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/wuqLzwFYUC0/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Use VSCode Live Preview Extension | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/wuqLzwFYUC0/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/wuqLzwFYUC0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"wuqLzwFYUC0","ts":0},"hasAssignment":null},{"id":52,"title":"Tags VS Attributes","type":"video","description":"In this video, you'll learn about the difference between tags vs attributes in HTML with some examples. You'll also learn a quick way of adding attributes to anchor tags and images as an example.","videoUrl":null,"order":"6","slug":"html-tags-vs-attributes","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/i2aVYjYGpzU","title":"HTML Tags VS Attributes | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/i2aVYjYGpzU/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Tags VS Attributes | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/i2aVYjYGpzU/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/i2aVYjYGpzU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"i2aVYjYGpzU","ts":0},"hasAssignment":null},{"id":53,"title":"Paragraphs","type":"video","description":"In this video, you'll learn about how to work with HTML paragraphs. You'll learn about the `p` tag and the `pre` tag and how they preserve or do not preserve white spaces. You'll also learn the alignment of it","videoUrl":null,"order":"7","slug":"html-paragraphs","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/9y06yIrreD8","title":"HTML Paragraphs | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/9y06yIrreD8/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Paragraphs | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/9y06yIrreD8/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/9y06yIrreD8?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"9y06yIrreD8","ts":0},"hasAssignment":null},{"id":54,"title":"Formatting Text","type":"video","description":"In this video, you'll learn about how we can format HTML elements. We have some special HTML tags like `strong`, `em`, `pre`, `mark`, `bold` etc.","videoUrl":null,"order":"8","slug":"formatting-text-in-html","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/P3xe3AX6i9k","title":"Formatting Text in HTML | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/P3xe3AX6i9k/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Formatting Text in HTML | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/P3xe3AX6i9k/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/P3xe3AX6i9k?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"P3xe3AX6i9k","ts":0},"hasAssignment":null},{"id":55,"title":"Styles","type":"video","description":"In this video, you'll learn about the different ways you can use CSS Styles in HTML. You'll learn about inline styles vs the style tag. You'll also see some examples of the styles we can use in HTML and how we can reuse the styles.","videoUrl":null,"order":"9","slug":"styles-in-html","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/QJQyPaxa6F4","title":"Using CSS Styles in HTML | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/QJQyPaxa6F4/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Using CSS Styles in HTML | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/QJQyPaxa6F4/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/QJQyPaxa6F4?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"QJQyPaxa6F4","ts":0},"hasAssignment":null},{"id":56,"title":"Colors","type":"video","description":"In this lecture you'll learn about how to use Colors in HTML. You'll learn about the different ways we can define the colors to be used. We'll talk about rgb, rgba, and hex colors. I'll also show you https://www.materialpalette.com/ where you can get inspiration from some cool color combinations","videoUrl":null,"order":"10","slug":"colors-in-html","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/VFVm4qIAkSY","title":"Using Colors in HTML | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/VFVm4qIAkSY/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Using Colors in HTML | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/VFVm4qIAkSY/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/VFVm4qIAkSY?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"VFVm4qIAkSY","ts":0},"hasAssignment":null},{"id":59,"title":"Lists","type":"video","description":"In this lecture, you'll learn about how to use Lists in HTML. You're going to learn about unordered lists, ordered lists and some cool attributes to work with these lists.","videoUrl":null,"order":"11","slug":"html-lists","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/XgbInNIAL2o","title":"HTML Lists | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/XgbInNIAL2o/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Lists | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/XgbInNIAL2o/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/XgbInNIAL2o?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"XgbInNIAL2o","ts":0},"hasAssignment":null},{"id":60,"title":"Images","type":"video","description":"In this video, you'll learn about HTML images and how to use the img tag to work with images. You'll also learn how to style the images and how to use image links.","videoUrl":null,"order":"12","slug":"html-images","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/4oo3J55Ohpc","title":"HTML Images | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/4oo3J55Ohpc/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Images | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/4oo3J55Ohpc/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/4oo3J55Ohpc?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"4oo3J55Ohpc","ts":0},"hasAssignment":null},{"id":61,"title":"Forms Introduction","type":"video","description":"In this video, you'll learn about how to work with HTML Forms. HTML Forms are very powerful and are used in almost every web application you'll use today. You'll learn about the form, some inputs and how to submit the form.","videoUrl":null,"order":"13","slug":"html-forms-introduction","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/JqAb0yYWYHo","title":"HTML Forms Introduction | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/JqAb0yYWYHo/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Forms Introduction | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/JqAb0yYWYHo/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/JqAb0yYWYHo?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"JqAb0yYWYHo","ts":0},"hasAssignment":null},{"id":62,"title":"Activity: Using Starter Files","type":"video","description":"In this activity, you'll learn to use the starter files for the next lectures. This is important as for some lectures, you'll need to have a set of files available to work with. ","videoUrl":null,"order":"14","slug":"using-starter-files","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/Yy9dgquIT0Q","title":"Using Starter Files | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/Yy9dgquIT0Q/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Using Starter Files | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/Yy9dgquIT0Q/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/Yy9dgquIT0Q?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"Yy9dgquIT0Q","ts":0},"hasAssignment":null},{"id":63,"title":"Form Elements","type":"video","description":"In this video, you'll learn about how to work with different Form Elements inside the form. We'll talk about certain types of inputs, how you register and name those inputs and a bit about what attributes can be used within those form elements.","videoUrl":null,"order":"15","slug":"form-elements","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/8QlLzr2wqzI","title":"HTML Form Elements | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/8QlLzr2wqzI/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Form Elements | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/8QlLzr2wqzI/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/8QlLzr2wqzI?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"8QlLzr2wqzI","ts":0},"hasAssignment":null},{"id":64,"title":"Input Types","type":"video","description":"In this video, you'll learn about how to work with different form inputs. We'll talk about the most common type of input elements used including but not limited to Text, Password, Date, Month, Week, Color, and File.","videoUrl":null,"order":"16","slug":"input-types","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/L9JEu7F2xBw","title":"HTML Input Types | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/L9JEu7F2xBw/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Input Types | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/L9JEu7F2xBw/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/L9JEu7F2xBw?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"L9JEu7F2xBw","ts":0},"hasAssignment":null},{"id":66,"title":"Links","type":"video","description":"In this video, you will learn how to work with links in an HTML file. You'll learn about what the href attribute does and how to open the link in a new tab. You'll also learn about the difference between absolute vs relative links","videoUrl":null,"order":"17","slug":"html-links","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/4OSNcOedckQ","title":"HTML Links | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/4OSNcOedckQ/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Links | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/4OSNcOedckQ/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/4OSNcOedckQ?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"4OSNcOedckQ","ts":0},"hasAssignment":null},{"id":67,"title":"Entities","type":"video","description":"In this video, you will learn how to work with HTML entities which are especial characters to use in an HTML file. You'll learn about the less than, greater than, copyright and other special entities.","videoUrl":null,"order":"18","slug":"html-entities","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/BCZhNFDyI48","title":"HTML Entities | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/BCZhNFDyI48/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Entities | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/BCZhNFDyI48/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/BCZhNFDyI48?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"BCZhNFDyI48","ts":0},"hasAssignment":null},{"id":68,"title":"Tables","type":"video","description":"In this video, you will learn how to work with tables in an HTML file. You'll learn about table rows, table data, table headings and the related elements to create a table in HTML.","videoUrl":null,"order":"19","slug":"html-tables","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/260wNr2EnTo","title":"HTML Tables | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/260wNr2EnTo/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Tables | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/260wNr2EnTo/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/260wNr2EnTo?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"260wNr2EnTo","ts":0},"hasAssignment":null},{"id":69,"title":"Block VS Inline Elements ","type":"video","description":"In this video, you will learn the differences between Block vs Inline elements in HTML. You'll learn about the different types of block elements and different types of inline elements. You'll also see how do we structure our HTML layout using these two.","videoUrl":null,"order":"20","slug":"block-vs-inline-elements","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/e9LnuguT0dI","title":"HTML Block VS Inline Elements | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/e9LnuguT0dI/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Block VS Inline Elements | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/e9LnuguT0dI/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/e9LnuguT0dI?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"e9LnuguT0dI","ts":0},"hasAssignment":null},{"id":70,"title":"Audio & Video Tags","type":"video","description":"In this video, you will learn how to work with the audio and video tags in an HTML file. You'll learn about how to show controls on an audio vs a video file. And how to autoplay an audio or a video file. You'll also learn how to mute them on page load.","videoUrl":null,"order":"21","slug":"html-audio-video-tags","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/EF__Oq3Of_0","title":"HTML Audio & Video Tags | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/EF__Oq3Of_0/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"HTML Audio & Video Tags | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/EF__Oq3Of_0/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/EF__Oq3Of_0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"EF__Oq3Of_0","ts":0},"hasAssignment":null},{"id":71,"title":"Semantic HTML","type":"video","description":"In this video, you will learn the what is Semantic HTML and why can't we just use div and span elements everywhere. You'll learn why it is important to know Semantic HTML tags and which tags to use when.","videoUrl":null,"order":"22","slug":"semantic-html","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/fGxCFNOk6Es","title":"Semantic HTML | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/fGxCFNOk6Es/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Semantic HTML | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/fGxCFNOk6Es/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/fGxCFNOk6Es?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"fGxCFNOk6Es","ts":0},"hasAssignment":null},{"id":65,"title":"Assignment - Business Card","type":"article","description":"Create a new project and create the following business card using HTML and CSS. \nYou're supposed to have the following things as per mock:","videoUrl":null,"order":"23","slug":"html-assignment","article":"Create a new project and create the following business card using HTML and CSS. \nYou're supposed to have the following things as per mock:\n- Heading saying \"Business Card\"\n- Profile Image\n- Name & Email\n- Skills (put any random skills)\n- Interests (put any random interests)\n- Social links at the bottom with images\n - Clicking on the image should navigate to the corresponding link in a new tab\n\n![Assignment](https://github.com/AhsanAyaz/slides/raw/main/talks/assets/images/web-dev-basics/assignments/basic-business-card.png)","thumbnail":null,"videoEmbedded":null,"hasAssignment":true}],"showName":true},{"id":6,"name":"CSS3","description":null,"posts":[{"id":72,"title":"Section Introduction - CSS3","type":"video","description":"In this video, you will learn what we are going to learn in this section. We'll talk about CSS3, Flexbox, Grid, mobile responsiveness and some other interesting topics.","videoUrl":null,"order":"1","slug":"css3-section-intro","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/CqZIxn81GbY","title":"Section Introduction - CSS3 | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/CqZIxn81GbY/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Section Introduction - CSS3 | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/CqZIxn81GbY/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/CqZIxn81GbY?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"CqZIxn81GbY","ts":0},"hasAssignment":null},{"id":73,"title":"Different ways of using CSS","type":"video","description":"In this video, you will learn how to use CSS using 3 different ways. You'll learn about the inline-styles, the style tag in HTML and using external style sheets. ","videoUrl":null,"order":"2","slug":"different-ways-of-using-css","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/_nRyfDZyZlQ","title":"Different ways of using CSS | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/_nRyfDZyZlQ/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Different ways of using CSS | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/_nRyfDZyZlQ/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/_nRyfDZyZlQ?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_nRyfDZyZlQ","ts":0},"hasAssignment":null},{"id":74,"title":"Classes vs ID","type":"video","description":"In this video, you will learn how to use the class and ID selectors in css. You'll learn why and when to use ID selectors in CSS and when to use the ID selectors. We also discuss when do we really put an ID or a class in HTML in the context of aiming to style the elements.","videoUrl":null,"order":"3","slug":"classes-vs-id-selectors","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/hvBVrM34oYM","title":"Class & ID Selectors in CSS | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/hvBVrM34oYM/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Class & ID Selectors in CSS | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/hvBVrM34oYM/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/hvBVrM34oYM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"hvBVrM34oYM","ts":0},"hasAssignment":null},{"id":75,"title":"Combinator Selectors & Grouping Selectors","type":"video","description":"In this video, you will learn how to use universal selectors, combinator selectors, descendent selectors and a couple of more types of selectors. ","videoUrl":null,"order":"4","slug":"combinator-and-grouping-selectors","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/S1InOiheRz0","title":"Combinator Selectors & Grouping Selectors in CSS | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/S1InOiheRz0/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Combinator Selectors & Grouping Selectors in CSS | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/S1InOiheRz0/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/S1InOiheRz0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"S1InOiheRz0","ts":0},"hasAssignment":null},{"id":76,"title":"Pseudo Classes","type":"video","description":"In this video, you will learn what are pseudo classes in CSS and how to target different pseudo states. We will discuss the most common pseudo-classes used in HTML and CSS for real-world use cases","videoUrl":null,"order":"5","slug":"css-pseudo-classes","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/_80Pyzx7kiE","title":"CSS Pseudo Classes | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/_80Pyzx7kiE/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Pseudo Classes | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/_80Pyzx7kiE/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/_80Pyzx7kiE?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_80Pyzx7kiE","ts":0},"hasAssignment":null},{"id":77,"title":"Pseudo Elements","type":"video","description":"In this video, you will learn what are pseudo elements in CSS and how to target different pseudo-elements using CSS selectors. We will talk about ::first-letter, ::first-line, ::before, ::after, and ::marked elements etc.\n ","videoUrl":null,"order":"6","slug":"css-pseudo-elements","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/Eg9dSHEXD38","title":"CSS Pseudo Elements | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/Eg9dSHEXD38/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Pseudo Elements | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/Eg9dSHEXD38/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/Eg9dSHEXD38?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"Eg9dSHEXD38","ts":0},"hasAssignment":null},{"id":78,"title":"Colors","type":"video","description":"In this video, we're going to discuss CSS colors and some color properties. We'll learn about text color, background color, border color, etc with some real-world examples.","videoUrl":null,"order":"7","slug":"css-colors","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/xyb1DOmQ8AE","title":"CSS Colors | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/xyb1DOmQ8AE/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Colors | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/xyb1DOmQ8AE/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/xyb1DOmQ8AE?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"xyb1DOmQ8AE","ts":0},"hasAssignment":null},{"id":79,"title":"Borders","type":"video","description":"In this video, you'll learn about CSS borders and how to use them. You'll learn about both the short-hand syntax for CSS borders and how to use different border properties.","videoUrl":null,"order":"8","slug":"css-borders","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/V1umcz-f3cs","title":"CSS Borders | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/V1umcz-f3cs/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Borders | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/V1umcz-f3cs/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/V1umcz-f3cs?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"V1umcz-f3cs","ts":0},"hasAssignment":null},{"id":80,"title":"Margins","type":"video","description":"In this video, you'll learn about CSS margins and how to use them. You'll learn both the short-hand syntax for CSS margins and how to use different margin properties individually. You'll also learn how to use the chrome debugger to inspect margins of an element.","videoUrl":null,"order":"9","slug":"css-margins","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/NMrSBb_Tybg","title":"CSS Margins | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/NMrSBb_Tybg/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Margins | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/NMrSBb_Tybg/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/NMrSBb_Tybg?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"NMrSBb_Tybg","ts":0},"hasAssignment":null},{"id":81,"title":"Paddings","type":"video","description":"In this video, you'll learn about CSS paddings and how to use them. You'll learn both the short-hand syntax for CSS paddings and how to use different margin properties individually. You'll also learn how to use the chrome debugger to inspect the padding of an element.","videoUrl":null,"order":"10","slug":"css-paddings","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/E5PePBIsGbU","title":"CSS Paddings | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/E5PePBIsGbU/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Paddings | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/E5PePBIsGbU/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/E5PePBIsGbU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"E5PePBIsGbU","ts":0},"hasAssignment":null},{"id":82,"title":"CSS Box Model","type":"video","description":"In this video, we'll discuss the CSS Box Model. We'll discuss what are the 4 different factors of the Box Model, how to understand the concepts around it, and how box-sizing: border-box; is a game changer to make things easier for developers.","videoUrl":null,"order":"11","slug":"css-box-model","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/uzqNhrz0Er4","title":"CSS Box Model | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/uzqNhrz0Er4/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Box Model | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/uzqNhrz0Er4/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/uzqNhrz0Er4?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"uzqNhrz0Er4","ts":0},"hasAssignment":null},{"id":83,"title":"Opacity","type":"video","description":"In this video, we'll discuss what is opacity. How to make an HTML element transparent using opacity. And we'll also discuss how you can style different elements for certain UX practices using opacity.","videoUrl":null,"order":"12","slug":"css-opacity","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/7LPRlWooXZ8","title":"CSS Opacity | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/7LPRlWooXZ8/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Opacity | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/7LPRlWooXZ8/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/7LPRlWooXZ8?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"7LPRlWooXZ8","ts":0},"hasAssignment":null},{"id":84,"title":"Styling Text","type":"video","description":"In this video, you'll learn how to style the text in HTML using different techniques including alignment, shadows, and some other neat CSS tricks.","videoUrl":null,"order":"13","slug":"css-styling-text","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/yvcJq9nui14","title":"CSS Styling Text | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/yvcJq9nui14/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Styling Text | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/yvcJq9nui14/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/yvcJq9nui14?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"yvcJq9nui14","ts":0},"hasAssignment":null},{"id":85,"title":"Display & Visibility","type":"video","description":"In this video, you're going to learn what are the differences between CSS display and visibility features. You'll see some real-world examples to understand the differences between both of them.","videoUrl":null,"order":"14","slug":"css-display-visibility","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/rLXGQhmgQX4","title":"CSS Display & Visibility | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/rLXGQhmgQX4/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Display & Visibility | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/rLXGQhmgQX4/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/rLXGQhmgQX4?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"rLXGQhmgQX4","ts":0},"hasAssignment":null},{"id":86,"title":"Fonts","type":"video","description":"In this video, we're going to discuss about CSS Fonts. We're going to talk about font-family, font-size, font-variant, font-weight, font-style and font-stretch","videoUrl":null,"order":"15","slug":"css-fonts","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/7Mx1JjdwGtw","title":"Fonts in CSS | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/7Mx1JjdwGtw/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Fonts in CSS | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/7Mx1JjdwGtw/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/7Mx1JjdwGtw?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"7Mx1JjdwGtw","ts":0},"hasAssignment":null},{"id":87,"title":"Icons","type":"video","description":"In this video, we're going to discuss CSS Icons. We'll look into how to use Material Icons and FontAwesome icons in your web applications.","videoUrl":null,"order":"16","slug":"css-icons","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/iZC1rm1B71c","title":"Using Icons in CSS | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/iZC1rm1B71c/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Using Icons in CSS | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/iZC1rm1B71c/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/iZC1rm1B71c?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"iZC1rm1B71c","ts":0},"hasAssignment":null},{"id":88,"title":"Activity: Building a Horizontal & a Vertical Nav Bar","type":"video","description":"In this video, we're going to build two different navigation bars. We'll build one horizontal Navigation Bar (Navbar) using HTML and CSS and we'll do the same for the vertical navbar. You'll also see some basic usage of flex box to understand how we build the layout. Once you've followed it, try building and submitting your own version of navbars. Style it a bit differently.","videoUrl":null,"order":"17","slug":"building-navbars","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/vCBxY02oP7M","title":"Activity: Building a Horizontal & a Vertical Nav Bar | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/vCBxY02oP7M/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Activity: Building a Horizontal & a Vertical Nav Bar | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/vCBxY02oP7M/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/vCBxY02oP7M?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"vCBxY02oP7M","ts":0},"hasAssignment":true},{"id":89,"title":"Positions","type":"video","description":"In this video, we're going to discuss CSS Positions. This topic is something even the senior web developers struggle with some times. We're going to talk about position relative, position fixed and position absolute in particular.","videoUrl":null,"order":"18","slug":"css-position","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/2DiEEoL6g0U","title":"CSS Positions | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/2DiEEoL6g0U/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Positions | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/2DiEEoL6g0U/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/2DiEEoL6g0U?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"2DiEEoL6g0U","ts":0},"hasAssignment":null},{"id":90,"title":"Box Shadows","type":"video","description":"In this video, we're going to discuss CSS Positions. This topic is something even the senior web developers struggle with some times. We're going to talk about position relative, position fixed and position absolute in particular.","videoUrl":null,"order":"19","slug":"css-box-shadows","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/TFknOdqSCIA","title":"CSS Box Shadows | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/TFknOdqSCIA/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Box Shadows | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/TFknOdqSCIA/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/TFknOdqSCIA?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"TFknOdqSCIA","ts":0},"hasAssignment":null},{"id":93,"title":"Width & Height","type":"video","description":"In this video, you'll learn what happens when we give an element width and a height. We'll see what to be cautious about when doing that. And what are some good use cases to use width and height in px vs in % etc.","videoUrl":null,"order":"20","slug":"css-width-height","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/N-6wqOugcQM","title":"CSS Width & Height | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/N-6wqOugcQM/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Width & Height | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/N-6wqOugcQM/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/N-6wqOugcQM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"N-6wqOugcQM","ts":0},"hasAssignment":null},{"id":92,"title":"Z-Index","type":"video","description":"In this video, you'll learn about the z-index style in CSS. You'll learn why we use Z Index and what to be cautious about. You'll also learn the default behavior of CSS when there's no z-index provided and how to overlap items using z-index.","videoUrl":null,"order":"21","slug":"css-z-index","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/ROyI60VsW2o","title":"CSS Z-Index | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/ROyI60VsW2o/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Z-Index | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/ROyI60VsW2o/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/ROyI60VsW2o?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"ROyI60VsW2o","ts":0},"hasAssignment":null},{"id":91,"title":"Overflow","type":"video","description":"In this video, you'll learn about CSS overflow. You'll learn how to use it with max width or max height to create a scrolling effect. You'll also learn about overflow hidden vs overflow scroll vs overflow auto with some real examples.","videoUrl":null,"order":"22","slug":"css-overflow","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/ucAw8QA3U6I","title":"CSS Overflow | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/ucAw8QA3U6I/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Overflow | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/ucAw8QA3U6I/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/ucAw8QA3U6I?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"ucAw8QA3U6I","ts":0},"hasAssignment":null},{"id":94,"title":"Forms and CSS","type":"video","description":"In this video, you'll learn to build an HTML form with CSS. You'll learn how to style inputs, select elements and buttons, and how to construct a good-looking HTML form.","videoUrl":null,"order":"23","slug":"css-and-forms","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/8BC6OqQ6iMw","title":"Forms and CSS | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/8BC6OqQ6iMw/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Forms and CSS | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/8BC6OqQ6iMw/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/8BC6OqQ6iMw?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"8BC6OqQ6iMw","ts":0},"hasAssignment":null},{"id":95,"title":"!important styles & CSS Specificity","type":"video","description":"In this video, we'll look at what is CSS Specificity and which style has preference over the others in certain cases. We also discussed the !important keyword in CSS and how it overrides the specificity of the CSS styles when used.\n","videoUrl":null,"order":"24","slug":"css-important-styles","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/VC8bzhc6RUA","title":"CSS !important styles | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/VC8bzhc6RUA/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS !important styles | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/VC8bzhc6RUA/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/VC8bzhc6RUA?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"VC8bzhc6RUA","ts":0},"hasAssignment":null},{"id":96,"title":"Activity: Building a portfolio website ","type":"video","description":"In this video, we're doing an activity in which we're creating a basic portfolio site using HTML and CSS. We'll not be using flexbox in this video but would rather use some other techniques like margin and text alignment to align things.","videoUrl":null,"order":"25","slug":"activity-portfolio-site","article":"### Assignment\n\nCreate a new project and create the following portfolio site using HTML and CSS (without flexbox)\nYou're supposed to have the following things as per mock:\n\n#### Mockup\n\n![Assignment](https://raw.githubusercontent.com/AhsanAyaz/slides/main/talks/assets/images/web-dev-basics/assignments/portfolio-without-css.png)","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/eotsvhcyQZc","title":"Activity: Building a basic portfolio website | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/eotsvhcyQZc/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Activity: Building a basic portfolio website | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/eotsvhcyQZc/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/eotsvhcyQZc?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"eotsvhcyQZc","ts":0},"hasAssignment":true}],"showName":true},{"id":7,"name":"CSS Advanced","description":null,"posts":[{"id":97,"title":"Section Introduction - CSS Advanced","type":"video","description":"In this video, you'll get to know what we're going to learn in the third section of this course. We've already discussed HTML, and CSS3 basics. This section will be about some advanced concepts in CSS.","videoUrl":null,"order":"1","slug":"section-3-intro","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/_04eGlJqqNg","title":"Section 3 Intro - CSS Advanced | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/_04eGlJqqNg/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Section 3 Intro - CSS Advanced | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/_04eGlJqqNg/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/_04eGlJqqNg?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_04eGlJqqNg","ts":0},"hasAssignment":null},{"id":98,"title":"Flexbox: Flex Container","type":"video","description":"In this video, you're going to learn Flexbox and specifically Flex Container. You'll learn how to use the flex styles on the container element to position, wrap, and align the contents using Flexbox.","videoUrl":null,"order":"2","slug":"css-flex-container","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/69eglD21lNI","title":"CSS Flex Container | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/69eglD21lNI/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Flex Container | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/69eglD21lNI/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/69eglD21lNI?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"69eglD21lNI","ts":0},"hasAssignment":null},{"id":99,"title":"Flexbox: Flex Items","type":"video","description":"In this video, you're going to learn Flexbox and specifically Flex Items. You'll learn how to use the flex styles on the items in a flexbox layout element to position, wrap, and align the items themselves using Flexbox. We're going to cover orders, self-alignment, etc.","videoUrl":null,"order":"3","slug":"css-flex-items","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/XiV0KoQUNhA","title":"CSS Flex Items | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/XiV0KoQUNhA/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Flex Items | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/XiV0KoQUNhA/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/XiV0KoQUNhA?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"XiV0KoQUNhA","ts":0},"hasAssignment":null},{"id":100,"title":"Activity: Responsive Gallery using Flexbox","type":"video","description":"In this activity, we'll build a responsive CSS image gallery using Flexbox. We'll use a 4-column layout on desktop, 2 column layout on Tablet, and 1 column layout for mobile devices.","videoUrl":null,"order":"4","slug":"flexbox-responsive-image-gallery","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/wxNyIZbZDGc","title":"Activity: Responsive Gallery using Flexbox | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/wxNyIZbZDGc/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Activity: Responsive Gallery using Flexbox | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/wxNyIZbZDGc/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/wxNyIZbZDGc?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"wxNyIZbZDGc","ts":0},"hasAssignment":null},{"id":102,"title":"Grid","type":"video","description":"In this video, you're going to learn what CSS Grids are, and how to work with them. We'll look at mainly the properties you can apply to CSS Grid containers, and how you could build different layouts.\n","videoUrl":null,"order":"5","slug":"css-grid-intro","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/ejVHwf_hEqs","title":"CSS Grid Intro | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/ejVHwf_hEqs/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Grid Intro | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/ejVHwf_hEqs/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/ejVHwf_hEqs?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"ejVHwf_hEqs","ts":0},"hasAssignment":null},{"id":101,"title":"CSS Variables","type":"video","description":"In this video, we're going to learn CSS Variables and how to use CSS Variables. We'll look into global CSS Variables, how to override them within media queries, and how they become reusable.","videoUrl":null,"order":"6","slug":"css-variables","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/7NpYco4IXSg","title":"CSS Variables | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/7NpYco4IXSg/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Variables | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/7NpYco4IXSg/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/7NpYco4IXSg?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"7NpYco4IXSg","ts":0},"hasAssignment":null},{"id":103,"title":"Transforms","type":"video","description":"In this video, we're going to learn CSS Transforms and how to use CSS Transforms in a Web Application. We'll look into translateX, translateY, translate, scaleX, scaleY, scale, rotateX, rotateY, rotate, skewX, skewY, skew, and the matrix transform with practical examples.\n","videoUrl":null,"order":"7","slug":"css-transforms","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/xg0gMdK6udQ","title":"CSS Transform | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/xg0gMdK6udQ/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Transform | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/xg0gMdK6udQ/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/xg0gMdK6udQ?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"xg0gMdK6udQ","ts":0},"hasAssignment":null},{"id":104,"title":"Animations","type":"video","description":"In this video, we're going to learn CSS Animations. We'll learn with some real world examples on how to work with CSS Animations and how to use CSS keyframes to do so. We'll discuss about the CSS Keyframes using from and to properties, and using different percentages as well. We'll discuss different properties to use with CSS Animations like animation-duration, animation-timing-function etc.","videoUrl":null,"order":"8","slug":"css-animations","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/yMr3aRctm1E","title":"CSS Animations | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/yMr3aRctm1E/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"CSS Animations | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/yMr3aRctm1E/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/yMr3aRctm1E?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"yMr3aRctm1E","ts":0},"hasAssignment":null},{"id":136,"title":"CSS Media Queries","type":"video","description":"In this video, you're going to briefly learn CSS Media queries and how to build responsive websites with media queries. In the video, we go through a grid layout that we want to work with for tablets and for mobile screens using CSS media queries.","videoUrl":"https://www.youtube.com/watch?v=9sOOxWDOSK8","order":"9","slug":"css-media-queries","article":null,"thumbnail":"https://i3.ytimg.com/vi/9sOOxWDOSK8/maxresdefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/9sOOxWDOSK8?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"9sOOxWDOSK8","ts":0},"hasAssignment":null},{"id":105,"title":"Activity: Building a Landing Page from Figma Design","type":"video","description":"In this video, we're going to build a landing page using a Figma Design. You'll learn how to work with Figma to extract images and export them. You'll also learn how to work with Figma to inspect elements to figure out CSS properties to implement the pixel-perfect design. You'll also learn how to find out gaps, margins, paddings, etc using Figma Design.","videoUrl":null,"order":"10","slug":"activity-landing-page-from-figma-design","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/FhIYo4V22CA","title":"Activity: Building a Landing Page from Figma Design","thumbnail":"https://i.ytimg.com/vi/FhIYo4V22CA/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Activity: Building a Landing Page from Figma Design","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/FhIYo4V22CA/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/FhIYo4V22CA?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"FhIYo4V22CA","ts":0},"hasAssignment":true}],"showName":true},{"id":8,"name":"JavaScript","description":null,"posts":[{"id":106,"title":"Section Introduction - JavaScript","type":"video","description":"In this video, you'll get to know what we're going to learn in the fourth section of this course. We've already discussed HTML, CSS3 basics, and CSS Advanced. This section will start learning javascript and we'll start with the first few basics concepts of javascript","videoUrl":null,"order":"1","slug":"section-4-intro-javascript","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/LsVcCc8dGPw","title":"Section 4 Intro - JavaScript | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/LsVcCc8dGPw/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Section 4 Intro - JavaScript | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/LsVcCc8dGPw/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/LsVcCc8dGPw?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"LsVcCc8dGPw","ts":0},"hasAssignment":null},{"id":107,"title":"Introduction to JavaScript","type":"video","description":"In this video, you'll learn what javascript is, why it is used, and what the background is in general for javascript. We'll see some basic examples of javascript and how to use it.","videoUrl":null,"order":"2","slug":"introduction-to-javascript","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/pzfpNGc4XtU","title":"Introduction to JavaScript | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/pzfpNGc4XtU/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Introduction to JavaScript | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/pzfpNGc4XtU/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/pzfpNGc4XtU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"pzfpNGc4XtU","ts":0},"hasAssignment":null},{"id":108,"title":"How to use JavaScript","type":"video","description":"In this video, you'll learn what are the different ways of using javascript in a web application. You're going to learn about the script tag, the console, and using external scripts as well to work in web applications.","videoUrl":null,"order":"3","slug":"how-to-use-javascript","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/rG80W8Ld7NU","title":"How to use JavaScript | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/rG80W8Ld7NU/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"How to use JavaScript | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/rG80W8Ld7NU/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/rG80W8Ld7NU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"rG80W8Ld7NU","ts":0},"hasAssignment":null},{"id":109,"title":"Statements","type":"video","description":"In this video, you'll learn javascript statements. We will discuss what are statements, keywords, and expressions in javascript. We'll look at different examples of javascript statements and how to use them properly.","videoUrl":null,"order":"4","slug":"javascript-statements","article":"","thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/q2y4Wg-n9Fs","title":"JavaScript Statements | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/q2y4Wg-n9Fs/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"JavaScript Statements | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/q2y4Wg-n9Fs/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/q2y4Wg-n9Fs?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"q2y4Wg-n9Fs","ts":0},"hasAssignment":null},{"id":111,"title":"JavaScript Syntax","type":"video","description":"In this video, you'll learn the javascript syntax. You're going to learn how to write javascript. You'll learn variables, values, and the way we structure our javascript code. \n\n","videoUrl":"https://www.youtube.com/watch?v=SMIJYoyDtHI","order":"5","slug":"javascript-syntax","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/SMIJYoyDtHI?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"SMIJYoyDtHI","ts":0},"hasAssignment":null},{"id":112,"title":"JavaScript Variables","type":"video","description":"In this video, you'll learn about javascript variables. You'll know the difference between var, let, and const. Learn easily in Urdu language what javascript variables are, what is the concept behind them and how to use them.\n\n","videoUrl":"https://www.youtube.com/watch?v=e0aDeA1TZ5U","order":"6","slug":"javascript-variables","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/e0aDeA1TZ5U?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"e0aDeA1TZ5U","ts":0},"hasAssignment":null},{"id":113,"title":"JavaScript Comments","type":"video","description":"In this video, you'll learn JavaScript Comments. You'll learn single line comments and multi-line comments and how to use them properly. JavaScript comments are used to comment out code that we don't need to run by the compiler.\n\n","videoUrl":"https://www.youtube.com/watch?v=_f6dN8YS0S0","order":"7","slug":"javascript-comments","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/_f6dN8YS0S0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_f6dN8YS0S0","ts":0},"hasAssignment":null},{"id":116,"title":"Javascript Arithmetic Operators","type":"video","description":"In this video, you'll learn how to perform arithmetic operations in JavaScript. You'll learn how to add, subtract, multiply etc. You'll also learn the javascript syntax to use arithmetic operators in JavaScript.\n\n","videoUrl":"https://www.youtube.com/watch?v=eoAU1zblOCg","order":"8","slug":"javascript-arithmetic-operators","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/eoAU1zblOCg?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"eoAU1zblOCg","ts":0},"hasAssignment":null},{"id":115,"title":"JavaScript Assignment Operators","type":"video","description":"In this video, you'll learn the assignment operators in javascript. You'll learn ++, +-, +=, -= and more operators to use in javascript.\n\n","videoUrl":"https://www.youtube.com/watch?v=8R1t48FjJ_s","order":"9","slug":"javascript-assignment-operators","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/8R1t48FjJ_s?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"8R1t48FjJ_s","ts":0},"hasAssignment":null},{"id":114,"title":"JavaScript Comparison Operators","type":"video","description":"In this video, you'll learn javascript comparison operators. You'll learn about strict vs non-strict equality check in JavaScript, less than, greater than, less than and equals, greater than and equals and not equals operators.\n\n","videoUrl":"https://www.youtube.com/watch?v=E5HDvUO3cC0","order":"10","slug":"javascript-comparison-operators","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/E5HDvUO3cC0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"E5HDvUO3cC0","ts":0},"hasAssignment":null},{"id":117,"title":"JavaScript Data Types","type":"video","description":"In this video, you'll learn JavaScript data types. You'll learn boolean, string, number, array, objects, undefined, null and more. \n\n","videoUrl":"https://www.youtube.com/watch?v=_-fROBHlz_A","order":"11","slug":"javascript-data-types","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/_-fROBHlz_A?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_-fROBHlz_A","ts":0},"hasAssignment":null},{"id":118,"title":"JavaScript Functions","type":"video","description":"In this video, you'll learn JavaScript functions. You'll learn what are arguments or parameters and what are return values. You'll also learn what is the default return value of a function. And you'll learn all this with some real examples.\n\n","videoUrl":"https://www.youtube.com/watch?v=6v1VCGteCrM","order":"12","slug":"javascript-functions","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/6v1VCGteCrM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"6v1VCGteCrM","ts":0},"hasAssignment":null},{"id":119,"title":"JavaScript Objects","type":"video","description":"In this video, you'll learn javascript objects. You'll learn what objects are, what are properties and methods and how to access a property or method of an object. You'll also learn how to call an object's method. This video about javascript object in hindi is super useful and easy to learn.\n\n","videoUrl":"https://www.youtube.com/watch?v=zNBzQpYyA_0","order":"13","slug":"javascript-objects","article":null,"thumbnail":null,"videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/zNBzQpYyA_0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"zNBzQpYyA_0","ts":0},"hasAssignment":null},{"id":127,"title":"JavaScript Boolean, Truthy & Falsy values","type":"video","description":"In this video, you'll learn about JavaScript boolean, truthy and falsy values. You'll learn about some interesting facts about the Boolean function, Boolean type, and some use cases of the truthy and falsy values\n\n","videoUrl":"https://www.youtube.com/watch?v=d1MKZ3oJrMU","order":"14","slug":"javascript-boolean-truthy--falsy-values","article":null,"thumbnail":"https://i.ytimg.com/vi/d1MKZ3oJrMU/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/d1MKZ3oJrMU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"d1MKZ3oJrMU","ts":0},"hasAssignment":null},{"id":128,"title":"JavaScript Strings","type":"video","description":"In this video, you'll learn all about JavaScript strings. You'll learn about the different methods to use in JavaScript strings, you'll also learn some tips and tricks when using those methods around whitespaces.\n\n","videoUrl":"https://www.youtube.com/watch?v=FFOzOjveIps","order":"15","slug":"javascript-strings","article":null,"thumbnail":"https://i.ytimg.com/vi/FFOzOjveIps/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/FFOzOjveIps?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"FFOzOjveIps","ts":0},"hasAssignment":null},{"id":129,"title":"JavaScript Numbers ","type":"video","description":"In this video, you'll learn about Numbers in JavaScript. You'll learn what kind of number values we can assign to variables in javascript, and how to work with numbers in general. You'll also learn about methods like parseInt, and Number.toFixed() etc.\n\n","videoUrl":"https://www.youtube.com/watch?v=6C0CgtBpOYs","order":"16","slug":"javascript-numbers-","article":null,"thumbnail":"https://i.ytimg.com/vi/6C0CgtBpOYs/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/6C0CgtBpOYs?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"6C0CgtBpOYs","ts":0},"hasAssignment":null},{"id":130,"title":"JavaScript Dialog Boxes","type":"video","description":"In this video, you'll learn JavaScript dialog boxes like prompt, confirm, and alert. We'll see some interesting examples of how to use these dialog boxes to take user input using these dialogs and when to show information from some of these.\n\n","videoUrl":"https://www.youtube.com/watch?v=_HeP5qlrXkY","order":"17","slug":"javascript-dialog-boxes","article":null,"thumbnail":"https://i.ytimg.com/vi/_HeP5qlrXkY/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/_HeP5qlrXkY?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_HeP5qlrXkY","ts":0},"hasAssignment":null},{"id":131,"title":"JavaScript If-Else Conditionals","type":"video","description":"In this video, you'll learn the If-Else conditionals. These conditionals are used to write different business logics based on different conditions. These are probably your first statements to implement program control flow. Learn how to use if, else-if and else conditions to control the program's flow.\n\n","videoUrl":"https://www.youtube.com/watch?v=nlyBnK1bcaE","order":"18","slug":"javascript-if-else-conditionals","article":null,"thumbnail":"https://i.ytimg.com/vi/nlyBnK1bcaE/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/nlyBnK1bcaE?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"nlyBnK1bcaE","ts":0},"hasAssignment":null},{"id":132,"title":"Activity: Building a basic addition calculator with JavaScript","type":"video","description":"In this video, you'll build a simple addition calculator with JavaScript. You'll take input from the user from dialog boxes and will work with if-else conditionals to build a basic addition calculator.\n\n","videoUrl":"https://www.youtube.com/watch?v=_7j7tEFXAl4","order":"19","slug":"activity-building-a-basic-addition-calculator-with-javascript","article":null,"thumbnail":"https://i.ytimg.com/vi/_7j7tEFXAl4/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/_7j7tEFXAl4?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"_7j7tEFXAl4","ts":0},"hasAssignment":null},{"id":133,"title":"JavaScript Switch-Case Conditionals","type":"video","description":"In this video, you'll learn the switch-case conditionals. I spent more time on this video to make it comprehensive with an example to follow. Most of the video is working on the program and in the end we discuss about the switch-case statements.\n\n","videoUrl":"https://www.youtube.com/watch?v=60dLaesaCVg","order":"20","slug":"javascript-switch-case-conditionals","article":null,"thumbnail":"https://i.ytimg.com/vi/60dLaesaCVg/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/60dLaesaCVg?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"60dLaesaCVg","ts":0},"hasAssignment":null},{"id":134,"title":"JavaScript Arrays","type":"video","description":"In this video, you'll learn javascript arrays. This is going to be an overview of the JavaScript Arrays including how we can create them, what are the most common methods and properties etc.\n\n","videoUrl":"https://www.youtube.com/watch?v=kl8Vv_69zs8","order":"21","slug":"javascript-arrays","article":null,"thumbnail":"https://i.ytimg.com/vi/kl8Vv_69zs8/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/kl8Vv_69zs8?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"kl8Vv_69zs8","ts":0},"hasAssignment":null},{"id":135,"title":"JavaScript Array Methods","type":"video","description":"In this video, you'll learn about the Array methods. In the previous video we discussed about the general Array methods and properties. In this one, we're going to learn about almost all the important Array methods you will usually use in a JavaScript project.\n\n","videoUrl":"https://www.youtube.com/watch?v=W1xxtkgPJi4","order":"22","slug":"javascript-array-methods","article":null,"thumbnail":"https://i.ytimg.com/vi/W1xxtkgPJi4/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/W1xxtkgPJi4?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"W1xxtkgPJi4","ts":0},"hasAssignment":null},{"id":137,"title":"JavaScript Arrays & Sorting","type":"video","description":"In this video, you'll learn JavaScript Arrays and how you sort the arrays. You will also learn how to reverse sort the arrays and how to sort arrays having objects.\n\n","videoUrl":"https://www.youtube.com/watch?v=2brFkMiscqA","order":"23","slug":"javascript-arrays--sorting","article":null,"thumbnail":"https://i.ytimg.com/vi/2brFkMiscqA/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/2brFkMiscqA?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"2brFkMiscqA","ts":0},"hasAssignment":null},{"id":138,"title":"JavaScript For Loop","type":"video","description":"In this video, you'll learn about the first kind of loop in JavaScript. That is the For Loop. This is the easiest loop to learn in JavaScript and is used in other programming languages with slight variations as well. We're going to learn it with some real-world examples.\n\n","videoUrl":"https://www.youtube.com/watch?v=J5cv1w31d_k","order":"24","slug":"javascript-for-loop","article":null,"thumbnail":"https://i.ytimg.com/vi/J5cv1w31d_k/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/J5cv1w31d_k?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"J5cv1w31d_k","ts":0},"hasAssignment":null},{"id":139,"title":"JavaScript While Loop","type":"video","description":"In this video, you'll learn about the While Loop. This is yet another interesting loop that exists in JavaScript and is used in other programming languages. We're going to learn it with some real-world examples and will compare it against the classic For Loop.\n\n","videoUrl":"https://www.youtube.com/watch?v=sO1U1mVhGj0","order":"25","slug":"javascript-while-loop","article":null,"thumbnail":"https://i.ytimg.com/vi/sO1U1mVhGj0/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/sO1U1mVhGj0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"sO1U1mVhGj0","ts":0},"hasAssignment":null},{"id":140,"title":"JavaScript Do While Loop","type":"video","description":"In this video, you'll learn about the Do-While loop which is quite similar to the while loop in javascript and other languages. You will also learn some real-world use cases about when to use these.\n\n","videoUrl":"https://www.youtube.com/watch?v=SiBi4vxypgE","order":"26","slug":"javascript-do-while-loop","article":null,"thumbnail":"https://i.ytimg.com/vi/SiBi4vxypgE/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/SiBi4vxypgE?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"SiBi4vxypgE","ts":0},"hasAssignment":null},{"id":141,"title":"JavaScript For In Loop","type":"video","description":"In this video, you'll learn the For-In Loop in JavaScript which is majorly used to traverse the objects (key-value pairs). We'll go through some real world examples and some gotchas that you need to be aware about.\n\n","videoUrl":"https://www.youtube.com/watch?v=hhEvGFqUnrs","order":"27","slug":"javascript-for-in-loop","article":null,"thumbnail":"https://i.ytimg.com/vi/hhEvGFqUnrs/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/hhEvGFqUnrs?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"hhEvGFqUnrs","ts":0},"hasAssignment":null},{"id":142,"title":"JavaScript For Of Loop","type":"video","description":"In this video, you'll learn the For Of loop in JavaScript. This loop is used mostly on Arrays and iterables when we're 100% sure about running the loop on the entire array instead of running a classic for loop.\n\n","videoUrl":"https://www.youtube.com/watch?v=OG3uNZOOL1A","order":"28","slug":"javascript-for-of-loop","article":null,"thumbnail":"https://i.ytimg.com/vi/OG3uNZOOL1A/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/OG3uNZOOL1A?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"OG3uNZOOL1A","ts":0},"hasAssignment":null},{"id":144,"title":"JavaScript Regexes - Part 1","type":"video","description":"In this video, you'll learn about JavaScript regexes. Regex is a powerful tool that allows you to search text from a string, validate if a string contains some specific word or has a specific pattern. And it is used widely in programming languages and to build tools and applications. We will learn through different real-world examples.\n\n","videoUrl":"https://www.youtube.com/watch?v=VyuE7FsgdAo","order":"29","slug":"javascript-regexes---part-1","article":null,"thumbnail":"https://i.ytimg.com/vi/VyuE7FsgdAo/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/VyuE7FsgdAo?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"VyuE7FsgdAo","ts":0},"hasAssignment":null},{"id":145,"title":"JavaScript Regexes - Part 2","type":"video","description":"In this video, you'll learn more about JavaScript regexes. We'll go through collections in regex and some example regexes we can work with.\n\n","videoUrl":"https://www.youtube.com/watch?v=qvcPy2yzTL4","order":"30","slug":"javascript-regexes---part-2","article":null,"thumbnail":"https://i.ytimg.com/vi/qvcPy2yzTL4/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/qvcPy2yzTL4?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"qvcPy2yzTL4","ts":0},"hasAssignment":null},{"id":146,"title":"JavaScript Break and Continue","type":"video","description":"In this video, you'll learn how to use the `break` and `continue` statements in JavaScript. We'll go through some real-world examples where these are going to be useful.\n\n","videoUrl":"https://www.youtube.com/watch?v=uYKzfBeWu78","order":"31","slug":"javascript-break-and-continue","article":null,"thumbnail":"https://i.ytimg.com/vi/uYKzfBeWu78/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/uYKzfBeWu78?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"uYKzfBeWu78","ts":0},"hasAssignment":null},{"id":147,"title":"Activity: Pugam Game in JavaScript","type":"video","description":"In this video, we'll create the classic \"pugam ki pugaayi\" game in JavaScript. This is a famous thing in Pakistan (and probably India too) that is used to decide the loser among a group of people. In this game, we'll have a human player with two computer players and we'll see who wins :) This is a fun project to build and work on.","videoUrl":"https://www.youtube.com/watch?v=Gf8Iu2euXBQ","order":"32","slug":"activity---pugam-game-in-javascript","article":null,"thumbnail":"https://i.ytimg.com/vi/Gf8Iu2euXBQ/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/Gf8Iu2euXBQ?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"Gf8Iu2euXBQ","ts":0},"hasAssignment":null},{"id":148,"title":"JavaScript Hoisting","type":"video","description":"In this video, you'll learn JavaScript Hoisting. It is a concept asked by many interviewers in the interviews. You'll learn what is a scope in JavaScript, and how does hoisting work with the `var` keyword against the `let` or `const` keywords.\n\n","videoUrl":"https://www.youtube.com/watch?v=GkUjJzxng70","order":"33","slug":"javascript-hoisting","article":null,"thumbnail":"https://i.ytimg.com/vi/GkUjJzxng70/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/GkUjJzxng70?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"GkUjJzxng70","ts":0},"hasAssignment":null},{"id":149,"title":"Javascript this keyword","type":"video","description":"In this video, you'll learn about the `this` keyword in JavaScript. It is one of the most common topics that is asked about in the interviews. And it takes a bit of time to get used to the concept as well.\n\n","videoUrl":"https://www.youtube.com/watch?v=d7rIQ7jXZiY","order":"34","slug":"javascript-this-keyword","article":null,"thumbnail":"https://i.ytimg.com/vi/d7rIQ7jXZiY/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/d7rIQ7jXZiY?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"d7rIQ7jXZiY","ts":0},"hasAssignment":null},{"id":150,"title":"JavaScript Dates","type":"video","description":"In this video, you'll learn about the Date object in javascript. You'll learn how to create dates, how to get minutes, hours, etc from the Date object with some real-world examples.\n\n","videoUrl":"https://www.youtube.com/watch?v=58Au1W0-HnU","order":"35","slug":"javascript-dates","article":null,"thumbnail":"https://i.ytimg.com/vi/58Au1W0-HnU/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/58Au1W0-HnU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"58Au1W0-HnU","ts":0},"hasAssignment":null},{"id":151,"title":"JavaScript DOM","type":"video","description":"In this video, you'll learn about the famous DOM that everybody keeps talking about in when it comes to Web Technologies. We're going to look at some examples for DOM Manipulation and how to access it for specific use cases.\n\n","videoUrl":"https://www.youtube.com/watch?v=VrHiAchmKTM","order":"36","slug":"javascript-dom","article":null,"thumbnail":"https://i.ytimg.com/vi/VrHiAchmKTM/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/VrHiAchmKTM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"VrHiAchmKTM","ts":0},"hasAssignment":null},{"id":152,"title":"JavaScript Classes","type":"video","description":"In this video, you'll learn JavaScript classes. You'll learn how to use classes to create objects. You'll also learn about object comparison with the equality operators. And you'll learn about the shared methods in JavaScript classes\n\n","videoUrl":"https://www.youtube.com/watch?v=etk7j6RRdgM","order":"37","slug":"javascript-classes","article":null,"thumbnail":"https://i.ytimg.com/vi/etk7j6RRdgM/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/etk7j6RRdgM?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"etk7j6RRdgM","ts":0},"hasAssignment":null},{"id":153,"title":"What is JSON","type":"video","description":"In this video, you'll learn about what is JSON. You'll learn about the JavaScript Object Notation (JSON) and some examples to understand the concept better. As JSON is one of the most famous formats of storing data today, it is almost essential to learn about this.\n\n","videoUrl":"https://www.youtube.com/watch?v=mQsMX843OXQ","order":"38","slug":"what-is-json","article":null,"thumbnail":"https://i.ytimg.com/vi/mQsMX843OXQ/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/mQsMX843OXQ?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"mQsMX843OXQ","ts":0},"hasAssignment":null},{"id":154,"title":"JavaScript Debugging","type":"video","description":"In this video, you'll how to debug JavaScript code in the browser. We'll be using Chrome for debugging but you can use other browsers for similar use cases as well. We'll go through the different debugging options like Step Into, Step Over, Step Out, Break Points, Log Points, Conditional Breakpoints and some other concepts as well.\n\n","videoUrl":"https://www.youtube.com/watch?v=Nhy42Apnob0","order":"39","slug":"javascript-debugging","article":null,"thumbnail":"https://i.ytimg.com/vi/Nhy42Apnob0/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/Nhy42Apnob0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"Nhy42Apnob0","ts":0},"hasAssignment":null}],"showName":true},{"id":11,"name":"JavaScript Advanced","description":null,"posts":[{"id":155,"title":"Section Introduction","type":"video","description":"In this video, you'll get to know what we're going to learn in the fifth section of this course. We've already covered the basics of javascript in the previous section. In this one, we dive a bit deeper into more concepts of JavaScript.\n\n","videoUrl":"https://www.youtube.com/watch?v=0D7MaFwXcTs","order":"40","slug":"section-5-intro---javascript-advanced","article":null,"thumbnail":"https://i.ytimg.com/vi/0D7MaFwXcTs/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/0D7MaFwXcTs?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"0D7MaFwXcTs","ts":0},"hasAssignment":null},{"id":156,"title":"JavaScript Callbacks","type":"video","description":"In this video, you'll learn about JavaScript callbacks. This is your first step in asynchronous programming.We'll discuss what are javascript callbacks, how to use javascript callbacks and javascript callbacks in Urdu/Hindi.\n\n","videoUrl":"https://www.youtube.com/watch?v=8K-mQkfKxys","order":"41","slug":"javascript-callbacks","article":null,"thumbnail":"https://i.ytimg.com/vi/8K-mQkfKxys/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/8K-mQkfKxys?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"8K-mQkfKxys","ts":0},"hasAssignment":null},{"id":157,"title":"JavaScript Promises","type":"video","description":"In this video, you'll learn JavaScript Promises with some real-world example. We'll discuss how to use Promises, what are the states available in JavaScript Promises and how to handle the pending, fulfilled and rejected states. We'll also discuss how to catch errors when working with Promises.\n\n","videoUrl":"https://www.youtube.com/watch?v=kksWJxNCJHU","order":"42","slug":"javascript-promises","article":null,"thumbnail":"https://i.ytimg.com/vi/kksWJxNCJHU/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/kksWJxNCJHU?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"kksWJxNCJHU","ts":0},"hasAssignment":null},{"id":158,"title":"JavaScript Async Await","type":"video","description":"In this video, you'll learn JavaScript Promises with SUPER POWERS. I.e. you'll learn about Async Await. This is an amazing way of working with promises but you write the code in a \"synchronous\" way instead of an \"asynchronous way\". Let me demystify this concept for you.\n\n","videoUrl":"https://www.youtube.com/watch?v=Rz2ZK8l-61U","order":"43","slug":"javascript-async-await","article":null,"thumbnail":"https://i.ytimg.com/vi/Rz2ZK8l-61U/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/Rz2ZK8l-61U?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"Rz2ZK8l-61U","ts":0},"hasAssignment":null},{"id":159,"title":"Activity - Random Users List App","type":"video","description":"In this activity, we're basically combining all our knowledge so far to create a random users list application that works with a real API. We use Promises, CSS, and what not. You'll absolutely enjoy this activity.\n\n","videoUrl":"https://www.youtube.com/watch?v=PHNHOiU9yC0","order":"44","slug":"activity---random-users-list-app","article":null,"thumbnail":"https://i.ytimg.com/vi/PHNHOiU9yC0/sddefault.jpg","videoEmbedded":null,"embed":{"url":"https://www.youtube.com/embed/PHNHOiU9yC0?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"PHNHOiU9yC0","ts":0},"hasAssignment":null}],"showName":true},{"id":12,"name":"Conclusion","description":null,"posts":[{"id":161,"title":"Wrap up","type":"video","description":"We're wrapping up the course in this video :) This was so much fun and engaging and I loved all of your responses, questions, and enthusiasm. I'll be working on the website more to be able to show your assignments and progress. Let me know which course do you want me to work on next.","videoUrl":null,"order":"45","slug":"wrap-up","article":null,"thumbnail":null,"videoEmbedded":{"url":"https://youtu.be/5hzfOc8ualk","title":"Wrap up | Web Development Basics Course","thumbnail":"https://i.ytimg.com/vi/5hzfOc8ualk/hqdefault.jpg","mime":"video/youtube","rawData":{"title":"Wrap up | Web Development Basics Course","author_name":"Code with Ahsan","author_url":"https://www.youtube.com/@CodeWithAhsan","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/5hzfOc8ualk/hqdefault.jpg","html":""}},"embed":{"url":"https://www.youtube.com/embed/5hzfOc8ualk?autoplay=1&&enablejsapi=1&rel=0","isYouTube":true,"id":"5hzfOc8ualk","ts":0},"hasAssignment":null}],"showName":true}],"authors":[{"bio":"Muhammad Ahsan Ayaz is a Google Developers Expert in Angular and a Software Architect & Head Instructor at . He loves helping the startup ecosystem and product owners bring their ideas to life using JavaScript, Angular & Web Technologies. He has built several open-source projects that he maintains, speaks at events, writes articles, and makes video tutorials. https://bio.link/muhd_ahsanayaz","avatar":"https://res.cloudinary.com/cwa/image/upload/v1647822512/avatar_421e7707fc.jpg","name":"Muhammad Ahsan Ayaz"}],"introEmbeddedUrl":"https://www.youtube.com/embed/Knn0TN2j8vc?autoplay=1&&enablejsapi=1&rel=0"}