Tag Archives: Codecademy

Another trying week

Leave a reply

This week was a culmination of putting a lot of the languages we’ve touched on together. And it went poorly. The slideshow project was an interesting take on putting all the pieces together but it still felt overwhelming.

I’ve found that learning all of these concepts has been hard because we haven’t really gone through them together. In a different class I took last semester, Data Journalism, we went through a lot of technical platforms like SQL and Python, but we went step by step together. Only then did higher level concepts start to make sense.

It would be really helpful if we had class time where we went through things like how to make a slideshow step by step, so we could see how something came to fruition, before we are expected to create one on our own. Like Greg said in class, teachers do teach you how to write a sentence, but they don’t release you into the wild to then write an essay. To take that metaphor we had in class to its logical conclusion, you’re leaving out important building blocks like essay structure, paragraphs, and thesis statements. I feel like we only cover abstract concepts in class, only to have questions moved past because we don’t really go over assignments or take a look at the building blocks we need.

While some could say that Codecademy is what bridges that gap, I’ve continued to have problems with that as well. Currently the interface seems to delete sections I’ve done or doesn’t add a check mark to things to say items have been completed. That’s been really hard, especially when I’m trying to figure out why some lines of code are right or wrong.

I understand why a lot of the class is geared towards making sure we can figure out how things are broken on our own, but I feel like I’m operating at a huge handicap every week because I don’t quite understand what the best practices are to begin with. It would be really helpful to work on foundational things in class so that way outside study can be used to hone things, not figure out what square one is.

As for my Midterm, I will be interviewing Matt Callahan. He works at The Washington Post as a designer, but mostly does what we call “enterprise” templates. These templates are for our bigger stories and are always custom designed using jQuery and JavaScript.

 

jQuery, more like jDisaster

1 Reply

This has been a very frustrating week to say the least! While I was able to complete the jQuery Codecademy lessons before the last class, I have been unable to follow along with how to create the slide show. I felt unprepared. My current code doesn’t work, at all. I’ve spent three days trying to figure out how to do this, so I’m hoping someone can look at my jQuery/JavaScript code and help me out! I think the hardest part was finding out where to start because it wasn’t as straight forward as some of the other assignments and wasn’t part of the Codecademy lessons. That being said, I went into this assignment thinking I had a good understanding of jQuery (not JavaScript), but now I feel as confused and behind as I did when we learned JavaScript. I’m not sure what the missing pieces are that I don’t understand, but there are definitely a few. Something I kept asking myself in researching guides on creating a slideshow was if I should put the images in a list or not? Everyone seems to do it differently. The captions were there when I initially ran the code, but are now hidden. AHH!!! It was not a successful coding weekend this weekend. I’ll have to give it a try next week and hope that things start to make better sense and get easier! (And I hope next week doesn’t involve 9+ hours of work!)

Midterm: For my midterm, I will be interviewing Lauren Soni who is the Webmaster and web developer for HHMI’s research campus, Janelia Research Campus in Ashburn, Virginia. I don’t work directly with Lauren and our paths only cross during team meetings since HHMI has a webmaster and web developer for our own site. Lauren has been a web developer for about 3 years and is also in the process of completing her Master’s degree at Northwestern University Online. Through our interview, I want to learn a few things—1) learn how Lauren transitioned her career from Biomedical research to web development, 2) her advice for learning different types of code, where to practice and how to begin, 3) talk about her involvement in creating a responsive site for Janelia and other major projects.

JavaScript – Help!

1 Reply

The past two weeks, I’ve spent most of my time attempting to learn the building blocks of JavaScript and JQuery. This is by far the most difficult part of Codecademy thus far and has taken me the most time to comprehend and complete. I was able to conquer the first two lessons of Codecademy with a little difficulty; the thought process behind variables made sense. Once we began adding in Functions, strings, and loops, I started to lose the literal connection between JavaScript and a functioning website. I learn by doing and through visualizations.  In order for me to comprehend something, I have to be able to see what the end result is of something…and is the reason why science has never been my strong suit. I am hoping that in the next class, we can take a step back and look at the building blocks of JavaScript from the beginning. While I valued the time you spent teaching Java Script from the w3school code, I think I need to start from the beginning, looking at the big picture and then at each individual piece, because it all builds on each other.

In an effort to not fall behind too quickly, I found a few resources that I thought were helpful in learning more about JavaScript. You can find them linked below. I hope they are of use to the class as well! Please let me know if anyone finds any other helpful resources.

