Basic HTML Part 6

Añadido: 2026-05-07

[00:00:59]Hello. Hello.

[00:01:01]Hopefully everybody can hear me okay.

[00:01:04]Hopefully you can see me okay. Even though I have the absolutely worst lighting in the world. I have very possibly actually manage to shut the cats out. So, if anybody does see any like intrepid cats on screen, please shout at me in the chat so I can remove them and have a polite word with their team. Cool. Today, so it's week two.

[00:01:30]It's the second day in the second week.

[00:01:33]That seems right of our free 10week web development boot camp. And today we had a bunch of relatively small pre-ereading that we asked you to do and we're going to do a little tiny exercise together. So the whole world is stressful. The whole world is bad and today we're just going to have an easy little time. I see some folks are joining us for the first time today and that is super okay. So just as a spoiler, I'm Jess. I'm with the Bad Website Club and we're running a 10-week free I mean it'd be hard to pay us web development boot camp around the free code camp curriculum.

[00:02:17]What we're doing is every day we're asking folks to go and do some learning on their own and come and join us to review. As part of that, we have our website, the bad website club website. And it's a bad website because we're not worried about perfection.

[00:02:36]We're not being about worried about being the best programmers in the world.

[00:02:40]We're here to have a chill little time together, hopefully a nice time, and learn to make silly little websites together. later on when we've got some more skills, we can worry about making those websites a little bit less bad.

[00:02:55]So, I'm on the bad website club session for today. Let me drop this in the chat for everyone.

[00:03:04]Cool.

[00:03:05]And the website is always going to be where all of your material for today lives. The where you're going to be doing your work over at free code camp, but this will be what are we doing today? So, we've asked you to read about optimizing media assets. We'll talk about it. We'll talk about it. Read what are different types of image licenses.

[00:03:27]And this is a super important one. And I always always see folks new to the web have problems with this. We'll talk about this a little bit more. We'll talk about what is an SGV.

[00:03:39]And then we'll do a little tiny tutorial building an SGV icon. Yeah. So together we'll review our notes, review our notes, review our notes, and we'll work through the build an icon together. I'm going to come down after this, if you have time, um, tomorrow before this session, so 1 hour before right now if you're joining us live, we have a guest session. We've got a Terrence Eden who's joining us to talk about the magic and the this flashy things you can do with SUVs and we'll look at the other solo work we're asking you to do today. Really, really quick, but tomorrow's a little chunkier.

[00:04:27]I think the topics we're dealing with for the rest of this week are actually pretty hard. So, today not so stressful.

[00:04:37]video and I frame is going to be a little bit more stressful. So, we'll also preview that a bit. Here we've got my notes. If you've got different things in your notes, please, please, please drop in the chat. But way more importantly, always if you have a question, drop your questions, especially ones that you wrote down in your notes. It's always really, really lovely to see folks saying, "Hey, I didn't know what this meant in my notes.

[00:05:05]So, here are my notes. Yours might be a little different. One thing that this um that Free Code Camp didn't cover is what is a media asset. So, I wanted to write that out. Media assets are the images you can put on your website or it could be videos or it could be sound or it could probably be other kinds of media as well. I couldn't think of any other examples when I was writing them down.

[00:05:31]So folks can think of other media assets you might find on our website. Throw them in the chat, please, because I sort of blanked out after those.

[00:05:41]We're talking about Oh gosh, Alistister, thank you so much. Fonts.

[00:05:47]Fonts. H I don't know if I would consider them media asset. Yeah, but you know what? There's no hard and fast rules. I'm going to count them. Well, you're going to count them and I'm going to politely agree with you. fonts, media assets.

[00:06:03]One thing that this tutorial brought us through is, "Oh, Paul makes a good point in saying, hey, we could put a PDF up on a website or we could put another kind of document." Thank you. I didn't stop to include those. And you know what? I will add that to my to-dos for after class.

[00:06:22]Add documents to media assets notes.

[00:06:36]I know notes for my notes is a bit mess, but y'all are very patient.

[00:06:42]And one thing that this also didn't do, this tutorial also didn't take us through is the definition of what optimization is here.

[00:06:52]I said optimization is the practice of making something more efficient and that's a really wobbly concept. So we'll we'll talk about really specific things in more detail.

[00:07:05]This tutorial was talking to us about our media assets which like we said those are images, videos, sound, documents, fonts if you wanted to add them. And when we're talking about media asset optimization, we're talking about how to make those media assets, your images or your videos or your doc. We're trying to make them usually smaller files.

[00:07:30]Can anybody think about or can anybody give me some examples? Why do we want to keep our files on our website as small as possible?

[00:07:41]And while yell yelling at me, if you don't mind yelling at me and my notes, and this was out of our tutorial, we can make the media on our web pages as efficient as possible. We can optimize it by trying to aim for file types that are as small as possible while still being appropriate for what we're doing. We can use compression tools to make the sizes of our smaller.

[00:08:06]I see folks giving me really good examples of why we want to optimize.

[00:08:12]And you know what? When we can just take our our media f and keep them as small as we can.

[00:08:21]H we've got a couple of really really good suggestions. But we've also got a question. Mel's asking, "Are we talking about removing content from a file and having another program add it back in or reconstruct it?" Not super sure what this question is. Can you ask this in a different way? Um, I think you might be asking about compression and we'll talk about that in a bit more detail. So, I see some really, really good answers.

[00:08:44]I'm going to throw you on screen in just a second. In just a sec because we got why do we want to optimize media? And that's why I'm going to throw y'all's really, really good reasoning up on here. Compression is a technical process that makes files smaller, usually using a special tool. The challenge is sometimes compressed files can be lower quality. Um, so maybe 4K video, stunning, beautiful, but if you think, hey, I need lower quality, better compression video, more efficient video, it might not be, it might not look like an IMAX.

