<commit_before><commit_msg>Publishing post - Learn.co Month 1: with a review of HTML, CSS, and Bootstrap<commit_after>---
layout: post
title:  Learn.co Month 1: with a review of HTML, CSS, and Bootstrap 
date:   2016-05-18 22:43:15 +0000
---


A little less than a month ago, I was accepted to Flatiron School’s Learn.co program, and I have programmed every single day since. So far, I have completed four courses covering an orientation module, Ruby, GIT and Github, and HTML & CSS. HTML and CSS took perhaps half of that time, and was both difficult rewarding upon completion. I have dabbled in HTML and CSS in the past, but usually gave up because of my inability to identify an error somewhere in the code and could not move on in my learning. HTML and CSS courses I have tried before were difficult for me, because I was learning on my own without having someone to ask questions about issues I was having. Generally, it’s pretty easy to find an issue with syntax through a quick online search, but if something is wrong on your machine, then it might be hard to know what went wrong if you haven’t seen a specific error before, or know how to identify the problem. 

**The Program **

*Why I chose the program*

In my first post “The Computer As a Workshop”, I talked a little bit about my personal philosophy on coding from a relative outsider’s perspective, and why it’s important for me to learn coding to have a creative and professional outlet for some of my ideas.

 At various points in the last five years, I made lukewarm commitments to learn how to build webpages and web-based applications, but never really followed through. I tried reading tutorials, watching videos, taking free courses from CodeAcademy (which is great) and other sites, but a bad system configuration, a lack of time, or some other roadblock always took me off track, and I eventually I gave up every time. Nobody likes a quitter, and I don’t want to be one, so I did my best to identify my pain points and to do my best to eliminate them, and in my case, Learn.co does that by having on demand help available most of the time. My interaction with the community and the staff has been awesome so far, and having that strength behind me makes it easier to dive into the code and figure out what’s actually going on.

*The Community *

When I was working on the Intro to Ruby course that is used for pre-admissions assessment, I had a few questions that I couldn’t answer on my own. I jumped in the chat window, and each time, within one minute, another student further along in the program or a staff member would jump on to help me figure it out without just giving the answers away. Nobody writes the code for you since the challenge of working through the problem is an asset that must be gained— they help you troubleshoot more effectively, which is an awesome force to have as you move through the program.

Another student jumped in a Google Hangout with me and helped me figure out a piece of code because it helped him become a better programmer. Regularly, the staff help me define my own thought process rather than imposing theirs on me, which allows me to write code that is becoming simpler and more efficient as I move forward.

The honest truth is that you can learn how to code in many different places for free, and the information is free. If you are able to do this, that’s awesome. If you benefit from real-time support and like to talk things through with real humans as you are facing the problem, then this program is worth the price. Just make sure you actually need that type of support before making the investment. Through years of trial and error, I knew I needed a community.  A lot of the pain of configuration can be solved through a quick chat with someone who has been there before.

**CSS & HTML**

After learning some Git, GitHub, and command line basics, the program dives right into HTML and CSS— the part of web pages that you actually see in your browser. HTML and CSS don’t really do too much, but they show you almost everything that you see. 

If you want a quick and free intro to HTML and CSS, try this free course out from Code Academy to see how the pages you use every day are designed. If HTML is the frame of your car, then CSS is the car wrap, your set of rims, neon ground effects, and window tint that you use to make the car your own, or if you are a fan of more modest, understated design, CSS makes it possible to have the details that you don’t want people to notice. Simply, it’s a powerful way to style your pages. 

*Specificity *

CSS specificity has been difficult for me to wrap my head around at times. CSS specificity allows the programmer the ability to create properties that range from very general applications on a page to extremely specific instances that might be exceptions to rules, or are applied only in very specific cases. I find it difficult to implement due to the lack of results that sometimes comes while trying to implement a certain style adjustment. 

As a practical example, one of my assignments for Learn.co is to design and deploy a profile page using a template that has already been created. The easiest way to complete the assignment is to copy the template from another student and replace the photos and biographical information with your information. I managed to mess something up during this process, resulting in uneven columns, misplaced footers, and upside-down images in the banner and profile picture. Since the mistakes were unintentional, I was not able to pinpoint what the mistakes were. Even the W3 CSS Validator passed the test, but the errors still persisted until I realized I had a mistake in my specificity. Certain rules that I wanted to affect a part of the page were not showing up, and it was because of specificity errors. 

The only way my understanding of these rules are rote memorization of which classes supersede others. I have a few graphics and links that I found elsewhere that you can view here: 

	•	Graphical Intro to CSS Specificity 
	•	Mozilla’s guide to Specificity 
	•	CSS Tricks
	•	A calculator you can use to determine the specificity your CSS
	•	The W3 School’s Guide to CSS
	•	Fish Specificity for you to hang on your wall

I’ve made a lot of improvement, and this just takes time. Read as much as you can, try it out, and when you hit a roadblock, take a short break, reset, and get back into it when you clear your head. You have to dive into the details for it to make sense.

**Bootstrap**

After learning the basics of HTML, CSS, and responsive websites I was  pumped to learn Bootstrap, because it saves so much time helping you develop good looking websites by giving you the code for common features on webpages, like buttons, navigation, layout, forms, and about anything else that you want to put on when you begin making webpages. 

Bootstrap was developed as a style guide at Twitter to help their developers quickly create webpages that looked good enough to release. Everything is open source and documented well, which makes it easy to figure out once you understand what’s going on under the hood with the HTML and CSS. It’s essentially a collection of code that you can copy into your files that will give you a nice scaffolding for your website without having to create it yourself. It’s a good way to get a quick start on creating visually pleasing pages.

One of the only criticisms I have seen of the framework is that, because of its ease of use and popularity in the web development community, many web pages end up looking the same because the same toolbox is available to everyone. This creative issue can be overcome with an awareness that the paradigm created by Bootstrap exists, and that rules are okay to be broken if you have a good reason to do so.

Breaking these rules comes back to specificity. As a best practice, it’s best not to modify the CSS code in Bootstrap, but rather to create a new file to override the Bootstrapped file with your own CSS code by using the rules of specificity. The most difficult thing for beginners who don’t entirely grasp specificity is learning how to override the defaults to customize the pages. Feel free to use the resources above to help you move forward, and good luck!
{'fraction_non_alphanumeric': 0.02673279303253901, 'fraction_numerical': 0.002661183016813838, 'mean_word_length': 4.2, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6443730', 'n_tokens_mistral': 1923, 'n_tokens_neox': 1839, 'n_words': 1469}