Tag Archives: HTML

Coding for Dummies(me)

Leave a reply

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?

Leave a reply

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. 

Started From The Bottom, Now We’re Here

1 Reply

It has been a wild summer semester. I walked into this class (a week late) with unknown expectations for the class, the semester, and the material. To be honest, my only interactions with code were back when we had AOL Instant Messenger and MySpace and I wanted to customize something on my profile. Now, after being able to take a step back, I feel like I have learned so much more. I definitely would not have been able to learn what I did if I attempted to learn code on my own–I need the hand holding at the beginning to get comfortable. While I still feel like a total noob when it comes to code and coding, I also feel a sense of accomplishment for being able to at least (somewhat) understand HTML, CSS, JavaScript, and JQuery and PHP, and being able to create my own site using developer code. Like, what?! I’ve realized that coding truly is another language and I have a greater appreciation for the internet, dynamic and interactive sites and most importantly the web developers on my team. I didn’t comprehend the work that goes into their daily tasks.

As I look back on the class I think there are a few things that I would change to help my fellow Georgetown students on their web developer journeys:

  • Offer this class during a Fall or Spring semester. I think the extra weeks and shorter class times will make all the difference.
  • Continue using Codecademy. I think that was my saving grace.
  • Start the WordPress project from the beginning. Find a way to incorporate the final project from the beginning.
  • Work through Codeacademy-like lessons together in class. W3Schools helped, but I think being hands on would be even better.

I really enjoyed this class. I feel a sense of pride knowing that I have made it out alive on the other side with only several bumps, bruises, and maybe a few tears later. I hope my coding journey doesn’t end here and that I’m able to continue learning and developing these skills, but more on that in the next post!

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.

 

Google is a Girl’s Best Friend: My First Attempt at Coding

1 Reply

This week’s prototype homepage assignment was my first attempt at creating a webpage using HTML and CSS. It would be a huge understatement if I said that I struggled with this assignment. I decided to create a prototype homepage for a personal portfolio site/blog, and creating just a single page with HTML and CSS took a great deal longer than I had anticipated it would. I was grateful that I had completed the Codecademy lessons 3-8 earlier in the week, as it gave me more time to work on creating the homepage over the weekend.

I encountered a number of issues when coding the HTML and CSS for my homepage, the first being perhaps the most simple element of all—linking my CSS stylesheet to my HTML code. I’m going to be honest and say that it took me more than an hour-and-a-half of troubleshooting to resolve the issue and to correctly link my style sheet. This brings me to the title of this blog post—Google really is a girl’s best friend when attempting to code. I cannot begin to explain how many times I Googled various aspects of HTML coding and CSS styling while working on this assignment. I found that referring back to the Codecademy lessons was often not enough, and that I needed additional assistance from the w3schools site and other sources to correct my code. Some of the issues I struggled with included figuring out how to add margins around the text and image on my homepage; applying the classes, IDs, and div concepts to my HTML; and creating and styling a navigation bar. The latter concept was referred to during the Codecademy exercises, but I had to enlist the help of Google, a w3schools tutorial on navigation bars, and a classmate (thank you, Amalia!) to fully comprehend how to create a navigation bar at the top of my site. I’m still not entirely pleased with the formatting of my navigation bar, as I wasn’t able to figure out how to increase the space between the various links/tabs. I hope to resolve this issue in the coming weeks. I also want to figure out how to get my h1 headline and navigation bar to appear on the same line, rather than stacked as they currently appear on my homepage. Does anyone know how to do this?

I read the articles on responsive web design after I had begun working on my homepage. These articles reiterated the “mobile first” mentality that seems to be pervasive among programmers and developers. With the majority of sites being accessed on mobile devices such as phones and tablets, it is important that a site’s design accounts for the different screen sizes that viewers are using to access the information. This “mobile first” mentality is also something that public relations and marketing practitioners consider when creating content for their target audiences. Making your client’s or brand’s content easy to access from a variety of devices ensures that your audience will be able to access the content using the method that is most convenient to them, thereby allowing it to reach a broader audience. I’m still a bit confused about the concept of media queries and how to apply them in my code, but I am sure this is something we will cover in class in the coming weeks.

I was able to upload my prototype homepage without issue using the GitHub desktop app, but I did find that the interface of my desktop app was different from what was featured in the “Getting Your Project on GitHub” article. Despite this, I found creating a new repository and adding my code files via the GitHub app to be relatively straightforward.

Here is my GitHub prototype homepage repository.

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:

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?