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?

HTML, Structuring Page Content

Codecademy Link: https://www.codecademy.com/alliefoard

Test Repo Link: https://github.com/alliefoard/hello-world

After our first class, I was feeling very apprehensive and overwhelmed by all of the content and vocabulary that web editing and creation brings to the table. However, after the readings and assignments this week, I feel like I have gained a basic understanding when it comes to HTML programming.

The Getting Started: HTML & CSS article and Basic Intro to HTML/CSS article were extremely helpful when explaining the tags, and creating a list of the most basic tags that one will use when coding in HTML. The metaphor about a website being like a house was very helpful when looking at the land as a server, and the structure of the home being HTML. It allowed for me to put things into perspective and understand what before was gibberish.

Prior to these lessons and readings, I didn’t really comprehend that HTML and CSS work together. I originally believed that they were two separate languages. When in reality, CSS can be inserted directly into html tags.

As a PR professional I felt a direct connection to the Getting Started articles concept that to introduce web development to journalists and PR professionals, you must think like them, and how they care about headlines, content, and timing. This is very true and will help me in the future if I need to communicate web development with clients. The Getting Started article also touched on how we forget how to code faster than a foreign language, so I did my best this week to space out the time working on the assignments so that I can continually refresh my memory on the subject.

As far as the assignments go for this week, I found the Codecademy to be very hands on and helpful. However, I didn’t fully understand GitHub. Although the formula was easy to follow, I can’t say with full certainty that I understand the need for using it and how it can help my coding abilities.

 

HTML Introductions

As I completed the first two assignments on CodeAcademy, I couldn’t help but be super grateful for the detailed instructions that Codecademy gave as it walked me through each piece of the lesson. I found that the first lesson made a lot of sense and I was able to pick up the concept and general structure of an HTML code quickly, but I struggled more on the second lesson and putting even more specific concepts together. I was able to work through most of them, but I definitely wondered how I would memorize and make sure to not miss tiny details that are required for clean, workable code.

The GitHub activity was simple but confused me, as I wasn’t sure how this fit in with our HTML learning – I am assuming that repositories will be where we place our code once we start writing it, but there was less explanation and hand-holding in this exercise compared to the Codecademy assignments. Following the instructions was very difficult for me, and I hope that in this week’s class we will go over the importance of this program, how it fits in with our programming knowledge, and walking us through repositories and how we will be using the pull/merge requests throughout the semester. I’m also not totally sure if I submitted the right GitHub repo test, but I have included the link below. The GitHub guide link that was provided as reading for homework this week was somewhat helpful, but I think it would be even more beneficial to hear this part of our curriculum explained in person — especially how it will be incorporated into our learning this semester. Hoping for a lot more clarity on this topic in the coming week, and looking forward to diving further into our Codecademy assignment and analyzing each piece that we have learned so far!

GitHub test: readme-edits/readme-edits

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

Codeacademy Rescues Girl Drowning in HTML

First off, I really enjoyed the Codecademy exercises. They are a tad tedious (I’m sure that will increase), but it made a seemingly messy and complicated idea make logical sense. Or, simple sense at least. (My brain isn’t particularly logical.) I’m also glad that I chose to read the articles in order instead of skipping around like I did last week. I liked Mindy McAdams’ piece as it both reiterated what I needed to know from Codecademy and exactly how this process relates back to me–a journalism student. (I’m also not particularly interested to see how Codecademy tackles CSS. I know developers are finicky folks when it comes to the hows of coding, so I’m curious to see how that unfolds.)

OK. The web inspector stuff is mildly blowing my mind. If I’m understanding this correctly it means that I can go on any webpage and then see the code that created it? That’s some crazy talk. Like, I understand that languages like CSS and HTML are totally available to whoever uses them, but don’t huge companies have their own private languages? This has revealed a giant tangled nest of legality questions.