[00:09:22]Oh gosh, Mel's asked a really good question. I'm going to save this. And it's saying, hey, Mel's asking what the act of compression is like. and let's look that up together. Yeah, when we compress something, do we remove content or create sort of a recipe for reconstructing it?

[00:09:41]I don't actually know a lot about the technical processes of con uh of compression. So, let's look at the rest of the notes for this session section and we'll come into that because I think oh gosh and if anybody else can remind me when we don't know something we can read all the documentation we have and this is such a good question because um how does compression actually work isn't actually included in all of the information we could read. We can search for it online and that's what we're going to do next or we can ask somebody.

[00:10:18]And Mel's asked me and I had to come back and say I don't know yet. Let's look together.

[00:10:25]So why do we want to optimize media? So smaller and more efficient media files on our website.

[00:10:38]our users won't have to take as much time when they're viewing our website.

[00:10:43]So, we've all tried to get a website up and it takes forever to load. Sometimes because it's loading media we really want and sometimes because it's loading junk we don't want. And Bramble makes a really solid point. Not only will it load faster, but especially for our users who where data is expensive or data is constrained, they're going to use less data if their media is optimized, which I love. And we've got another like, hey, hey, hey, come on, just load my load my website faster, please, please, please. And Paul makes a really good point that when we're talking about optimization, I love this.

[00:11:20]We can also look at the media we're including and say, "Hey, do I need this? Is this important? Is it redundant? Do I actually need this great big image that says coming soon?" Maybe not. I I might also try and update the notes to reflect this. Thank you.

[00:11:41]So in my notes I've said, okay, I think that smaller and more efficient media files take up less storage space on our devices. So if I'm developing on my laptop, which is a very gracious old lady, she she's had a long life. I don't want to keep tons and tons of big media on my laptop or on my server where my website lives. It allows, as two of you have said, our websites to load a lot faster and it doesn't make our users use as much of their bandwidth of their sort of internet allowance, which is especially important for folks where in places where they're on a mobile connection or they're on older devices like me. And like, yeah, it's also more ecologically friendly. Smaller loading smaller, more efficient, fewer things means we're also, yeah, just not asking for as many resources as much to load.

[00:12:45]And I'm getting up my favorite.

[00:12:53]Heck, heck.

[00:12:54]I'm getting at my favorite search engine, which at the moment is KGI.

[00:13:10]Cool. Let's switch tabs.

[00:13:14]And I thought this was such a good question. Oh, we've got another good point to say. Hey, if if your user is going to be saving this or if you're going to be saving your media someplace, if you've got cloud storage, if it's saved to something like One Drive or Dropbox or someone else's computer, um yeah, it takes up less space if these files are more efficient, if they're smaller.

[00:13:39]So, let's come back to this really good question. And Mel was saying, "Hey, when we're compressing images or for example, how does that actually work?

[00:13:49]Are we removing content?"

[00:13:52]And I I have to admit, I don't really How does image impression work?

[00:14:02]Okay, so we've got a couple of different options.

[00:14:13]And I if I was searching for and I am how image compression works. I might start with Wikipedia and this is probably going to be a little technical.

[00:14:27]It's a type of type of data compression.

[00:14:29]Okay. To reduce their cost. So to make them more efficient.

[00:14:35]I compression may be lossy. Okay. Which means we might have a degradation of quality or it might be lossless. It might yeah not cost us any quality. Gosh h we've got a really good point saying hey there's a deal saying if we want to visualize how compression works in our head we first need to understand a buffer versus a stored file and Matthew makes a really good point algorithms algorithms do it there are process pathways that do this compression To answer your question in a very in a way that's not very good, it looks like there are a couple different big ways that image compression is done. And it looks like a lot of these are pretty complex.

[00:15:35]One of one that I'm seeing here is reducing the number of colors, which cool, less complex. And then we've got some really really complicated ones which I'm gonna cheat and I'm going to say these are really interesting. These might be and you'll hear this again and again when you're well I mean you are web developers now so these are out of scope for right now. So what I'm going to do is for homework for me this looks like a really really friendly >> What's up everybody? Oh, short video. I might watch this video on my own and if I like it after the search, I'll report back and share a video that I think is really, really useful with the team.

[00:16:18]Sorry, this is such a good question.

[00:16:22]The two answers are, I don't really know yet. And then my second answer is, it seems reasonably complex. So, let's not do too deep of a deep dive into this just yet, if that's okay.

[00:16:37]You all are very very patient with my let's look it up. Oh gosh, let's not look it up today. So, one thing that I want to bring you again and again and again is please don't lose your curiosity.

[00:16:52]But sometimes when we look up something new, it'll seem really complex and it's completely okay to say, "Oh, wow. how image comprehension works might not be something I need to grapple with today.

[00:17:07]Maybe next week, maybe next year. Or if you're me, I've been working with the web a long, long time, and this is the first time it's come up.

[00:17:17]So, we've talked about why do we want to optimize that media? I feel okay. Yeah.

[00:17:23]And image types. So different types of images can display pretty much the same image but can be bigger or smaller. You might have already seen some file types stop like JPEG.jpg or GIF or GIF.

[00:17:42]Um folks like to say them two different ways and both are the person who invented the GIF said it's called GIF.

[00:17:52]So we'll go ahead and work with them.

[00:17:56]The theory of work we also said said just preview it to say hey some modern image types some file types some ways to save your image and then display them could be webp or aith which can be a lot more efficient. So, this is really just previewing. Hey, think about how big your media files are when you put them on the web. And think about how can you be more conservative.

[00:18:29]If you're loading something on your phone and it takes a huge hecking long time, maybe it's time to think about whether or not those images need a little bit of compression or they need to be a little smaller.

[00:18:44]I'm so excited for this one.

[00:18:47]Um, could I get everyone to scream at me?

[00:18:51]Um, if I see an image I like on the internet, can I just use it? Can I just save it and put the file on my website and use it again? Why or why not can I you can I be just use anything I find on the web?

