2021-Learn to Code and Build Real World Projects | Mani Kumar | Skillshare

2021-Learn to Code and Build Real World Projects

Mani Kumar, Instructor on SKILLASHARE.

2021-Learn to Code and Build Real World Projects

Mani Kumar, Instructor on SKILLASHARE.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (2h 15m)
    • 1. Introduction to the course.

    • 2. What's WebDevelopment?

    • 3. How do websites work.

    • 4. Downloading the Resources Needed:)

    • 5. Learning the attributes

    • 6. Adding Images and videos.

    • 7. Whats iframe and add colors

    • 8. Add videos and Embed websites

    • 9. Add logo to your website.

    • 10. Let's Start to Build the website part-1

    • 11. Let's Start to Build the website PART-2

    • 12. HTML box model

    • 13. Let's Finish the HTML part

    • 14. Start Styling the Personal Website with CSS

    • 15. Continue to Style your Website with CSS

    • 16. Add logo to your website.

    • 17. Web Hosting with GitHub.

    • 18. Class Project Time

    • 19. The End:)

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class



We'll take you step-by-step through engaging video tutorials and teach you everything you need to know to succeed as a web developer what we'll learn is Front End Web Development.

Throughout this comprehensive course, we cover a massive amount of tools and technologies, including:

  • Front-End Web Development

  • HTML 5

  • CSS 3

  • Git, GitHub and Version Control

By the end of this course, you will be fluently programming and be ready to make any website you can dream of.

Sign up today, and look forward to:

  • Video Lectures

  • Code Challenges and Exercises

  • Downloads


  • No programming experience needed - I'll teach you everything you need to know
  • A Mac or PC computer with access to the internet
  • No paid software required - all websites will be created with Atom (which is free)
  • I'll walk you through, step-by-step how to get all the software installed and set up

Who this course is for:

  • If you want to learn to code through building fun and useful projects, then take this course.
  • If you want to start your own startup by building your own websites and web apps.
  • If you want to take ONE COURSE and learn everything you need to know about web development, take this course

We’ll also go over some of the tools and languages necessary for web development:

  • HTML, and CSS.

Have any doubts feel free to ask me:)


Meet Your Teacher

Teacher Profile Image

Mani Kumar

Instructor on SKILLASHARE.


Hello, I'm MANI.

Instructor on SKILLASHARE.

I Love Sharing & Teaching Online.

Here on SKILLSHARE, I'm an instructor that teaches Web development  and other courses.

Feel free to reach out to me on Skill Share at any time, if you have questions about the courses or just want to say hi!   



