How to Build a Website — The Show For Beginners

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bosch. Welcome to syntax. This is a podcast with the tastiest

treats for web developers out there. Today, rid We have an actual tasty treat for you. We got a email from somebody. We'll read it in just a second, but we're basically gonna go through rid. The very basics of building a website. So this is a show for absolute beginners. You might find it interesting if you're not a total beginner as well, But, hopefully, this is one you can also send your friends who are like, I'm thinking about getting into web development. Like, like, I just need to get a headspace of rid. What are these pieces of building a website? HTML, CSS, JavaScript, and then I'm not sure if we'll get into it today or not, but, images, database, re Server and a domain name. So, like, the very basic pieces of getting, going from a blank dot HTML file up into getting a website rolling with a back end. We're gonna try to explain those pieces to you. With me, as always, is mister Scott Talinsky.

You doing today, Scott? Hey. I'm doing good, man. I just, I, like, just minutes ago, got back from a trip to a new kind of Not not a doctor necessarily. A is they do, like, acupuncture.

Oh.

What? What would you say? I said a witch? Oh, yes. A witch. Yes. Oh. It was a witch. They did acupuncture and, like, some really good movement on my spine and stuff. Oh. And, man, I feel fantastic right now. I'm feeling very good. You know what? I I breaking the dance I do is is breaking, for those of you who don't know, is break dancing.

My body has been just just absolutely crushed around for, like, 18 years now. So It feels really good to have somebody manipulate in a way that you all of a sudden you feel like, woah, man. I can move in a good way. And so I'm I'm feeling I'm rid. Feeling loose. I'm feeling ready to go. I'm feeling ready to talk about websites.

Awesome. We are sponsored by 3 companies today, FreshBooks Cloud Accounting, rid. Sentry, air exception, and performance monitoring, and muxed online video hosting and streaming for your video platform. We'll talk about all of them partway through the episode, But I'll kick it off here. Just read quickly read the email that I got. Hey, Wes. My name is Stan. I am from a big fan from Norway. I'll I've been following the podcast for 6 months, and I love the content. I don't usually hit people up random like this, but I wanted to say thank you for the amazing blah blah blah courses, all that stuff.

Rid You guys are inspiring. We won't read all the pleasantries. The reason I send you this message is simple. I was wondering if you guys have ever made an episode for beginners or noobs.

Rid As I explained, I don't understand half the stuff you talk about, but I still like to listen. We hear that a lot from people. They're like, rid Not totally sure what you're talking about half the time, but I feel like I'm, at least observing some of it. But it would be cool to make an episode of how to make your 1st website for an example.

I thought of this earlier today when I listened to 7 of your episodes in a row. Holy smokes. So, it would be cool, and this is the the bolded way. It would be cool if you guys can make an episode or short answer on everything going on in a website, like how to make your 1st website, But also how to make a database, how to host it, how to make it from scratch, start to finish. Thank you so much. And to say hi to hi to me for Scott. Hi, Scott Hey.

So we're doing it. Thanks for the suggestion there.

This is gonna be totally bare bones. We're not gonna rid Get into any frameworks. No bundlers. No build steps. Nothing like that. At the the very basic minimum rid. Amount of technology you need to get a website up and running. And I sometimes feel like this is a bit of a lost art. It's It's what I made my JavaScript 30.com course. It's intentionally says on there, there are no bundlers, no boilerplate, no compilers, no frameworks rid Because a lot of times that stuff gets in the way. So it's important just to maybe make sure you understand what the Sort of fundamentals of this thing are we have shows on fundamentals of each of these things, but this is a little bit different in how to make a website.

Rid So, Scott, you wanna kick it off there with the 1st piece? Yeah. So the 1st piece when you're learning any of this stuff is the backbone of something. If you were building, a building, you would start with the foundation.

And, if you have a foundation of a website, rid. That is always going to be HTML, standing for hypertext markup language, and that hypertext markup language thing doesn't really matter too much. All you gotta know about HTML is that it is a language that you write to build out the structure of your website.

There are various elements that are defined within brackets, and these elements have different sort of neat properties about them, but these elements Describe the way that the content is.

If you have an image, you use an IMG or an image tag. If you have a paragraph, rid. You use a p tag for a paragraph.

And there's also some other kind of more extraneous type of language in some of these. Like, you have div, Which just stands for it stands for divider. Right? I don't even think about div. It's just a dividing content.

No. Yeah. I I always assumed it as like division.

Division. Like a yeah. Well What does div stand for? Let's let's look it up in the spec. Is division really that different from divider? Because a divider, I would think of like a HR.

A div tag defines a division or section rid of an HTML document.