[00:19:10]and and just like I've asked people like yeah ah so rules like copyright still exist on the web and this is a bit of a complex issue because for individuals Yeah. Yeah. Yeah. We've got folks saying hey copyright. So copyright is Yep.

[00:19:35]We've got Christina saying, "Hey, hey, hey. Many of the images you're just going to find on the web are all rights reserved, which means you can't use this." Which copyrighted is going to be another way to say those. I love those.

[00:19:50]And Paula's like, "Copyright, copyright, copyright. Don't don't get in trouble."

[00:19:55]I was saying trademarks and copyrights, the rules and laws against not using someone else's intellectual property, not using their art, not using their photographs, can be super scary. We can get in trouble. And Dan, after to be fair, all of y'all are after my own heart.

[00:20:13]We've got some complicated answers.

[00:20:15]saying, "Well, you can't just use anything, but some of the images or some of the media you find online, you can use depending on the license." And Paul is saying, "Oh, like an open-source license." Yeah, open- source is um an openly available license generally for code. And what we're going to be looking at are licenses today specifically around media. Yeah.

[00:20:45]And Hannah makes a really good point to say, "Hey, when we're talking about these licenses, Hannah's saying,"I think sometimes the way we use these licenses can be different depending on if your project, if your website is about making money or not." And you are so correct. I love it. I love it. I love it. Christina after my own heart. Christina's giving us spoilers to say Christina says, "I love creative comments licenses." They provide permissions to use things based on specific license terms. Beautiful.

[00:21:20]Perfect. This is exactly what we're going to be doing in a minute. So, thank you. Thank you. Thank you. Okay.

[00:21:27]Rules about intellectual property, rules about ownership still exist on the web.

[00:21:33]Yeah. You can't just go get a picture and save it and use it. No matter.

[00:21:37]You'll get in trouble. And so far, all of y'all that I've talked to so far have been really nice and I do not want to get you in trouble. Hm. So, Bramble makes a really good point and says, "This feels a little unfair because we have to pay attention to copyright and we as people need to pay attention to intellectual property, but these AI companies who are making the big AI models and Paul saying the same thing like same same they they tend to scrape the whole web. So they tend to, depending on your approach, scrape the whole web or just steal people's information and take those into their data sets and build their models on. They have better lawyers than we do.

[00:22:30]So we need to be careful.

[00:22:34]So, what we're going to pay attention to when we're going out and looking for what kind of images or media we can use on the web is we're going to be looking for a license.

[00:22:46]Licenses very broadly are the official set of rules that are attached to a picture or a piece of media. They can also be licenses applied to software.

[00:22:58]So, some of you have said open-source licenses. We'll learn about those later in the course. I promise. I promise.

[00:23:05]So, as a real quick spoiler, what kind of images can I use on the web? You can generally use images or other media with licenses that give you permission to reuse it as long as you pay attention to what the license is and what the license asks you to do.

[00:23:29]We had someone coming up here.

[00:23:34]Where are we? Where are Christina says?

[00:23:36]I love creative common licenses. Same.

[00:23:39]Same. And we're going to look at some of these creative licenses together.

[00:23:42]Creative commons is an organization that wrote and maintained a bunch of licenses. So they have like write and maintain the shared set of rules that people can optionally apply to their images or to their media or to their text. And here we've got some of their licenses.

[00:24:08]They made the different licenses.

[00:24:11]They're a nonprofit. I think they're really cool. I really like them.

[00:24:15]And what we're going to do is we're going to come down and we're going to say, "Please show me about their licenses." Thank you very much.

[00:24:24]Okay. Okay. I want the spoiler, please.

[00:24:28]Here's why. So, the first thing they're going to tell you, oh gosh, that is such a good question. I'm going to save that.

[00:24:34]Oh, I'm going to save that.

[00:24:36]So, if you've taken a picture and you put it on the web, the default that someone should assume, if there's no license listed, we need to assume that that license is all rights reserved, that you can't use it unless there's a license that tells you. If you've created an image, you can say, "Hey, I want to apply a Creative Common license."

[00:25:03]And there's six types.

[00:25:07]secretly there's seven types but the seventh one what we'll talk about in a second CC by okay creative comments and all of these are going to start with creative comments create attribution so if you see a CC buy license it says hey you can use this image you can change it you can remix it cuz sometimes you can't change it sometimes you can but this This is a pretty permissive license and a permissive license means we can do a lot of things with it.

[00:25:42]But the buy here is by attribution. And what this is saying is hey please I mean you have to when you use an image with this license you have to site who gave it to you. So by attribution. So as long as you add to tell where this came from and who made it, you can use it creative common by attribution essay.

[00:26:14]Okay. So the CC by you have to give credit to the creator.

[00:26:20]CC by SA is saying hey you have to give credit to the creator.

[00:26:26]You have to say where this came from.

[00:26:28]But also if you change it, which you can, this license lets you change it, any new material, any new images you make from the source image need to have the same license. Okay, CC bynd Creative Commons. We're good. So those are the folks that make the license by. So we still need to give credit to the creator. But ND says no one can change it. So you can use this image, but you can't change it or edit it.

[00:27:06]We had someone a second ago. Where are we? Where are we?

[00:27:13]We had someone a bit ago in the chat saying, "Hey, some of these licenses are free to use, but not for commercial use.

[00:27:25]And then we had gosh, where'd we go?

[00:27:29]Hannah saying, "Hey, I think sometimes it depends on if your website's making money or not." CC bynz is exactly that.

[00:27:38]You can use this if you give credit to the creator, but you can't use this if you're going to make money off it.

[00:27:49]And then we've got some more remixes. So CC byNC creative commons by attribution non-commercial. Now we're seeing combinations CC by attribution non-commercial essay is a lot like the essay up here.

