Tag Archives: week1

HTML & CSS

Before completing the Codeacademy assignments, I was nervous about the complexity of HTML and CSS. I was expecting to use a series of zeros and ones to create a simple webpage. I was shocked to learn that I could type in phrases such as “<title>, <body>, and <p> (paragraph)” to add headings and content to a page. The basic structure of HTML was very straight-forward and, after a while, I began memorizing the tags. Creating ordered lists and tables was fun but very tedious because each set of data needed a tag. I liked using CSS to customize the pages because, at first, I was curious how my plain page that I created would turn into a decent looking website. I still find it confusing differentiating between class and id and when to use them. I intend to fiddle around more in CSS to become more familiar with the tags.

Learning how to use the web inspector to read a websites HTML was very interesting. Websites that we visit every day like Twitter, Google, and YouTube begin with basic HTML code and fan out into complex styles. After learning the basics of HTML, I was able to identify the tags in the code of a Google page. It’s interesting how all the information comes full circle and you’re finally able to apply the information you learned to the real world.

After using all the new software, I found GitHub to be confusing because of the new vocabulary I was never exposed to. The software layout was kind of confusing as well because I wasn’t sure where things were located. I’ve never heard of a repository, nor did I understand the function of GitHub itself. I see that it can be compared a social media site for web developers to share codes and tips.

The world, at my fingertips

Let me just start with a confession: I spent way too much time playing around with the web inspector and changing people’s website photos to pictures of dogs. The web inspector has to be my favorite part of this week’s lesson. Aside from thinking about how useful it’d be in planning out my next pranks, I enjoyed the web inspector tool because of its potential usefulness as a learning tool.

While I was playing around with the code to make changes that I thought were funny, I also had a chance to identify the different elements making up the html code for the websites. I was able to recognize most elements from the Codecademy lessons. I noticed, though, that there were a lot more things I hadn’t yet gotten to. I feel like I have a good grasp of what I’ve learned, which is progress on an ever-changing road ahead.

I also liked how useful the features on Github were for building on a code. Though I didn’t fully understand the intro exercise when I was doing it, after further examination and meditation, I recognized how useful the branch system is to the user. GitHub is essentially a social media network for web developers. Pretty cool if you ask me.

The Codecademy exercises showed me that learning to code is not impossible. I immediately recognized that there would be a lot of information, but I was prepared this time (I already had a Codecademy account because I tried to learn before). I took notes to create a reference list of tags and what they do. Now, I know that learning to code is just like learning any other skill. When you really take the time out to learn and practice it, it’s not so bad.  I’m excited to see what I can learn how to do next. 

Who ever thought…

Who would have thought that I would have interest in a Web Development class? I have no experience in web development and coding and it is all very new to me. Learning about HTML and the rest of the coding systems gives me insight into the world of code. Using Codecademy and jumping straight into HTML gave me a little worry, but as soon as they continued to go through the steps and explain them, I began to worry less. Once I began understand the pattern of the HTML layout, it became easier as it went on. We were also introduced to GitHub and that also threw me a curve. Although both concepts were foreign, the reading and tutorials both were very helpful and informative.

Learning new codes is introducing me to a new world and I new skill that I never had prior access to. As an African-American women, I believe that we do not know much about this industry let alone, dominating in it. I believe that this is a skill that will help one stand out and if possible, able to excel at the skill. I hope to be able to gain the basic skills when this class is over and be able to increase in my knowledge.

Coding for Dummies(me)

The introduction to HTML this week has shown me that it is the most complicated simple thing I’ve encountered. Even lesson 1 which started off very simple then became into almost a new language (which it is). Although it was a bit tough, I found myself actually enjoying the work I was doing.

After the coding lessons it is quite interesting to see how websites are broken down into a couple of <p>’s, <h>’s and a few backslashes. While it is obvious that if you write some certain letters and numbers together a website will be produced, it is crazy how truly simple this process is and that it can also be learned on a basic level even for free. Although it is said that memorizing these tags tags, can lead to being fairly fluent in this type of coding, it is shocking that there is a belief that something such complex could be easily understood through a basic series.

After seeing the first lessons of coding, I can’t help but think that I was born too late. I feel like if I had expressed an interest in coding while being born 10/15 years before, I could be the creator of Facebook or any other popular social media. The act of just adding more numbers and letters right under previous ones in such a fine tuned manner seems like it only took a matter of time. I do know it is obviously a lot more than the way I’m explaining it, but I appreciated that these lessons even gave me the confidence to feel this way about websites.

 

HT-a whatta?

After diving into actual HTML this week — I have discovered it is not so hard after all. Of course I save my full review for once I am beyond lesson 1 on Codecademy. Lesson 1 went fairly smooth, with only a few times I had to resort to the “solution” button. It was usually simple stuff that should have been easy to catch. For example, I thought I had this code instruction 100% right and could not figure out why I wasn’t advancing. The issue? I was writing under <h2> instead of <h3>. It’s the little things.

It’s been said that if you can memorize the basic seven tags, you can be pretty fluent in HTML. It’s incredible to me, that these seemingly complex sites can be broken down into a bunch of <p>’s <h>’s and backslashes. I understand that writing will produce an output, but I still struggle with why does the computer/site know how to do that. What does that programming look like?

This week’s dive into (intentional) HTML usage makes me reflect on my youth. I’ll start with MySpace. At the tender age of 8, I was customizing my profile’s HTML with different font styles and colors. How did I forget all that? I have seen interesting literature about these types of introductions into HTML/CSS. That they can actually be more beneficial for adolescents to learn how how to code rather than a Codecademy model. Notably, especially in keeping young girls interested in computer languages. I think this could be an interesting thing to discuss in one of our lectures. In my teen years, I was no longer this expert coder but had my fair share of fun with Google’s inspect element. I once added a class called “Underwater Basket Weaving” to my junior year schedule and posted it to Twitter. People got a kick out of that. I’m excited now, though, to use “inspect element” to actually understand what the heck is going on under this screen. 

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?

Profiles:

GitHub:

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”?

HTML Reflections

Codecademy Profile: https://www.codecademy.com/Xof88

GitHub Repository: https://github.com/xof88/hello-world

HTML Reflections

Codecademy was super easy and helped jog my memory of other intro HTML classes I’ve taken. I hardly retained anything from those 1-day courses, except that these 2 lessons probably made a bit more sense to me than they would have otherwise. (This article — specifically the slides and list — rocked! Really pulled the Codecademy lessons together for me into a narrative. )

That being said, I was totally lost when it came to GitHub. The lesson was easy enough to follow, instructions-wise, but I had no context for what I was doing or why? The repository will hold the code for my project? And I will test things uses the branches? Is it a CMS?

I find the web inspector functionality cool, kinda fun, but again, I am at a loss for it’s purpose. Why would I even use it, or need it? Is it simply a learning tool? Or does it help me should there be an issue on my website — flag the problem for me? I’ll be interested to hear some of it’s application in our next class.

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.

Thoughts on Coding for the First Time

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?