/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)
Need Help?
Click me if/once you've completed
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 π₯
