Category Archives: 2019 Spring class

Git Gud

Leave a reply

This week was interesting. It was good to have the chance to apply all of the HTML and CSS skills we learned from previous lessons. And I love how user friendly the lessons are after we complete them, allowing us to review past work. Formatting the page and figuring out what I need to add (tags, for instance) was not the most difficult part, though.

I think the most difficult part was figuring out all of the necessary steps for GitHub. I went through some tutorials online, and most of them pointed me in the direction of a few steps not discussed in class (Terminal), and it is a bit challenging when you know the major steps but a few minor steps in between are fuzzy. Regarding the readings, I think I was able to get everything up OK with refreshers.

Going back to the lessons, I think it was the “A Closer Look at CSS” lesson that provided a great example in the beginning about such a seemingly minor step (not linking the HTML and CSS pages) taking away the design of the entire page. The page on selectors was really helpful, as well. It answered questions I did not yet have, and it gave shortcuts (p, h1 designating the same thing instead of two different ones) that seem minor in the beginning, but offer large returns regarding time saved in large projects toward the end. And noting that we use !important as sparingly as possible is also… important. As it could be near impossible to figure out why, given the natural evolution of a webpage over time, specific elements are unnecessarily stagnant.

I think I just need to reread some of the lessons, especially the GitHub tutorial, to solidify and mature the seeds that have already been planted. I’ll do that some this week, in addition to the assignments for this week. Hopefully this is just an introductory learning curve that, just like FromSoftware games, I have to get over to git gud and be successful.

Git In It

Leave a reply

CSS was exciting to get to figure out this week. We have been working on HTML and the content of a page. Getting the chance to take our work a step further and develop a design for the content was interesting. I did the Codacademy lesson “A closer look at CSS,” but did not finish it and, when I went back the next day, I had to upgrade to pro so I did the Khan Academy exercise. I found the Khan Academy one very useful and a better way of learning for me because it was easier for me to listen to someone narrate than to read the instructions in Codecademy. However, I prefer Codecademy’s exercises because they are more interactive and they walk you through everything step at a time.

The piece about responsive web design that we had to read for class this week is a very crucial one to understand. It is extremely important to understand your audience and cater your website accordingly. User experience is one of the most important areas that businesses need to focus on when providing a service for their customers. The way the website looks and the way it is designed are necessary for that. A business must conduct research to know who their target audience is and the medium used to access a business’s website. For example, if your business is attractive for millennials, they are most likely to use their phones to access your website. You need to make sure your web pages can be viewed well on phones. Since web pages are originally set up for desktop view, it is important to make sure the viewport is suitable for phones.

As for the GitHub portion, it took me some time to figure out GitHub desktop. I was confused in the beginning because I thought Sublime and GitHub are connected. I realized after googling and reading more that Sublime is one of many text editors for code and GitHub is a hosting site to upload our work and share with others. My goal in the next couple of days/weeks is to get more comfortable using Github. 

Everything Matters!

Leave a reply

This week’s assignments and reading point to one significant element in programming and coding for me: “every single thing matters.” It was so evident how a single omission can disorganize and in some cases throw the entire piece of work out of order. If there is one single  lesson from this assignment, it will be to practice regularly. There seem to be so many rules and elements for both HTML and CSS that it requires consistent practice and review.

The biggest challenge for this week was linking my HMTL file to the CSS in Sublime. I watched a series of tutorials using the link tag but to no avail. The CSS tutorial from Khan Academy worked the magic for me. I began by creating a style tag (<style></style>) and immediately the expected changes would be displayed. I also had a challenge with adding a downloaded image element to my HTML. The HTML file in the browser captured the image but it wouldn’t display. It was a bit frustrating at first because all the elements seem to be in the right place. After watching a few tutorials, I realized it was not peculiar to me. The experience from GitHub seems pretty straightforward, but I have yet to understand how it can be effectively used in my future projects.

I reckon, I’m beginning to get a sense of how things are and that’s pretty exciting and fulfilling as this is my first time doing anything web related like this. Being able to somewhat comprehend the HTML hierarchy and somehow getting bits and pieces of the CSS rules and how they relate gives me a lot of hope for what is ahead, as I look forward to learn from everyone.

Welcome to my MySpace

Leave a reply

Good Design(?)

Well, I made my first “homepage” using HTML and CSS, and I have to admit I was immediately transported back to my parents house in the early 2000s. I never used MySpace, but I loved Xanga, a blog-based social site that allowed users to edit their own code. I spent hours researching the correct HTML for important things such as:

  • Background music that played when a user visited the site
  • Cursor options that transformed the mouse into small animals and objects (there was likely malware associated with this)
  • Font colors and styles, etc.

