This weeks work made me warm up to Codecademy a lot more than I expected. I really enjoyed learning about CSS and seeing what more “front-end” web design looks like.

After this week I definitely want to focus my time on front end changes during my bigger projects. First, it more closely reflects the type of web development I would do at work, and secondly I enjoy making things look pretty. CSS gave some immediate gratification when it came to making changes, and learning about all the options I had when it came to color, sizes, and fonts was really interesting.

There were some minor things with Codecademy that I didn’t like. Perhaps the main thing was that if I got stuck on a lesson that had 3 or 4 different steps, the program would often give all the code for those steps, not just the one I was stuck on. That make it harder to learn the later steps, since they were already done for me.

I also had some struggles with getting Sublime Text and GitHub to play nicely together. I was able to make some basic code, save it, and drop it into my monitor and see it, but when I imported it into GitHub I couldn’t find the code. I tried looking around on the internet to see where I went wrong, but to no avail.

If possible, it would be nice to do these things in class together as a trial, so I know if I’m moving in the right direction or not. With the on your own work I felt like I was poking around in the dark, which to some extent is fine. However, since some of these concepts are so new to me, it would be really helpful to see things get done in class so I get a better idea of the flow of these programs, like GitHub.

Using HTML and CSS

Now I understand what Prof. Linch meant by having an idea of what you are developing before you begin. When building my new homepage, I started putting in code before I really knew what I was doing… and about 30 minutes later, I deleted most of it and started over with a vision! (see below)

A couple challenges I faced that required a Google Search were:

• How to link certain text within a paragraph and not the entire graph, or having to have the text on a separate line
• How to download an image from the web and use it, legally cited of course, on my page; then how to display it on my homepage
• Why my background color displays in Safari but not Chrome (Still unclear, ha! Something to do with fact my HTML file is saved as Chrome and my CSS file is saved Safari? Is that default — I didn’t select that.)
• Several failed attempts to link my HTML and CSS files 🙁 But alas, some tiny edit made it click! (I think I simply removed a forward dash before style.css!)

My next challenge will be to further the CSS styling on my homepage. I plan to visit a few sites I know I like the look and feel of, and study the source code to see how they have been developed. There was so much to learn about CSS styling in our Codecademy lessons this week — I would like to play around more with opacity, overlapping content, margins, padding, etc…

I appreciated the w3school’s article, “Responsive Web Design – Intro,” especially the images of the expanded desktop, smaller tablet, and compressed mobile display. The article did a good job explaining what responsive design is, how it works and should look, and how to program the tool (though a lot of practice is warranted). Seems like a practice every programmer should utilize this day in age for UX given that mobile is taking over as the top device on which user access the web. Once the article gets into “grid-view” and “media query” I got a bit lost and was wishing I was taking a lesson in Codecademy:) On a related note, I found the alistapart article outdated and hard to follow — give me some images!

Cheers!!

Jane

This week’s homework was very exciting. Although the Codecademy modules took a long time to get through, I learned valuable ways of coding to create a fundamentally sound and aesthetically appealing website. When creating my website, I wasn’t sure where to being, and what type of website I should create. I began thinking of my favorite things, one being going to my country club Gibson Island on the Chesapeake Bay in Maryland. I have been going there since I was around four years old for different camps and such. It truly seems like a hidden gem that more people should know about, it is a beautiful place. Therefore, it is in my thought process to create a better website for Gibson Island when it comes to my final project. Although  my coding on that particular website needs a lot more detail, I think it is a good starting point.

When doing this week’s modules, I found myself a bit more confused about the different types of things going on. I can’t exactly say that I completely understand what a “class” is or what the true purpose of a “div” is other than to create a grouping, but am a little unsure as to why there would need to be different groupings.

During the readings, especially in A List Apart- Responsive Web Design  I was kind of shocked that you need to code in different ways for different devices. I guess that makes sense, but it opened my eyes to the fact that not all screen sizes can read code in the right way, which is the reason some websites don’t look correct when used on a cell phone. It is because they are unresponsive I have learned.

Overall, I am becoming more and more comfortable with the language needed to create an HTML website with the use of CSS.

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.

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.

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.

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!