Interesting. I never knew that. I always just thought, div. It's a thing that you put stuff in. Right. So a div tag is sort of like a blank container element that contains stuff. So what you have is this collection of HTML elements of which there are Hundreds of them. And for the most part, you do not need to know hundreds of them right off the bat. You probably only need to know a handful of them, whether that's a paragraph, an image tag, a div, Any of the h tags, which are header tags. There's also tags that are kind of like a div for the structure of your site that have meaning rid To, you know, robots, the user will never necessarily notice things like the header tag or the footer tag or the main tag.

Rid. We frequently refer to elements as tags, but either way, these things are what you use to divide up the structure of your website into various sections.

We have an entire episode on the surprisingly exciting world of HTML elements. You can go and listen to that. We have an entire hour talking about different HTML elements. You can get into that. But Like Scott says, HTML elements are just the bare bones of your website that you can use to either mark up the content or group those pieces of content together into sections of your your element. So at the very default, if you just make a new file on your computer and save it as dot h re t m l. You could open up that HTML in your browser, and it will be called it would be parsed, and it will have some default Styles applied to it. Meaning that by default, your paragraph tags will have a Times New Roman font, and your your heading tags will have different sizes applied to them. And Blockquote, I believe, will have, like, an italic font. So at the very basic, you can rid Kind of make a website with your your base elements and a couple links, linking different rid files together, but it's not gonna be much of a website because it's more of a, like, a document, I would rid More of like a Microsoft Word document that you could link from one to another, and and that is the basis of of the web. It's just rid A bunch of documents that you can link from 1 to another, but we've taken it so much further with the next things we're gonna talk about, which is CSS and JavaScript in order to make them look good and be interactive.

Yeah. So if we have HTML as the structure or the bones, You could think of CSS as like the clothes and the skin. It's the things that make the structure of the person look like what the person looks like. And then you could take that even further and say JavaScript is, like, the person doing things. You know? It's how the person moves or interacts with itself. Yeah. Rid. So, you know, c CSS is in fact the way that your site looks. If you need to make your site look like anything other than a blank white page with some text in some default styling, you do it via CSS.

CSS stands for cascading style sheets.

And the most important part of that is, well, I mean, guess style. You know? So style means that you're styling something. You're making it look the way it looks. It's a sheet.

You know, the sheet part is probably the least important part, but cascading, that's the biggest part of CSS because CSS is A language that some people have a hard time picking up and getting good with because CSS is is definitely a skill that takes a long time to build. But cascade In CSS, where you have 1 style that can be applied to too many, many things across your entire site all the way down via something called specificity.

We'll talk more about that in a bit, but the cascade is really the biggest part about getting good at CSS.

Yeah. There's different parts of CSS as well. There's a whole section of CSS rid That's used for styling text. There's a whole section of CSS that's used for layout. Those are specifically rid. Grid and Flexbox, where do those remember we talked about those divs earlier. Generally, what you do is you take those divs and those headers and the footers, and And you take those those major sections of your website, and you arrange them beside each other, underneath each other. You you turn turn different colors.

Rid That is like layout CSS, and that's mostly done with Flexbox and Grid these days. Previously, in the past, we've done floats. But If you're new to web development, I don't even think you need to learn float based layouts anymore. That's Oh, yeah. A bit of a thing of the past. No. Thank you.

There's what other section what other parts of, CSS are there? There's animation CSS. There's

There's things that do painting, like changing the background color, the box, adding shadows to things Yes. Whether that is inset or on top of things to make it look like it's inset or sitting on top of. You also have, like, positional things where you can determine its Space in three d like z index, and not three d where it's going to look 3 d, but if something sits on top of something else. I don't know if you ever used, any of those awful, awful tools in something like I don't know if it was like illustrator or way back in the day where you'd say, go behind or come in front of, But you can control that via numeric values. Before we get into property stuff, do you wanna talk about how you add CSS to a page?

Yeah. Absolutely. So there's kinda 3 main ways to add CSS to a page. The most common way rid. It's through what's called a link tag. So, generally, what you do to write your CSS is you create a new file. So you already have your rid. Your HTML file and and, by the way, generally, the your main HTML file is gonna be called index dot HTML.

Rid. And we'll talk about why that is and and when we hit the server part of probably next episode, maybe this episode.

And the link tag will include a separate dot rid. CSS file. So you might have, like, a style dot CSS. You can name it whatever you want. You can have multiple CSS files as well. Rid. And, generally, in the header of your document, you have a link tag that has a ref value, and that links that up. And what is that when the browser downloads your HTML, it will encounter that link tag and say, oh, this is pointing towards rid An external resource.