Mostly appreciating this article for the TLDR. Lol. But, also because after the previous article I immediately opened a bunch of webpages and inspected their code. I appreciate being able to now understand what is going on! This seems to be a great learning tool. I can see what it’s SUPPOSED to look like–in it’s cleanest best edited form. I really am curious to delve more into what different code looks like and why. When to use what.

So, is GitHub Flow basically the Slack of GitHub? I’m interested to see–once I actually start creating more branches etc.–if the way they have it set up will be helpful or more confusing to me. It reminds me of being in Video Journalism and having a few different “final” edits of a single video, but rarely making any big changes to the final product. I look forward to learning what is the best practice and why certain branches make it into the master and others don’t. I understand that at my level that the concerns will be fairly cosmetic; however, when a team of great coders are all working together on one project, why do some things make it in and others not? I look forward to class this week!

Codeacademy Profile
GitHub

 

Internet Intro

Reading through the Week 0 assignments was fascinating and really opened my eyes up to the inner workings of the Internet – something I definitely don’t think about on a regular basis, and definitely take advantage of. I especially liked the YouTube video about How the Internet works. Though it was quite simplistic, it gave a good overall view of how we actually receive and send information via the Internet.

As I continued to read through our assignments, particularly the Timeline of Software Languages, I was stunned to see how many I didn’t recognize, as well as when their birthplace happened during the 20th century. It amazed me to see how the beginnings of modern computer technology really stemmed from previous decades of new math and science. I did notice how my curiosity was peaked during many of the sections, so much so that I found myself Googling additional information to learn more about a particular subject or vocabulary term, or even looking for other explanations to help me learn the concept better.

My favorite article we were assigned to read was the Pragmatic Programmer’s Quick Reference Guide. Even though I didn’t quite understand what each of the tenets we’re referencing, it helped me frame what we would be learning in our first class, and definitely emphasized the fact that coding and website design was very precise, clean, and detail-oriented. Code could not be sloppy or hard to follow, which would then make correcting edits and fine-tuning different design pieces easier. I’m sure this will make more sense to me in the future as we learn more and more about the various coding languages and etiquette, but I think this article did the best for preparing my thinking for the first class to come.

I definitely felt overwhelmed about our assignments to come and the pace at which we would be learning and completing them, but I was hopeful and optimistic that I would be able to pick up the pace with the help of my fellow students, and of course Google. 

GitHub link:  https://github.com/lucynegash

Learning the Web’s Grammar

As I did the lessons, I was reminded of the many reasons I do not speak another language fluently. Grammar is a beautiful but challenging thing, especially when you just start to learn it. That is exactly what this felt like.

I started learning French years ago. For awhile I was very good at it. So good in fact that I could translate for friends and family. I could read and write easily and quickly. I even had dreams in French, as strange as that sounds. How did I become so fluent? I practiced everyday. I incorporated speaking it into every aspect of my life.

That is what I will have to do to become at least slightly proficient at HTML and eventually all of the other languages. It is actually very simple. Especially since these are the building blocks, but like with English or French grammar understanding and then remembering where to put what is the challenging for me.

I was reminded of this at the end of each lessons. I thought I had absorbed enough and remembered enough of the steps to know where each line of HTML went. But each time, I had to go back and read through the lessons again before completing the assignment. Both fortunately and unfortunately, Codecademy does not save your progress if you hit the back button at the bottom of the screen. While this was annoying, it was actually very helpful. It pushed me to go back over the lessons I apparently did not understand. It made me work just a little bit harder to understand the grammar.

Thankfully after a few tries it is coming along. I am fairly confident that I could build a basic, not so pretty web page. I am also very confident that I can break it, and hopefully then fix it again.

Learning How to Code: Potential Challenges I Might Face

Codecademy profile

Test repo

Completing this week’s assignments was not difficult. But obviously, I have no experience in coding so I had no idea what I was getting myself into. It turns out that coding is like learning a new language.