Additional JavaScript Resources:

  • HTML Dog
    • On HTML Dog, they have different lessons and pages that go through similar content that we learned on Codecademy. I appreciated how easy it was to follow along and didn’t feel as lost as I did when going through the Codecademy lessons.
  • YouTube Tutorial
    • I found it helpful to see someone else in action writing the JavaScript code and connecting it back to how it works on a website. That being said, it isn’t the most thorough video.

The second half of the week, I started working on the midterm interview by searching on LinkedIn for potential connections with web developers. Would interviewing a web developer from HHMI’s sister research campus be too close of a connection? I am nervous about this assignment. I haven’t interviewed anyone for a story since college and know that my journalism skills have fallen flat since then. I’m looking forward to the challenge and what I’ll learn from someone who has made a career out of web development.

First Coding Experience — The Struggle Is Real

1 Reply

This week’s assignment taught me several important lessons, the first being that this class is likely going to be the most challenging course I have taken thus far at Georgetown University. As a student in the Public Relations and Corporate Communications program, I have been relatively well equipped for my classes thus far – crisis communications, public speaking, event planning, digital analytics are all skills I use in my daily life. I thought that web development, although not a skill I use often, would fall in line with these other classes as a sort of ‘second-nature’ skill. I can now say, after two weeks and numerous hours staring at my computer screen, I was wrong.

To begin, coding is very rational, as Codecademy explained the abbreviations are largely based on logic (e.g. px stands for pixel), the codes are straightforward (e.g. font-size equates to the size of the font), and almost all of the codes open and close with the same pattern (e.g. <tag> content </tag>). Yet, the system is so, incredibly fickle and specific, that I find myself struggling to understand the nuances between a <div> and an <id> and how an <h1> tag is different than a <div category =intro> if there is only one intro tag in the document? (I could continue with this stream of consciousness for pages, as I struggled with these differences for hours, but I will spare you that pain.)

I also struggled because I would then try to Google the questions in my mind, but I found I did not have the correct wording to find the answers I sought. I could envision in my head the piece of code I saw in previous Codecademy exercises that I was trying to recreate, but my search queries of “how to make a div connect to CSS” or “how to make a picture fit in the textbox CSS” resulted in nothing of use, which was frustrating.

In public relations and writing, there is no one answer to any solution. There are numerous ways to write a speech, pitch a story, structure a corporate campaign, etc. Thus, I think the exactness of coding is something that I will struggle with, especially given that I do not fully understand why one code works whereas another doesn’t, even if they serve (to my knowledge) similar, if not identical, purposes. I am hopeful that as my knowledge of coding grows, this confusion will subside and I will find it easier to differentiate between tools, tags, labels, numbers, etc.

At this point my biggest question is better understanding the purpose of a div, and how to use that div, and the offshoot of a category or a class, in CSS coding.

First Coding Experience & Responsive Design

1 Reply

Responsive web design:

My current employer, The Howard Hughes Medical Institute (HHMI), is completing their two-year “responsive redesign project” of our external website. It wasn’t until 2015 that our leadership understood the important of UX design and the increasing use of smartphones as our primary web browser. Through the first reading, it explained how we need to consider not only the minimizing of a website on a computer screen, but also consider different size phone screens, tablets, etc. The width of the screen can alter the layout of the page, including the number of columns on a page, images and the content on the page. W3C created a list of media queries to help web developers when creating responsive designs.

Important concepts found throughout the readings:

  • Mobile browsers are the present and future. Web sites should be flexible enough to be able to adapt to new technology.
  • Media query: allows web developers to target certain device classes and “inspect the physical characteristics of the device rendering our work.” (from Responsive Web Design)
  • Fluid Grids
  • Flexible images
  • Viewport Meta Tag: <metaname=”viewport” content=”width=device-width, initial-scale=1.0″> (from w3schools) tells the web browser how to control/scale a webpage’s dimensions based on the scale
  • Design for a mobile application first.

Experience with coding homepage prototype:

