/Frontend/Basics/Languages HTML I'm sure you already know HTML (HyperText Markup Language) is what websites are built on. In fact, if you ever did that trick when you were younger in a school computer lab to change the words on a website, that means you've already edited HTML before! Fun Fact: HTML isn't actually a programming language. As it's stated in it's name, it's actually a "Markup Language" but doesn't meet the requirements to be a programming language. Devtools Just so you can grasp quickly what HTML looks like, if you go to any website right now and right click then hit the "inspect element" button, a whole new window will appear. This is known as the browsers devtools. And what you'll likely see is a bunch of code which is HTML. That's what we'll be learning. This devtools area is actually really powerful for web development and you'll come to befriend it overtime as you can edit HTML and CSS live through it as well as run javascript code. We'll come back to this topic in a more advanced section of frontend. Now onto the content, get your code ready! Content Feel free to slow these videos down and rewind them if you missed something or if you're slightly confused 🏃‍♂️ Fast: HTML in 5 Minutes - Aaron Jack ⚡ 🐢 Slower: HTML Tutorial: Kevin Stravert 👷 Challenge ❗❗ To test if you've really absorved the information enough from the above videos & are quick on your googling feet, without AI try to create an HTML ONLY website/file either following your own similar criteria or following this more set criteria: Movie & TV Shows Review Page: Develop a webpage where you review your favorite movies and TV Shows. Separate the TV shows and Movies into at least 2 different pages (2 different HTML Documents or more if you're creative with it) which you should connect to each other with a navigation link somewhere in the page Include sections for the movie/show title, release year, your review, and a rating Try your best to also add a cover or background image per show/movie You should add a separate home page but it's not necessary if you separate each review into different pages Also it would be funny if you figured out how to add audio of you verbally reviewing your shows & movies to add under each review- +2 Brownie points lol Use lists, paragraph elements, audio (optional), a home image, and links. Also make sure each page has a title element in your head for the tab and try adding a favicon (look up if you don't know what that is. Usually the image format should be .ico) Now this site doesn't have to be super complicated or full of content, just enough for it to at least fill the criteria with 2 or 3 shows/movies each, and have fun with it yknow add some silly stuff if you want and show it off to your friends. If you need to, google anything you might need to help. Some Boilerplate to get you started. (If not able to reproduce easily in VSCode) < html > < head > < title >Hello, world! < meta name = "description" content = "" /> < link rel = "icon" href = "favicon.png" > < body > < h1 >Hello, world! ``` Need Help? It's ok if you're stuck, if you need more help or want an example of what this HTML could look like, here's a link to my code and what the page looks like 👍 (If you take inspiration from this code, try not to use the same site layout exactly and get creative with how you do it) Click me if/once you've completed Once you completed it, let me know if you're comfortable with sharing! I'd love to check it out and see what you've come up with. Maybe you can add a prank youtube redirect in there somewhere and send it to your friends 😂 If you want, you can show me your code by uploading it through form below and I'll check it out! Share with Zach Recap 🔄 Ok so now hopefully you get the gist of HTML and how it's used literally everywhere. Hopefully you were able to successfully write some on your own and let me know what it looks like 😃. Here's a "... in 100 Seconds" video you can use to recap and hopefully you should understand everything he's talking about. HTML in 100 Seconds - Fireship 🔥 Congrats! Onto CSS - (I love CSS) html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}

Learn Full Stack Web Development on the Fly 🚀