Let me go ahead and download it, and then I'm gonna go through it and start painting things how you want. Oh, okay. They want the font to be Chiller. Okay. They want the color to be lime green. Oh, they want the background to be blue, and then they keep going through rid All of those styles and applying them and building up your website, and that happens very, very quickly in your website.

Yeah. It's like a metaphor. Imagine you have a bunch of little, like, little fast workers who are are just very quick at working, and, they they The style sheet they've been handed is like a a set of instructions on how to make the room or the building or whatever look the way it does. Alright. Paint paint this while this, paint this this thing, this, and they just go through and, and and it happens Yeah. In a blink of an eye. You have all these little rid Workers, I guess, inside of your computer. That's great.

Second, we have a style tag, so you can actually write CSS directly inside of your rid. HTML file. So if for whatever reason you don't feel like creating a separate dot CSS file or sometimes you just You're just doing a quick little example. You can pop open what are called style tags. And, just like a open and close a div tag, the browser knows to treat the rid contents of a style tag differently than any other HTML tag. So it will say, oh, I encountered a style tag. Let me go in here rid and find out any of the CSS that needs to be applied.

Finally, the 3rd way to do CSS is what's called an inline style, rid. And those can be applied specifically to an element.

So instead of going into your CSS and making all of your paragraph read. Tags red, or you can even say some of the paragraph tags red. What you can do is write on an HTML element, You can use what's called a style attribute where, let's say, you have a paragraph tag of welcome to my website, and you wanna make that a little bit bigger. Rid. What you can do is write on the paragraph tag, you can say style equals open double quotes, close double quotes. And inside of those quotes, you add rid any CSS that you want to be applied specifically to that element. Inline styles, you'll often hear are a bad practice. Rid. The reason people say they're bad practice is because you have to repeat yourself over and over and over again, but they're not like something to be avoided like the plague.

Rid They have their use case of, needing to apply a single one off style, add styles to it with JavaScript, rid A lot of, like, WYSIWYG editors, which is, like, if you're editing something via a online editor like WordPress, they will apply inline styles to rid specific elements. So that's generally what they're there for, and it's probably the least used CSS,

way ever of the 3. Don't you think so? Yeah. Definitely. And some people rely on it pretty heavily, but at the end of the day, it does lead to potentially like, It's one of those things that if you're a new developer, you stay away from it because it can lead to unorganized sloppy CSS if you don't know what you're doing. And that's some of the things where people say avoid this. It's a lot sometimes those are are just like those are guidelines for you should avoid this if you don't know why.

If you don't know why you should avoid this, then you should avoid this. Yeah. Because sometimes you get into those situations where you're rid. Like, well, I don't I don't see what's so bad about it, or, oh, that that seems easy. I just go to the element where I want to make it red, And I type color red on the element. That makes a lot of sense.

Why do people hate this? And then and then you fast forward a year into your rid Career and you realize, oh, I see why people don't like this. It's because it's hard to maintain, and it's your content and your styles and and all kinds of stuff like that. So, yeah, generally, it's

not bad advice to say, yeah, maybe stay away from that while you're learning. You know what? I feel like that is, like, common thing when you're learning to build websites is that people give you advice like, hey. Don't do this or don't do that. And may seem counterintuitive at first, specifically because it can sometimes feel easier. And you might say, oh, man. This is easier. I don't get why I'm not supposed to do this.

Sometimes it that that advice is just really dead on and you need to follow those things. But other times, you do need to learn those lessons the hard way yourself If if that is like a scenario where you're saying, oh, man. I've gotten myself into a a bunch of trouble, and it's all because I use these inline styles. It is funny because inline styles, feel like are a little bit more usable today in the era of components where we're making small little components and reusing them via JavaScript.

But if you're just building straight up websites, yeah, don't don't try to do it really.

So with CSS, typically, what you need to do is you need, Let's say you're giving these little workers instructions on how to paint the wall. You need to tell them what you want to do. So you would say, hey, this wall, I want it to be the color of brown.

So to identify the thing that you want to style, You need to use what's called a selector, and a selector selects the thing that you want to style. And a selector can be The HTML element name itself, so you could just use the word p, or you could just use the word div if you wanted to, Or you could use the class, which is identified in HTML as a class equals and then a name.

Now classes are probably the most common way of styling things.

There's also the ability to style based on IDs, which are more Civic, we'll talk a little bit about those in just in a second. And then there's also the ability to style via attributes.

Now IDs are a one off thing. Right? A class can be applied to many elements, but an ID can only apply it to 1 specific element, making them very inflexible compared to classes.