After going through all the readings, I made thorough notes on the biggest things I need to learn. I wrote down the tags and the meanings of what terms like <!DOCTYPE html> and <html> meant. Codecademy did a great job of trying to synthesize coding to be as simple as possible, but it still took me a solid hour and a half to complete the exercises. As a tech-loving millennial, I am used to things being fast and instant and I have to remind myself that learning to code will take time. I can’t get good at it right away.

One of my favorite excerpts from this week’s readings were from “Get started with Web coding. Part 1: HTML and CSS,” because the author mentioned that like anything, we have to code every day for us to get better at it. I apply this to all the other skills I have learned in the past: speaking Spanish, singing, playing instruments, and editing video. Obviously, I wasn’t great at them when I started out but after practicing and working at it diligently for a while, those things became muscle memory to me. I realize that if I continue to be diligent at learning how to code, it will be the same for me. We all have to start somewhere, right?

Doing the Github exercise by making my own repository was pretty straightforward. The reading did a solid job of helping me understand how to navigate it better. One thing I love about the Georgetown program is that I have grown from being someone with not a lot of digital skills to learning how to navigate all kinds of programs. After all, that is what I love the most about learning: growing from becoming an amateur to an (almost, maybe, kind of) expert.

“Meet the Web Inspector” was helpful for what we did in class Wednesday. It is going to be so cool to be able to go into a web page and learn how to change things. This will be so helpful in helping me understand how to build content and websites. “How to inspect styles” also build on the details I learned about web development.

 

Positive, Negative

I am currently sitting at a cafe in Oxford, England–a coincidental place to be learning about the history of the internet and programming languages since it’s the academic home of Tim Berners-Lee.

I’m a big history person, I learn by seeing the whole picture. The timeline pages were particularly helpful to me. I once interviewed a developer at this company called Mobelux, and he explained the basis of the programming to me. The punch cards, plusses and minuses–the positive and negative charges and how they relate to 1s and 0s, and how these very tangible things eventually became digital. He explained the hierarchy of programming languages in layman’s terms for me: the base of C and onward. These readings (and watchings) helped me string all of those ideas together in a more comprehensive way, and overall that is the main thing I learned.

The concept of computational thinking is new to me. But, in a way, it’s like saying that the concept of gravity was new to me in the second grade when I first learned about it. I particularly look forward to pondering it more so that the how’s of it become more settled in my head. Right now, it reminds of a wind-up toy that’s been given a task and we have to figure out what the task is and how much to wind up the toy so it can complete the task. I also enjoyed your blog post on the evolution of the how’s of thinking as opposed to the what’s. It is an infinite and ever-evolving thing. (It made me wonder if there’s any sort of predictable pattern that could be identified in history? Then I read your second post. I appreciated the everyday examples by Kim Pearson. I am NOT a math person, but I greatly appreciate math in this way. The labeling and identification of patterns. I enjoy discussing it, but I’m hopeless at identifying them myself!)

My main goals for this class?

  1. Learn how to do this so that I can be one of the more marketable content-producing Millennials.
  2. Be able to hold a work-related conversation with my brother-in-law (a coder) and know what’s going on.
  3. Be able to watch an episode of Silicon Valley and be able to understand more than the general stereotypes as described to me by my aforementioned California-based brother-in-law.
  4. Go back to my old Neopets account and blow my ancient HTML out of the water.

I like thinking about stuff in the abstract. Specifics are sometimes beyond. I hope that this class doesn’t make me pull out too much of my hair. Regardless, I look forward to next week.

My GitHub. (Hopefully by the time you view this my profile pic will have updated.)

 

Analysis

How the Internet Works in 5 Minutes

