{"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"}],"introVideoUrl":"https://youtu.be/Knn0TN2j8vc","slug":"web-dev-basics","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/Knn0TN2j8vc?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/cKfuls25sLk?autoplay=1","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,"videoEmbedded":null,"embedUrl":"https://www.youtube.com/embed/laIbRl3TfkM?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/fBSx-AOcqT8?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/jBxtk2XLGlw?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/J9rTYU01-QQ?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/5e4AL_bTxiM?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/GPFbGUB6Hs8?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/wuqLzwFYUC0?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/i2aVYjYGpzU?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/9y06yIrreD8?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/P3xe3AX6i9k?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/QJQyPaxa6F4?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/VFVm4qIAkSY?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/XgbInNIAL2o?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/4oo3J55Ohpc?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/JqAb0yYWYHo?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/Yy9dgquIT0Q?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/8QlLzr2wqzI?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/L9JEu7F2xBw?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/4OSNcOedckQ?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/BCZhNFDyI48?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/260wNr2EnTo?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/e9LnuguT0dI?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/EF__Oq3Of_0?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/fGxCFNOk6Es?autoplay=1","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)","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/CqZIxn81GbY?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/_nRyfDZyZlQ?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/hvBVrM34oYM?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/S1InOiheRz0?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/_80Pyzx7kiE?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/Eg9dSHEXD38?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/xyb1DOmQ8AE?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/V1umcz-f3cs?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/NMrSBb_Tybg?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/E5PePBIsGbU?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/uzqNhrz0Er4?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/7LPRlWooXZ8?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/yvcJq9nui14?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/rLXGQhmgQX4?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/7Mx1JjdwGtw?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/iZC1rm1B71c?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/vCBxY02oP7M?autoplay=1","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,"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":""}},"embedUrl":"https://www.youtube.com/embed/2DiEEoL6g0U?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/TFknOdqSCIA?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/N-6wqOugcQM?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/ROyI60VsW2o?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/ucAw8QA3U6I?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/8BC6OqQ6iMw?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/VC8bzhc6RUA?autoplay=1","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)","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":""}},"embedUrl":"https://www.youtube.com/embed/eotsvhcyQZc?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/_04eGlJqqNg?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/69eglD21lNI?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/XiV0KoQUNhA?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/wxNyIZbZDGc?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/ejVHwf_hEqs?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/7NpYco4IXSg?autoplay=1","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":"","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":""}},"embedUrl":"https://www.youtube.com/embed/xg0gMdK6udQ?autoplay=1","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"}