So if you are planning on styling your CSS and you want to identify things in your HTML document, The primary means of doing so would be to specify based on, let's say, the elements first and foremost as in rid. All of my paragraph tags should look this way. All of them on the entire site should look this way. But then when you need to get into specific CSS, You identify something by assigning it a class in HTML and then using that class via dot the class name, rid. And that it makes that into a selector.

Yeah. That makes it a super reusable component, and the beauty of that is you can sort of pack a whole bunch of styles into a class. Like, let's say you have call to action text, so something you want to be bold and red And the font size is a little bit bigger and maybe a bag different background color on it. And those are all things that you wanna pack into a single class called rid. CTA, call to action. And then you have that in your CSS. And then anytime you want something to look that way, you rid You simply just have to go to your HTML and add a class, which is in the HTML. It's a class equals, open quote, close quote, and then say CTA, rid. And that will then match up with the selector that is in your CSS, and it will apply those styles accordingly.

Yeah.

Know what? If I wanted to select a company that does really good really good accounting software, I think I would use the selector of FreshBooks.

That's the selector that I would use. FreshBooks is a sponsor today, and they provide really amazing cloud accounting rid services that, Wes, you've been using for a very long time now. So do you wanna give a little bit about FreshBooks?

Absolutely. I've been using FreshBooks for, I don't know, probably rid. 11 years now, something silly like that, and I've used it to log all of my rid expenses. I use it to invoice everybody that I need. I use it to have people whom I need to pay. They invoice me, and I love it when they use FreshBooks rid. Because I can just click all the invoices from people that sent me an invoice and automatically turn that into an expense. Once I've paid it, rid. You can track all of your time. You can associate different expenses with different projects. You can get a whole bunch of reporting as a wicked mobile app. Rid. Awesome. Awesome. Awesome. So if you are a small business, a freelancer, anybody who needs bookkeeping online, freshbooks.comforward/ syntax, rid. Use syntax in the how did you hear about a section.

Sick. Okay. So we have our selector, and that's typically defined by the name or if you have a class that uses a dot in front of it. So dot the class name.

Or if it's an ID, you have a pound symbol or the hash symbol and then the ID name.

And we're not even gonna get into attributes and that sort of stuff because that's a little bit beyond the scope of, I think, what we're doing here. Yeah. I think, like,

Those can be really handy, but that's not your your 1st website is probably not gonna be getting into attribute selectors.

I don't think so, at least Not most people's.

So you have your selector.

Then what you do is you do a set of curly brackets, a little curly bracket, guys. And Then inside of those curly brackets, you have a property.

A property is the thing that you are changing.

In my analogy for the house, this would be if you were changing the wall, then you would say the property of it would be the paint Color.

Now in CSS, that turns into all sorts of stuff, whether you're saying background color, box shadow, Height, width, any of these things, any of these properties in CSS. There's gotta be 100 and maybe even a 1000 CSS properties. There are so many of them. And it takes a little while to know them all and know which ones are appropriate to use when because there's certainly that. And and inside of that, there's There's all sorts of different ways to use different properties, but the properties at the end of the day is what you are changing. So you have your selector, which is the thing you are changing. The property is what you are changing on that thing.

And then To take it one step further, next, you have a colon and then the value and then a semicolon.

Now the value is the rid. The value of the thing that is being changed, it's how the thing looks. In this example, you would say, you know, let's say I have a div that's like the hero div, And it has a class name of hero. You would say dot hero, brackets, the property name, which could be background, colon, red, semicolon.

And that's how you define a a property value in CSS.

There are 500 and Twenty distinct property names from 66 technical reports and 66 editor's draft. There's a CSS tricks article

rid How many CSS properties are there? Of course, there is. That is fantastic.

That's really the syntax of CSS is you have your Selectors, your properties, and your values. And on the surface, that seems very simple. I have a thing. I wanna make it a color. I turn it the color. I give it the value. There it is. Bingo. Bingo. You got it. The real key to writing CSS and writing good CSS that will go on into the future and lessons that you'll learn as you a better and better developer is the lessons of something called specificity.

And specificity, as Wes has written down, he he has literally written re Specificy.

How do I say it? Specificity?

Is that right? You always you you put, like, in there. A specificity or something. I don't even know how you do it. Specificity.

Yeah. Specificity?

If this is your 1st episode, you may not know that Wes cannot say the word rid Now now you got me doing it. Specificity.

And I I Sorry. I'm bringing you down with me. I know. I used rid We used to have the same issue, and then I really worked on it. I practiced it. I stayed up late nights. I did my, Shaolin Temple training where if I said it incorrectly, I'd get poked with a stick or something. But I got it now, and then you're you're bringing me down. Either way, specificity is the is basically the biggest part of CSS that makes your CSS good. It's When you apply one style to something, you need to learn how to target things appropriately.