[00:28:08]And the essay up here remember is saying hey if you change this if you build something new on it the new thing you build has to have the same license.

[00:28:19]And the last one we're looking at, the the last one except for the secret one we're looking at today is CC. Okay, creative comments by by attribution. We need to give credit to the person who originally made this. NC non-commercial, so we can't use it on projects that are to make money. And ND says we can't change it. So these all of these kind of stack, but my favorite one is CC0.

[00:28:58]And CC0 is often the sort of the most I know, I know I'm ancient to say the most yolo of licenses. If you see a license that says CC0, it means there aren't really any rules here. If you can, it's really, really nice to still use the buy attribution to say, "Hey, oh, this is such a good question. I'm going to save this and write to it."

[00:29:25]It's really, really nice to say, "Hey, I got the CC0 image, but I'm still going to give credit to the person who made it." Now, we've got a couple questions here, and all of these are really good questions, so I'm just going to bop through them really, really quickly.

[00:29:44]kind of saying hey is there a license for AI generated images there's a bunch of debate about this right now so often times AI generated images can look very very similar and sometimes they can look so similar to the source material that you can get in trouble for using them. So right now the sorry I used to work in um uh data around for machine learning projects. So I won't go too far into this but this is a an area of special interest of mine.

[00:30:22]Um, right now a lot of countries are still making up their minds about how licensing works and how how legal it is to use an AI generated image that looks too similar to copyrighted material.

[00:30:37]Generally, when you can, please, please, please look for permissively licensed. So, these creative common licenses, um, images just to stay on the safe side. Yeah, if that's okay. That's just my recommendation.

[00:30:55]We've got a Hang on. Free Code Camp recommends place like Pixab Bay or Unsplash for images. Um, but are there any websites for icons like like a star shape? And I love this because someone helped me out. Oh, that's such a good question. I'm going to um grab that one as well. Someone said, "Hey, hey, the Noun Project." So, I'll grab a link to the noun project.

[00:31:28]Gosh. So, the noun isn't always.

[00:31:36]So, you still need to pay attention to licenses, but the noun project is a pretty good place to do that.

[00:31:42]Here we go.

[00:31:45]Oh, and and and we've got some more quick questions.

[00:31:51]Really good question to say. Hey, this is great.

[00:31:55]What? You didn't say this is great. I'm being very, very immodonest. So, this information is really useful. Creative common licenses can keep me from getting in trouble. But if I see an image, how do I know what the license is?

[00:32:10]And Mel is asking as well, okay, what does credit look like? So, if I use um So, Mel is asking, if I use an image in a video game, where would I add credit?

[00:32:22]And do you have to keep the license in the file as well as credit them on the page? This is such a good question. The answer is it depends.

[00:32:33]So, one of my favorite projects for Haha. One of my favorite projects for finding permissively licensed images.

[00:32:49]And it gives you a really really good um it's giving us a really really good example of how to site these is Wikipdia Commons.

[00:33:04]So, Wikipdia Commons and you might be able to tell from we've heard commons before. So, Creative Commons, Wikipdia Commons, these are projects that are talking about shared open intellectual property. Yeah, we're going to go ahead and let's search H. I'm going to search Wikipdia Commons and I'm going to search for a kitten.

[00:33:30]Yeah.

[00:33:35]Oh, fantastic. Wikipedia comments is giving me a heck ton of different pictures of Oh, that kitten is too small. But we had this absolutely stunning question saying, "Yes, that's fine and all, but these pictures of kittens, sure, they're on the Wikipedia Commons website. I assume they've got a permissive license, and you're usually safe. But which license do they have?

[00:34:03]How do I know if I can use them for commercial use? So, this one's really, really good because we can search by license.

[00:34:12]I'm going to say, "Show me. Show me ones that have no restrictions." And these can often be sent, show me, oh, sorry, some of these kittens are too cute. Show me ones that are CC0 or in the public domain.

[00:34:31]And these are folks who took pictures of kittens and they said, "Hey, I want these pictures of kittens to belong to the world. I want no additional licensing placed on them."

[00:34:41]And I'm going to pick gosh, maybe you all want to pick a picture for me. I'm going to pick this angry looking little gray kitten.

[00:34:50]So here we've got a ton of really useful information. This is titled kitten04 by Ron. JPEG. So we have a lot of information here. The license is public domain. So this says there are no limitations on here. But if we wanted to let's get more details. Let's get as many.

[00:35:11]We can get information on how to use this file on the web. And our attribution Ron Whiskey public domain via Wikipdia Commons. So, if we wanted to, Wikipedia Commons gives us a little cheat sheet for how to site this, but do the public domain one. Oh, I'm sorry, kitten. Goodbye, kitten. Is kind of the easiest one. How about use with attribution and same license? We're not going to get CC0. We're not going to get do whatever you want with this. Let's get some different ones.

[00:35:48]I'm going to get Oh, these kittens were too small. And let's look at the license.

[00:35:55]Wonderful. Oh, this one's very exciting.

[00:35:59]So, here we've got two 17 day old kittens, brand new. We've got a lot of information about this, but here's our license information. Creative Commons attribution share a like. And here we've got the information. We can share it and we can remix, but we've seen these rules before, we have to give credit to the person who made this. And if we change it, if we had little hearts around the kittens, we need to keep the license the same for the new image.

[00:36:39]So, if we wanted to Oh, they're too small. Use this file.

[00:36:46]We could say, show me the attribution.

[00:36:48]Here's the username. Here's the license, CC BSA. Here's the link to the license, which is very safe to do via Wikipdia Commons. And really, this is what you want to go ahead and try to do when you're citing this. How you'd site this in a game, probably in a credits in the end. I like to whenever you can make your attributions as loud as possible, like people made these and shared these. You want to go ahead and give them as much credit as you can. Both to avoid try and avoid getting in trouble and just because you all are nice people and it's the nice thing to do. Paul is suggesting that puppies are better. We'll use puppies for the next example. We are absolutely not firmly team kitten. We're all sorts of Oh gosh. Actually, if that's not a silly icebreaker question, while I'm moving on to SUVs, y'all, what is your favorite non-domemestic animal? What can't be a puppy, can't be a kitten, can't be a parakeet. What are your favorite animals that are a little bit more a little bit less likely to show up in the home?

