Tag Archives: GitHub

Learning a new language: HTML/CSS

When I started the exercises for Codecademy, it took me back to the MySpace and AIM days when we would add in basic code, like bolding or italicizing words, into our basic profiles to make them unique. What I learned was at a different level, of course, but reminded me of the different purposes that coding could have for different audiences. I agree with what Mindy McAdams said in her post—sometimes it’s best to start to learn the fundamentals before diving into a project. While I learn by being hands on, if I were thrown into a project right now to code, I would feel overwhelmed, stuck and frustrated. By going through the exercises, I’m teaching my brain how to think and “speak” in a different language. Now, I’ll have to commit to the practice, practice, practice analogy. In continuing to read McAdams’ article, though, what is the added benefit of having a separate CSS document? Is that a personal preference or is it easier to use and read when collaborating with others? I suspect, that in general, it is cleaner and an easier way to set what a style guide is, but it could get lost.

The browser web inspector is a phenomenal tool. I’ve tried it via Google Chrome, and it’s interesting to see how Google created their webpages. Moreover, it shows how other websites, like Flickr, can embed tag upon tag upon tag to keep your images and content safe from copy/paste mechanisms and free from copyright infringement. This theme is important as I continue to think about the necessity for communicators, like journalists and those in PR, to understand the basics of HTML and CSS. We have to continue to dig deeper to find the truth and to protect what we know to be true.

While reading and completing the exercises, I had a few questions—

  • During the Codecademy exercise, it mentioned that using spaces (or the “enter” key) helps create cleaner code. Why is that the case? Should we be adding spaces as a best practices into our code? If so, where?
  • I am still having trouble understanding the difference between HTML/CSS and programming/scripting languages like JavaScript. What are the differences?



Pros and Cons of Codecademy vs. Github

This week’s assignments showed me on the one hand how simple basic coding can be, but also the complexity of web development. Specifically, I found Codecademy to be clear, whereas GitHub was a bit confusing.

Codecademy, at least my experience thus far, appears to be a very logical, helpful, direct, and clear software that will be an excellent tool throughout the class. The layout of the software is easy to understand; the directions are in plain English, making them easy to follow and internalize; and the layout of the website makes it easy to read the directions while simultaneously practicing your coding so you don’t have to flip between screens (which often causes me to miss steps when I am trying to navigate through multiple pages.) I am excited to see next steps with Codecademy as I found myself discussing with family later that night all of the top-line coding practices I learned in just the first two exercises.

GitHub, on the other hand, was a bit more complex for me. Although the directions were clear, I do not understand the purpose or use of GitHub in the web development world. Step one and two were clear, and I understand the notion that “branches” are different versions of a save file, similar to having the “original” document and then the “original vk edits” and then the final “original FINAL” so you can see the changes along the way. Beyond that, however, I am not clear what the goal of a repository is? Especially given that, at the end of the directions, we combined the “readme-edits” branch we created with the original and then deleted the “readme-edits” version, so doesn’t that mean we lost the tracked version of the document?

I am sure the reason for GitHub will become clearer throughout the semester, and I would be interested in hearing from my fellow students their experience with the software, what they have learned thus far as relates to GitHub, and the role they see GitHub playing in future web development assignments.

Codecademy: https://www.codecademy.com/vkinnealey

Test Repo: https://github.com/vkinnealey/hello-world/blob/master/README.md ** not sure if this is correct? What is a “test repo”?

Getting Started: HTML Basics—and Some CSS

This week’s readings and Codecademy exercises helped to build upon the lecture from the first class by introducing the basics of HTML. When I filled out the pre-course survey that Greg circulated back in March, I recall mentioning that I had little to no knowledge of HTML, CSS, JavaScript, or any programming language, aside from the tiny bit of HTML that I learned while trying to customize my LiveJournal site when I was a high school sophomore back in 2004. I don’t consider that to be legitimate knowledge, and after completing the survey, I was even more eager to enroll in this class in an attempt to gain a deeper understanding of coding.

The Codecademy exercises were helpful and relatively easy to work through using the step-by-step tutorials. Prior to completing the Codecademy exercises, I read the “Really Basic Intro to HTML/CSS for Journalism Students” article, and was excited to learn how to apply the 15 “must know” HTML items mentioned therein. Reading through the descriptions of each of these tags did not do a whole lot in terms of increasing my understanding of the concepts, and I began the Codecademy exercises with a bit of trepidation about my ability to comprehend the basics of HTML.

I appreciate the structure of the Codecademy exercises—especially how I am forced to complete the tutorials one piece of code at a time, which helps me to remember it better as I move onto the next step. If I make a mistake on one part of the exercise, a red dot indicates that there is an issue that needs to be resolved before proceeding to the next part. While I appreciate having this indicator, I found the description of the issue that appears when I hover my mouse over the red dot to be a bit confusing at times, especially to someone who is new to coding. Nevertheless, I persisted and was able to complete the two exercises without too much trouble. I found myself in a groove and decided to move onto the next lesson about CSS, in which I was able to give my simple page a bit of formatting through the application of a basic style sheet. Even though I jumped ahead, this was the part I enjoyed the most because it allowed me to begin customizing the look and feel of the page.

As I worked through each exercise, I found myself having to refer back to the earlier steps in the lesson to ensure that I was correctly completing each one, lest I see the dreaded red dot appear. I hope to memorize and to be able to apply the basic HTML tags—something that Mindy McAdams mentions is important in her article “Get Started with Web Coding. Part 1: HTML and CSS”—within the next few days. Both McAdams and Codecademy reiterate that repetition, practice, and trial and error are key themes when learning to code, and this is something that Greg also told our class. By doing a little bit of coding and/or a Codecademy exercise each day, I can build the muscle memory that is necessary to learn some of the more complicated elements of coding. I know I have only begun to skim the surface of coding and web development, but I am excited to begin building my own site and documenting my progress on GitHub.

My Codecademy profile can be found here.

My GitHub test repository is here.

Web development sounds hard. But if you do it right it can be easy.

If someone told me, a former history major, that I would be enrolled in a web development class I would laugh at you. Then I would log off Twitter, because the trolls shouldn’t get you down. But… here I am. Ready to learn.

This week’s reading was a helpful collection of foundational texts for the class. Since I am starting out with no programming skills whatsoever it is helpful to read about how a lot of platforms aim to be as simplistic as possible.

The idea of simplicity not only as an esthetic but as a mindset was also discussed in Greg’s blog posts. Oftentimes journalists can get bogged down and not see the big picture. Thinking pragmatically and putting effort into making sure you’re being as effective as possible is an important mantra to have at the beginning of this class. I’m sure there will be a lot of bells and whistles that can be added to things, but remembering to stay in a minimalistic mind frame will be important for the class.

It also serves the actions of reporting as well. Sometimes I can get thrown into a tailspin looking for the perfect kicker, or spending an inordinate amount of time on things that a reader doesn’t care about. Getting out of my head and making sure that I’m working smart, and not hard, is an important lesson.

I also really enjoyed the basic primers of how the internet came about, and how it functions. It’s really easy to forget all the channels things have to go through to ping back and forth, and having a healthy sense of how things came to be from a historical and, well, factual standpoint can only help. When learning about a whole new field, a solid foundation of how we got to where we are today is important.

Overall, this coming semester looks like it will have challenges, but web development is a very exciting thing to dive into. After all, I use the internet for 95 percent of my job, so understanding how it works, and how we strive to make it simple is a good starting place.

GitHub profile: https://github.com/savvylee11