Like, if I want to target just the logo on my page, how do I target that? Rid. Well, typically, you give it a class, and then you write your CSS based on that class. But let's say you have an item that is considered like a card or a block of text that you want to look the same, you want it to be reusable.

Well, how do you target just that so that it's reusable? And most of the time, it is through the use of classes.

But you end up having a situation where sometimes CSS from one thing that you've applied to one thing is landing on something that you don't want it to land on. And that right there rid is the big thing about becoming a CSS master is learning how and when to use appropriate properties, but also how to control and bend that Specificity to your will, and master the cascade.

Yeah. Like, the the very basic example is if you have a paragraph tag with rid A class of Scott and a class of Wes.

And then in your CSS, you have dot Scott color blue dot wes color red. The question begins is, will it be blue or will it be red? And since the red comes later in the style sheet, then re It will be read because it is more specific.

And then that's the very basic example, and specificity gets rid Extremely complicated based on how nested your selectors are. If you're using an ID, if you're using an attribute selector, if rid. If it's in line or if it's in a CSS file, if it's in another CSS file that's loaded after this one, it it can just become really, really hairy, which is why A lot of people don't like the cascade of CSS, but I'm here to tell you, embrace the cascade, but you just have to learn how it actually works.

Rid And many times, there's systems. One of which that people use is called the BEM. It's b e m. And if you just type in BEM, b e m c s s, you will find

Explanations for this. Skye, you're going against the rules.

You're going against I guess it's not really a framework. I was gonna say No frameworks, no bundlers, no build steps. Oh, yeah. This that is not a bundler. That's not a framework or a build step. This is a No. This is a system For naming things. That's all it is. So that your naming things do not collide with each other. It's not important for your 1st website, But this is the type of thing that will take you from your 1st website to your 100th website and feeling confident. Totally. Totally. Absolutely. Put that in

in your hat and know that when you do hit those issues, BEM is a great way, to go about it. Yeah. Just put it in your hat. That a that's a common say? Yes. That's so we stay in Canada all the time as we wear hats frequently.

Put it in your hat with your maple syrup.

There's also something called exclamation important or bang important, which you can throw at the end of a line of CSS. And you very well may see this early on in your development career because this is the type of thing that people used when they're frustrated and they can't get something to work right. So then they say, you know what? This red color, the the bang important abandons the cascade, and it says, I'm on top. Rid I am the rule. I I I am the thing that this needs to look like.

However, I will say this. As somebody who has been working in CSS for a long time, Do not use important. Just don't. If you need to use important, typically, there's a reason why, and it's not good. Now there is one exception to this.

The only exception to this is if you are working with a third party library that has already over applied some CSS And really just have it know what it does in case you see it in somebody else's style sheets, but it's a definitive thing that if you see it, you can tell there's something winky with the CSS.

Yeah. Sometimes you're gonna be using some sort of third party integration.

You're gonna be embedding rid Some weird yoga booking software, and the client says, can you make it purple? And be like, well, rid This yoga booking software already put an inline CSS value on here. And in order for me to override theirs, I need to do something drastic here. And usually, you can get away with a much more specific selector, And that's probably a better use case, but at the end of the day, you got that pound important, and you gotta gotta ship it. So rid. I probably ship pound important once or twice of a year with my head hung low, and it's usually because rid Either it's my own code, and I did not appropriately plan ahead for that type of thing or you're you're fighting something. But like Scott says, That's one of those things where you should not use it at all. And then as you become more comfortable, you'll say, okay. I need to this is probably a use case where I need rid this thing. Or if it's Friday at 4:30 and you just wanna go home, then you can as well. No. Don't listen to that. That's not valid. No. Invalid.

No. Just fix it later. It'll be fine.

It's a temporary fix.

Rid What else? CSS is we've talked about it being for stylistic.

It does have some very basic interaction in it as well. We're gonna be talking about JavaScript, which is JavaScript allows you to have interaction and dynamic content. However, there are a couple rid. What are called pseudo selectors in CSS, and pseudo selectors are where you, you write your selector, like, re let's say link. Links are a tags in in CSS or in HTML, so you rate a. But then if you wanna style it when somebody is hovering over it, You can use colon hover and then apply your CSS, and that is referred to as a pseudo selector. It is only selecting a rid That element either at a specific time, like when it's being hovered, or a subset of elements, Focus visible, focus within, visited, and target. You're mostly going to be probably using hover and active and focus as well, and those those are both mouse and keyboard, use cases. And, also, don't just do hover rid Because you have to be thinking about your keyboard users as well. If you go to your website and you hit tab, you're gonna see, like, a little blue or a little orange outline on your links. Rid. You can style those with your, focus CSS

