Jun 7, 2017

My Coding Journey: The Ultimate HTML and CSS Cheatsheet

Copyright 2017 BritishPandaChick
This week is the last big lesson in Skillcrush 101 and CSS. If you take Skillcrush 101, lessons 15 and 16 are both listed for Friday’s lessons in week two. I decided to split up these two lessons for this series. Floating and layouts can be tricky in code and needed its own separate post.

Lesson 16 is mostly a review about the best practices for CSS. This lesson goes over similar tips I mentioned when I talked about the best practices for HTML. Instead of just reviewing the best practices, I decided that today’s post would be a final wrap up of HTML and CSS. This post will go over some tips for working with CSS. I will also introduce you to the span tag and show you how to use it in your code.

There will not be a links section in today's post. Instead, I have created a resource section with different items you can use to become better at HTML & CSS. This list will still include the familiar links I have shown in every post throughout the series as well as all the previous posts in the My Coding Journey series. It will also include other resources Skillcrush suggests throughout the course. Remember if you need any help or would like to review any concepts, check this section first.

If you missed the last post in the My Coding Journey series, here's a quick overview of what happened in lesson 15. This lesson is one of the trickier concepts for newbies since it is about layout and floating. These concepts help make an organized and tidy website so your users can easily complete one of the goal actions. They help developers by saving them time along the way.

Once a layout is decided, developers use floating to put elements right beside each other. This can be tricky since floating can misbehave from time to time. Skillcrush goes over some ways to troubleshoot your floating elements. You can find these tips in that previous post. Check the resource section of today's post to learn more.

It is time to begin with CSS best practices.

Time is very valuable regardless of what you do. In order to make the most of your time, everyone tries to do a task quickly and correctly as possible so they don't have to redo every task. This is very important for developers regardless if they are newbie or a senior developer at Google. Developers want to make use of their time efficiently and effectively as possible since there are many things that need to be done to make a website ready for the web.

Lesson 16 focuses on some best practices or actions Skillcrush students can take with their CSS in order to manage their time effectively so they can avoid problems in the future. These are things developers can do, avoid, and never do. I recommend looking over these lists as you double check your own code so you can fix some of these mistakes as you go. Let's get started by looking at the things you should do.

1. Code needs to be nice, neat, and tidy.

You learned about this during HTML, but it still applies to CSS. Organization is a must for easy to read code and is nicer to look at. It might sound hard to accomplish, but it is easier than you think. The ways you can organize your code are:
  • Indent CSS properties
  • Create space between each code block
  • Utilize uniform, descriptive naming conventions
  • Alphabetizing your CSS properties in each code block


2. Make sure your code is short and easy to understand.

People love anything that is short and easy to read. It is only natural for developers to love short and easy to read code. There are plenty of reasons why, but this is mostly due to processing time and how long it takes a website to load content. Lots of code means it will take lots of time to translate everything to the browser which won't make your users happy. Skillcrush has a few tips to help you shorten your code in way you as well as other developers can understand what you are trying to do.
  • Use classes for styles that repeat
  • Pick short names for classes and IDs
  • Combine code blocks and declarations if able to.
  • Shorten declarations
If you are just starting your coding journey, shortening your code might seem overwhelming for you. That is ok. Skillcrush suggests skipping this for now and focus on understanding your code. Ultimately that is the main goal for any developer. As you get more comfortable with coding, you can start focusing on shortening your code and concise.

3. Organize your CSS just like your HTML.

Computers are just like you and have a specific way they read information. When they see HTML, they will read the code from top to bottom. This is the same approach used to read CSS. Therefore, you should write your code in the same manner.

Skillcrush suggests starting with your global styles on a style sheet. These are styles applied to everywhere on a website. Next, you put the styles for how they appear on the page. After global styles, I would have an area for all style changes for the header then the body. Inside the body styles, I might be a little bit more organized and style specific sections before I end with the footer styles.

4. Start using comments keep your code organized.

Be prepared to start using comments in your code. They are helpful for anyone reading your code since it lets them understand important ideas or sections. Comments don't appear in the browser so they won't affect any styles you have on your elements.

There are a couple of ways to comment in your code. A one line comment would like this example here.

/* This is a one-line comment. */

If you need to comment lots of items, it would look like this one.

