Unit 6

Unit 6 - Efficiency & Practicality

Congrats! If you've finished Unit 5 you've finished learning how HTML and CSS are structured, common tags, and also common elements used in websites. Although you do not have to read this unit since it holds no additional tags, elements, etc, it does cover how to be efficient and practical while coding. I suggest reading this as it will get your mind to think in the most practical way when coding. It will save time and energy!

Let's start with the fact that you will benefit greatly from keeping your code organized and in an order that makes sense. Not only does ordering your code make it easier for you to read and edit (especially CSS) your coding, but if you ever need to work with other people, it will be easy for them to figure out how your coding is organized. It's ok to explain how you organized your code but it shouldn't be confusing after a short explanation.

Don't be afraid to put spaces within your source code to help keep things easy to read. As for CSS, I personally like having a new line for each new attribute and having a line between each new tag I'm styling. You can see my style within my coding examples where things are easy to find, read, and edit.

An example of a style or CSS organization is people who keep all their CSS within one style tag if they're doing the style tag method. I personally do this and I just scroll up to add to or reference my CSS and then when I'm done, scroll back down to continue adding content to my website. You could have the style tag come right before or right after the DIV or tag it's styling. Even if I personally don't do this, I think it's not a bad method of doing it. I believe most coders will catch on to the style quickly and be able to understand it.

You probably don't want to put HTML and CSS comments all over your coding but depending on your preferences, you can have more or less. I personally don't label too much in my HTML since the DIV class name or the content within the DIV normally is enough to tell me what I'm working with. However I often put HTML comments to mark the start and end of some containers and groups of tag.

My CSS is a different story. I normally put a CSS comment to mark new pages, important elements, or add important notes. Referencing the last coding example in Unit 1, it is a good idea to label what's in your heading since if you edit the wrong one, it could break the site.

Is using a DIV to style text and content more advanced than using basic text formatting such as the <b> tag? In some ways, yes. DIV requires knowledge of how in-line CSS works and also allows for more customization, however DIVs aren't needed for everything on a site.

Let's begin with an example on this site. The titles such as this unit's title "Unit 6 - Efficiency & Practicality" use a DIV that tell the titles to be bold, 16px in size and center aligned. Could I have used a <h3> tag? Certainly! In fact, I originally used the heading tag because I only wanted the titles to stand out. However, I realized I also wanted the titles to be centered while the content of the page was left-aligned. I could have used in-line CSS to format each title but creating a class that I called "heading" and using outside CSS was more efficient.

Another good example of this is the darker background color that shows up behind coding examples. That is a DIV called "code-container" which sets the background-color and also helps identify what code I used for an example and what code I used for the outcome. I had to use a hex symbol for < and > because if I didn't, the website would confuse coding I want to keep as coding and coding I want to use to show the outcome.

So when is it most practical to use basic text formatting tags or to use in-line CSS or outside CSS? You want to use basic text formatting when it's a single occurrence and as an example, you want to make text bold or italic. Generally you want basic text formatting for small, individual changes. In-line CSS is good for individual changes that require a bit more styling such as you want the text to be bold, italic and you want the background color to be red. Not to mention you can't even make the background color red without a DIV, so you may as well put the bold and italic styling within the DIV you have to make for the background color. The hybrid <style> and the CSS file style of CSS are both used for repetitive DIVs and other tags. An example is the "code-container" DIV I use on this site. The DIV shows up many times over different pages so simply having a class to pull the styling information for a DIV is more practical than doing the same in-line CSS for each area I need the "code-container" DIV.

Let's talk elements such as tabs. I showed you 3 different methods to make tabs: HREF Tabs, Javascript Tabs, and the most common website tabs that links HTML files together. HREF tabs are great for having a box with tabs on your page. Maybe you have different images with a description that you want to show. In my opinion, HREF and Javascript Tabs are very similar. However Javascript Tabs gives you more control and you can make it more fancy with effects. For a full website, having different HTML files as different pages is the most practical.

I will give one example of choosing between two methods of getting a members list layout coded. I started with using DIV to set rows and having other DIV seperate the columns. This worked fine but then I realized that perhaps the table tag would be better. I weighed my pros and cons and went for the table tag method because it gave me more flexibility when editing the members list in the future. I didn't need to worry about the width of the DIVs that seperate the columns. I re-coded the members list with the table method but also kept the DIV method within the CSS and labeled it.

Learning the tags, attributes, and elements is one thing. It's the part you can look up and also memorize. What comes with experience and trial and error is knowing how to organize coding best for you as well as knowing what methods work best for what situation. Not only that, when you code websites you begin to structure them in a practical way and you can imagine the layout and look of the outcome and begin coding without any hesitation. Once you get the basic layout and look done, all you need to do is adjustments and tweaking.

A quick thing about languages such at BootStrap. These languages are good to learn after you have learned HTML and CSS as they are pre-stylized to give you quick elements. You should not try to learn BootStrap first because you need to understand how basic HTML and CSS work in order to customize BootStrap if you need to. In school you learn do not before you learn don't and the same is with BootSrap. In order to use BootSrap you have to link the stylesheet the BootStrap website gives you. I highly suggest that you do not edit the BootStrap directly but rather customize certain BootStrap elements in your own CSS.

That's all I have to teach you, good luck on your coding ventures and remember that practicing with coding projects is the best way to increase your coding knowledge!