pseudo selectors as well. Another thing in CSS, rid. You'll see this very frequently when you're starting to build websites is people using libraries for their CSS. That is bringing in third party CSS.

Now the only exception to this, I would say, would be something like a reset CSS, which makes the CSS more consistent across the different browsers' defaults. Those types of things are totally cool. That's not what I'm talking about. I'm talking about something like Bootstrap or Foundation or Tailwinds. These are our libraries that help you style things.

Now I would say if this is your 1st through 10th website, avoid these things.

Not to say that you shouldn't learn them or play with them or have fun with them or experiment with them or whatever.

We're about experimenting with different libraries and rid stuff here, but, like, for the most part, they will encumber your learning of the cascade. And they'll they'll they can get in the way of learning good CSS skills that will become a problem later on in your career where you won't rely too much on these individual tools. And once they're gone away, you will not have the baseline CSS skills that you'll need. So I highly recommend staying away from frameworks when you're learning CSS. Rid Not to say frameworks are bad, but they do get in the way of learning the actual bits of CSS that you need to learn.

So my my advice is to first learn how to write CSS using just base skills in CSS first

before diving in and picking up a framework. Scott and I have been around long enough where we've probably seen, Like, 3 or 4 generations of these CSS frameworks. In the early days, it was, jQuery UI.

Then we moved into the days of Bootstrap and Foundation, ready. And now we're in things like, Tailwind UI. Still Bootstrap. And, there's a couple other. Rid Yeah. Still, Bootstrap is, like, totally redone in a different way.

And, like, again, these things are totally fine. I I use Foundation on my course player website, rid. But we often see, and I see this myself, is and when I taught beginner c HTML and CSS or I taught the boot camp, you would get all these people ready. Coming in saying, like, can I just use Bootstrap? And first of all, your websites are probably all gonna look the same. You can make them look different. But second of all, the questions that I got from those people were, why is Bootstrap doing this? Why how do I make Bootstrap do this? What class do I need to put on this thing? And the deeper question should have been, like, why is my layout being weird, or what is this weird margin, or where is this padding coming from? Rid It's frustrating because it's really nice to slap a framework on something, and it looks amazing right away.

But, like, again, Scott and I have been around for 3 or 4 generations of this, rid. They will change, and then you're gonna have to learn another framework. So at some point in your career, you're gonna have to learn CSS, and you will greatly benefit from doing it In the early part. Yeah. Absolutely.

And one last thing about CSS before we move on, there is also a new feature of CSS rid Called the CSS variables or custom properties. And now I might not include this in your 1st website, 5 years ago, but I greatly think that In the next couple of years, just about every website you visit will use these, and this needs to be a thing in your in your initial toolset.

So a custom property or a variable is basically the ability to create your own thing and reuse it. So let's say if you had every single wall in the house is going to be a specific color of blue, you could say hyphen hyphen Wall blue color colon and then the value of that. And then anywhere that you wanted to reuse that color instead of having to just Type that color in over and over again. You can now use it via a keyword var, parenthesis, hyphen hyphen, and then the variable name. Again, this is a little bit more advanced, but it is something that you will see if you're playing around on many websites is that double hyphen in the property values. That's what those are. Those are custom properties allowing you to reuse color variables across the site and only define them once rather than hundreds of times throughout your site. This makes, maintainability way easier if things need to be changed. Client says, hey. I need to update, or the the the padding on the site feels a little tight. Instead of rid. Finding 800 versions of that padding in the site, you can now just update the one place where you defined it in a variable and have it update across the site. Re It's a very fantastic feature, but also a very, very modern one at that. Speaking of fantastic features, let's talk about Sentry, which is one of our sponsors here. And Sentry has a ton of fantastic features, and I know this because I use them. I use them just about every single day to capture our errors and exceptions. If somebody, rid does something and it triggers an error and exception on the front end or back end of our website, we get a little alert about That we get it in our table of things that we need to accomplish. We can assign it to various users and say, hey, you. Can you go ahead and fix this for me, please? I might have goofed this up in this PR rid. Because we even get the release that that PR was done in because you can attach releases. You can attach versions. You can even attach user data or all sorts of stuff. And all of that comes in a big old table where you can keep track of it.

So if you wanna try out Sentry for your website, head on over to century.i0.

Use the coupon code tasty Treat, all lowercase, all one word, and you will get 2 months for free. Again, been using the service a long time, and I just cannot say enough good things.