/* Hello world!
This is a comment with multiple lines.
See the difference? */

Comments are versatile and can be used everywhere with lots of ways. You might see developers use comments to call out specific code for header, footer, and other important areas on your site. The goal is making your code easy to read so you can find things easily.

CSS best practices don't just apply to things you should do.

Now that we looked at the best CSS practices, it is time to look at some of the best practices developers never do. Skillcrush has a small list of things you should never do.

1. Use an image what you can do in CSS.

Throughout the past few weeks, you've learned lots of ways to use CSS to style elements from how to use color to changing the dimensions. As you style your website, you want to use all the CSS properties, tips, and tricks to help you instead of using images. For example, I should just set a section with a background color with CSS instead of using a background image of a color I want.

2. Reuse class names.

Using the same class names over and over again in code is a quick way to cause problems in your code. The computer will have no idea how to tell the class names apart so you'll be getting an error message very quickly. Skillcrush suggests using different class names for these situations, but they also recognize you can still reuse class names as long as you attach them to an HTML selector. This might look in your code like this.

p.blog-post {
    font-family: Roboto;
    font-size: 17px;                    

article.blog-post {
     width: 600px;
     float: left;

I still am using the blog-post class name for these elements, but I added the HTML selector before the class name to let the computer know which class names I'm referring to. This might seem tougher for newbies just starting to learn how to code, so I recommend sticking to naming your classes differently. It will be much easier and will be less of a headache for you later.

3. Overwrite your code.

Remember how computers read CSS? We discussed this earlier in how you organized your code and how you should write your code the same way computers will read it. When you overwrite your code, any changes you make at the end of a document will override or change the code you made at the top of your code.

This sounds silly since it is basically writing the same code multiple times. It can also be a pain for developers when your code has over thousands of lines of code. As you overwrite your code, that means you would have to sort through every line to make changes. If you must change styles, it is best to change the style at the source and find the original in your code.

What should you avoid?

Now that you know some of things you can and can’t do in your code, it is time to talk about things you should avoid doing in your code. These aren't necessary right or wrong, but Skillcrush discourages students from using these in your style sheet unless it is a last resort.

1. Negative margins

This is one of the practices I am guilty of the most when I code and need to improve on. We talk about spacing and margins often and how these areas will be the place you play around the most as you style a website. In some cases, you will not want a space between elements or have them be very close. It is easy to think negative margins can be the solution to this problem, but they actually can create more problems for you.

The biggest problem with negative margins is overlapping elements. Developers don't want overlapping elements. Instead of using negative margins, Skillcrush suggests students play with the padding or an nearby margin. For example, I would try setting the padding to zero and playing with the opposite sides of the element's margins. If that doesn't get me the results I want, then I can use negative margins.

2. Fixed heights

I talked about this often when I explained width and height. Fixed heights don't make good user experience. Remember a fixed height leads to a scroll bar for any text that might overflow from its container. It is best to avoid this as much as possible.

3. Using borders on lots of elements.

Borders are great on a website, but there is a limit on how many you should use. Too many can throw off all your measurements. Plus it would just look odd seeing a bunch of borders all over a website.

Skillcrush suggests using borders sparingly per page. They suggest using borders on one to two elements. If you need more lines to separate your page into different areas, try other ways to keep things organized such as playing with the spaces or using the background color.

4. Floating too many things.

This is another topic addressed in this series and is something newbies can easily do as they are learning how to code. Floating too many items can create lots of problems with your site. When I built my first website as a developer, I floated way too many elements which resulted in a messy website in the browser. When it comes to floating, it is best to float only when it is necessary and as little as possible.

5. Floating to the right

You might have noticed in my previous post that I floated my items to the right in some of the sample code. That isn't a good CSS practice. Floating elements to the right can mess up all the hard work you've done on your website very easily. If you want to work in responsive web design, floating right will give you a headache as you translate these layouts to your site. Avoid the headache by just floating left as much as you can.

Let me introduce you to the span tag!

As we wrap up HTML & CSS, it is time to introduce you to another HTML tag you can try in your code. The span tag isn't used as often as div tags, but it is a nice trick for developers to know as they create websites. A span tag allows developers to add style to sections of inline text. You might use this tag to give a little bit of style to a few words.

First, you need to add the span tag in your HTML. I created a brand new website with sample code for my HTML file. I want to have a few words italicized and have the color purple. I set the span tag around the text I want changed and give the tags a class. I named my classes "emphasis-1" for all my span tags.

Copyright 2017 BritishPandaChick

Once you set all the span tags in your HTML, it is time to the move to the style sheet and use some CSS. Inside my style sheet, I took the class name "emphasis-1" and used the CSS properties to get my text italicized and change the color from black to purple.

Copyright 2017 BritishPandaChick

Now it is time to check and see if everything appears in the browser. Below is a screenshot of what I see in the browser. Although you are seeing only a section of my sample code, you can see from my HTML sample code how the span tag around the "add purple and italicized" text has some style while the rest of the text is left the same.

Copyright 2017 BritishPandaChick


Resource time!

Skillcrush provides a ton of resources for their students to use if they want to be better at HTML & CSS. You will find a lot of these resources as well as ones I recommend in every post throughout this series.

CSS Tricks
Mozilla Developer Network
Codrops CSS Reference
DevTipsforDesigners YouTube page
Una Kravets official site
Lea Verou official site
CSS Ninja Official Websites
Mozilla Developer Network


Skillcrush blog post Intro to Sass
Skillcrush blog post How to Edit Inline CSS for Your Blog
Skillcrush blog post You've Learned HTML & CSS, now what?
Skillcrush blog post Project: Make a Logo in Pure CSS

My Coding Journey posts on HTML & CSS

BritishPandaChick post Newbie's Guide to HTML
BritishPandaChick post How to Put Lists, Images, and Links on a Website
BritishPandaChick post Quick Guide to Div and Structural Tags 
BritishPandaChick post Quick Guide to Iframes, Meta Tags, and Best HTML Practices
BritishPandaChick post Newbie's Guide to CSS
BritishPandaChick post CSS Guide to Fonts
BritishPandaChick post Secrets to Working with Color in CSS
BritishPandaChick post How to Completely Change Borders and Backgrounds
BritishPandaChick post How to Use Dimensions and Box Model on a Website
BritishPandaChick post An In Depth Guide to Classes and IDs
BritishPandaChick post The Beginner's Guide to Layouts and Floating


That's a wrap on CSS! You learned some best practices for working with CSS and what you should avoid as much as possible. Although this post is mostly a review of things you should and shouldn't do in your code, you did learn about a brand new HTML tag. I showed you how to add a span tag to your website so you can add some style to small sections of text. If you would like to learn more about CSS, there is the resource section with lots of great blogs, articles, and more available for developers and newbies starting to learn CSS.

We may be finished with CSS, but I'm giving you another break to practice using span tags and check out some of the resources in this post. This a great time to practice your coding skills and everything you've been learning throughout the series. I haven't decided what the next post will be. Right now, I have a few options I am considering for the My Coding Journey series. These options include.

1. Finishing Skillcrush 101.
The last portion of Skillcrush 101 teaches students how to code and launch a website. Skillcrush uses this portion to walk students through the process of building a website.

2. Skillcrush webinars
I am a big fan of Skillcrush webinars and often attend them live when Skillcrush hosts them. Last year, Skillcrush did lots of webinar summits where developers, Skillcrush alumni, and more spoke about different topics in tech. I have a bunch of webinar recordings Skillcrush sent me saved and I would like to write up some of the highlights from each session as part of the My Coding Journey Series.

3. Project tutorials
Building projects is one of the ways to get noticed in tech. Although I showed you how to build a navigation, I am considering doing more project tutorials especially ones featured on FreeCodeCamp and Codeacademy. You will learn how to build a variety of websites and web applications.

4. Dive into the next Skillcrush course.
After Skillcrush 101, the next course is Skillcrush 102 which is Introduction to JavaScript. You'll learn the basics of JavaScript and I'll walk you through the steps of some of their projects.

If one of these potential routes interests you, let me know in the comments which option you like the best. In the mean time, I'll think over the break what direction I'm taking this series and reveal my choice in a couple of weeks on what the My Coding Journey series should be about.


All images belong to BritishPandaChick.

No comments:

Post a Comment

Important Announcement: Future of The Original BritishPandaChick

This week's topic for the Ambitionista Twitter chat was all about reinventing yourself. During the chat, we discussed what this means an...