Talk is cheap. Show me the code.

Leave a reply

Although this week has been filled with a lot of hard work, I believe that, through the projects, I was able to learn a lot of valuable information. There is a saying that the only way to become a good programmer is a great amount of practice. Thus, I like the fact that this field of study does not demand too much theory, but it requires practice to consolidate acquired knowledge.

The main assignments for this week were Codecademy’s lessons and prototype homepage on GitHub (using Sublime Text). The first one allowed me to gain the basic understanding of the direction I should take my GitHub project. The second platform has taught me how to play with the code. The homepage project itself was interesting, but I felt a bit unsatisfied, because the weekly lessons did not teach me much about the visual side of an HTML document, i.e. the CSS. As I was able to learn, even experienced programmers do not have everything memorized, which is entirely not the point. The art of programming consists also of the ability to utilize research and search for knowledge on the web. Moreover, learning from one’s mistakes is the most effective way to gain knowledge. Thus, by seeing my work “change” on the Google Chrome browser, I was able to tell if there is something wrong in my code or if I need to make other corrections in order to improve readability.

To conclude, I feel like I made a lot of progress in my programming studies. However, I will be going back to some lessons on Codecademy or Khan Academy, so that I won’t lose the progress I’ve already made. I believe that learning everything at once is not a solution. There is also a need for systematic work on developing programming skills, not coding from project to project, once a month or several months.

Coming together

Leave a reply

This week for me represented a big step forward. I was quite nervous to build a prototype homepage from scratch — I was pretty sure I was unprepared to hand-code a full webpage. The assignments for this week ended up taking me more time than I anticipated and that — combined with starting a new job and some light procrastination — pushed me past the deadline.

But however long the work took me to do, in all the work ended up not being as difficult as I feared. My fingers started to type the correct tags with ease and my page slowly but surely came together. The lessons taught some important new information, especially styling conventions, that for the first time for me felt as if they were logical extensions of what we’ve already been learning.

It did take me a little while to figure out an ideal workflow when actually using Sublime Text in conjunction with GitHub. I found myself working past where I should have entered a commit, and therefore felt I had to cut out some code, make a commit, and re-enter it in Sublime Text and make another commit. I also wanted to check my page before a commit, so I ended up writing some code, popping it into a browser, refining it, and then committing. Just logistically, it’s a lot of jumping around on a laptop screen, so once or twice I got a bit lost between different windows on my laptop.

I also started to get a sense for how I should use CSS — I can see how a separate style.css page would be almost required for a larger page. But for our purposes for this assignment, using inline CSS between <style> tags felt more natural and easier to manipulate.

 

Practice, practice, practice!

Leave a reply

As I glanced at the syllabus for this week’s assignments, I could not help but my find myself stressing out about creating a prototype homepage. Might I add, this feeling lasted for majority of the week and resulting in me avoiding Web Development homework at all costs. On Sunday morning, I decided it was time to stop being dramatic and begin digging into Codecademy lessons: “A Closer Look At CSS,” “CSS Visual Rules,” and “CSS Setup and Selectors” before taking a stab at the prototype homepage. Procrastination at its finest? Yes, but I have quickly found that procrastination might not be suited for the newbies of the coding world.

In last week’s post, I compared coding to my experience of learning a new language. I remember it became apparent that I needed to practice Arabic each day to become more proficient at the language. I don’t believe that procrastination is suited for learning languages, and neither is it for learning code. For this upcoming week, I have made it a goal of mine to practice the class material each day of the week to feel more comfortable with the different languages and desktop apps like Sublime Text and GitHub. Once I reviewed Codecademy lessons from last week and completed the new lessons focused on CSS for this week, I felt more confident in testing out some of the tags for my homepage. Honestly, I have a hate/love relationship with CSS. I think it is incredible that I can style the HTML text, but naming some of the HTML text as a class or ID confuses me. I feel like I am having trouble deciphering whether sections of the HTML text should be a class or an ID. I’m hoping to ask many questions in tomorrow’s class about this!

Also, I must owe credit where credit is due and thanks to Susan I was finally able to set up my brand new laptop with Sublime Text and GitHub while understanding how the connection of these apps work. I am still a little confused about the full functions of GitHub even after this week’s readings, but I am excited to become more acquainted with it in the future.

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.