[00:38:04]So, Creative Commons, I really like Creative Commons and I really like Wikipdia Commons.

[00:38:13]Oh, Mel's asking, and we'll learn about the caption. Mel's asking, should we, if we're using this, if we're using an image on our website, could we include that in a caption, in a think caption element under our image? I would love if you did. So, we'll learn about that in a little bit more detail, but this is a really, really good use of think and think caption, which are two specialized image elements we'll learn about later.

[00:38:38]In the chat, everyone's yelling about animals. folks like giraffes and lynxes and elephants, squirrels, very accessible.

[00:38:48]We're going to learn about SG SVGs and then we're going to do a little exercise with SVGs. This is going to feel kind of weird because the exercise is really short and if we don't understand all of it, it's not going to hurt us.

[00:39:09]What I would say is I have made my own SVGs zero times and I have been making websites for me for fun. I'm going to go ahead and say since before most of y'all were born. So, we're going to learn about SVGs. We're going to make one together. Oh gosh. And tomorrow we have a guest session. Let me grab the link to the guest session. So Terry, Terrence Eden, not Terry, it's a bit overly familiar. Terrence Eden is going to join us tomorrow and he has done a project where he's made a bunch of really interesting SVGs. So there's an optional guest session. It's 1 hour before our usual session. If you can't make it, the video is always available on YouTube.

[00:39:59]Everything's stressful, but this can't hurt us. And Terrence is one of the nicest people I know. Way nicer than me.

[00:40:06]So, what do we need to know about SVG's scaled vector graphics? This is an image file type. Well, it's it displays an image, but really under the hood, it's interesting data, but that's not super important. We'll look at that in a little bit more detail. What we're thinking about right now is SVGs are made of points and lines and curves that can be filled in or colored. We can transform them and do some things which is quite cool.

[00:40:44]But they can be but and you can make them as big as you want or as small as you want. And the quality doesn't really change. The scale and scalable is when we change the size. We change the scale.

[00:41:00]We can draw these using instructions inside our HTML by using the SVG element. It's an element in HTML that with the path element and the path element needs to live inside an SVG element. This can let us sort of draw our own. Yeah, it can let us draw on the web.

[00:41:25]Well, we've got a quick question.

[00:41:29]H I've got one more really good question about licenses. And I said if you don't see a license on an image, it means that your rights are reserved, that it's copyrighted. No one's supposed to use it. This is a really good point. But often times we're not just putting if I take a picture of my cat, which I occasionally do. If I put it on my website, I'm allowed to I mean, you should always be allowed, but practically controlling my licensing and saying copyright yes or all rights reserved or CC by or CC by NA. I've got quite a bit of ability to choose my license. And Mel makes such a good point and says, "Hey, Jess, it's 2026. We kind of live in the age of platforms. So, if I upload my picture of my cat to Facebook, by putting your image on that platform, often times their terms and conditions say actually when you put your image on our platform, we can use your image or we set a specific license. So this is a really really good thing that I should have mentioned but didn't is that when you publish to your own corner of the web, your own websites, you get to say this is how I want this handled. Don't forget that when you put um images or media on other people's websites, onto platforms, often they get to decide the rules for you.

[00:43:13]I see a couple folks saying they're starting late. That is not even a problem. So, we're going real fast over 10 weeks, but none of the material will go away. Cool. Here's my notes from the heart icon. And then let's just build it together. We're not going to understand every single point and curve that we draw, but we'll play with it a little bit. And the big thing I want to push is it is not essential to deeply understand SVG unless you're going to do some really really specialist work building SVG icons.

[00:43:51]So in just a second we're going to go through the build a heart icon exercise.

[00:43:57]And what we're going to be doing here is we're going to use the SVG element to say I want to map an SVG. Nice, nice, nice. And then we're going to add a path element. And the path element is going to take one attribute. And somebody Oh gosh, we've got a couple people who are just coming to the course for the first time today, which is completely fine.

[00:44:24]Somebody who's not me. Can you explain what an attribute is? It's really hard to explain. And I really love to see other people explain it in ways better than I could.

[00:44:36]So, we'll create an SVG element. Inside that, we'll create a path element, which always needs to live in an SVG element.

[00:44:46]And inside the path element, we're going to pass in a D attribute.

[00:44:52]And the d attribute will have some points and some curves. And what we're doing is we're telling a parser. And the parser is a little piece of code in this case that lives in our browser. And it can read the points that we're telling our SVG and path elements to map out.

[00:45:12]And it's going to sort of trace those out in order to make our image or make our image visible.

[00:45:20]Oh gosh. Mel, Mel, that this is way better than I've ever explained attributes. So, if you're thinking of an HTML element, and elements in HTML are the building blocks of our website. Love it, love it, love it. If we think of our HTML element as the recipe, the attributes are these little ingredients we can change and the element sort of does something different with it. Oh, so if I have a cake element and I add the chocolate attribute, I then have the ability to change it to a chocolate cake. No, I'm I'm going to go ahead and if it's not a bother, I am just quickly going to screenshot this because with your permission, um oh, if you don't mind, um if it's not rude, I'm actually going to um use this as an example in future classes. This is so so good and this is way way better than I've ever explained it. I am a little jealous.

[00:46:30]So yeah, we kept kind of saying, "Hey, hey, hey, Jess, you said here, but you didn't cover it heavily. SVG is best for simple images like logos or icons. You probably could draw some really complex pixel heavy images, but good gosh, it would take you a while.