I imagine for many students my age, this was the first experience with HTML they had. What struck me the most in this week’s homepage repo assignment was how complex a simple, elegant web page must be behind the scenes. Yes, it was relatively straightforward to change my font to Comic Sans and add a gif of Neil Degrasse Tyson. However, those notably beautiful webpages (Atelier AM, American Documentary, and others here) must have been painstakingly designed to be beautiful on a range of devices.

CSS Stylesheet

I decided to link an external stylesheet to my HTML file, rather than use inline CSS stylings. The Codecademy exercises on CSS made me appreciate how quickly CSS styles can accumulate, and how much more organized it felt to have them all in one place. (Though I will admit I wished Codecademy had hinted to alphabetize the styles for ease of use—which seems like a no-brainer best practice.)

I struggled for a while figuring out how to link my stylesheet to my HTML file, and finally realized it was a combination of incorrect href syntax AND incorrect CSS syntax, so that even if the files were linked, the changes weren’t appearing in my test browser window.

After a few episodes of trial and error, I was ready to give up on the separate stylesheet and just add in-line CSS styles, but I knew that for my final project I would want them to be separate, and I would be better figuring it out now rather than later. I’m glad I did.

A note about GitHub:

I can appreciate the utility of a tool like GitHub to manage the uncountable tiny changes and bug fixes/additions to code. The mechanism of committing changes is simple enough to understand, but I’m concerned that the more changes you commit, the harder the code is to actually read. It takes practice, I guess…

The beginning steps of building structure

1 Reply

The highlight of this week in terms of assignments was being able to do lessons on Codecademy! For the longest time I was not sure what HTML and CSS stood for or the difference of these languages. I am happy to say that I finally discovered that HTML stands for Hyper Text Markup Language and the purpose of this language is to structure content on a page. As for CSS, it stands for Cascading Style Sheet and it is the style that dresses up the structure. These languages go hand in hand and often work together to create a beautiful web page. I think the reason why I have always been hesitant of code is because I was afraid of not understanding the purpose of each language. However, these two languages have names that speak for themselves once you know what each letter stands for.

In Codecademy, I was able to pick up on the material pretty quickly. However, I felt like the experience of doing these lessons had similarities to learning a foreign language. During undergrad, I studied Arabic and had to learn different rules in order to read and write. With HTML, there are different headings and tags that can easily go wrong if you do not follow the HTML rules. It is similar in learning Arabic, it is possible to completely change the meaning of a word by not following the rules of which letters go next to each other. It is important to continue practicing a foreign language daily in order to exercise this muscle in your brain. So far, it seems like it will be the same case for HTML & CSS. I feel determined to build the structure and let the rules flow after I continue to practice and revisit these lessons on Codecademy in the future.

 

Programming Language 101

Leave a reply

Just as I was last week, people who have never had any close contact with programming are afraid that it is extremely difficult. However, it is worth realizing that programming is nothing but a process of learning a new language. Obviously, beginnings are always difficult, but once we learn our first programming language, studying new ones becomes easier. Right now, we are not learning programming because of the need to change a profession, but because it is important to guide our minds to a resourceful way of thinking, which is essential in the field of communication. Even if our careers are/will not be related to programming, these compact skills will help us to better understand the problems that can stand in our way in the future.

What’s more, learning programming involves not only acquiring new knowledge about coding in different languages, but is also a great way to work on ourselves. It is as effective as solving logic puzzles such as sudoku, which helps to train your mind. In addition, programming teaches consistency and organization. Namely, while writing a line of code, we must plan and implement next steps necessary to achieve a goal, which includes application of the most efficient solutions.

To conclude, a good programmer has to be like a writer. He/she should not only know programming languages – most of all, one must be able to think in an analytical way, to break down a problem and prepare component elements from which a given program can be later developed. Just as a writer creates his work to make it interesting for the reader, the programmer creates a program that is supposed to be as effective as possible. Thus, the ability to understand a problem, which often involves the need for interdisciplinary thinking, is essential. However, it all comes down to a programmer facing the need to translate the gathered knowledge into a programming language.

Cause and effect panels greatly helped my understanding

Leave a reply

Those multi-panel windows in Codecademy are honestly a genius and elegant way to show how what you do to the underlying code affects the displayed webpage. After learning a few basic tags and following the lesson instructions, it was interesting to toy around and go off-script to see how things changed. Only once or twice were the instructions difficult for me to follow and I had to use the hints.