Let's talk about JavaScript. This is the 3rd, like, Larry, Curly, and Moe of of building a website.

Rid. We had HTML, which is the building blocks, CSS, which is the styles.

JavaScript is used to add interaction to your website. It's the rid. The Nam a sizer, I like to call it. It makes your website dynamic. If you want to change bits about your website after rid. The page is loaded. If you want to wait for somebody to click, if you wanna have a timer on your website, if you want to literally any part of your website To be dynamic, that's where you start to reach for JavaScript, and JavaScript is the the programming language. So there's always a big debate of rid Our HTML and CSS programming languages. HTML is not really a programming language because you can't use it to do Really anything dynamic. It's more of a a way to describe your content. It's a markup language. No. It's actually, it's in the name. There you go.

CSS, Kind of a programming language because you can get pretty gnarly in it. You can do some really big animations and and whatnot, but, Generally, it's that's more of a presentation.

What what do you think? Is CSS a programming language? I think it's whatever you want it to be. Is CSS a wooden horse? Who cares? I don't care. If you if you go on to the Internet bike shedding episode? Yeah. On Twitter, you'll just see a huge amount of people arguing if it's a if it's a programming language or not. It's a programming language. It allows you to program the color. There's variables. Who cares? I would say these are all programming languages. Rid If we call it a language, then it's a programming language.

I don't know. It's true. We are pro we are programmers. We are making things, and these are languages we use. And And they don't do everything that everything does, but they are

meant for what they do, if that makes any sense. If I'm writing the English language in my computer program, does that make it a computer program?

It's a good question. Yeah. I don't know.

Anyways, there's kind of, like, rid Two parts to JavaScript. We have the base language, and then we have the DOM. And the base language is a rid. We'll go into that first, and we'll get into the the DOM based stuff in just a second. But the base language is what makes up any programming language out there. We have things like variables, rid which is how you store values. Like, again, we have variables in CSS as well. We just talked about that. You have numbers in math. You have rid. Data containers, things like objects and arrays or data structures, they're often called in other programming languages. This is just a way that you can rid Organize and hold on to groups of data. We have functions, which are which is code grouped together to achieve a certain purpose.

Read. JavaScript, the basic language, has all of these things that allows you to do programming like things. It also has, rid What's called a standard lib? JavaScript is a very small standard lib, but a a standard lib meaning is something that rid Comes with JavaScript and is used for doing pretty common things in the language so that you don't have to write a whole bunch of code every single time you want to. Like, capitalizing a word is a really good example. You don't have to, actually, we don't have a do we have a a function in JavaScript to capitalize? I don't think we do. Rid. To uppercase,

to lowercase.

That's the one I was thinking of. We don't have a capitalization function, but we do have uppercase and lowercase functions built in so that you don't have to write the code to turn something upper case or lower case. They're formatting time and money, alerting the user, logging a value to dev tools, rid Sorting values, randomizing values, rounding numbers, fetching data, talking to a server, all of those things are pretty Low level or common things. The 2 big ones that we recently got were formatting time and money. Those are not in the language for the longest time, and many programming languages have had them like PHP.

And we recently got them in JavaScript, which is pretty cool. Funny fact, if you learn JavaScript, you will, lose time and gain money.

But I'm you know what? It's funny because I I have this whole person analogy where, like, you know, you got this Skin in it's just weird to say that CSS is a skin, but if you have the skin in the clothes, that's the CSS. What is JavaScript? Rid. JavaScript is the person doing something. It's drumming the ball. It's it's catching a ball. It's it's it's doing a dance. It's it's Being interactive is essentially it. It's JavaScript would definitely drop the ball. JavaScript? Oh, yes. I love it. I love it.

Rid Typically, the way that it worked in the past because I say this kind of laughing because we're in a whole another world now. But in the past, you sprinkle in JavaScript ready. To do things on your site that are interactive. You have a slideshow or something, anything that's moving or zip zap zipping around, that's JavaScript, baby. But rid Nowadays, people are writing their entire websites in JavaScript, and they're doing so via HTML and CSS as well still. So it's kind of shifted a little bit, but for the most part, JavaScript is there to make your site do something

other than Sit there and look good. I like it. That's that's a really good, a really good way to put it. I like your personal example here. Part of JavaScript is, Flow Control, which is do this when this. If this is true, then do this.

While this is True. Do this. For each of these 11 items, do this. Wait until this thing is finished, and do that. So Flow control is another sort of basic tenet of the language of JavaScript, and and that's really how you architect your website and your application into

into logic and flow control. Word. It feels like those are advanced concepts.