[00:46:54]So, we're going to come in here and what I'm going to do is I'm going to come in and let's build a heart icon. I keep saying we're going to do less and less of these steps together and that's going to start tomorrow cuz I'm mean, but this is a real real quick one and we're going to do these together. Yeah, we've got folks saying that they're late, but you're not late. There's no place to be.

[00:47:19]There's no deadlines here. We're just going to build a little tiny heart. And if y'all can't see this properly, it's a tiny heart. It's just going to be a quick six steps. And we're going to look at it together.

[00:47:35]So, we've got a lot going on here. Let's look at let's let's make this a little bigger. In our previous lesson in our notes just a minute ago, we learned about SVG, scalable vector graphics. Yes. elements and how they're often used in icons for projects in real world code bases. And a codebase is all of the code, all of the HTML, all of the CSS. If you're using different programming languages we haven't worked with yet, maybe all of the JavaScript or TypeScript or PHP, we'll learn about them later. Everything's fine.

[00:48:13]Um, so the codebase is all of the different things that make up your website. All of the code. In real world code bases, we would usually use an icon library. You wouldn't really do an exercise like this to make it for scratch. But the reason we're doing this together is we want to sort of see what it feels like to map out those points. And the reason we're doing this is this sort of detailed instructions is going to feel a lot like more complex programming tasks in the future. Let's talk through what we've got here. Let's talk for our boiler plane we learned about last week.

[00:48:52]Up at the top line one dock type HTML.

[00:48:56]We're telling our browser, hey, this is an HTML file. We're good. We're good.

[00:49:02]We've got the start of our HTML element and that's the parent element that all of our HTML code goes inside of. Here the language is set to English, which if the rest of our website's in English, cool, cool, cool. But we're just making SGV, so there's Yeah, there's no real language to it.

[00:49:26]Yeah. And we've got a really, really good point. Oh, I love these. I love these. These are super super good points we've got. And I'm so sorry. It's uh Eladil. I'm probably butchering your username. I'm rubbish. I do apologize.

[00:49:45]It's saying, "Hey, hey, hey, look."

[00:49:47]Usually people would use a vector editor. So, people would use a a pre-made program like Illustrator or Inkscape. Um, and these are visual editors that would output that would make you an SVG because Sunny is asking a really merciful question. And Sunny is saying, "Jess, you keep telling us that this would be unusual. This this exercise would be a weird thing to do.

[00:50:11]And the instructions even tell us this would be a weird thing to do. Is there an easier way to draw these?" And oh heck, there absolutely are.

[00:50:22]So, visual editors like uh Illustrator or Inkscape. The other thing is a lot of the SVGs you might want to use often already exist with permissive licenses.

[00:50:36]So, hang on. Then we've got our head tag. And remember, in the head tag, we've got all our metadata for this site.

[00:50:44]We still need to set UTFH, even though I don't think we have any UTF characters in here. The title of our web page is heart icon. Our head ends here. Our body element opens here. Our body element closes here. And because we want our SVG element to be visible to the users, we're going to be writing it in the body. Remember that the head is where you put your information for browsers, machine readable metadata. Your body, this is where your users are going to see things. So, we're going to start by creating an SVG element. This is not a void element, which means we need to open it and close it.

[00:51:32]So, what I've also done here is I've kept the indentation the same. And the indentation being the same. Oh gosh, what a good question.

[00:51:42]Much saying, "Hey, hey, hey, hey.

[00:51:45]Size-wise, are SVGs usually bigger? Are the files bigger or smaller than a PNG or a JPEG?" Usually, they're way, way, way smaller. Yeah. So, they're really fiddly to make complex images, but they're really lightweight. And it's a spoiler. If you can come to the session tomorrow, the guest the guest uh session before our regular session, Terren Eden is definitely going to show you the tiniest SVGs he was able to make. So, all we got to do here, all we've been asked to do is create the element. I bet that this is all we want to do, just an open and close.

[00:52:26]The whole world is stressful, but this can't hurt us. Let's keep plopping along. Okay, we should nest one path element. And nesting means it's going to be a child element. It's going to sit inside our SVG. I I'm going to tab this in. And the reason we the reason we indent like this Oh, I'll let somebody else tell me. Why do we want Why am I indenting like this?

[00:52:54]Does the browser care?

[00:52:57]who who am I writing my code for when I'm really careful to indent like this?

[00:53:04]So, I'm going to check my code again.

[00:53:06]Our path element doesn't do a lot yet, and that's okay.

[00:53:12]And I promise we're going to go look at the MDN documentation for the path element as well. A lot of times remember we had someone way at the beginning of of this session saying hey how does image compression work and when we looked at the the documentation on Wikipedia the answer was it was complicated. We're going to look at the MDN Mozilla developer network.

[00:53:43]Uh, we're going to look at the MDN documentation for path and it might still feel really technical but it can't hurt us. We've got folks who are jumping in here and saying why do we indent our code? to make the more code more readable and really good point from Alistair that do you know what when we talk about readability in code this is to make it easier for people not machines and I love this we're making it easier for our future self to read this code like whenever we write code our favorite person to try and be nice to is us in the future so the path element and it looks like the path element needed opening and closing as well.

[00:54:29]It's a good thing it went ahead and corrected that for us. It needs a d attribute.

[00:54:35]It's it's suggesting I put this on line 10, but I like to keep my attributes on the same line as when I open an element.

[00:54:43]It's just personal preference. So, the d attribute and remember an attribute is the attribute name, equal sign, and then the quotation marks.

[00:54:53]And then we're going to give it some code that tells it when to start. Like, and when we talk about a point, think of a point is where it drops the pen, the digital pen. And the lines are where it pulls it and the curves are where it curves it about. Yeah. So, the dattribute is going to be set to this big messy piece of code. Excitingly, you might be saying, "Wait, wait, wait.

