Tag Archives: week2

RWD for Newbies

Leave a reply

This week’s assignments were tough for me. Frustrating. It’s like we went from “Je m’appelle Molly” to translating Victor Hugo. That being said, coding is enjoyable–the actual coding. The logic of learning it is frustrating because it feels just on the verge of intuitive yet isn’t. However, the before and after is fun. I like searching out little issues on the W3 School’s website and figuring them out as I go. There is such a sense of victory when you realize that it was just one tiny misplaced bracket that was standing in the way.

The Ethan Marcotte article on A List Apart put the idea of web design into perspective for me–particularly the transient nature of the beast. Even the simple fact that the article was published seven years ago makes the reader think on all the changes that have happened in the meantime. The way Marcotte compares web design to architecture resonated with me. I love the idea of responsive design–he’s right. There really is something elegant about it.

I’m bookmarking the W3 School page because it looks like something that I’ll be needing in the next couple of weeks. Their format is very helpful to me. Even while I was going through Codecademy I kept thinking “Is there an index somewhere???” and then I stumbled upon this particular web page. I’ve been going through and reading some of them actually as background for the Codecademy assignments! While I worked on my homepage I tried a few things just to see what they would make.

Ditto bookmarking this GitHub page. I know it’s straightforward, but I’m still having some trouble with it. I can’t seem to find things on the desktop version vs. the browser version. I had to make my repository for my homepage in the browser. I don’t think there’s much of a difference? Regardless, this page will be extremely helpful in the future.

 

Linking Languages Together

Leave a reply

This week we learned about various CSS elements that help us provide very specific design elements that jazz up our web pages. As we went through each long assignment, I loved how detailed CSS allowed you to be in designing your web page — down to the position on the page, font size and color, and more. However, I did find it difficult to fully digest and be able to reproduce so much CSS information all at once — in our prototype webpage assignment I felt as if I needed to go back and check how to execute every single command that I wanted on my page. I also definitely understood how difficult it could be to construct detailed websites with lots of different style elements across different pages – I can’t even imagine how much time and energy that must take! As much as I enjoyed being able to manipulate my page in this way, I did find it challenging to try and go back and remember the various HTML commands we learned in the previous week, to make both parts of our web site fit together seamlessly. Personally, I don’t think we spent enough time getting comfortable with the HTML language before moving right along to CSS, though I’m sure we will revisit it a lot throughout the rest of the semester.

In our readings, I really enjoyed reading the “Responsive Web Design” narrative on AListApart.com. Though it took me some time to read through (mostly because I wanted to try and absorb as much of it as possible, and therefore took the time to remind myself about specific verbiage), I liked that the author walked the reader through writing out each component, how that changed the architecture of the website, and the changes in overall responsiveness to the site as well – a subject I feel as though we have not touched on much yet.

Multitasking and Trial and Error

Leave a reply

As a general rule I try not to multitask with my homework. Bad things can happen. Mistakes can be made and deadlines can be missed. This time, my decision not to do so cost me a lot of time this week.

The Codecademy courses are thorough and overall great. While doing each exercise and even after, I thought I understood the steps. I can run the new code without getting an error message or troubleshoot relatively quickly. I thought I was set. When it came time to actually write the code on my own, even for something very simple, I could barely do it without turning back to the lessons.

It did not help that Sublime did not recognize some of the code. It considered ‘px’ as incorrect code when I tried to change the font size. I also had some trouble linking my style page to the html. W3’s site and Codecademy were helpful but for some reason I could not find a solution for this.

I do like editing in Sublime though. As long as the rules are followed, they make it easy to read the code and go back and fix my mistakes. An added and non-code related bonus is that Sublime lets you change the editor’s background.

GitHub is still very much a mystery to me. I will definitely need to spend a lot of time working this on platform. I created a new repository for this project and while I was able to preview the site before I ‘saved’ it but could not after. This time GitHub and Google were my guides but I did not realize it was not showing properly until today.

Web Development will require a lot of trial, error, and Googling before I am able to get this right with, hopefully, fewer tries.

 

My First Ever Coding Experience

Leave a reply

This week’s assignments were challenging, to say the least. While the Codecademy assignments were helpful, it was still challenging to take what the instructions gave you and apply it to the exercises. Coding is a foreign experience to me. I never considered myself technically adept at anything until I enrolled at Georgetown, so completing the exercises can be daunting. I have no idea how people learned to code without Codecademy, but I am so grateful it exists as a resource.

Creating my prototype homepage was not easy. It took me at least a solid hour and a half to complete the readings and apply the information from the readings to coding on Sublime. I had no idea how to use Sublime either. I made sure to save my coding on a word document just in case I did not save the Sublime document correctly. Luckily, that paranoia worked because I lost my original Sublime information and had to go back to my original code. While I wish I could have made something more complex, I am honestly just proud I was able to complete the assignment. I did my best to do CSS, googling the different HTML codes for different colors to make my code more “fancy,” but I was having trouble linking it. I also had the hardest time linking an image. Nevertheless, I am still proud I was able to code something simple on my own, even if it is not anything extraordinary. I can’t wait to see the progress I make from beginning to end.