This was a very informative and artistically graphic video that explains the internet’s functionality. Essentially, the internet is a wire in which two computers can connect. When you communicate to another computer, such as sending a photo to a friend through email, it goes from your individual unique IP address to a router. As it travels across computers, the information is broken down and reassembled into identical wrapping as a packet, which is then sent through a server and finally reaches its destinations so that there is no conflict between computers or that it is sent to the wrong IP. It seems to be very precise and accurate way of communication, especially since it depends on IP addresses that are differentiated and internet service providers. I think this was important to watch because today, nearly everyone uses the internet, yet not many people know exactly how it works, even though it is a huge source of communication that makes other forms of communication, such as letters and mailboxes seem outdated. I think it’s important to know how the internet functions on a basic level of understanding because it has become a necessity in terms of communication, research, and networking, and that there is a lot more precision in terms of information transmission than I previously thought. Knowing how the internet works will improve my own communication online, both personally and professionally.

Timeline of Computer History

The early days of computer history, specifically software languages, have much to do with creating computer programming, coding, and algorithms in order to transmit information. In the first thirty years, different coding languages and information transmission was being innovated by many academics and experts. The goal of the early years seemed to aim towards completely tasks much more efficiently and quickly than human ability alone, such as the ERMA (Electronic Record Machine, Accounting), in which the article says, “in just one hour, ERMA could process the number of accounts that would have taken a well-trained banker nearly 17 workdays to complete.” During the 1980s, software developers began creating word processors, databases, and spreadsheets, while programming languages and operating systems were being developed and improved as well. Over time, the different coding languages, programming tools, and software became more niche, such as Mathematica, a programming language for those in the scientific and engineering fields, being created, or Photoshop, a well-known photo editing software being created for photographers and students. In the 2000s and 2010s, social media rises, which has been a major global influence, while Windows XP and Apple products continue to innovate each year to be more accessible, long-lasting, and updated.

I thought that this timeline was interesting because it gave an educational and detailed analysis of how computers developed from basic algorithms for information processing and transmission to being a cultural staple of networking, fast communication, social media and the subsequent effects on global society (i.e. how it fueled the Arab Spring protests), and information-gathering. Everything seems to be transmitted to online – such as Apple Pay, the mobile banking system, that reduces the need for cash and in my opinion, makes cash seem almost archaic in our increasingly technologically-advanced and technologically-focused and technologically-reliant society that seems to continue progressing in terms of computers and programming.

In terms of networking and the web, the early days of communication started off as military messaging through telegraphy. A major breakthrough was in 1949, in which the modem was created so that computers could communicate with one another through voice phone lines, which greatly improved coverage. Networks begin to develop over time, such a timesharing (first online communities), multiplexers (multiple connections on the same line), and ARPAnet (connects more than one computer together). Most significantly, the internet was born in 1973 and commercial networks continue to boom as well as its communication among them (such as the creation of the email). As time goes on, the internet commercializes and globalizes, which led to the development of online services and Wifi, and eventually the mobile market becomes mainstream. The development of networking and the web is interesting because it began very simply through telegraphs and had a military/political use, but now has expanded and become more accessible and arguably necessary for communication today.

Computational Thinking Part 1 and 2

The first part explores the idea of technology, programming, and web development in the context of journalism. The author communicates that through explaining computational thinking, which is a technological and analytical approach to problem-solving and understanding human behavior though computing. As a journalist, this author is interested in the relationship between journalism and computational thinking, and what shapes someone’s thinking. With the prominence of the internet in our individual lives (in many countries, governments consider the internet an actual necessity for standards of living, rather than an optional amenity for those who can afford it), there is so much information being pushed onto us, so does that mean our mindset is shaped by the internet and accessibility of the web and to what extent? As journalism continues to cross over more into web and less on print, what skills should journalists know, how can they better engage with audiences and reach and maintain audiences through the web, and how can computational thinking propel journalists in today’s industry? How necessary is it for journalists to have the knowledge and skillset of coding, programming, and other computational and analytical skills and experiences?