[00:55:25]What does that all of these do?" That is a problem for your future self. If if if if you decide you want to make SVGs like this in the future, right now what we're going to do is we're going to copy and paste this over cuz these are the different points and lines and curves and we're going to put them in the we're going to pass them into the value of our attribute and immediately we see it draws our heart. We've got a really good question here. Mel's preview to say, "Hey, is the SVG element similar to the canvas element where it lets us draw stuff in it?" Let's go to the documentation. Let's go to the documentation.

[00:56:13]Sorry, y'all are going to hear me very excited about documentation a lot. So, here let's come up to here's a different tutorial. So, if you are so so hyped to learn about SVGs, here is a different tutorial. We're doing the free code camp tutorial. This is going to be way, way more technical.

[00:56:46]Oh gosh. Oh. Oh, and they even link out to other ones. This is so nice. So, we've got an introduction.

[00:56:53]SVG is an XML language similar to XHTML which we can use to draw graphics.

[00:57:01]This is going to make me feel old.

[00:57:06]How many of you were born after 1999?

[00:57:10]Um I remember 1999 pretty distinctly but there were a whole bunch of different formats and they had been offered to the standards board. So, the people who decide what goes into programming languages on the web. And here we've got some more information.

[00:57:29]SVGs are supported on most major browsers, but sometimes they can be slow.

[00:57:38]Okay, so even before we start, I love this. Before we start, even this tutorial is saying, "Look y'all, you probably just want to use a drawing application like Inkscape."

[00:57:56]But here we're going to write it in text.

[00:58:01]Here we've got an example.

[00:58:05]Here we've got SVG. And here we've got the version.

[00:58:09]This is giving us a lot more information than we actually need.

[00:58:15]Wow, this is a lot.

[00:58:18]So, what we could do is play with this tutorial if we wanted to.

[00:58:24]But one thing that I wanted to dive into with this question is, is it like the canvas element? We haven't Don't worry, don't worry. We haven't learned about SVGs before this, so nothing is wrong.

[00:58:37]And we haven't learned about the canvas element, but what we do. So if you see something brand new and it looks scary, what's a canvas element? Oh no, let's look at it.

[00:58:50]Cool. Here, show me a canvas element, please. May I have an example?

[00:58:59]Thank you. I'd love an example.

[00:59:01]Here we've got a play button. We've got a canvas element. So really similar like I want to draw what's going on in here and with alter alt text involved as well. So yeah these feel a little bit similar don't they? That's quite nice.

[00:59:22]Bramble is asking hey but all these numbers we pasted in when are we going to learn how to apply all of those? You are going to learn how to apply all of those on a day that is not my day. So the sorry that sounds very mean. Right now we're just looking at SVGs exist and we're just having a little play.

[00:59:44]How to determine what each and every one of these points are.

[00:59:48]This is one of my favorite examples of going through our process.

[00:59:53]We read the documentation really carefully and the documentation sort of said, "Hey, these letters represent commands like move to, draw a line, and close, but it's not telling us what each of these letters mean." Hm. And so, you've already read the documentation and that didn't help. We can look it up and that might help. But you've also asked somebody and Jess wasn't helpful.

[01:00:21]But this is a really good opportunity to get weird. And Bramble's saying, "Hey, I specifically want to know saying, is this something I'm going to use in CSS?"

[01:00:31]Probably not. So, this won't come up again in CSS. Oh gosh. Um, and again, I've been making stuff for the web for a hundred million years, and the only time I've drawn an SVG is here in this tutorial. So, this is just to feel out, hey, SVGs exist, and they're made of code. But we probably don't need to know all the details. If we do, we can use our experiment. We can get weird. We can play with this and see how the shapes change and deform. Or we can move on to the next steps in our solo work because the stuff we're going to be doing the rest of this week is pretty hard. Like the the jump between today and tomorrow is going to get you or it's going to get me. Fantastic. The boot camp is free.

[01:01:19]Free code camp is free. There's no way to pay us. I Please don't send money.

[01:01:24]That would be weird. Um but it's really important to note that free code camp is a charity. So I'm not your boss. I'm not your mama. I cannot tell you what to do.

[01:01:35]But please, please, please do not spend any money you don't have. But if you're someplace where you've got a little bit of cash and you get to the end of the boot camp and you say, "This was really useful," donating to Free Code Camp, the nonprofit that makes our material, is a really nice thing to do. None of that money comes back to me or Carmen or Eda, but again, we do this because we like to.

[01:02:03]So, we're going to set width and height attributes in our SVG element.

[01:02:14]And this is sort of giving us an example of using our attributes.

[01:02:21]And this is going to show us how the scaling works. Is this supposed to set to 24? I would imagine it's 24 pixels.

[01:02:30]But what if we change that? What if we got weird? I want to make this 240.

[01:02:35]That didn't change at all.

[01:02:38]I want to change this to 55.

[01:02:41]That still doesn't change at all.

[01:02:44]How weird. Everything's weird. Oh, I imagine because the points and lines it's running on don't give it a ton of space to move.

[01:02:55]Going to check our code and we're going to continue to bop bop bop. We are just going to do a little tiny bit more. We just have a couple more steps.

[01:03:06]We're almost done. We're going to add a viewbox attribute. And what this is doing is it controls which part of the image is visible inside the SVG. Oh, heck.

[01:03:19]I was hoping I could just zoom in on the preview and unfortunately that's not an option.

[01:03:27]So, I'm going to add a viewbox attribute. And I'm even though we're never probably going to make SVGs in the real world using this process, it is nice for a very very chilled out review of adding attributes that we haven't seen before. View box.

[01:03:48]And we're going to set that attribute to 0 0. And that's going to set the top left corner the X and Y. Okay.

[01:03:59]Zero. Zero. Okay. So, we want those to be right where they can start. No extra space at all. And the next two numbers 50/50. Define the view boxes width and height. Okay. So, the width and height inside the SVG.