See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction to the course.: Hello and welcome to this course. In this course we'll learn about web development and how to build websites. We learned about HTML, CSS, and a bit of JavaScript. Okay? I'll take you through every thing, every instruction positively. Ok, I'll teach you how to write your own code. Igg award CSS is I IV diode. I'll explain how websites work, how the Internet itself work. And we learn about the many text editors. We learned about how we learn how to write our own code. Ok, so you're excited and at the end of this course you'll be able to read something like this and you'll be able to host your own website on GitHub. We learn about Git and GitHub and much more, ok. And there are many text editors like Corbin and we have W3 schools. And you'll be building simple one-page website and we'll be hosting on the purchase or domain. And Bill hosted okay, through guitar will just hosted on GitHub. And at the end of this course you'll be able to build, let's say it's like this. And you will understand how things work. Okay, then we need to install some more resources. Hopefully you're excited. I, if you are a beginner, there's no need to worry. I'll take you through every single step that's possible. And I hope they are. And this is a introduction video for this entire course. And I hope I'll see you in the next video. 2. What's WebDevelopment?: Hey, on this video we have a basic understanding of what's hits, TM milliwatts, CSS, and JavaScript. Ok. I'll explain you on those things in a nutshell. Okay? What's HTML? Okay, what is the abbreviation? You already know it. Hypertext markup language. If you search in the web, watts hits ten mill or in Wikipedia, oops, sorry. Or in Wikipedia, wait, let me show you. It has a larger documentation or whatever it is. Tied says it's a standard markup language for document is designed to be displayed in a web browser. This Wikipedia page is written with HTML, CSS, and JavaScript. And in this course we'll basically learn about front end web development. Okay? You can read the document if you want. Hit HTML is used, is the skeleton of website. It is used to add text in our website. For the text to look good. You can, you can use CSS. Ok, let's talk about CSS now. And this is what hits to Emily's. It's used to add text in a website that we use to display content in a website. If you want a website to not look boring, you'll use CSS. Now, what CSS? Css is used for styling the websites. You, I think most of the people know, are don't know the abbreviation for CSS. I it's called a cascading style sheets. In the name itself we have style. Okay, Vietnam, we learned about HTML5 and CSS. Javascript are but not much. We'll mainly focus on HTML and CSS. You search in the web board, CSS, wait, let me do that. It says Cascading Style Sheets or it gives us a pretty good look for a website is just I just tails the website. It says it's a stylesheet used for describing the presentation of a document written in Markup Language. So the lead hit HTML, CSS, and JavaScript to design a complete front end website. So for a better understanding of you, I'll open up. It may end of warts, frontend and backend. You can take a look at this. The image itself explains to you a lot. Frontend consists of HTML, CSS, JavaScript, which is JS. Okay? We learned about two things in this course, HTML and CSS. Now backend web development consists of JavaScript, Microsoft.net, and up PHP that there is a server side language. Now this picture, you can take a look at the backend side of this backend web development, which is JavaScript, PHP, Microsoft.net, and many other things. But this is the front and the front end is what we see. Backend is what we can't see, okay? What we can't see. And a VR, the user here. We are, the user here. Seeing the front end side of a website, not the backend, not the main thing. Like Python. C plus, plus C JavaScript. Ok, I'll close this and close this. Now, this is the front-end HTML lizard, basic HTML. If we type this and save it on the desktop, you'll take, you'll, will find something like this. If you just click on it, you can take a look at the basic hits DM and there's no CSS, no JavaScript added to this. This is how hedge the family's pocket c, you are going to take a look at this. This is heading and we have hopes I close this and we have this is heading here, or k, and we have this paragraph. We have this paragraph here. And we have the page title. Here is the page title. This is pure HTML written in sublime text editor. So I hope you have a basic understanding what is HTML, CSS, and JavaScript. So I did not explain what JavaScript is. Wait, let me do that. Javascript is like it just worked, or should I say, it will just help the website TO start working? We can add buttons with JavaScript like this is a button. You will see the X mark on our website, right? Who's edX Mark on the website? This is made by JavaScript, JavaScript ads, working off of it led sight of the fact it's got it. Let me so it's for this. And, oops, oops. Okay. With JavaScript, you can create buttons and you can give a function to a bedside. So with JavaScript, the website starts working okay with HTML and CSS. You can give a, give, a pretty good look. But in this course are, you know, what do we learn? Html and CSS. Let me show you how long, what's JavaScript and CSS first, let me show you what can CSS do. This is a basic hits TM and law, colder or line or whatever it is or where it let me say before, before writing this tile, I'll save it control S to save volume, or you can click on File Save. Before that we just had this. I'll click on Control R2, R3 load. This is a heading, you will have this, but what you can do with CSS is you can now give a style to a website. You can add colors, you can add shade, shapes and stuff. Wait, let me type style, click on Tab. It has plug-in so that the Show Me tab. If I just click on Tab Bar, you'll get the get it written as Glaucon VAC. Background-color. I'll click on tab so that it fills. Oops. Color. I'll you give it I'll give it a blue color. Light and blue light. Light, blue. Tuned work. Wait, wait, wait. Yeah. Okay. Let me say this. I think that to oops. Or, sorry, light blue. Light blue, light blue is a color you can now even give it. Now, I have saved this polygon files here. Now you open up the browser and click on Reload c. You can take a look at this. The background color was white. Now it has changed to blue. You can get different colors like red and click on Control C. I'll give this not looking good. My eyes will start banning. Ok, this what you can do with CSS. This is CSS, this is cs and the rest is heads, d, M, L, Okay. You can give orange, purple, tomato, tomato light orange color. So let me explain you work. So JavaScript now, okay, I have explained you what CSVs, I just opened CodePen online text editor for up front end development developer. Okay, front-end code, I just click on these guys. Project dark mode with CSS variables. This guy created one dark mode team. He has just created this, maybe a template or whatever it is. If you just click on dark, it just changes to dark color. Okay? I will just click on light. It changes to light color. Now this is what JavaScript can do. It, it adds working to it, like creates this button, okay, now, and you can click on change view and you can change your view here. Okay, now let me remove JavaScript from here. If I remove JavaScript from here, we can take a look at this. It stops. It stops working. Ok, I'll take a bit of time to load. It stops working. Well, this is JavaScript. It's not working. C, If I click dark, it's not working. I'll press Control Z to go back. No, it's not saving with it. Okay, reload. Okay. If we remove JavaScript from here, this button won't work. They're Swartz saw, that's what JavaScript does. Okay, this is C Ss. If we remove CSS, wait, let me do this. I-i hope if you remove CSS, see you can take a look at a damn ugly, right? This is what CSS does. It you can create containers with CSS and stuff. Yeah. You can take a look at it. I just get back. It's horrible. This is CSS and this is heads DM and I left click on Reload. Or with CSS, you can create this box with JavaScript. You can create this button. With HTML you can create, you can add an image and write text. And with CSS you can create the soft box. Okay. That is what I'm trying to. I removed it and see there's nothing. Xhtml is. The main part is the skeleton of a body of b. And I'll see you in the next video. 3. How do websites work.: Hey, in this video we'll learn about how websites are a really work. I'll explain you how they work. I just opened up a Google image here. You can take a look at it. Like when you search for a website, it it directs it to your ISP, your Wi-Fi internet service provider, than it goes to other services right here. Then it goes to the host server than this host server rob provides you with the IP address for the other servers than that other servers give transfer the information to our internet service provider, which is ISP or Wi-Fi, your internet company, whatever it is like. Ok. Then with that information, now, with that IP, it'll be sent to your browser, your personnel computer right here. Okay. I'll zoom in a little bit. Then Google Chrome mark catches that IP and the website loads up your, in your browser. This is how it works. Now, let's talk about the Internet. I have opened up our submarine cable, map.com. Okay, here, can take a look at it. The Internet is connected, the whole, the entire world is connected with tic cables. Under the ocean bed, not the ocean bed. It's in the ocean, sorry. Okay. I just connected like this. You can take a look at all the cables connecting from India to Pakistan to Saudi Arabia, Africa. So you can take a look at the world map here, United States, if a cable cuts, okay, if this optic cable will be very fat, like DES or optic cables where the information is getting transferred from one country to another. If you want to open up a website of USA, are you? The information goes through this cable right here to USA and their website opens up in your country, in your browser. So the entire world is connected with tic cables like this in i, under the ocean, inside the ocean. So if a wire cuts, you won't be able to access our websites in other countries, or you won't be able to access internet. If you want to know more about this up, you can click here, look no further here, right here. Okay. It csr about this, if you want, you can read the documentation about submarine cable maps, okay, apart from that, if you want to host a website, now you'll need to a purchase a domain, Watson domain. Domain is like.com dot dot biz. You can host a website and purchase a domain from GoDaddy, or you can operate domain from domain.com. It's very cheap. So I click on domains here. You can take a look at it. In costs are 149, I'm living in India. It's pretty cheap.com costs or more than now, dot in or else, if you don't want to pay, you can just host your website from GitHub and share the link.me are like it's like facebook dot. Com or Facebook dot in. This is a domain that.com and dot is given you can search for domains, you can compare plans from GoDaddy or rub that side domain or domain.com, or you can choose them, okay, then browsers have these inspect barrier. We can inspect the source code of this entire website. Right-click in your Google Chrome or Firefox, whichever browser you are using. A right-click and click on Inspect Element. It'll open up, something will open up. This thing will open up where you can take a look at the source code of hits TMS right here, where let me expand. I can't expand this already. Okay? Just select this, do more, and the right-click it, click on Inspect Element, you can take a look at it. It's highlighted in blue color and just click on these three dots here. You can take a look at here that do more is written. Just double-click this and change it tended to be. Yes. See you can take a look at the this was changed from due more to web D. Okay, you can just change the website look by just clicking on inspect and changing this. This is not changed forever. If you reload it, quit. Let me show you. If you reload it. Again, changes to the original thing, which will do more because it's it's not changed. The original said we're in the official server. It is just changed in your browser in New York on a local file or a local copy like this, I head over to Amazon, wait, I'll open up on its own. Okay. Here also you can do the same thing. I-i just opened up Amazon. And you can just right-click and I'll just select, wait, wait, I'll just silicon. Not able to sell this. I-i wanna sell it. Okay, I'm not able to select the rate. Okay, I'll just select this 403 naught one. I'll right-click and click on Inspect Element Alice, expand this, you can take a look at it here. I can change the entire thing, right? Like a 100% of this, I'll just click and turn around and you can take a look at it. I have changed this in my Luke, in my browser, not in the server. So hits. So when web browsers just load HTML files, HTML, CSS, and JavaScript files, and totally their website like this. This is written in pure HTML, CSS and JavaScript. And the backend programming language, you're going to click on view page source. Here. Let me do. Okay. If you click on Reload ingestion, It's Rosa, say 4,003, not 126% of our furthest iPhone 11. Ok, and in the next video, we'll open up sublime text and we'll just start to write a piece of code. And we'll just write a line of heads HTML. Okay, I'll meet you in the next video. 4. Downloading the Resources Needed:): Hey, in this video, we'll just stop download. Some resources are like text editor, which we obviously need to code or to write a piece of code. So we'll need a text editor to write something, right? There are many offline text editor like Notepad. Note paradox is already installed in your PC if you're a Windows user, okay? But we can't do much with Notepad because there are no inbuilt plug-in, some of which can be added. Ok, so we'll go ahead and download some online text editor. I have downloaded three text editors, but mostly I use Atom or Sublime Text. Okay, this atom, and this is sublime text, the second symbol. Okay, are now open up your browser. Just search for sublime text. Here is the link, HTTPS, www.sublimetext.com. Just click on download for Windows, you can take a look at the website and its features. You can take a look at it here. You can just read the documentation, just click on download, and it should start download them. There will be a pop-up for Windows users, they click on save file. It should be saved. No, I won't save the file because I have already downloaded the Sublime Text editor in which we can start to write some hits T and men, ok, just click on save File, Save and just click on, double-click it and it should run. Audits is a basic process. You'll already know. You don't like atoms text editor or you can go with, sorry, if you don't like Sublime Text editor, you can go with the atom. You can download atom from HTTPS, atom dot IO makes sure that there is a lock icon and the connection is secure. For those click on Download. It says Windows for 64 bit or later, you can take a look at the documentation or hackable text editor for the 21st century. Ok. We'll take a look at the features of atom here. And this is an open source project, but first Sublime Text, you need to pay around $80 or so. I got the activation key from Google. I have not paid. And so audience, you can not use sublime text or with the free version. Also, academies are open source and it's free for everyone, okay, you can just click on download. The data will be a pop-up saying that the file size is 128 MB. Click on Save File and the rest of the installation process which you already know, I download that year looks something like this. This is atom text editor. I have opened it where let me show you to do. This is atom text editor and let us Sublime Text. This is sublime text editor. This is how it looks, OK. And I already have installed it. If you don't even like Sublime and atom, you can just download Visual Studio. This is also just like Adam and sublime, but there are different features for each and every text editor out there, okay? And this just click on Windows. If you're a Mac user, click on this button right here. If you are a Linux user, you can just click here, click on Windows 32 is that little bit I exist are that it's a zip file. We're going to extract it. Okay? This is how what visual codes studio looks like. This is how it looks like, okay? This is how it looks. And you can start typing your own hits, TM and throw. This is what we need to get started of basic text editor. Are to write your own code. You can read the documentation here or else. You can even use the online text editor of k are like CodePen. It is the best tech online text editor out there. Even just click on, this is the link to it. Https CodePen.io gesture can start coding and you can now, let's click on change view. I will click on the layout. I'll minimize CSS and JavaScript by dragging it down. And I'll expand the view, okay, it says HTML. And you can just start typing our texts or heads t and ending one. So this is an online text editor where you can take a look at this cell. Okay, LED-backlit display you the result out to the left side. If I type hits too. Yep. Just changes. It. Just changes to hit if I hit one. Interesting. So I, if you download atom, you need to download some packages right here. Okay. I'll show you these are the packages needed. I'll give you I'll provide you are not bear the list or you can take a look at it here. Atom beautify, bracket majeur. Okay, these packages help us to cold pretty easily just coupon File Settings. Click on packages, and I've installed it on many other weight it's loading. Having started at these package, even if you don't like the baggage, you can just click on uninstalled button or click on the disabled button. Okay. That's it. And yeah, this is it for the video we I told you how to install a text editor. In the next video, we'll start, our will start to write R code and I'll explain you about the basic HTML, CSS or under you even you can change the theme in atom, you can to a dark one, or you're going to light one. Are this is not good. Dark thought. I'll meet you in the next video. Peace. 5. Learning the attributes: Yeah, welcome back. And in this video, just go open up a sublime www.sublimetext.com and click on Download. This is a free version. You can use a free version or if you want to buy, you can just click on buy and it costs around $80. I bought it. Okay. You I'll show you the license. The icon should look something like this, like S Sublime Text and take a look at it's registered. Ok, this is a boiler code of HTML, but there are different online texts online now. Or the online text editors like CodePen where you can directly write your code and it shows you the result. Okay, you want to download a, you need to download this. So we'll start using sublime text editor. Just click on Download. I'll close this. But there are some other websites where you can learn and practice HTML. I could W3 schools, just type W3 schools and you will get a website like this. Yeah, click on Learn HTML and you can start learning from here. This is the best way to practice your code, okay? This is the boiler Cool. So there is a website called Deb, Deb docks where now you can take a look at all the HTML attributes here, you're gonna take a look at hit all the HTML elements, a BAR body, and you can practice it. You can practice this stuff. Okay, I'll close this. I closed W3 schools now will start up the basics. Open up CodePen.io on your web browser, Google Chrome or Firefox, whichever you feel like, they click on, start coding. Try online text editor. Note, note pad is also a text editor, but it doesn't have plug-ins. Okay, click on change view and just click this will minimize the, I'll minimize this. Now let's start to code. Ok, let's start to write a piece of HTML. So you know what HTML is hypertext markup language. And this is the boilerplate for HTML. Ok. Let's, let me close this. This has inbuilt packages or plugins, whatever it is I just taped hits d m under click tab. You can take a look at it automatically writes up this entire thing. You don't need to worry. It had doctype, it has HTML, it has head, it has title for the website. It has head again, body, body and ahead HTML itself open up here, and this is sublime text editor. No, you cannot do the same thing here. Now, there are a different kind of elements and attributes in HTML. Attribute now. I'll just dive hits one type. This is level one. Heading. Now, close the thing. Now close the head to untag. See, saw, oops, sorry, heading. We're going to take a look at the research. There are six bags of hedge. One. I'm next vector, cat. Ok. Leave that. No, we have heads. Do we have this is HDTV hardening. Oh, it's too. They have c. You can take a look at the size of heads two and size of hedge one. Okay? You have six headings like this. You can write down six headings like this. Ab opened up our W3 school. You can take a look at it here. I will just copy this. I'll just copy this and paste it here. Even you can save the work online if your account and you feel you're gonna take a look at this, you have six headings like this head one, head 200 tags. I write down heading for this is a and E for heading. Yep. You can take a look at this. Oh, okay. R, this is what our heading that I'll show you. You inspect this element, right-click and inspect this HTML headings. Click on Inspect Element, and you can take a look at it here it's, it has hits to tag heading. This is heads h1 tag. This is a head H1 tag ID. It'll be, it'll be a little more bigger, it'll be a little more raw, larger. Okay, wait, I'll show you this is how it works. This is the heads one tag here. If you add a BR tag here, if you just type B. Now it'll give a space here. Take a look at BR tag is used to give spaces, so give, it gives a gap. If you, if you type, if you type hits here, it will draw a line here, paired t, c. You can even resize this. You can take, you can increase the thickness of the line like as I say is go to size five. C, you're going to take a look at NPR. Can give it no shared no. Yes. No shear. Yep. You can take a look. I can draw lines like this. See, look there is a line here right about HTML heading. There is a light line which is created with the heads are ad. So there are many other elements like this and I that I'll teach you in the next video. This is a pretty long video. I'll meet you in the next video. 6. Adding Images and videos.: Okay, in the previous video, we learned three attributes or elements, heads, h1, tag BR, and hits our tag. Now in this video, we'll just right-click on desktop and we create a new folder called P SPM. And I'll just click enter. No, I'll open up sublime text editor. I cancel. If now click on File, click on Open Folder, okay? When you click on Open Folder and head over to desktop, this file ball head HTML, select this folder and this opens up. Now, just type heads and click Tab. Okay. Before typing heads T, m, n. Now we need to save this untitled document, pest control S. To save it, a popup opens up like this. Click on. You need to save the file in heads T, M, L on your desktop you can take a look at the file location. They stopped HTML. Now just type I NTE index.html is very important. That dot HTML just click Save. Once this is done, you'll find file inside HTML called index.html with the Google Chrome browser, your default browser, okay, my default browser, Google Chrome. Here. Now once that is done, you'll now once that is an open up your text editor, just type HTML and just click on tab with the inbuilt, the plugin, it'll feel just right. You are rubbed boiler plate HTML covert. Ok. Now click on control S to save or you can take a look at the DOD has been disappeared, that may end. The file has been saved. Now let's write some HTML. Now. Let's type the title. Let's type something like fast website. First books. Mind Website. My first website today. My first, the site. There's press Control S and just click on HTML and just click on this, your browser opens up and you can take a look at the title. It says my website, my first website. Ok. And we have not written something, so this should be blank. I'll close this, I'll open up my text editor again. Now in the body we love mentioned something like Will mentioned that hits one tag. Okay, let's plug heads one and click Tab Bar. It just completes your sentence. That's what plugins do. I will just type. Hi, hi there. How are you doing now? P R3 on File, Save our controllers, and just click on Google Chrome and click on Reload C. We're gonna take a look at this. Your Google Chrome has loaded the HTML file. Hi there. How are you doing? Now we just typed one more sentence, a type tab. Fine. Okay, I'll save that and we'll take a look at it. Hi there. How are you doing? And even you can add links to your even you can add links to your website like you have there. And the images link. You can add links in the hedge ref column here. I'll just add a link to www.google.com so that Google opens up. I'll just click Reload. Why is this not working? Wait. Okay, I'm sorry about this. Attribute is not for linking. Inside. This is used to link the CSS files. I'll just cancel this. Okay, I'll just cancel this. And this here is used to link websites to provide a link, just type a and click on tab which says a heads rep. Now you mentioned your link, I just copied up bar. You will do link under here. You can mention whatever you feel like mentioning. This link you to. I'll just mention you too. I'll just mention you do and click save. And just open up our lead Trade and click reload. See you can take a look at this. You'll just click on Destin. Youtube opens up from here. If okay, when it opens, are you notice something right in just your website, instead your website, it just opens up a new website, call you to. That should not be done. You need to mention a target here, t and just type D, TA and just click Tab. Target is an attribute and just oops, and dismantle underscore de Blanco and just click Save. Ok. Now that really ought this reload and click on YouTube. But now we're going to take a look at this. You will do is whole opening up in a whole new tab. Right before it was not like that. It girl used to open up in your cell norm, you click on YouTube and it opens up a new tab. This is the power of four target blank attribute. We're going to add links and you can even add images. You can even embed YouTube video links. I just click on IMG email. You can now add images from the web. I'll just search for Ra what? Al-assad for wallpaper. Oops. Oh, okay, I'll click on it using Duck, Duck Go browser. And let's click on this image from Google Chrome. I'll right-click and click on Copy link or not, not link and copy image address. Okay, I'll just minimize this and I'll provide the link here. I hope that should one. Let's reload our website and then take a look at an image tag. You can add images to our website. You can resize them, you cannot you cannot change the gardeners to rounded coordinates and stuff. I'll I'll I'll teach you everything, but you need to stick with me, okay? Yeah, you can take a look at this. This is a pretty big image, but we can resize it with HTML attributes and CSS attribute grow with ARA, which we'll do in future. Oh yeah, you can do so many things with HTML. You can add images, you can add link, you can add, you can embed links where tile dry embedding. You can embed videos K0. Oops, wait. Yeah. We were talking about placing videos in your website. I found the attribute for that. It's iframe. If yep, iframe, you can now embed videos later. I will just open up OK. You do it in a new data. I'll just click on YouTube and it should open up. I'll just select VD0 and amplicon share. And here is our icon called embedded. Click on that and select all this, okay, this copy, this. Click on copy, copy to clipboard and just paste it here. Click on save and reload your website. And boom, you have a Youtube video plays in your website. You can even say this, you can place it in the center or you can do whatever you want every YouTube video playing in your website, okay, this is what you can do are letters resize this image in the latest research they made in the next video. Okay? Oh, this is what you can do with HTML. Html, ok, you can, this is a skeleton form. You can take a look at the gold. This is just the basic stuff. Okay, I'll meet you in the next video. 7. Whats iframe and add colors: Okay, and let's catch up from where we left off in the previous video, we were talking about heads one B edge, image tag or heads rev, adding links, adding videos, embedding videos on your website. Tau will talk about imagery using adding colors on your website, like the background color. Okay, let's do that. Now that we know how to add and bed images and videos in your website will just resize the image. Ok, I click reload. Whoops. All right, you click save. And you have this arrived. You have image here. If this image doesn't load up in your website, you'll need a text about what this image, let's type B LT called unclick tab. Let's mention this is nature. This is a neat Chandra image IMG decision named Tim and glass. Click, save and dial this, remove this link. I will just remove this links. Just for now, Alice clicks here and take a look at it. Instead of the demand. If the image doesn't load up in your browser, or you can even provide a link to the image there. It says this is a nature remained because we have mentioned it in the session. I'll just press Control Z to go back and click save. Now you'll get the image back here, okay? If the mean doesn't load up, you can provide a link or a text dot. Now, let us resize the image. Okay, let's resale that email. Now just type where W i t, t, width and click Tab. I just mentioned 500 and I mentioned height, height 600. And this Greek see this, well, you can take a look at it. Look either email has been resized, okay, in this way, you can resize images and embed videos in low. We're going to just add a BR tag here. Okay? And then you can add the head wherever you want to add it. I'll just add a chart here that psi phi nodes here. No shared even you can now have dotted lines. Dotted lines. This, yeah, see you have BR tag. So the video was here, it went down. You have the head jagged line here. Now let's add some colors to the background, okay? Or we can even add colors to the your even you can add a color to the text itself. Okay, let's add a color to the text. You just type style. This is CSS, but you know, directly embedded in HTML, I'll type. I'm Doug mentioned the tomato colors. Okay, I'll relate blue, light blue, isGoodEnough. Let's say we load. You can take a look at the decks. It just turned into Light Blue. Nile, right? Some paragraphs below, I'll write, you will be Dad. This is o. This is just a simple paragraph. Okay? You can write Paragraph window p tag here. And you can even take the styling like, how should I say this I sold to. You can use, you can even know, boiled this like i, if you are not born this like I can just type strong. With strong, you can know the strong tag. I wait. Okay. X, oops, I'm sorry, I'm sorry. Great. I will save this and open up my browser. I'll just reload even take a look at it. It has been not bold that okay. I'm you can even italicize your text like if you want to italicize Lucundus type iii, Okay, how to italicize? Or you can just type this command right here. Just type IN tab that I will just copy this inside this and click save and reload this. This is, this is just a simple paragraph. Text has been italicized, dot paragraph in bolded. And you can even add BR tag here if you want to add up the card. And we can take a look at this. I'd not save it. I say, yeah, well, you can add whatever you would like. I'll just reset it. You can add lines. You can embed Dao VDO cell. You can embed images, you can transcend them. You can center the text with CSS, HTML, and you can add buttons with JavaScript. And I'll meet you in the next video. We'll start our website. And the last thing I did not top teach you how to add color to a website, right? The background-color, I'll teach it to know. Okay. Let me show you how. The last thing on the last part of the video, let me show you how to add a background color to our website. Just type style and tab if either now or type background color. Oops. Silicon, whichever color you want, or you can even mention a hex code from the color. I list type color Han, and just click on this. I'll just pick up a hex code, which Colombia's good. I'll just pick up this edge has copied, and I'll just paste it here with a hash. Don't forget the as other method won't work and don't forget this semicolon. And neither does reload. Take a look at this. You can in the entire look of the website by adding fresh and light looking column like this. Or even you can. So you can tune the look of the website like this or even you can mention that I'll just mention the RPL poeple and just click Save, decree lowered. Ah, this is a good Calypso. In the next video, we'll just stop style this with CSS. I hope there are many other attributes you can just law. So it's for them and learn them from W3 schools. There. These many attributes C, time. In the next video we'll talk about how to add the handles to Yad it up. Video here and there to our handles to this video. But if you download a video and upload it to your own good hand them. So and we'll talk about that. How to add handles, how to control a video. We learned a lot of stuff. I'll see you in the next video. 8. Add videos and Embed websites: Okay, in this video we learn how to add the I frames and how to resize them. How to resize images are under how to embed a website in your website. Okay, but iframe tag, this type heads DM Milan, click Tab. Alice, name my website. Mileage or gay. Now here we'll go ahead the iron add video to our website itself. There's a pipe if I fame, I'm the tab that I have just downloaded a video from YouTube. I'm I have LOD desk. I have downloaded video from YouTube and I have placed it into the video folded Ru even you can place it normally. I have named it banter right here in our heads HTML folder. Okay? Now, you just click on this icon. You can take a look at the MP4 video file here, I'd say stopband temp dot, dot mp4 or gay data. We need to attach that into in arrowheads g, m, l file in an iframe. So it has type dot-dot slash HTML slash video. Give the path to the folder. B and D are Panther dot mp4. Okay, after this desk be axial in this column desktop. Oops. Okay, let's save this and desk open up. We'll take a look at it. Here. You have you have you have the video, you'll have the medio enabling that, Okay, if I add remove this and sphere it, you won't be able to feed in media. You are not able to see the video, okay? If you just do this, then you will be able to add videos and even you can drink that verdict and stuff like that. Okay. I'm a let me do that. The v x d m slash VB0 slash Panther, not empty. For a business a file pot to Italia. See if the video doesn't lower down in your web browser. You take a look at something like this. It's Black Panther video visit. You can add text if the video doesn't load their style, we just re-size it. I bid, let's give it 509. This, save this. And you can take a look at this. I am that even you can add a control to this. When you are adding a video, you want to be able to control this AB all to be added for its are appearing. Or you can add the controls to this. You can add, oops, sorry, not this, not this, not this. Then add controls to this Aaker on this is how you add up controls or they'll stop. This won't appear. You can't control the VDO equal, don't add up controls. And even you can add a thumbnail for this lake. I'll show it to me. Just type boasted, posted. Then now you can act them nails for this knot here though, Keith postorder off with a Bordeaux Panda. You can not mention IRR he made here. You're going to add a DOM nail for this entire video. Let's talk about the how to add a website in your website. I type iframe and click dab. And I have selected and say, I have selected this website. I'll just copy the link and I'll just debased did here. Now, you need to see that a website loads. Robin, thank you and take a look at it here. We will not take a look at it and amazed on, on YouTube or any other platform, not, not big platforms like Amazon now doesn't allow this iframe because we can still use the SAR data. Okay. If you just type amazon.com, It just doesn't allow iframe to appear in your app, let's say, and I think you can even provide invert it for this week, is devoted to a eight hundred, nine hundred may be. Good. Let me see. You guy, you're going provide width and height for this. Let me provide height. Since height, weight, I did not add this height. Let the height be around seven. Someone else? Oops, I even take a look at it here. The website is pretty much loaded with iframe or this is how you control other websites in your website. And regarding this video, you can add up controls to the medieval. Don't alone. No, I'll remove this l demo everyday. I remove this. I remind them of iframe. I'll remote thumbnail have not added a column name. And let's remove this text. Or this is how you add something to your website and let's reload this. This is good. This is good to go. Okay, I'll see you in the next video. We will start our basic website. 9. Add logo to your website.: Hi there. In this video, we'll learn how to add up all logo to Yara. Then say, okay, just to I'll open up my fine. I guess opened up or click on Open folder, Desktop, hit select folder so that the folder get opened up. There's nothing here. I'll just type. It's DME items, omental literary. Okay, I understand. Why is this not working? Okay. Okay. Wait. Okay, let's just add the boilerplate for HTML. Oops. Ok, here. Ok, so here is the boilerplate. Now, we learn how to add the icon to our website. Here is the title, let's just name it. You can add emoji or you can even add our icon you'll need to download, okay, and this head over to Google and search for fabric gone, just click on the second link, www dot favicon dot cc. Or even you can skip the first link. Now here you can generate fabric gone like warp logo, you might ask word.lower. Should we add it? You take a look at Facebook. You can take a look at, there is an RFA icon here, which is the Facebooks logo. And you can head over to MOG video, can take a look at the logo here you are going in fabric gone. You can take a look at delta logo gear. To add this F u. We can design the F right here. Okay. Let me design that vert toy. It won't be that good. Not be up to the mark. Let me do that here. This is the Facebooks lower. You can even set the transparency. You can choose a different color, okay? Now you need to download this fabric on. You can take a look at the logo here. It looks something like this. Okay. Wait, I'll resize this. Alway, say, okay, it looks something like this. Now you can click on Download favicon and you can just how to, how to remove. I need to use the editor. We're dial remove this part. And this comes back here again. Yeah, you're going to take a look at this media is created or logo for the website. So you can download this logo. Click on download dot savvy gone, click on save file, click on OK. Now it would be downloaded. I'll open up my downloads. I got this. I got this l close and ICT-based didn't mind heads DM minified here and right here. And click based. Fabric gone is wasted right here. Now I'll just open up my text editor and I need to link the fabric on to my HTML file. Okay, now that we have created RR icon, we can just go to raw heads, d, m, l, file and type link and press Tab Bar. Now, now I have placed the icon in my HTML folder. Here it is, okay, yeah, there's an item name and fabric on dot ICO. Ico, it comes under nine, doesn't come under our JPEG or a PNG dot and nothing else. The stuff laid act. So are you need to link the icon right here. Okay, I'll mention now that is the icon so that they'd just locate their class SDN pens less of the IT people and fabric gone dark. I, C, o. And here we need to mention, not here inside this colon. I'll just mention fabric gone dark, ICO, and I think we are good to go. Okay, I have saved it. I'll just open up my 40 right here and a list. See if you reload, you can take a look at their desk icon here called f for rough Facebook. But even you can add a modulus for this. How cool is this array? C, Facebook, threes book. Like, you're gonna add. Even a more D Like. I have headed over to MOD pedia, like I select this MOU tonight here. We'll take a look at all the different kind of emojis in messenger RNA, AAG heads, DC, Mozilla, Google, Apple, and let's copy this. It says score bead and arco emoji to my website. This also. But the emoji comes here next to the website, but it should come here so that we need to create a good fabric gone under. So this is how you can add fabric onto your website. So I'll meet you in the next video. 10. Let's Start to Build the website part-1: Hey, now that we know all the attributes from HTML, we'll go ahead and design a simple book personnel one-page website. Okay, just like this, you can design the website and we can add our social media handles like Facebook, Instagram, and Twitter. And now there's just needs a bit heads DM medal, 23 lines of HTML and around 60 lines of CSS. You can take a look at it. Now, I'll close this folder because I've already created it. This is the head HTML gored that abd Britain it, okay, I've written are now I'll close this and the bills start building up the website from scratch. Ok. This is what building the website looks like. This is the CSS. This is the index. This is the logo of the logo of a person with a person like a web developer. Okay, now let's go ahead and start know. Yet to. Now let's create a folder called Mind. My website. This is enough. Okay, now we need to open this folder in sublime text. Click on File and click on Open Folder. This click on desktop and it says my website, click on Select Folder. Okay, after selecting the folder, we need to type the boilerplate for this. Before that we need to save, click on File Save. It asks us where to save the file. We need to mention it inside my website and type I AND EX index.html. Click on save, okay, on now you have a folder called index.html nowadays type hips, T, M, L, and tab. You'll get the boiler code for this node will give a title coiled. My my personal website. Ok, and this is enough. Now let's start to build our website like this. First we need the heads h1 tag, okay? X1. Okay, first we need to create DEM here, okay, before typing, typing down head to NVDA aimed to create a div. I'll explain you what is later. Let's type div and tab. Now you have a debit here. Now you'll need to give it an image stack. After the image tag, you'll need to give it a heads h1 tag, led this. Okay. Let's name it. And I'm a nerd or whatever you feel like like like like like John or whatever. Then we need to give it a hedge fight tag tab. And right down. I'm a web developer like this. Okay? After this, you'll need to mention p tag here to write a paragraph. No app opened up. Oops, sorry. Now, opened up this website here where we can copy text from here. I will just copy this text from here, control C to copy and control V to paste, control S to save. Okay, now let's take a look at how are our website is. I'll open up the website. Not this one. This one right here. I'll open up the website. Let me check how okay, we have this Beltway. Don't have an image, so you can do it whichever image you feel like. I'll select, I'll download an image from Google or icon finder.com. Okay. I did open a new tab, new window, select the email like CT, Fourier cons selector image this and obtain really like let us select a good one. This is, I think this is good. You click on Download, PNG it I took download. There's no problem in it. It says saved file. Okay, click. Hydrophilic. Okay, the file should be saved in here. Oops, advocate this. And then I'll paste it in mind. Website folder on the desktop. Now that we have pasted that, we'll find an icon here. Okay, we need to link the icon to the HTML file right here, like it. Now in the images up, right tribute, you'll need to mention where the image or the icon is. Ieee type what I'm typing here. Okay, mine website. Let's rename the amaze. I, it's pretty difficult to name this. I will just rename it boy, B, o. And this is good to go. Come back again and type boy, and this is enough now, take save. I think it should work now. Okay, we have a image but this is not loading. I will find out the problem. Okay, I found out the problem. It's pretty simple. You don't need to give the file path, you'll just need to mention Boyd or PNG and click on save and the website loads up like this. Or else you can give this a pretty small icon like, oops, wait, like this. I will just go V this. And I didn't delete the boy. Ok. I'll I'll delete the boy. I'd click on Delete. I'll paste this in. Ilp. Is this here? Because a boy icon is pretty big, you can select a small icon from Icon finder or wherever you feel like. I just rename this and just say control S to save and come back again. I have a small little icon up. This is the skeleton part. This, this is a very basic HTML. Okay, after this, we'll move on to CSS. In the next video, we'll just start styling our website. Wait, I, I will just start styling our website and we'll add a background color like light blue from color.com. And we stylized our text and add icons and do do stuff. Okay, and I'll teach you CSS in the next video. 11. Let's Start to Build the website PART-2: Hi there. In this video we'll go ahead and learn about CSS and how CSS outfits, heads, TM and okay, in the last video, we designed this. Here. We designed this, right? Okay, before that, in the last video, I ve downloaded image, right? So even you can download many images from this website right here, and you can even select the sizes from here in PNG format. I have selected of phi two, and this is big. You can go with the one hundred twenty eight sixty four pixel or 48 pixel. Now, apart from this, I will close this website. From this. Ok, now let's go ahead and learn CSS. And before starting up with CSS, we need to create a new file, which is pretty easy. And basically con file and click on new file, that's it. You will save this control S to save and where to save it? To save it in my website. Now. And naming is very important. Name it as yes, T by L, styles.css dot CSS extension and dot HTML extension. Now very important licks him. Now you have a CSS file. Our CSS will affect index.html, like you can even write CSS in HTML without creating a new or dot CSS file by mentioning style here. Let me okay, sd y, NP, I mentioning style here, but it's better to have a separate CSS file to be organized and stuff like that. Okay. Like BAC, like back ground color, weight. Whoops. I have quarters is okay. Background-color property. And I'll mention light blue color occur. If you have any doubt in attributes, you can ask me or you can go ahead, are two w, three schools and practice it from here. Or dev dogs or Mozilla fire for development website. Now, I'll save this, maybe it should affect c. You can write CSS code in HTML with the style attribute. No, I have changed the website colour. It's better to have a separate file. Okay. I will remove this and remove all of this. I will remove all of this. Now let's affect the website, a type body, okay? And give it a semicolon. In HTML, you will have this done, right? This arrow marks greater than arrow marks, nine CSS, you will have this currently flower brackets where you can affect the hits TM, nowhere you can go ahead and mention VAC, background color. Like I will pick a color from color hunt. Why did I open this color? Let's start. Okay, let's pick a ladder fast. Let's go with this or let go with this, okay? It's based on a clear night. Clear hash is important to mention the color. I'll save this and let's see if this will affect. Oh, I forgot the one thing we did not link this CSS file in hit statement, that's the most important thing. Now type link in link and tab that tabby phi. Now you'll need to mention the path, the file per dot-dot slash. That is it. My my website. It's thin slash styles, styles.css. Okay. I know that I have linked with the linked attribute. No, I think it should work. Let me check. Yes, it's working. This is how CSS works. There are many attributes NCSS ON, just click on CSS learn, but I'll teach you most of the attributes. Don't worry, nowadays website is good for practicing stuff. Okay. So let's center the text appear lead center the text here, body than text, align. Text align on. This is one more attributes. Center of clear. Let me try how let's go ahead and check c. You can take a look at it that the text is centered to add icons or to change the drawn TO what, or to change the font. You will need to access Google fonts that are different subject. We will discuss that later, but before that, okay, maybe you understood this much right? Now, let's go ahead and mention classes here. Clas, I'll explain the word class is now box. Let me though this under let me mention a glass here. Okay, let me hit one. Classes can be affected if you want to affect just the John, just if you want to affect just John, you need to provide a class. Now go to your CSS file and type dot H1 because the class name is dot right here, the class name is dot a21. Now if you type heads one here, you can just affect John. Like you can change. It saw John color like form, font, family font style, font size. Let's change it to 50 pixels. Okay, let's check to see if you can take a look at it that John John size has been increased dot yep, you're gonna take a look at it here. It says 50 pixel has been increased, okay? Now, this is how you can affect even you can change the color, like color, the text color, maybe text. Cpoe. Text-decoration color like red. Maybe red is good. Let's go ahead and take this. Nope, it's not working yet. There are many other properties like this where we can change it. Okay, apart from this, we'll go ahead and create a container that will create a box like this, like we had here. We just created a box, right? I'll teach you that. I'll teach you how to create. You can take a look at the source code. Here. Only the HTML source code will be shown. Okay, we'll go ahead and create box. Okay, now that I have explained you what classes are and how they can affect, I'll explain you what IDs, ideas similar to class, but it's more powerful. Legs, delete this class and type ID and tab. You can take a look at it. Ideas desk like a class licked ID. And I'll mention heads one right here. I'll save this. I'll move on to styles.css. Now, instead of this dot, you just need to mention Hash for ID. That's it. I'll save, it will select. And there's different between ID and class. You can take a look at it here, right? Quotes this CSS. And you can take a look at the HTML attribute IDs. Yeah. You can take a look at all the CSS code. You have a doubt, you can just search it in non W3 schools or depth docs. Apart from that, we'll go ahead and add a classes to every single one. Every. Now we'll go ahead and add some classes, not IDs, glass ID field classes. A better way to, you know, for dev we'll add a class, CALEA is glass and tab. We will type this up box. Okay, then for image, we'll add a class. Then we'll mention this a box emit. Okay, we have two classes added now for heads. One we'll add a class, or we could even add ID. I'll add an ID. Both are one and the same. Now we'll name it as het one itself for head phi. This is the last class that we add. Glass Head Fi the videos taking pretty long. And I'll meet you in the next video. Okay, after we'll go ahead and start building our website, we'll style our website in the next video. 12. HTML box model: Okay, we are back now. Let's go ahead and start start coding some start to code on types of CSS. Now I'll remove all of this in the body, okay? Now will affect the body here, right here. Affect all of this if we type something in the body, because body does, I did not mention At last, I just mentioned body here. Now, let's talk about margin. What will margin do? I list tab and type margin 0. Let's take a look at this. What we'll margin do, it'll just align your text to two to the left side. Okay, i, it'll just provide a gap above this. Let's type margin ten. And let's see what happens. See it, let me minimize this. I think it is better to minimize stuff. Let me do that for you. I think. I think now it's go down. Now you can take a look at margin, element and 50, I'll save, I'll reload this. Okay, I even take a look at it. It'll just move towards the left side, elements and 0. I'll save I, I'll reload this now. See, this is what margin does. Now. Now that you know margin, you can even mentioned top margin like T, top margin rate. Drag this here. Let's take a look at what top margin does. It creates a gap above and bottom margin pushes it up. Ok, are getting, I think you're getting an idea of what did this. Okay? After this, we'll talk about padding. You can, you can complete the W3 school exercise like margins. Let's search for the margins. Like C, you have CSS margin. Here. You will have all of this like what does a margin do? Like we see here just the aligns the text properly. Okay. Nyse, I'll, I'll show it to like God we can, we can mention class of, of edge phi. Okay? Let's mention heads phi dot phi for a class. To affect RNG, margin. Oops, sorry, margin, DOP, DOP, margin. Top 100 pixels, I think it is pixels. Yep, there's pixels to get alpha. See you're going to take a look at it that there is a gap between John and I am a web developer. Now if you mentioned margin and the margin 0, great, led me to London. You can take a look and see if it'll give a gap on. We just provide a gap. Okay. We're going to take a look at how this is. Elaine. If you type margin left, unread and run the code, it will just move a 100 pixels towards a right. It's vice versa. Ok, mode. If I typed margin. 200 pixels. It will just go down 200 pixels, okay? If I type this 200 pixels, okay, it's not moving and emit. Let me give it a 100. I think you have an idea now what Madison does, right? This reward, you can center the text with margin, but we'll provide it as 0. Okay? We'll provide it as 0, will provide it as 0 pixels 0. Then we'll talk about hoops. Let me cancel it this and that. We'll talk about padding. Okay? Padding. Padding is also a bit like margin, but it's a bit different. I showed two by adding CSS parenting, we have bad in Q. Okay. You can even align the text on with padding. See you can take a look at it. Pad towards lepton. Padding and margin is, is pretty much one under same. Okay, let me give it a t and the RAM P, you're going to take a look at the padding. I'll give it bottom 200. Oops, not ten hundred, thirty hundred pixels. Yeah, you going to take a look at it. This is what is Okay, I think you have a basic idea of what padding is like or else you can even give padding like this, that the first 25 pixels is our top padding and right and left and right and left. 50 pixels, which is right and left padding, and 75 is a bottom padding. You're going to take a look at it here. Instead of men mentioning padding, top padding left, you can directly mentioned everything in a single line itself. Like you can affect hits d, m, l width, just a single line of SSS. Okay, I'll type a t. You're going to take a look at the small chain. Then take a look at it. This is what padding login. Go ahead and up, practice padding for them here. Now, what ve mentioned, it is very mentioned Zero and I'm gonna close it with a semicolon. Okay? After this, we have one more class, right, which is a box class, will move towards CSS. Whoops, sorry, HTML. And we have the box class here. We're okay. Now we talk will affect the BOX. Box and we'll change the width to five. Sorry. Oops, what did I get? W, where did the 2500 pixels? Okay, we'll save it and we'll take a look at this. See you can take a look at the text. It del dot affected and will tend the background to do some other color. Rgba, I'll change it to 0 comma 0, comma 0, comma 0.4. Oh, let me, Or you can just pick colors from here and dimension the hex code. I show you how I made coloring colors. You have color senior you or you can pick colors from and take a look at the colors here you have three types of values. You have. Red, green, and blue. Rgb represents the R&D, red, green and blue. You can take a look at the red. 000 represents black and 255255255 represents light. Okay? Are you can just pick up colors from here and then just copy this, okay? Or you have the hex code where you will have this. You'll have this, right. This is called the hex code. You will have a hash and you'll, you'll have two letter two, we'll have two numbers and you will have a letter and a number in the last, in red, green, and blue. Okay, 000000 represents black, FFT, FFF represents white. You can mention hex code or you can mention hedge. Unless you're going to take a look at head to less, you will write here, we'll provide it with a percentage symbol, the light. Okay? Light RGB. You have three RGB hex code and a head to list. But we are using RGB here. We are not using, we are using HLS now we'll move on to padding. At last, we'll take a look at the website how we'd got affected. Ok. Now I'll give it a padding of ten pixels. And we have this important command called text align, center. Text align center. The text and the image move, moves towards center. And we have margin, which we, which we have 0, okay? Okay, then we have margin, will give a margin and we can even give margin to we can just set it to auto and we have monitoring top. We, I'll give it around 5% of margin. Don't forget, never forget the semicolon in SSS, Okay? Margin bottom, five bucks and data n f 5%. Okay, then we have color, the text color, nothing else. Escalators. We'll go with white. Oops, what am I typing? Right is good. Okay, now let's take a look at the CSS. Yeah, you can take a look at all of the code we have written. This is simple, but am explaining it to you a bit later on this video took around ten minutes and I'll meet you in the next video. The discord we brought the text and he made to the centre with text align and the margin. Okay. I'll see you in the next video. 13. Let's Finish the HTML part: Hey, and welcome back to this video off SSS. Okay, now after the drop box, let's continue from where we left off. After the dot box, we'll move on to. The class will affect the image in HTML. We have provided a class called the box slash image. Now let's move towards a CSS and let's type dot BOX less Ay mg and the curly braces. And let's type border-radius. Border radius. I'll explain you what that is later. Okay. And we give it a width of pixels and height of a 100 pixels. Height. Height of 100 pixels. I think this is good to go. Now let's take a look at the image. I have saved it, and we're gonna take a look at it on a Mays went a little bit small, it got strings. This is what height, width, and border-radius does when audio can change even the margin here, like I mentioned it 10%. And let's take, let's reload the page. Again. Nothing happened. Okay. But why? Because there is auto here, nothing happens to the site. You can take a look at it. It just moved back. I list the undo by pressing control Z. Now after this sub box where we have affected the image size, okay, if you wanna change it, you can just play with this. You can just play with the border-radius, width, and height. I forgot to mention percentage here. Okay, now we have this, this after this will go towards the box head one. Do we have had one here? Then we go towards box hedge five. Okay. After this. Okay, after this, we go ahead and affect the div. Okay? Do the div has a class called box. We'll go ahead and effect there. And I have gained the head to and from ID to class one here. And let's type just type dot, box and heads one which is the class of the DEM. And let's, let's give it a font size. Font size, a 40 pixels is enough. And lettering, letters, letter spacing. Okay, this tab, I'll let you know what that is. For pixels. I just affect the letter spaces, spaces between letters. And we'll give it a font weight here of a 100. And I'm good to go and take a look at it. Like it would be something like this. Okay. Okay. Then after this will affect the box hedge five, bed, we have water's edge fight, we have hedge phi heading, level five heading. Okay, we'll, we'll do that. Now. Let's type dot box head five. And given the semicolon, let's type font size is 20 pixels by 20 pixels, then lettering space, letter spacing 33 pixels. Then how much we shouldn't didn't give a font-weight, let formed way to be a 100, okay? Say Anna's one. Then we can give it formed style with font-family attribute that you can change the font. I'll give it Sans Serif font. And the last thing, the font size n hit FI, class 50 pixels is enough. Let's take a look at it and we're going to take a look at it. The font change too. I am a web developer, c, You can take a look at the font is pretty good. After this, we have the font is pretty good. Or even you can change the font weight. And you can change the font size Saudi in this font size, not font-family form. Ok. Let's, oops, I, it's pretty big though. Ok. Let it be big. Font size. Epstein ended here. On the size lips tended to 16 pixels by 16 pixels and 06, which creatively, okay, this isn't a 50 pixels is. And now let's move on to the last. Let's move on. And let's change this to ID from glass IT entities to ID. Id is good. And let's give this. Let's provide it with a font, family or legends, the font style with Google for, and I do that in the next video. 14. Start Styling the Personal Website with CSS: Okay, let's start from where we left off from the previous video. So wherever we were in dot box, heads five. Now let's, let's, let's resize john. Okay, I have mentioned it, 80 pixels, but I don't want to resize it here. I'll cancel font size. I wanna resize it separately here. And so the class is heads one for John. Now I'll rest heads one and I'll resize it. Let me mention font family and 80 pixels is good. Why is this not this not work? Okay? There's not, there's not working properly. I think the DOD box is affecting the DOD box hedge wanted affecting more than one. I will just remove this and let me type that here. It's okay. It may type font family here it says 80 pixels is good. Okay, there's not affecting the, It's not affecting the glass heads. Let me mention I, I, I did lie. It's not 400 families, 80 pixels. It is, it is, oh oops, not font families or its font size. I lost my mind. Font-size. Yeah, John is 80 pixels here. You can take a look and inspect it. See font-size 80 pixels if you want a separately effect that I already told you remove font-size and I mention it here. What was it? What was the attitude? Id? Okay. Let me try it. Id. Id fonts, size eight, px. Okay? So this is not working load. If we mentioned class. I'll save this. I'll chains. Okay. I'll change this. Yes, it is working separately, but I don't want it separately. I'll just copy that. I'll just paste it here. I'll save, I'll remove this hedge fund okay, apart. Okay, this is how it works. Now. We'll just go ahead and we'll go ahead and add font-style. This, these fonts are suck. They don't, they're not good enough. They're not attractive. Ok, they're very boring. Now, head over to Font, Google Fonts. Google Fonts up now will just change. Our font from here will just link forms. We'll select three different fonts. Let's select three different forms. Let's select three different fonts from Google fonts, okay? This website right here, okay, let me select, go ahead and search for a good, good fat formed. This, this, this was, this was good. I think this was good. Which font was this? I don't know. I don't remember it. But OK, I don't want this. I want to fat phone. There are many fonts to select. I am getting confused. Let us go with the, let's go with, let's go with this. Let go with this. Just click on Select style and little bit selected here. Ok, you will need to embed the link to that later. Now it's elegant. One more, one more foreign to you can just click on the forms which you have selected. You can just click on here. It says, view your selected forms of GIL. Let's select one more font. Which font should we select? Thin form. Thin font is good. That I'm getting confused. Which won't we go for? We select a random flaunted it. Okay, I'll just sell. I know there's not good. Not good. Okay. I'll just select this. Did we did we select this before? Ok. No, no, no. We haven't selected this. I'll go with this. Okay, we have two fonts. We need the last font, which taking pretty long to select fonts, last won't last for them. I'll go with this. I'll go I'll just go with this. Okay. We have all the three forms and embed link. It's just don't close the website. Let's leave the website open and minimal, it will just select religious copy, this, it's this copy. And open up sublime text head towards heads HTML and we need to paste it. Right here. Control V to paste it. Now that all the fonts have been linked with HTML cord, we need to mention it here. It's simple, it's easy. It's very easy. I'll change this to Aidid self ID. Ok, hashtag ID. And let us type font family. Font family. Which font family do we want for? Not IID shipped on Friday, head to one, heads one, sorry, sorry, sorry. S1. John is heads one. Ok. Of which font family we had selected for Hatch one will get back here. I'll zoom in a little bit which font, IE, I just forgot which font family. We just select. One. I think we selected this, right. Fair DO cup one. Yes. Just copy this. Copy. The first one. I will just remove this and paste it. Now I think it should affect the style of the font. Hoop Pharaoh of my, say. Yes, we're going to take a look at it. John's font has been changed from, yeah, this, this is good, that it was not pretty good. And we have the second one. We have the second form to this. Affected will just affect the second font here itself, inbox fight dot-dot-dot box heads file we'll type will remove san serif. Okay. We'll remove all of this. We'll save this. We'll head towards this side again. We'll click on preview. We'll click on this. Okay, this was the H5N1. We, the third one, not the second one. We'll copy this. Paste it here, we'll click save, and we'll get back here. Yep, this is the font we had, okay. And the last thing, which is the paragraph. Okay, let's selling this form. Let's copy it. Let's see which class we mentioned. We did not mention a class for paragraph let's mention, we'll just type B or BARDA para. We'll get back here again. This video is taking pretty longer dot p data, and I'll end it here. I landed here. Okay, after this, we'll, that's it. The website is finished. Neck, we'll add some colors opening. Oops, I'll clear this. We'll add some colors. Now let's take a look at our website. Yes, it has, it is finished. It's almost finished. Next, we'll add some colors or we'll change the background, will add a background-image. I'll meet you in the next video. 15. Continue to Style your Website with CSS: Okay, let's get from where we left off. We left off with the, with the paragraph here. Let's increase the font size. Get back everyone. Font-weight, foreign family, not font family, font size. Font size, 50 pixels is good. Maybe it's a pixels is good. 50 pizzas is pretty, pretty large. It's not good. Oh, ten pixels is still Swan. That t, that t might be good. Okay, let's check 30. Okay. 30 is good. Okay. Let's leave this here and let's, I'll close this Google Fonts. I've loaded Google forms. After this. We'll, we'll give it a background color. White is pretty boring. These cages type background color and the body tag or the attribute to whatever it is. Let's select a pretty good font color. Not sorry, the background color from color hunt. With background color, should I add? I'll add this. Blue is good. Okay, let's add the hex code here. I cover up this video pretty fast. Okay, now let's check how it looks. Okay, this is pretty good afternoon though. Heck score doubt alienate to add symbols, right? You remember there were three symbols of social media handles. We do that, okay, or even you can add a background. I'll show you how to do that. I will copy this background image called nature, which have are downloaded from Google. I paste it in here. And you can link a background image width. This, and it's pretty simple to do that. Okay? After this, add, after adding a background color, you can add a background image. What you just saw was a background image added to it. But before all of this, I forgot to teach you one thing. I forgot to teach you how to comment in CSS and HTML. Let's, I'll show it to. This is a comment. Oops. See, this won't be displayed in the website. This is how you comment in SSS, Okay, this is how your comment in CSS. You can take a look at this here and even you have a shortcut for to comment. I don't remember it. I think we need to press control. I don't remember it. And even you can comment in HTML, like I'll write rate. Let me show it to you here itself. I'll just type this The same thing. I'll just type something, okay? Like I'll teach you how to comment. Implemented large slash slash. Here. It's less less implemented. This won't be displayed in your HTML document, like I'll just reload it. See, that is, there's no sentence, but if you click on view page source, not IO, gone fine. You can take a look at there is a comment here. Whoever is reading your code, you can just embed a message like this, like where you can type by REO reading my code, something else. Yes. So this is how you can comment in HTML. Let me come, let me type a sentence like why are you reading my Golda? Reading my order. I'll save this. Oops. I did a W3 schools. So you're gonna take a look at the ending or even you can comment CSS. Why am I opening this thing? It's irritating. Okay. Ideally, like this. This is my CSS file. Okay? So you can comment it like this. You don't want a background color, or if you want to add your own background image, you can even do that. I have this amaze called nature here. Now I'll just stop. I think I comment this. Oops, or KV can't comment to attribute. Okay, I'll uncomment this. Again. I'll comment this and add a background, image, type, background and ID display. You can give the option image. You don't want to type everything. You'll have a plug-in for it. Now, type u, r, l. Now you have this URL, right? Coil, the nature ab.js, nature dot JPEG. Just download an image from Google that's hit OK. Now go ahead and refresh this. Yeah, you can take a look at it. You will have a image coordinates here dot deep and you can set this to background. Psi is covered. Covered. Okay, and let's reload. Okay, this is how it looked, but I hate this background. I think I'll go with OK. I'll go with this. I don't want background in my I'll go ahead and delete this. Delete. I only want three files in my website. Now the last thing, how to add icons in your website on, let me check. This is, this is pretty simple and good-looking. The last thing, we'll add icon. To add icons, we need to download Font Awesome. Just type font, AWS. So n e also and click Enter. You'll even have a class project or a homework. I'll give it to you in a different video. Don't worry. Now just click on start up. Wait a minute. Okay, let this selected, just click on Start and just download Font. Awesome. I click on Download. It should download. I think there should be a ZIP file to download. Just click on font. Awesome download. It's just downloading here. It's not even ten m b. What is this? Why is it not downloaded? Ok, OK. Ok. Now, just unzip it. I'll unzip it on desktop. Extract to desktop, OK, click OK to unzip all the files. Cancel this, I delete this. I don't want font off here. Okay, click on Form. Awesome. And I have extracted it to my, on my desktop. I have a folder called Font Awesome. No, we need to select two things. We need to select. To select web fonts. I'm SSS, Okay, in Font Awesome, I hold control and select web fonts and CSS. I got this. I'll close this and I'll paste them in my website folder. I'll paste it here. Now we have two files called Web Fonts and CSS. Now, all we need to do is the link. That's it. Now we'll head over to our HTML file and just link all the icons. On. Now you have a thing called an unordered list and an ordered list. Just type lu l, u l for unordered list, o, l for ordered list. And just press enter and this plus L I LR list ten, okay, I'll just, this is first list. Whatever you want. I'll type some random things. I, again type. I'll show you what it is. I'll just save this. I'll open up my personal website. Irgun, Take a look at it. You have an unordered list with unordered list, which always comes with dots. Ordered list always comes with number. I'll teach you what ordered list is. Type O, L, S, type I ordered list. This is ordered. There we go. I am tired of typing man and woman. Okay, you have an idea, you have ordered list here with numbers. Unordered list is with dots. That's, it's that simple. I'll remove O L. I remember all of this will get back again from starting, just type you an unordered list and just create some lists here. Okay, let's create or am I even doing? I did not press space, space. Let's create three lists, l, i. And then all we need to do is find icons now, head over to form. Awesome, okay, Font Awesome, and we'll find icons in the next video. This video is pretty long, okay? We will meet in the next video. 16. Add logo to your website.: Okay, let's start from where we left in the previous video. Now we are in Font Awesome.com in Icon session, not the start session icon, click on icons. Let select for the social media. I can just type FEC, EB, Facebook. We have Facebook. Okay. Let's select ICANN. Let select Facebook, Square, Facebook, you have Facebook. I'll select Facebook. The round icon is good-looking. Just click on it. It says start using icon, ok. Just click on this, just click on start using icon. You have link here. It's like a link, but it's not telling, just click on this. It's HTML attribute called i. And we need to paste this here. I'll just paste it here. And we, it's done. And yes, it's done. You will have a icon here. I'll just save this. And you'll find the icon in your website. Oops, why is it not the great, something's wrong. Let me check the let me check the let me check the file. Okay. I found out the problem. It's pretty simple. I know why there is there are the icon is not showing up. Ok. I know my because we did not link, because we did not linked this. We did not link CSS, we did not link web fonts to our HTML file. I always forget to link stuff. We need to link CSS, we need to link images, we need to link fonts. Just type link so that we can link our files. I'll remove this type CSS. I will just remove this and let us link it here. Just m dot, dot slash shop, give the file path, mine WEB S-I-T-E. Site slash CSS slash all dot min, 30 min dot CSS. Now it's good to go. You have a folder called css. All min dot CSS. This is what I'm talking about unit to link all main.css with HTML. I hope it works now. Oh, we have a small little icon called Facebook right here. I think I'll remove the unordered list. Wait, let me check what happens if we remove the unordered list. O or wait. Okay, now let's go ahead and resize the icon under let effect. It's terrible with CSS. Let's type u, l for unordered list in styles.css, just type margin, we have margin to 0. Okay, then padding. To 0, control S to save. Then we have box dot ALI. We need to mention donate to mention a class we are walking in a div box semicolon. Okay, then we give it a display, displayed type inline-block. We need to answer to what it is. Margin is 20 pixels. Then list style, list-style none. Okay, save this, get back here. Now you will have a small little Facebook icon. We removed the dots from list-style none. Okay, we just removed the dots and margin. We have inline-block, we have padding, we have margin, then we need to resize the icon. Now, I'll teach you how to reset the icon is pretty small will affect this with CSS. So let's mention the style attribute here. Just types, not stylesheet, online gourd, lines, this incoming deck. Just dial, I need, I need just OK, we need to type this. Here. I found the problem, just type style and we'll mention of font size. Font size. Let's font size as 100 pixels. Let's give it a 100 pixels and clicks safe with the semicolon. And we'll go ahead and check our personal website. You're going to take a look at this. It's right in front of you. You can add still, you're going to do more icons like Instagram and Twitter, okay, type Instagram and yes, the D-RAM. But there is a lot to learn. What apps short is just like sample, there are containers, the attribute coiled up containers in CSS. You will need to learn that all TO but E, take a lot of time to teach it. In IE. Ie mentioned this type, this simple stuff esteemed by the stylesheet, just the font size, bond side. Why is this not working? Vice tab not working. Okay, a 100 pixels, that's it. Good to go. Then you will need one more to it. Let's use Twitter or let's use of, okay, let's use Twitter. Let's use Twitter to, I don't want, I don't want to go to into square root. We have to start using that. I can copy this, copy to clipboard. And I'll zoom out a little bit. Alert, you can see properly style. Font size. I'll give it around 30 pixels, semi-colon. Never forget the semi-colon. Other ways your code won't work. 50 pixels on this is good. Alpha was this. Yeah, you can take a look at your website is finished now. You can even inspect the code view page source. And I forgot to one more thing to show you. Now this is the code, this is the HTML file, and this is your website. This is what we created. This is warm, but there is a lot you can do with HTML. And even you can plan on with sneak, sneak peek kit. You can just print this out. You can now visit this website. You can just click on download. Wait, I'll click on download. You can just click on Download grid. It should download this zip file Y1. They give I wouldn't they give a main I'll click on desktop. We're good to go. I'll close this alkalosis. I minimize this. Okay, you will have a PDF where you can you can draw stuff, you can plan how we our website looks like about session contact us. You can just print this out. You can give it a project name. We can give a project name here. Okay, then you can just type stuff in, mention your URL here. You can give it our board session. You can just plan your website with this. It even has even has different sizes for different devices, for AP browsers, pleasant grid to up mobile grid. It even has Apple tablet grid that you can print your where you can. I had a basic overview like a blueprint, maybe you're gonna take a look at the downloads and you have one more thing, balance and McCloud, where you need to create an account. I'll just create a counter electrode and you want this is okay. I just created an account in this. It'll save it to our cloud, Balsamiq cloud. Just click on Create space and enter your name. Mine. Web SIP, let's say just click on Create space and start my free tail. It says, click on create your project. Yes, here you have your project where you can add icons. You can just plan your plan a blueprint, like planning a blueprint for a car or a project, where you can add these buttons in your and just plant stuff. You can just plant stuff or you can even search stuff here, like like this. I'll just drag, drag this here. You have this. You can add up button in your browser. You can delete this. You can add button in your browser and you can just plant stuff. That's no big deal. You can add search box. Yes, the search box. You can place a search box where you can place a search box here about about, okay, about they don't have a symbol called above. When you can place them. Here goes the text, here goes the text. Here goes one more text. Here, moves one more text. And then what can we, what can we add? What can we add again and many other things. We can add arrow marks, we can add icons, we can add buttons like like switch, we can add to our website. Big can add dao, a pie chart. We can recycle this LDC. We can add water there in assets. Let's check. We can add a simple slider like this. You can add a time picker. Whoops, this is pretty big. I'll resize this time. I'll delete. This is not good, and I will delete this. This is not good, and I will delete this and this is not good. Then you can add containers or you're going to add shapes who can, okay, this is what this website does. You can just plan your concern. You can give it Alert box hooks for the layout mark symbols like you can place a webcam here when just plan the blueprint of your website. Your website name goes here. Calendar, i'll do we sell this? This is a face cam. Okay, just create an account and click on start freight rail or even you can buy. I'll meet you in the next video. 17. Web Hosting with GitHub.: Hey, and welcome back. In this video, we'll just hosted website. If you wanna really hosted website, you will need to buy a domain and then host a website and you will need to secure it with SSL and TLS certificates. Even take a look at the certificate here. Mozilla's SSL is I don't remember the abbreviation or full form, just to Google it. I forgot. What do you need those certificates to upload the IRR you could even by domain, and just upload your website onto the web. It says start hosting. And these domains are pretty. She bought, they are around a dollar or two. Or you can even compare the plans and you have many other ways to buy. And domains like Microsoft, Azure, anger domain.com, GoDaddy, and many edges now will be uploading our files three with GitHub, it says built for developers. And yeah, you can now take a look at the documentation and you can download git hub desktop desktop. Then I have downloaded the GitHub desktop. It looks something like this, but we are not using GitHub desktop here. Okay, we'll get, we just use the web interface. It say a star. Welcome home developers. Github is the, is home to the world's largest community of developers and their projects. Get hub is a place where we can share our project, will need to click on, sign up, just create account and verify your email address. You know that it's a simple step to do. I'll close this, I'll just log in and get back to you. Okay. Once logged in, you will have a page just like this. It says create your first repository, ready to start building and a blablabla. I won't read that. And you can take a look at your account, your profile, your repositories, your project, your staffs, your gifts. You can even upgrade it to a premium account, but I don't want to upgrade it. It says yearly building. I'll just use a free one. And just click, click here on newer repository or click here on Create repository or both are one and the same. You need to give a repository name. David has nine unnamed on my website and this is good. Click on public. You can add a description, whatever you want, and initiate, initialize this repository with a Read Me file. This is where you can write long description for your project and you can click on Learn more to know more about dat. I won't write a description because it says optional and set it to public so that everyone can see RR file. And this will be set to master as a default branch. We said this to master brands desk. Click on Create repository and your repository should be successfully created. It's just my website will have only one ReadMe file, but we need to upload files here and click on Add File and click on upload files. You can even drag them here from the desktop or you can click tools your files. This is the method I am teaching you on how to upload the files. I'll just selling these three-person styles and index dot HTML. I hope it works properly. I'll just click on open and they should open. You'll take a look at three files here and click on Commit directly to the master branch and click on Commit Changes. That's it. It says processing your files. This might take a few minutes. Wait for it. Okay, we have the files now. Now we need to get into settings and change some gin auction. Go down. It says GitHub Pages. Github Pages is designed to host your personal organization or project pages from a GitHub repository. That is what GitHub is. Click on Master and click Save. And no, this will generate a link. It says GitHub Pages source saved will generate a link. Down here you have the website link and this is how you hold a website on Get Hub. I'll just right-click and click OK. I, if you have this error 040, try refreshing the website and it'll take a while to upload your site on GitHub ID says your site has been published. I'll just open this. Okay. I think it'll take a while to upload. After this, you can share this link with top with someone like your friend or your cousin. Or this is how you upload files on GitHub or publish it on get hub. You can just share this if you want to delete your repository. For 100, delete your repository, click on this repository, go to settings. And I'll leave this for an hour or two, like it needs to process. After that, you'll get you'll get your Website. It it says publish, but still it does not publish properly. We want to delete this, just click on delete this repository and it gives you an instruction. If you want to read that. And I'll type the name, slash mine, my website. I'll just click Delete, am deleting the repository. And this is how view. Publish your face or publisher website. Ok, and in the next, I meet you in the next video we'll have some class projects, and in the next video we will have some glass project somewhere Week where we change the gullet and I'll give you a homework. And I'll see you in the next video. 18. Class Project Time: Okay, you have a class project. Now. Now that we have created a simple one-page website, now go ahead and change the color of this website at a different icon. Change the font size. Or James the font-style tin the font-family and expand the box. You can do them from styles.css and hit Steam. And James, the form formed Google fonts from Google fonts. Change the font family. Font family pick up a color from coloured Hunt. Okay, go ahead and do that. Now, this is your homework. Genes the background or even add what? Even add a background image like. You can even add a background emails from mentioning background image URL and you know how to do this, right? Mentioned that he made. And from font or icon Finder. I see. And I couldn't find a judge download icon and wait, just download icon from Icon finder, click on free icon will be on the free icon. And yeah, just go ahead and find the icon like the boy or whichever icon you feel like downloading. Just select the sizes here, download this and link it with your HTML and share your thoughts on this, or share their screen shot with me or share the link by posting it on Git Hub repo unclear to repository and post-it. And yeah, go complete your class project and I'll meet you in the next video. 19. The End:): Okay, now that we have a finished creating a simple website like this, I applaud the more files or a more videos to this class about creating. Okay, let's create a new website. Let's create a new e-shop shopping website, a simple shopping website or a simple personnel website, which is better than this. Okay, let's create a bit complicated one, but it, it is simple. Okay, let's use HTML, CSS, and a big JavaScript. I'll be teaching new Java script, but not, no, I did not talk. I did not make the video for that, but we will discuss it later. Okay. And this is it for the course. If you have any doubt die, you can ask me and you just need to practice all the attributes, elements, miscellaneous stuff and absolute from dem dogs, W3 schools or Mozilla Developer Network. Keep practicing all attributes because you'll forget the heads one PR, link, image, resizing images and stuff. You can take a look at it here. And even you can practice them from Mozilla Developer Network from here, where you get all the resources for developers and made by developers, okay? And this is it for the course. I will update this course are frequently with new videos and new upcoming projects. And yeah, thank you for watching it.