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.
This section is fun. Feel free to delete the sections that you don't want to use. One really cool thing is that the css is alternating the direction of the section's image and paragraphs (we'll get to that after this). Now another thing besides the grey text that you can change is the "src" path to the <img> tags. The path is the way you computer can navigate to specified file. It can be found on the web with the web url ("http://....") or locally (within your project folder). In this section it is using the local path to the image folder and using the proper pic#.jpg. Add your own images into that folder or another destination (I like putting it in a folder in my assets folder).
Oooh!! Look, things that we've gone over already! Play around in font-awesome for other icons to use that fit your website more than the ones currently there.
To be honest, I might actually take out this section completely in my own website. That's the best part about websites that are sectioned off properly, you can cut and paste entire sections and move them around without messing up the entire page (as long as you keep the opening and closing tags together).
This section of the file is great. Feel free to move around any of the <li>'s around or interchange the text and icons. In order to link the button to your own personal accounts, type in the url into the href="#" where the "#" is. You can enter an email by entering mailto:[email protected].
You won't need to touch this section just yet. You can, however, familiarize yourself with the location of where these files are by following the path. Notice the difference in look between the files with BLAH.min.js and BLAH.js. The .min.js files are called minified files. Pretty much someone just sent you a fully constructed lego creation to put on display - you don't need the instructions. The .js files are javascript files (which we will touch on next lesson), so don't feel overwhelmed when looking at them. 😄
Play around a little bit. Get your content all converted over, but remember there is always time to make it better. Don't spend too much time "perfecting" a section. Understand it and keep moving. You'll be able to build what you want to do much faster if you continue on.
- When you've completed merging all your content in the
index-lesson2.htmlfile to theindex.html, deleteindex-lesson2.html.