[01:04:17]It's very stressful, but it can't hurt us.

[01:04:23]Did I set I should set the view box width to 24.

[01:04:35]H come on then. I did I I promise I did this before class.

[01:04:44]Said the first two numbers.

[01:04:47]The viewbox attribute controls what part of the image is visible inside the SVG.

[01:04:51]Yeah. So SVG width 24. Let's let's start this over. Reset this lesson. So this was passing. And this is going to be very familiar. This is absolutely what coding feels like, isn't it? It does say 24 at the bottom. Oh, heck. Thank you.

[01:05:12]Hm.

[01:05:15]I got too excited here instead of 50/50 like it has in the example. Thank you so much. Y'all are just fussing at me and in the most useful way possible.

[01:05:28]Okay, so the zero here, starting position for the top left, starting position for the top right, and then starting position for the view boxes width 24, and the view box's height 24.

[01:05:47]Gosh, I'm suspicious. Shall we check our code?

[01:05:53]Everything's terrible, but it's just on the computer. It can't hurt us. Oh, we've got some folks asking a couple of really good questions. And I'm only one point away from finishing up today's tutorial. So, please, please, please throw in any questions you have about images, about copyright. Oh, I see a really fun question from Sunny. And I'm going to keep going. So, please drop your questions in and I'll get to them in literally just one heartbeat. We're going to continue and I think this is going to be the last point. So, we just need to color it in. Just just is always such a scary word because just al doesn't always feel easy. But here we're going to add a fill attribute which we haven't seen before but it can't hurt us. I set that to red. And this is a really good preview because colors in HTML and colors in CSS are going to do a bunch of different things. Yeah, we're going to learn at least three. I think we're going to learn four different ways to do colors in HTML and CSS. Here we could say is pink. Okay, pink is a keyword that it knows. Does it know the word blue? It does. But here it wants us to paint it red. And I'm just previewing that we're going to learn about colors soon. We're gonna check our code.

[01:07:20]It's completely fine. We can bop on. And I'm so sorry that when we do bop on, what we're going to bop to next is the material we need to start working with through tomorrow.

[01:07:36]I'm really sorry that I'm going to be teaching you about video and I'm going to be teaching you about I frames and I always think I frames feel a little difficult. That's not true. I always feel like video feels a little difficult. So, we're going to work through them together and we're going to work through them together and having a super super chill time. So, my apologies. That will probably go a little slow tomorrow because I find learners sometimes have a hard time with it and I often have a hard time with it.

[01:08:10]So, after this session, please have the chillest time you possibly can.

[01:08:16]If you have time tomorrow, 1 hour before a regularly scheduled scheduled session, we would love to see you at our SVG expert session with Terrence Eden. But the video is going to be available online later. So no pressure.

[01:08:33]Please read the theory for I frame elements. What are replaced elements and what are some examples?

[01:08:42]Please oh gosh and take notes and write down any questions you have. We'll probably have to look up a bunch of the question answers to them tomorrow, but it'll be useful. We'll also ask you to read the theory. How do you embed videos into your web page using the I frame element? Take notes, write down your questions.

[01:09:02]So, if you get some time, try and go through all of the steps for build a video display display using I frame and write down your questions or new concepts.

[01:09:15]We're also going to start building a video compilation page, but I don't expect you to finish that before tomorrow. I'm also going to make one.

[01:09:24]I'm not going to finish it before tomorrow. It's going to be just like the recipe project you did with, hey, go ahead and get this started tonight or this morning or tomorrow morning if it's very late where you are and keep building over this as you can. I'm going to go ahead and come back over here and take a look at what questions we had.

[01:09:50]So, we had such a good question.

[01:09:54]Sunny is saying, "Hey, hey, hey, hey."

[01:09:57]It's a bit off topic. This is not off topic. This is such a good question. And y'all just any questions you got either check them at me now or we're also going to be over in Discord, so you can throw any of the questions you need in there.

[01:10:10]But on your own website, where would you put the copyright information? And what would it look like? You're planning Oh.

[01:10:16]Oh, wow. Sunny, you're going to be putting your I I'm I don't pick favorites. I I like all of my learners equally, but Oh gosh, I'm so excited to hear about people putting their art on the web. So, I'd go ahead and I'd actually answer your question with a question, which is what does it look like on other people's websites? So, I'd make a I'd start keeping a like go look at some other artists websites and try and find their copyright information.

[01:10:46]Usually there's a footer and we'll learn about footers and that's a really good place to put it.

[01:10:52]Please, please, please, if you can, if it's not a bother, if you're not shy, we'd love to see your website when it's finished. But I cannot stress enough, we're never checking your work. We never want to see your personal information.

[01:11:05]If you're really proud when you're finished and you want to show it off in Discord, I would love to be very silly about how proud I am, but there's no pressure at all.

[01:11:16]So, you're getting very mixed messages, aren't you? Like, can I see it? Only if you're comfortable with that.

[01:11:22]Stunning.

[01:11:24]I think I'm just making sure we've got a couple folks who are saying, "I'm way behind on the stuff I need to read and do." That's chill. I mean, it doesn't feel chill.

[01:11:35]We're going super fast. If you need a little bit more time, the videos don't go away. The whole world is hard. And this doesn't have to be hard. There's no deadline. There's no way to fail.

[01:11:48]Everything is stressful, but hopefully okay.

[01:11:53]So amazing. I'm going to go ahead and leave you for the day. Tomorrow you will have me again. And if you're here for the guest sessions with Karen Seen, you'll have to talk to me backtoback double jazz.

[01:12:09]On Thursday, you will have the glorious and brilliant Carmen again. And then on Friday, I'll come back and get you again. Yeah, I'll let you go. Please have the easiest morning or evening or if it's the middle of the night, you'll go to sleep right now. Okay. Um, thank you so much for making time out of your day to be with me. I'll see you tomorrow. Bye.