Learning to Code HTML – Final Post

For my networked learning project in my Master’s of Educational Technnology class I chose to learn to code HTML. I chose this for a couple reasons. First, it’s something I’ve always wanted to learn. Second, and more practically, with more and more of my  class resources on the web I thought it would be beneficial to make changes to my websites beyond what sites like WordPress and Weebly generally allow. The simplicty of these sites is nice, but there are times when knowing a bit of code would have saved me time. To give myself some focus my goal was to learn HTML and CSS to the point that I could code my own landing page for my website, from scratch. The stipulation for this project was that I was only allowed to use forums and Youtube videos to teach myself this skill. I was successful in reaching my goal of building my landing page. Well….mostly. Check out the video below for a demonstration of what I learned.

Problems

I ran into a few problems while learning to code. First, learning to code using only forums and videos probably isn’t the best way to learn (at least initially). I definitly found some videos helpful for starting off and found some forums helpful, but there are lot’s of sites that help you learn in a strategic step by step manner. I was often spending time floundering around forums looking for questions that were similar to mine, only to later find a great lesson on Codecademy or somebody’s blog. I see the best use of forums as a tool to use once I’ve figured out the basics of HTML/CSS and can then ask better informed questions to the community. As I mentioned above, I definitely found some helpful videos, but as I got more specific in what I needed to know it was tougher to find videos to answer my questions.

Takeaways

I went from knowing literally nothing about HTML and CSS to being able to understand both and code a web page from scratch using both. The page I created is by no means gorgeous, but from nothing I made something and that was pretty powerful for me. My biggest takeaway from this was not necassarily the web site I created, but all the knowledge I gained in creating the site. Since working on designing the site I’ve migrated my WordPress.com site to a self-hosted WordPress site and feel comfortable making adjustments to the code behind the site. I also really enjoy working with the code and look forward to opportunities this skill will open up. I find myself thinking about code a lot more now and this project has given me the kickstart I needed to really understand webpage creation.

Resources Used

Columns in CSS – http://youtu.be/R5B-UuM6L8A (I ended up getting rid of my columns but racked my brain trying to create them until I found this video.)

Starting off with HTML/CSS – http://youtu.be/VpPM5qlCc5s  (Even though I learned a bit from codecademy, this video saved my bacon when it came to learning how to create the physical documents that would contain my website.)

Forums – stackoverflow.com (I may have briefly used forums hosted in other places but this was definitely my primary resource for questions as I learned.)

Advertisements

Networked Learning Post #2

In my MAET classes at MSU we were asked to learn something new using only forums and youtube/video resources. For this project I chose to learn HTML and CSS with the goal being that I create a “landing page” that has links to all my “stuff” (blog, class pages, etc.). I want to give you an update on how this learning process is going.

My Resources

I started with codecademy.com to begin my learning. This isn’t really a forum but it’s step by step nature was a great starting point. Within it there are question and answer forums that I relied on when I became stuck. I created this reference sheet to help me once I began to make my own site. Codecademy was great for starting off but I knew that if I didn’t take notes then I’d be lost later. Once I began to get some of the language down I started looking for editors to use and someone in a forum suggested Brackets. I’ve found this to be an awesome resource because it instantly updates all the edits I make to the webpage in a quick view window. I got a lot of mileage out of this video which shows the basics of creating an HTML document from scratch. I’ve also used Stackoverflow which is an awesome online community for programmers. Of these resources Stackoverflow and Codecademy have been the most helpful.

The Learning Process: Challenges and Solutions

I started off knowing nothing so even though Codecademy gave me baby steps to learning to code, when I jumped into

2014-07-10_00-50-21creating my own documents I got lost quickly. One of the biggest challenges I had to overcome was figuring out how to make my HTML document communicate with my CSS document. After scouring forums I found a post that wasn’t directly related to my problem, but after I studied the code the person had pasted I saw exactly what I was missing. The line of code highlighted to the right is the key to making the two documents talk to each other.

A more broader challenge is just simply learning a new language. There are syntax rules, different commands, structural elements, and countless other challenges that make this project complex. The more I work with it, like any language, the more fluent I become. The solution to overcoming these challenges is time spent working with the language, but also identifying a goal (designing my landing page) and having “go-to” resources to pull from along the way. This helps me overcome fluency problems as well as broader structural problems with learning the language.

Below is a photo of my webpage from the beginning as well as a photo in it’s current state. Next to
 each is the code that created it. It doesn’t look like much now but you’d be surprised at how much time went into getting it to this point.

2014-07-09_18-16-45 2014-07-09_18-14-17 2014-07-10_00-56-422014-07-10_00-00-53

Here is a short video highlighting the moment I realized how to connect the HTML doc and CSS doc.