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.
This section is the part you see when you first open the page. Anything in grey you can change to your own content. Depending on what you want to do to this section, you can keep the "HTML5 UP" link and direct the words to a different location (I will be taking that <a> tag out).
You don't have to spend your time on it now, but if you want to keep the squares with the icons in the middle the icons can be changed to whatever you want. Looking deeper into this line within unordered list of icons <li><span class="icon fa-diamond major style1"><span class="label">Lorem</span></span></li>, let's deep dive into the words within the class. fa-diamond populates that specific icon of a diamond in the middle of the square. If you want to change that icon to something else, look one the font-awesome site. I really like this emoji 🌱 so the most similar to that is fa-pagelines.
- 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!!!!!