So, like, if that sounds crazy to you, JavaScript, I think, overall, rid. Doesn't click with everybody for a little while. So Many years for me. Yeah. When you're hearing Wes talk about some of this stuff, and if you're a newbie and this is your first We're talking about this is your 1st website.

Yeah. You do need to to know and understand these things, but they take lots of time to to sink in. Okay? So one big thing about JavaScript is that it is to make your site interactive.

And you have your HTML and your CSS.

We haven't necessarily brought up this concept yet, but this concept is called the DOM. The DOM or capital d o m is the document object model.

Now this thing is basically an object structure of your entire website as the browser is understanding it.

So this isn't your HTML, and this isn't your CSS. This isn't anything that you've written. This is how the browser looks at and understands your website.

And the JavaScript that you write is able to interact with this thing called the DOM. And when you interact with rid. The DOM via JavaScript, it updates in the browser. So if you were to target something and say, hey, you You, this div, this element over here, you you just let's say, you delete yourself. Alright? You're gone forever.

Then that will update in the browser for the user. So that's what you can use JavaScript for. You can target specific things on the page, and you can tell them to do something. Rid. You can apply CSS.

You can have events where if the user clicks on the thing, it can do something else. Rid And these things can be very simple from you click on a thing and it pops up an alert to you click on a thing and the whole, website flips upside down. Who knows? Right? It can be all sorts of levels of of intensity or whatever.

It's available to you as here's the DOM. You have Full reign over the events and the objects in it, and you can move around and do with them as you would like. That's actually a really good, use case rid For talking about JavaScript is flipping the website upside down

because a pretty common thing that you do when learning rid JavaScript and building your 1st website is that you use JavaScript to add and remove classes to your elements.

Well, yeah, when I taught it, I was like, you're just editing your HTML, and that's not technically correct because your HTML is what you write in the file. And the browser parses it rid into the DOM, and then you're editing the DOM, but who cares? It you're editing your HTML.

And what you're doing is you can add and remove classes When you click things or after 10 seconds of viewing the website, and one thing you could do is you could add a class of flipped to one of your divs or to your body. And then in your CSS, you could have dot flipped rotate 90 deg, And you could literally just flip your website or a 180. Yeah. A 180, dead, or 0.5 turn for that sake. And that would be a really good example of these things sort of working together because you see HTML and CSS working together, but you don't necessarily always see JavaScript rid and CSS working together.

Totally. And you can also apply not only just classes, but you can apply inline styles too. I mean, you could do so much with JavaScript.

Rid And one thing that people often use JavaScript for is to go off and get information from somewhere else using the fetch command.

And like fetch, what you do is you say fetch, you give it a URL, and it it's a little bit more complicated than this, but It basically will give you the information you're asking for. You can then take that information.

Let's say you've asked for information from an API or or some data that exists somewhere you say, hey. Please give me this information. They send you back an array of all sorts of stuff, and then you can put it on your website rid by parsing it and then pay like, basically appending it into your HTML via JavaScript. Now this is very, like, High level overview, and this is obviously not the syntax to how to do it, but, that's why people use things like fetch. They they say, hey, Gold. Give me this information, and I don't have it right now, but I want it, and then I got it, then I can display it. And that's how people write services that interact with other websites.

You often see people like they'll say like, oh, I wrote this custom Reddit app that is just Reddit, but without you need a crappy JavaScript that they they wrote.

So you can have all the just the base information, and that's how they do it. They use JavaScript to fetch that information. Read. JavaScript can also be used to create more HTML or

create new DOM nodes. So just as Scott says, you can delete DOM nodes or add classes to them. You can also re Create new ones. You can take text and put them inside of paragraph tags, and then you can inject that into the DOM, and that will then create new. So one basic example would be is if you have a form with an input box, And then when somebody submits that form, you could take the text out of that and then create, like, a paragraph tag or a list item that is then appended to the end of So JavaScript is great for adding and removing, and and that's how you generally, how websites are adding and removing stuff right in front of you without having to reload the page. That's all done in JavaScript.

We also we briefly touched upon events.

There's a whole set of different types of events in the browser. There's Obviously, mouse touch and pointer events. So when you click something, when you touch something, when you click down, click up, there's a whole drag and drop, set of events. You can listen for all of those events, and when those things happen, then you can run run some code. There's a whole set of, events around being ready in the DOM. Those are probably ones you won't have to, hit very often. There's a whole set of events for forms.

So when somebody submits a form or changes an input in a form or type something with their keyboard or uses the up down arrow. There's a whole bunch of events in there, and you can basically say anytime the user does anything, even if the user tries to close the tab, re You can then run code