/Frontend/Basics/Languages

CSS

CSS (Cascading Style Sheets) is actually so nice, with it you can make any boring black and white inline HTML into a nicely organized and properly shaped group of items with all your website stuff. Not only is it used to add color to html, but with it you can position elements automatically in fancy formats like a grid format for example and even make your site completely change depending on if the user is on mobile or a browser.

Some Basics

CSS does have a specific syntax which you'll see in the videos but here's a basic rundown of how you'd make a colored box for example:

• make a CSS file (styles.css) in the same folder as your HTML file and connect it to the HTML file by adding <link rel="stylesheet" href="styles.css"> to your HTML header
• make a div in your HTML body with a new classname of your choice: <div class="classnamehere"></div> (you don't have to put anything in the div element since we're just making a box)
• Now head to your styles.css file and style this class
  • To style a class that's in your HTML you grab all elements carrying your class' name like so: .classnamehere {} with your styles going inside the {} (your classname should be the same in the HTML and CSS file for them to correlate with each other)
• Now you start adding styles in the curly braces ({})... Here's a CSS styles cheatsheet which has possible styles you can add to an element under properties.
• For now though we'll only need width, height, and background-color.
• To add them to your class you would format it like this inside your CSS document:

.classnamehere{
width: 20px;
height: 20px;
background-color: red;
}

• notice how there's a colon between the style property and it's value like 20px

Now you can fiddle with that a bit but to get a more comprehensive rundown now knowing a few bare bones concept take some time to watch either the 5 minute fast paced CSS video or the 20 minute intro for a slower paced version for a better understanding (or both)

Part 1 - The Core

• Again, feel free to slow these videos down and rewind or pause them if you missed something or if you're slightly confused. Also they show the actual code so you can pause there to try testing the code yourself.

🏃‍♂️ Fast: CSS in 5 Minutes - Aaron Jack ⚡

🐢 Slower: Learn CSS in 20 Minutes - Web Dev Simplified 👍

Challenge ❗❗

Restaurant Menu

• Try making a nicely styled online menu for a restaurant.
• You can name the restaurant whatever you want and add whatever wild items to the menu but it should at least have:
  
  
  • Unique fonts (you can find cool fonts at https://fonts.google.com/ and it gives shows you the CSS needed to use the font on your elements)
  • Nice boxes separating each food section (at least 3 with some drinks)
  • Some color to make it pop while still being legible (That last part is important)
  • Also some images here and there like real menu's or just a background image on the whole thing (or both)

• Here's and example of a simple layout with just HTML and CSS (notice how they also added shadows to their boxes which is a good concept)
• You may not be able to position things very nicely without flex yet but that'll come next

Come back when you're done!

Part 2 - Orientation

If you recall back to the "CSS in 5 Minutes" video, towards the middle he mentions something called "Flexbox" and "Grid" which "deserve their own video", and I completely agree. These 2 very common yet important concepts are seen in almost any site. They have to do with layout and solving the age old question of "how do I center this div" (A web development meme). With flexbox, you'll be able to align child elements of a container and center them automatically with very little code to make everything have a great layout. Same with grid

• Although in all honesty, I'm not much of a grid user although it's very powerful I never needed it since flex is capable of the same things and not as complicated. But I do use flex on nearly all of my documents/websites

Flexbox

First we'll look at flexbox since it's an easier concept to understand and use. Also there isn't a need for a fast and slow video as this one video really covers it very well and is about 8 minutes. Keep in mind so not to get confused: flex is for positioning elements within a container.

• The pace of this video is perfect for you to be able to recreate what he's doing realtime, so you could follow along since flex is something that you usually get used to as you use it over time

💪 Learn Flexbox CSS in 8 minutes - Slaying The Dragon 🐉

Grid

• I'll be honest, I never use grid and it's slightly complicated so if you don't understand it or feel that flex is more suitable for you, be my guest and ignore its existence. It's still good to at least see what it's like though because you might use it eventually if flex-wrap isn't your style or if you're making a bento box layout (those are actually pretty cool)

🍱 Learn CSS Grid - A 13 Minute Deep Dive - Slaying The Dragon 🐉

• If you're more interested in grid and want a documentation style interactive guide to it, check this out

Challenge ❗❗ (Continued)

Ok now you have gone through Flexbox and Grid and hopefully you're ready to give your online menu a nice layout!

Fancy Restaurant Menu

• Use your already existing menu (Or make a copy for before & after) but this time give it a nice layout with either Flexbox or Grid
• Have nicely separated sections for a variety of food/drink types making it at least somewhat aesthetically pleasing and making sure each container has some room to breathe

• Keep in mind: with Flex, you're able to have containers within containers in order to properly organize all of your elements. Don't be afraid to flex all over the place!!

Recap 🔄

Woohooo now you can make sick looking websites, which although they aren't functional yet (without JavaScript), are still pretty slick! Hopefully your menu came out nice but if not that's alright, either way I'm sure it's a great start 😃. Here's a "... in 100 Seconds" video you can use to recap and chill with since you'll likely understand everything he's saying now and can finally say you're starting to dabble in the world of web development lol.

CSS in 100 Seconds - Fireship 🔥

• Also although realistically you may never use certain aspects of it, here's a CSS animations fireship speedrun just for fun!

CSS Animations in 100 Seconds