Getting my code on Github was not easy. I had the hardest time uploading it to my Desktop app and had to google other links to find it. I made sure to save my prototype through Sublime to email to Greg just in case. Luckily, I was able to do it, after many Google searches and trial and error.

I found the readings on Responsive Web Design very helpful in making my code, even more so than Codecademy. It helped distill the information even more.

Overall, learning to code isn’t easy. But I am excited for what lies ahead. I am already making progress!

 

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!

Death by Codeacademy … the New PowerPoint.

Leave a reply

If the purpose of this week’s assignment was to reinforce last week’s class, then mission accomplished. The redundancy helped me commit nearly all the basics to memory, and had me typing away towards the end, barely reading the instructions. That said, it seems highly improbable that one could remember all (or even so many) codes without using HTML and CSS daily. That was probably the most disappointing thought – that I will probably forget a lot of what I learned.

I do see how at least the general use of HTML and CSS can be permanently committed to memory, though. And I do believe that is very useful for journalists who may find themselves one day having to tweak a website without the assistance of a web developer. I don’t think it would take much to catch up on the basics; just enough to fix or identify a minor problem with a web page. Also, once one knows how to use HTML and CSS, I think a simple reference guide, book or Internet search could fill in the voids.

Overall I like the way Codeacademy has put their site together. The tutorials seem to be just long enough to instill confidence in the user. I did notice, however, there are parts where even the wrong information could create a positive result and allow the user to advance. I also didn’t think it explained well enough the difference between IDs and Classes. I’m not quite sure why both are necessary.

Week 2 Assignment; May 28, 2013

Leave a reply

Codecademy is an interesting way to learn how to code. It breaks code down into simple form, which allows beginners like me to not get overwhelmed. Most programming books, at least the ones which I have purchased, are extremely overwhelming. The size and type of font used strains the eyes, and there is usually too much information provided in any one given page. I love the way Codecademy has one topic or instruction per page and makes practicing easy — the sandbox or practice area is right on the instructional page. Five stars for interactive learning.

One thing about Codecademy that brings concerns to my mind is that it seems too easy to be true. And because it is easy and fun, I now wonder if I am actually retaining the information which I am practicing and not just going through the motions. I guess for now, I will go through the lectures and practice and as the course goes on I will see if it actually works. I really do hope it works as I am hoping this course will help me obtain the skills that I need to stand up my own blog and eventually interactive website.

 

Content and Presentation

Leave a reply

I really enjoyed this week’s lesson and assignments. Just like we discussed during the first week of class, this work is extremely gratifying once you see your code successfully appear as a website. I understand why this is becoming more and more common for journalists to switch over to. Coding requires a keen eye not only from a formatting side but a grammatical side as well. There were several instances where I was stuck in Codecademy and it had nothing to do with the formation of my code, but rather a grammatical error. Luckily this didn’t happen often but it is already difficult enough for me to remember what all of these tags mean and I was constantly reminded how important grammar is as well.

I had the most difficulty with remembering the image source codes and exactly how they were supposed to be formatted versus the hypertext references. This was our first week using Codecademy and I’ve already grown to love it. Although it took me a while to get through all of the lessons, I’ve truly learned from it. I’ve had to learn to build sites before in college, but the software allowed me to speed through and not really retain things. Codecademy had a lot of repetition (which can get annoying, but is worth it) and I enjoyed seeing my work as I went. I know that we are nowhere near pros, but from this one week, I’ve learned and actually believe that web development is not as scary once you learn what and why things are done the way they are done. Like most of us in this class, by no means do I want to take this on full-time, but it is so fulfilling to be able to know how to speak code and I’m looking forward to the end of the summer when I finally have my own website.

HTML is like jumping off of a cliff: jumping without learning how is going to hurt your head

Leave a reply

I am really starting to like the Codecademy tutorials. Even though they are novice at first, and many people already have a basic understanding of code, the first lessons help reinforce the idea that repetition is the best way to learn. I think that most people see coding and programming as some ethereal skill that only geniuses possess and that the language is unlearn-able for the masses. They are wrong, but as long as the myth persists and people stay unaware of some of the simplicity, they will always need others to do even basic coding.

I wish that the tutorials would go back to the basics every now and again, however, as I learn a lot through repetition. I liked that they made us do the basic <!DOCTYPE html> on the second go around, but after that they just assumed that you will remember it. Maybe if once a month they force you to redo an early tutorial or something of that sorts would keep people up-to-date. I don’t mean people that code for a living, but more like journalist and other people delving into coding to help enhance their main career.

I think that journalists can really make coding a part of their vernacular. We are expected to be masters of our language (even if we aren’t!) and having an understanding of coding will help us stay competitive in an era in which computers are becoming more and more of a necessary tool, rather than a luxury. All of the major publications have internet heavy platforms that really make the news reporting field infinitely better. As journalists, if we can’t understand how the news is delivered from us to our audience, I think that we are losing out on a great opportunity to make our product better. We should be well-versed in HTML and CSS because it is now a part of our craft, whether we wanted it to be or not. Thankfully, I enjoy it!