The second part delves deeper into applying computation to journalism in order to improve its efficiency and effectiveness. The author quotes, “A new way of doing journalism requires new technology to support and foster that innovation. That technology should reach right into the core of our journalistic endeavors, not just touch the periphery.” I agree with this statement in the sense that journalists should familiarize themselves with programming in order to better communicate with audiences. Without web development knowledge, even at the basic level, it reduces the capability for journalists to grow within their industries, as journalism crosses over into web. It is not that print is dying, but that more and more people rely on their mobile devices, particularly apps such as news organization apps, or they subscribe to news alerts on their phones. I believe this indicates that journalists should increase their skillset as this transition continues to grow and evolve over the years.

WordPress software philosophy

The main goal of WordPress’ philosophy is functionality and accessibility for all. It is clean and simple, geared towards the average person and not an advanced computer programmer familiar with computer science and technology. WordPress is committed to deadlines and expansion of the voice of users, even those who are not explicitly vocal with concerns. They value the freedom of distributions and are community-oriented. I think it is important that WordPress aims to be user-friendly, accessible, and simple, without compromising its functionality and quality, and as I previously mentioned, it is meant for everyone, including the technologically-inept and the technologically-savvy. I think it is also important that freedom is a core part of WordPress philosophy, and after reading this article, I have a better understanding of WordPress’ mission and why it is one of the most popular blog platforms for internet users across the world.

GNU free software philosophy

Free software is an important freedom for the internet community. According to this page, free software means that “users have the freedom to run, copy, distribute, study, change, and improve the software.” I think that the freedoms this page mentions, such as running the program for a user purpose and not a developer’s purpose, contributes to basic principles of liberty that allows for free reign, open communication, and both commercial and noncommercial development, while towing the line that crosses into piracy. I think that it is important that the article mentions freedom with the analogy of free speech as opposed to free beer, and provides and moral and ethical guideline for users that protects their individual liberties on the internet, while still being effective, accessible, distributable, and flexible.

Unix philosophy

Unix philosophy is a design-focused philosophy that emphasizes efficiency, conservable, effectiveness, simplicity, speed, and easiness to understand and rebuild or reconstruct if necessary. It’s about designing operating systems and writing programs that are clear, clean, transparent, robust and teachable that does not infringe upon a programmer’s time and energy. Similar to the free software and WordPress philosophies, simplicity is key so user-friendliness is important for its utilization and effectiveness. I think that this is important because the simplicity and accessibility allows for users to gain the maximum amount of benefit from using software programs, and helps me understand the way programmers think in terms of their approach to software development. As a journalist, it is important to know the programmers’ side of information and technology, so that I can better understand how I can communicate.

The Zen of Python

The Zen of Python breaks down the Python software’s guiding philosophy which also emphasizes simplicity, readability, immediacy, accuracy, practicality, sparseness, and explicitness. I think it’s important to be open, user-friendly, integrative, and communicative as a programming language, which not many people can easily grasp. Python’s goal is to push forward “immediate gains in productivity and lower maintenance costs,” which also contributes to the simplification that is in its mission. If software was overly complicated, I do not think that there would be much room for innovation or not many people would utilize it, such as journalists (many of which do not have much knowledge of programming). Journalism shares some of its values, such as immediacy, simplicity, explicitness, and accuracy, which I think would make it more adaptable and understandable to journalists who intend to educate themselves on software development.

The Pragmatic Programmer Quick Reference Guide

This reference guide provides tips to software development. Cleanliness is also an important part of this mission, such as fixing bad code and improving quality. The article focuses on problem-solving and rational fixes for debugging, code control, and abstractions. I think that this guide, which is also user-friendly, admits certain emotions that could arise from unreliable code, broken programs, and extreme focus in details, and how to properly handle them with actual concrete solutions, such as the tip to use a project glossary. For me, programming has always seemed to be a mathematical, straight-line, one-way approach of thinking and problem-solving, so I found it interesting that this guide mentions “don’t be a slave to formal methods – don’t blindly adopt to any technique without putting it into the context of your development practices and capabilities,” particularly because it seems to allow for more creativity, out-of-the-box critical thinking, and flexibility than I previously thought.