AI Coding 101: Learn HTML & CSS with AI

Key Takeaways

every website in the world uses HTML CSS and JavaScript and I mean literally every single one but it goes beyond that too because many desktop and mobile applications also use these web Technologies for their front end so if you can Master HTML and CSS and use AI to do most of the coding for you you'll be able to build pretty much any website that you can imagine but if AI can write all the code for you why should you bother learning this stuff well it's going to help you understand the code that the AI wrote better prompt the AI and build software more quickly and with higher quality and finally it'll help you break out of those infinite troubleshooting Loops that AI tends to get into so let's take a closer look at these Technologies and how they work at the root of every web page is the HTML and this is a plain text file that looks like this it contains the various contents that should be shown on the page as well as links to resources that the browser should download because the first thing that happens when you go to a website is that your browser makes a request to download this HTML and from there it figures out any additional resources like the CSS file that it needs to download so that it can display the HTML properly so the HTML generally contains all of the content of the page and CSS describes the Styles or how that content should be presented to you so the fact that this says example domain is part of the HTML but the fact that this is a bigger font than this paragraph is determined by the CSS and HTML is always the starting point so it will reference the CSS and the JavaScript that needs to be a part of that page for it to function properly now thanks to AI you no longer have to memorize all of the specific elements and properties of the HTML tags but you should know that HTML is generally a nested structure like this where you have elements and they can have other elements within them HTML elements can also contain attributes which provide additional information about that element but are not visible to the end user these are often used to make the element behave a certain way or to add CSS or JavaScript to that element you know how I said that the HTML is downloaded to your computer when you go to a website well you can actually look at that HTML by going to any website and then right-clicking and clicking inspect this is going to open up Dev tools which is going to be super helpful to you in learning HTML and CSS because here you can see the Dom or your local copy of this website's HTML so right here we see all of the different tags or elements that make up this particular page and as we hover over them you can see that the browser shows you where that element is visually located on the page so this can be a really useful way to troubleshoot various issues when you're working with HTML what's cool about all of this is that you can actually modify the HTML of the page because it is just your personal copy so right here I can just make this say my cool domain now if I refresh the page it's going to download the fresh copy of the HTML and now it says example domain again but because you can modify it this gives you a perfect playground to be able to modify HTML and experiment with various CSS properties and another thing that was recently added is this builtin AI feature which allows you to ask questions about the page that you're on this is going to require you to turn on some of the additional AI features in Google Chrome but once you do you're going to be able to ask questions about the page that you're on so in this case I'm going to select this div element and I'm going to ask a question why does this div element have rounded corners and can you make them more rounded all right so it looked into the HTML and CSS and it f figured out that this div has a border radius of 8 pixels this is a CSS property that defines how particular elements should be styled and we'll talk a little bit more about that later in the video but for now you can see that you can use these built-in AI tools to modify and understand what is happening on the page that you're on now that I ran that script we can see that these Corners are indeed even more rounded so I encourage you to use AI directly in Dev tools as you're learning all of this but let's go ahead and have ai generate a more complete HTML page for us I found this dog image API so let's create a dog gallery that shows us images of various dogs in a grid layout I'm using cursor over here which is an AI powered code editor and I strongly recommend that you use one whether it's cursor or wind surf or GitHub with co-pilot because these tools are going to be able to understand the context of your code and are going to be a lot easier to manage than copy pasting things from chat GPT so I'm going to open up a new chat switch it to agent mode so that it can write files for us and then I will ask it please create a Pinterest likee dog Gallery page that uses the following API to retrieve dog images and then display them in a grid layout I will copy paste the URL and then I will also ask please keep the Styles in a separate CSS file and I'll go ahead and submit that okay looks like C is done and now we have this index.html file and it has updated our styles.css file I'll accept all of the changes so we'll talk about CSS in a moment let's first take a look at the HTML the first thing I want to point out is that at the top we have this head tag and this is effectively invisible for the end user but it tells the browser some important information such as the title of the page and where it can retrieve additional resources like the Styles the head element also contains meta tags which are going to be important to properly show a preview of your page when you share that URL on a social media site but the main contents of the page is going to be in the body and in the body we see that there's an element that shows a sort of header there's a title over here called Dog Gallery there's a button that allows us to load more dogs and then there is a container for the gallery and it says this is a comment over here when you see it like green like this so this is not actually showing to the user but the dog images will be inserted here and then we see this script tag which is adding JavaScript directly to this HTML file so in best practice we would actually want to move this to a dedicated Javascript file but essentially what this code is doing is it's loading additional dog images when we press that button now for the purpose of showing you HTML I actually want to keep the JavaScript out of it so I'm going to ask cursor to make this a more static page instead of having this extra logic that is going to retrieve these images we want to display this HTML as a completely static page with no JavaScript so can you please just get the URLs of the dog images and place static elements on this page that will display them okay so the HTML has been updated and now we see these explicit elements that are going to contain images of the dogs to open your HTML file in a browser you can simply copy the path of that HTML file go to the browser and paste it in as the URL we can see that well some of these images are not properly working but others are showing up on this page now I'll actually just remove some of these not working ones so that you can see how modifying the HTML is going to show up when we refresh the page so here I'm going to remove this Labrador one I'll just select it delete refresh and now you see that it's gone so again the HTML ties directly to what you're seeing on the page okay so we see this page but how does the browser know to add these rounded corners and to make these cards kind of move when we hover over them and how's this background gray and why is there a shadow over here all of this is determined by the CSS the CSS applies styles to these various elements and generally speaking the way that it's done is by using a property on the HTML element that the CSS can tie into this is done using what's called a selector and a selector is a way to identify specific HTML elements so that you can tie additional styles to them or modify them in some other way using JavaScript so I'll show you how to use AI to explain how some of this works please explain how the styles from the CSS file are applied to the various dog images and which styles are specifically used okay so we have a pretty thorough answer here and it tells us about the gallery layout so the gallery class creates a responsive masonry style layout using CSS columns it uses column count 4 by default and we can just click on these and be able to see the specific styles that are being applied and by the way this is our first look at the CSS file so in here we see these selectors and then what styles should be applied to the elements that are found by those selectors so here for example we have the H1 elements should have this particular color here let's change this one to bright blue and see what that looks like if I refresh you can see that this element is now blue because it is the H1 element so you can see how these selectors tie into specific HTML elements but using the name of the tag isn't the only way to tie CSS to the HTML element you can also use various properties and the most common one to use is the use of classes so when you see this little dot gallery that means find the HTML elements that have the class Gallery so in our HTML file if we look around we can see this has a class of gallery so this element right here is going to have these Styles applied to it so let's change the column count to three for example and we'll we refresh and now we have only three columns of dog pictures there's a ton of CSS properties and some of them relate in unexpected ways so AI is really your best friend in helping you understand what's happening right now and how to achieve a particular effect that you're going for but I do want to highlight some fundamental properties that you're going to see on every page that you visit and that are going to be really useful to use in your prompts first I'm going to ask it to add a few more details so that it'll be easier for me to show you those properties please add a dog title and description for each card okay cursor has added a header and a paragraph describing each dog it has also added these additional CSS selectors and specific styles for them so the way to read this selector is that we have to find an element that has a class Gallery item and within that element that's what the space means we should look for an H2 element and then we're going to apply these styles to it similarly we are looking for a p element inside of those and then we're applying these Styles so I'll accept those changes so now our page looks like this and I'm going to talk about some of the important CSS properties so the first thing I want to talk about is what's called The Box model so if you write click an element and click inspect and then you go over to this computed tab it's going to show you the box defining that element and in the box is the actual content it's all the way in the middle then there's p in around the content that is still a part of that element then there is a border that is going to be around it and then there is margin which is going to be the required space around that element that is not a part of it anymore there are specific CSS styles that Define each of these so in our example we currently have some padding on this element and it is defined right here I'm going to actually simplify this just make it 16 pixels all around so here if we hover over the padding we can actually see it highlighted visually in green for us by the browser now if I change this value we're going to see the amount of space between this text which is the content of this element and the edge of its parent shrink so if I make this zero we can see the text goes up all the way to the edge of that parent element but if we make this really large then we see a lot of space added let's add a quick border this is just the Border property and I'm just going to add a one pixel black border to it hm I expected a border to show up but it's not so I'm actually going to go ahead and use this ask AI feature why is the black border style that I applied not actually showing up on the element interesting so it looks like the P element has border width set to zero for all sides so even though I have the Border color defined I do wonder why the Border width is set to zero though so I asked why the border with is set to zero even if I set border to one pixel black so if we read through this follow-up it tells us that the issue is really that we didn't specify the Border style and that it defaults to none if we don't specify one but if we just set the Border style to solid then the Border will become visible so let's go ahead and add that over here to this element solid boom there we go now we see these borders around all of these elements but to round out the Box model let's also add some margin to these elements I'm going to add margin 16 pixels now when we hover over it we see it around the Border let me actually move these Styles so that you can see all of them together so I'm just going to add border one Pi solid black here and then we'll add margin 16 pixels so if I hover over each of these parts we can see the padding is inside of the border and we got the border and then we we got the margin I'm going to also add border radius 16 pixels now it's got a nice little rounded corner so that's the Box model and it defines how things are spaced out and that's good to keep in mind because you might ask the AI to either add more padding or add more margin or change the way that your borders look a couple of other key areas that are very deep but easy to work with with AI are grid and flex box Flex box essentially creates a container that shifts around depending on the size of the page and how much space it has so it can move the different contents inside of it around so if that's the effect that you're going for you should use the word Flex or flexbox inside of your prompt and then if you want something arranged in a sort of grid like this especially one that resizes as you move the page you want to ask the AI to use a grid layout and if you have some particular requirements in terms of the number of items that you have or the specific sizes that you want to maintain then you should also add that to your prompt another important CSS property to be aware of is the position property which is going to determine how the element is placed on the page so there are a few different positions and let me just ask the AI to create some examples for us to go through please add a flexbox header with our logo the title of the page and some of the links to Pages like about us and contact us also add various elements to the page that are going to show off the different position properties of CSS okay let's go ahead and refresh our page now we have this demo up here so you can see as we change the size of the page the things over here in this header get adjusted based on the amount of space that they have that is what flexbox is going to allow us to do now I'll just close the dev tools and over here we see the position elements now as I scroll down you can see that the yellow element is sticky and it is staying at the top of the page you can see that there is a green button in the bottom over here and that is a fixed position it's going to be related to your actual screen and then there is an absolutely positioned element that is relative to this gray box so explore positions on your own and I'll also have this code in a GitHub Link in the description so just check it out and play around with it but it's a good property to be aware of because it'll really help you properly position things now you see how the fixed position element seems to disappear when I hover over the dogs well that is because of the Z index property which is another one that's useful to know so if I go over here to this element and I just set its zindex to something really high even when I hover over those dogs it's going to stay on top so the zindex is how close it is to the screen and the higher the value the more it's going to layer over the other things below it so keep in mind there's a ton of CSS properties but the ones that I talked about you're going to be dealing with all of the time and I could never list all of them in a single video but there are other ones that you should also be aware of such as responsive media queries that are going to change the Styles depending on the size of the screen and there are also styles that you can apply when you hover over a particular element that's what we're seeing with these dog pictures kind of moving is this style over here and there are also certain CSS animations that you can apply so there's a lot to play around with but in general it always boils down to having the HTML which is the root and structure of the page and then having the Styles get applied to the specific elements of the HTML so that they can appear a particular way but with only HTML and CSS the best you can do is create a static page like the one that we were looking at to really make your page come alive you're going to need to use JavaScript which will allow you to update the contents and styles of your page and make it interactive for your users this is exactly what we're going to cover in the next episode of AI coding 101 so I'll see you there thanks for watching take care