If we are being honest, coding the homepage prototype took longer than anticipated and I have a new-found appreciation for web developers and complex websites. I can’t imagine the time and planning that would need to go into creating a webpage that is both responsive and complex. While coding for the homepage, which I created for a food blog, I ran into trouble translating some of what we learned through the Codecademy lessons to the assignment. I struggled most with the lack of being able to see in real time the effect that one small piece of code was having on my site and went into panic-mode when two lines of CSS code altered the entire feel of the site. My biggest struggle was finding ways to create exceptions to rules that I had created within the CSS code early on that affected the layout of the page once I began adding content. I couldn’t find an easy way to create rule exceptions within the code and instead found roundabout ways to add in additional lists. How can we create rule exceptions?

Secondly, what I struggled with this week was adding in an image. I spent close to two hours trying to link an image I had on my desktop to the code and have it display correctly. Eventually, I decided to choose different pictures that were already uploaded to my Facebook page and used those URLs instead. Despite searching endlessly on Google for an answer to my question, I still am unable to link an image that is on my desktop to the HTML. Does anyone have any experience or advice for how I may be able to do this?

Finally, uploading to GitHub was no easy feat. I had created a repository using the desktop app, but it wasn’t properly uploading the files I had created using Sublime. Through Google, this article and the help of my fellow classmates (thanks, Jaclyn!), I was able to upload the files successfully. The article has been bookmarked for future use.

Looking forward to creating a responsive design and using other coding languages, I’m nervous, but excited to see what I can create!

Learning a new language: HTML/CSS

Leave a reply

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?

Profiles:

GitHub:

Pros and Cons of Codecademy vs. Github

Leave a reply

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

Leave a reply

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.

Thoughts on Coding for the First Time

Leave a reply

GitHub assignment: https://github.com/tatyanaberdan/hello-world

Codeacademy profile: https://www.codecademy.com/tatyanaberdan

To start off, I want to reflect on my experience coding for the first time with Codeacademy. Although I’ve heard from many people (and although we said as much in class last week) that learning to code is like learning a new language, I was surprised at how true that turned out to be as I was going through the Codeacademy lessons. It felt like learning the basic sentence structure of a foreign language. I was also surprised at how easy the program made it to learn the different HTML tags, and I really like that the site gives you the ability to practice each element you learn. The Mindy McAdams reading emphasized the importance of consistent practice when it comes to learning to code — specifically, not spending more than two days without coding — and practice will definitely be key for me as I go through this process. I’m looking forward to tackling bigger projects and learning how to create more features with HTML and eventually the other languages.

I’m also excited to start using GitHub for projects so I can get a better understanding of how the site works. I found the tutorial and assignment difficult to follow without an actual project, but I think that will change once we start assignments.

In terms of the readings, the house analogy in the Rowan University course reading was the part that really stood out to me. It was a simple way of putting all of the different elements — the server, HTML, CSS, etc. — together to understand how they interact with each other. However, I’m still a little unclear about what databases are and how exactly they serve as the foundation in the house?

The reading on web inspectors also stood out as a good basic intro to using the tool. It built on a lot of what we talked about last class. While I think I understand web inspectors, I’m still confused about the definition of web scraping – what is web scraping used for? Is the data web scraping collects on the code and structure of the site or on the actual contents?

Still confused, but less so.

1 Reply

The weeks that we have been doing this have shown me that I can be getting better at coding, while constantly being confused about one thing or another. As soon as I get the answer to something I don’t understand, the next thing we do reinforces the idea that I am learning via the “trial by fire” method. (Lots of fire.)

The JavaScript course 3 and the jQuery courses 1 and 2 were actually easier than I had experienced the past two weeks. I am really pleased with how I am progressing through the Codecademy courses and I can see how much I have learned. Even though I still feel like I have jumped into the deep end of the pool, I am excited to put my (limited) experience into practical application and see how I do.

I really want to get into some actual web-based setup, so that we can see tangible results (including massive failures!). I want to attempt to make some things work on my website, realize that they don’t work, try to figure out how to make them work, give up and Google why it’s not working, and then laugh about how simple the mistake was that I made. This is how I learn best (hey, don’t judge me, haha!).

The only part I am confused about for this week was the web hosting and setup of our sites. I got the GoDaddy and installed WordPress on it, but I didn’t do anything that I remembered from class (I wasn’t able to do them in class because my laptop wasn’t able to handle the “newfangled” software, and so I wrote everything down). I’m not sure if we’re going to go over it again in class, or it was a “FYI” kind of thing, or if we will use it later?

I was a bit upset that GoDaddy couldn’t sell me the domain I wanted, and there’s nothing even on the domain, so I wanted to take it over, but alas, I think I will be able to move on from it.