Lesson #3: Less is More
lol 🤣 less is actually an extension of css that allows you to do a little more with your style. We won't be covering it in this lesson, but I thought it was punny and fitting. 😄
Put me in the container store and I'm in heaven. I LOVE organizing. My mom and husband know how I operate. I think I subconsciously leave my room extremely messy just so I can have an even greater level of satisfaction when I (eventually) clean it.
We're going to condense the files in our project folder. We'll play around with the organizational aspect of the project folder, and just have a fun little Spring Cleaning of our own! 🌸
- Add elements from our
index-lesson2.htmlinto the formattedindex.htmlfile. Don't change the html tags that haveid="..."or"class="...". However can change the text on the inside of the html tags (<title>Code With Madi</title>to<title>CHANGE WHAT IS HERE</title>). Remember, the Inspect tool is your best friend.
Let's go through it, chunk by chunk.
Does the beginning of this file look familiar? We have the <!DOCTYPE html> ... <html> ... <head> ... <title>. Go ahead and change the "Spectral by HTML5 UP" to the text you want on the tab title. Don't change the rest of this section. The <meta> and <link> tags provide information that will not be visible on the page but are used for the browser to understand what's going on.
We are now entering into the body. Notice how the <body> and <div> tags do not close, for the items within the section continue through the file.
But this one got me the first time. I was going through the code and came across this line in the Header section, <h1><a href="index.html">Spectral</a></h1>. When I changed it, I had no idea what I actually changed. I pulled up my local index.html file and found that same line with the inspector. I changed it there, and realized you wouldn't be able to see the change until you scroll down since the nav bar is starts as transparent. Header is also commonly used as the nav bar section.
- When you've completed merging all your content in the
index-lesson2.htmlfile to theindex.html, deleteindex-lesson2.html.
We're going to add our customized css sheet to our project folder. CSS files are read in order of precedence from the top down in the way they are included in the html file.
- Add another file,
betateam.cssin the folderassets/css/.
oh just wait for this fun!!!!!