It speaks to the economy of HTML that you can only know how to use no more than a dozen tags and be relatively well-equipped. With some basic research I found that there are only about 250 HTML tags that anyone would ever really need to know — this makes me more confident that learning this language will be a lot easier than I originally anticipated.

It was also revealing (and strangely powerful) to use the inspector tool. The example in the “Meet your web inspector” showed how it was easy to download a picture that the site perhaps wanted to prevent (obviously you could also screenshot anything). Not to skirt the ethical boundaries of the technology, but I did experiment with the tool a bit… I used the web inspector to delete a site overlay on The Boston Globe website when the paywall hit, but the site didn’t load any part of the article. The inspector did come in handy on the Wall Street Journal site, which will load the lede and second paragraph, but obscures the second paragraph making it hard to read. Using the inspector though, you can easily read the first two paragraphs within the HTML. I suspect that with more poorly-designed paywalls, simply deleting the paywall pop-up could reveal an entire article. Or we could all just start paying for subscriptions to newspapers…but I digress.

 

We built a house this week

Leave a reply

This week was the first week to delve into the first exercise of coding and learning more about HTML. I really enjoyed the exercise and the steps I took to create the final outcomes. It was a little frustrating in the beginning to get something wrong because I forgot to add a comma or a “>”. Then I came to realize that every single symbol, letter, and space matter — which is crucial in our field of work — and the importance of attention to details in coding. Also, the organization and the neatness of the code and the spaces used are essential to the final product. I am very excited to get started with CSS because I am really interested in developing more knowledge about design, which is as important — if not more important — than the content.

One of the readings shows a great analogy of building a website and building a house. The analogy helped me understand the layers of work that go into putting together a house apply in the same way we put together pieces to have the final product of a website. This understanding of structure helps journalists in laying out their work and creating that final piece of work.

I found it most interesting to learn more about the browser’s web inspector. We started the exercise in class but I got more into it this week with the readings. I was playing around with different pages and looking at the HTML code. I found it very helpful that you can hover over the code and it will highlight on the website to show you where it is. I am also fascinated by the back-end work of websites.

I am excited to be learning more about the various structures of a website in the next few weeks and see how these are out together to create the final product.

Learning the basics to code

Leave a reply

Coding is an important skill more than ever today. It seems to be a skill employers are looking for more from aspiring journalists today. Learning the basics to it today reminded me of learning how to do different math problems back in high school or college. Not because the basics to coding are as complex, but because the process of learning of them is similar. Learning how to do a math problem usually starts by watching the teacher complete a similar problem on the board. Often, you will follow along and understand the steps the teacher is taking, nodding along as the teacher arrives to the answer. But, once you sit down to do a problem yourself, it is impossible to evaluate how well you grasp the material. Without the teacher’s help, you’ll come to understand what confuses you or what steps you’re forgetting.

Similarly, when I was going through the Codecademy exercises, there were times when I would run into trouble and use their “show me a hint” feature, which was usually helpful. But if I was still stuck, I eventually noticed that you could ask for the solution. While I appreciated that feature when I was stuck, I also think it offered a bit of false comfort. I could nod along and tell myself I just had a minor error and *basically* had everything right, that is not actually the case.

With coding, minor mistakes have enormous consequences. Or so it seems to a beginner. Forgetting to close a tag or include a quotation mark can make the difference between the code functioning or not. As we go along, I am trying to figure out the best way to learn through Codecademy — when to struggle with the code and when to ask for a hint, or when to struggle with the code and when to ask for the answer. Moving to the next slide was helpful in itself because, just like a math problem, sometimes you need to just look at a new problem.

Leave a reply

My main takeaways from this week’s readings were simplistic descriptions and analogies by Mindy McAdams on programming. Her conversational approach to programming and code were particularly refreshing and easy to grasp. The next article and its Website=House analogy and it’s picturesque slides made it more comprehensible. Also the introductions of elements, attributes and structure of tags (open <p> and closed </p> tags) and how the concept can be related to our everyday lives was so helpful.

I think the most abusive tool for me this week was the web inspector. I have umpteen times checked and changed the HTML of several websites just to see how what will happen and it was a pretty cool experience :). Sarah disagrees lol. Codecademy’s split screen for instructions, coding and display shows in real time how the tag hierarchy relates to each other and how a glitch in the arrangement can alter the whole hierarchy. Their website is beginner-friendly, with hints to help you along the way should you get stuck on an exercise. GitHub seem pretty straight forward with the creation of a repository and committing to projects. I hope to explore and learn more about its operations as the course progresses in the weeks ahead.