I really want to pass the entrance exam for the Viking Code School, and so I was planning on taking it in JavaScript, but after doing 20 hours of JavaScript studying, I realized that much of my effort, because it was spent studying material not provided by the Viking Code School, was being inefficiently applied. That is, much of what I was studying may not even be on the exam, or more importantly, I may miss something that I should have covered. This is in contrast to going over all the modules, the content of which is sure to help me gain admittance to the coding school. While the exam will deal in large part with the material covered in the last module, "Coding," completing the other modules as well will show that I am serious about this, and it will also help me with the interview after the exam.
I thought that studying JavaScript for a week intensely would prepare me enough, but upon doing so, I see that the material I was studying, while great material, could easily have gaps in the material which may result in me missing critical knowledge. So, in order to prevent this possibility, it's back to the modules. I think this is the right decision, and I don't see the 20 hours I spent on JavaScript in the last couple of days as time wasted in any way, shape, or form, as I need to master JavaScript anyways, so it furthered my goals considerably as I'm now more comfortable with the language.
Note: For Chapter 10, we are supposed to do a UX teardown for Twitter, AirBnB, and Amazon, but I'm going to make a separate post for that after I finish the entire module. This is because we are supposed to send a link to our blog post that contains the UX teardowns, and I don't want to include all the extra material in this post on that blog post.
Continuing with Module 2, Design
O.k., today I went back to the Design module, starting with section 12, "What is Good Design?" Then I read Chapter 13, "Design on the Web," and Chapter 14, "Layout and Composition." I then read Chapter 15, "Building Visual Hierarchy" and Chapter 16, "Fonts and Typography." I downloaded an add-on called WhatFont and added it to Google Chrome. These chapters are all going over design, which I've actually covered quite a bit already in my Treehouse courses, so the material is familiar to me. The next chapter was Chapter 17, "Demo: A Sample Design Teardown." For chapter 18, I went over design teardowns. For chapter 19 we went over grid systems, which I'm already familiar with due to the Treehouse courses. For chapter 20 we went over color, and I installed an add on called ColorZilla which lets me identify a color on a website easily in case I want to use it.
We then went over the differences between wireframes (real basic, structural), mockups (more meat, so to speak, more design involved), and prototypes (closer to the final product, may even be aesthetically finished). The three processes can blend into one another, but it's good to have an idea of what they generally refer to. That chapter went over the high level process for building sites again:
Identify the user and her goals I thought that studying JavaScript for a week intensely would prepare me enough, but upon doing so, I see that the material I was studying, while great material, could easily have gaps in the material which may result in me missing critical knowledge. So, in order to prevent this possibility, it's back to the modules. I think this is the right decision, and I don't see the 20 hours I spent on JavaScript in the last couple of days as time wasted in any way, shape, or form, as I need to master JavaScript anyways, so it furthered my goals considerably as I'm now more comfortable with the language.
Note: For Chapter 10, we are supposed to do a UX teardown for Twitter, AirBnB, and Amazon, but I'm going to make a separate post for that after I finish the entire module. This is because we are supposed to send a link to our blog post that contains the UX teardowns, and I don't want to include all the extra material in this post on that blog post.
Continuing with Module 2, Design
O.k., today I went back to the Design module, starting with section 12, "What is Good Design?" Then I read Chapter 13, "Design on the Web," and Chapter 14, "Layout and Composition." I then read Chapter 15, "Building Visual Hierarchy" and Chapter 16, "Fonts and Typography." I downloaded an add-on called WhatFont and added it to Google Chrome. These chapters are all going over design, which I've actually covered quite a bit already in my Treehouse courses, so the material is familiar to me. The next chapter was Chapter 17, "Demo: A Sample Design Teardown." For chapter 18, I went over design teardowns. For chapter 19 we went over grid systems, which I'm already familiar with due to the Treehouse courses. For chapter 20 we went over color, and I installed an add on called ColorZilla which lets me identify a color on a website easily in case I want to use it.
We then went over the differences between wireframes (real basic, structural), mockups (more meat, so to speak, more design involved), and prototypes (closer to the final product, may even be aesthetically finished). The three processes can blend into one another, but it's good to have an idea of what they generally refer to. That chapter went over the high level process for building sites again:
Mock up the site that fulfills those goals
Break the mockup into discrete pieces of work ("stories")
For each story, start with the mockup of its end result (e.g. the specific feature) and build the data infrastructure, back end, and front end necessary to actually produce it.
Validate, refactor, and ship. I thought I'd copy that to reference it from time to time.
Learning to Use Balsamiq Mockup
For chapter 22 we started learning how to use Balsamiq (a software program) for mockups. I created my first mockup, it's very simple, here it is:
Cool, huh? Graphically speaking, it's quite endearing. I really liked the Balsamiq software, not only is it easy on the eyes, but it's also very intuitive. On Balsamiq, before you click on an item, hold down the alt key, and when you click on it and pull away, you'll have a copy of the item.
I viewed a video going over the construction of a Balsamiq mockup for a restaurant webpage. I also learned how to link mockups together, to simulate the links between different parts of a website. These links even continue to work when you save the mockup as a pdf file. I walked through how to download BMML files from the mybalsamiq website and use them in my own (30 day free trial) Balsamiq browser version.
So now I'm on Chapter 23, "Demo: Mocking up the Viking Blogger," which means I'm almost finished with the second module, as it has 27 chapters. Chapter 23 has a 30 minute video going over design and mockups. Also, in chapter 23, it was revealed that we'll actually be constructing and deploying a blogging web application. I'm completely stoked, this is wonderful!
In the video, Trautman did something interesting, when he wanted to de-emphasize something (the date/time label for a post on the blog), he not only made the text size smaller, but he also made the color grey instead of black, making the text sort of fade, in comparison to the black text and heading. I thought that was a great use of color to achieve the desired purpose of guiding the user's eyes to the content of the actual blog post, as opposed to the peripheral information.
I purchased a version of Balsamiq because Trautman mentioned that he "kind of thinks in Balsamiq," so that, to me, is a pretty solid endorsement of the tool. Since I aim to be a web developer, I think equipping myself with tools as highly rated as this one is a great investment in myself. I wasn't sure whether to go for the desktop or the online version, but in the video, Trautman is using the desktop version, and in the reviews, people commented that the desktop version is faster than the browser version, which can lag at times. So those two factors influenced my decision to go with the desktop version.
I've been playing around with Balsamiq quite a bit now. I really like the ability to link mockups. It's superior to paper and pencil, because you can resize objects without having to erase and make a mess. It's a fantastic tool, and I'm really glad it was brought to my attention.
I learned about modal windows, which are those windows that come from the main screen, then take up the whole window and you feel like you are trapped, but then there is an x in the upper corner or a close link on the bottom right.
Another way that Trautman used to set aside comments from the main text is by having them be indented, so that they appear less important than the main post. Command down arrow (or up arrow) moves the positioning of an object from foreground to background, for example. I saw how to color things on Balsamiq. That seems like a small thing, but think about the advantage of being able to do that, versus doing so on a pen and paper mockup. You can't really erase color on pen and paper, not an entire drawing anyhow, not without making a mess. Balsamiq really shines with this feature and many others, as opposed to a board and markers or pen and paper.
I worked on two mockups on my own, for an imaginary startup, just to get the hang of Balsamiq. I made two sample landing pages, using different background images and hues for the transparent header and footer. The instructor used a site called paletton (www.paletton.com), which is useful for creating an aesthetic color scheme, so I I bookmarked it for future use.
After that, I started on Chapter 24, "Tearing Down and Mocking up Facebook." This chapter requires us to do a UX and design teardown of Facebook as a whole and of various individual Facebook pages. I'm finished with the UX teardown of Facebook as a whole, but the design teardown involves tearing down 5 separate pages, after sketching the visual hierarchy for each page. While reviewing to do the work for this chapter, I learned more about lightboxes, which are very similar to modals, except with lightboxes, you can usually click outside the box to go back to the regular page, whereas with modals, the user is required to interact with the modal before the user can return to the page.
Regarding Time Management and My Goal to Become a Web Developer
I'm working on finishing up this module, and it's taking quite a bit longer than I thought it would take. I downloaded several time management apps and add ons, such as Tracking Time for Google Chrome (I can create projects and track how much time I have spent on them) and Be Limitless, also for Google Chrome (it tracks the time I spend on websites that I classify as either productive or not productive, although I have most unproductive sites quasi-blocked already anyways with StayFocusd, which limits me to 1 minute a day on unproductive sites).
Oh, here's some pics of my new working area! I gave away my old desk (the surface area wasn't large enough) and I bought a solid ikea desk with adjustable height as well as a comfortable office chair. It's been great so far, two days ago I spent 9 hours straight studying, and my legs didn't hurt like they used to after spending an hour or so sitting on my old chair. i guess I didn't realize it, but I was too tall for that chair or something about its ergonomics just weren't ideal for my taller frame.
O.k., this blog post is becoming way too long, haha, I'm cutting it off here and resuming my practice of blogging once a day, to keep the subjects of each post more concise, and also, to better keep track of my hours spent on coding every day.
Good stuff!
I viewed a video going over the construction of a Balsamiq mockup for a restaurant webpage. I also learned how to link mockups together, to simulate the links between different parts of a website. These links even continue to work when you save the mockup as a pdf file. I walked through how to download BMML files from the mybalsamiq website and use them in my own (30 day free trial) Balsamiq browser version.
So now I'm on Chapter 23, "Demo: Mocking up the Viking Blogger," which means I'm almost finished with the second module, as it has 27 chapters. Chapter 23 has a 30 minute video going over design and mockups. Also, in chapter 23, it was revealed that we'll actually be constructing and deploying a blogging web application. I'm completely stoked, this is wonderful!
In the video, Trautman did something interesting, when he wanted to de-emphasize something (the date/time label for a post on the blog), he not only made the text size smaller, but he also made the color grey instead of black, making the text sort of fade, in comparison to the black text and heading. I thought that was a great use of color to achieve the desired purpose of guiding the user's eyes to the content of the actual blog post, as opposed to the peripheral information.
I purchased a version of Balsamiq because Trautman mentioned that he "kind of thinks in Balsamiq," so that, to me, is a pretty solid endorsement of the tool. Since I aim to be a web developer, I think equipping myself with tools as highly rated as this one is a great investment in myself. I wasn't sure whether to go for the desktop or the online version, but in the video, Trautman is using the desktop version, and in the reviews, people commented that the desktop version is faster than the browser version, which can lag at times. So those two factors influenced my decision to go with the desktop version.
I've been playing around with Balsamiq quite a bit now. I really like the ability to link mockups. It's superior to paper and pencil, because you can resize objects without having to erase and make a mess. It's a fantastic tool, and I'm really glad it was brought to my attention.
I learned about modal windows, which are those windows that come from the main screen, then take up the whole window and you feel like you are trapped, but then there is an x in the upper corner or a close link on the bottom right.
Another way that Trautman used to set aside comments from the main text is by having them be indented, so that they appear less important than the main post. Command down arrow (or up arrow) moves the positioning of an object from foreground to background, for example. I saw how to color things on Balsamiq. That seems like a small thing, but think about the advantage of being able to do that, versus doing so on a pen and paper mockup. You can't really erase color on pen and paper, not an entire drawing anyhow, not without making a mess. Balsamiq really shines with this feature and many others, as opposed to a board and markers or pen and paper.
I worked on two mockups on my own, for an imaginary startup, just to get the hang of Balsamiq. I made two sample landing pages, using different background images and hues for the transparent header and footer. The instructor used a site called paletton (www.paletton.com), which is useful for creating an aesthetic color scheme, so I I bookmarked it for future use.
After that, I started on Chapter 24, "Tearing Down and Mocking up Facebook." This chapter requires us to do a UX and design teardown of Facebook as a whole and of various individual Facebook pages. I'm finished with the UX teardown of Facebook as a whole, but the design teardown involves tearing down 5 separate pages, after sketching the visual hierarchy for each page. While reviewing to do the work for this chapter, I learned more about lightboxes, which are very similar to modals, except with lightboxes, you can usually click outside the box to go back to the regular page, whereas with modals, the user is required to interact with the modal before the user can return to the page.
Regarding Time Management and My Goal to Become a Web Developer
I'm working on finishing up this module, and it's taking quite a bit longer than I thought it would take. I downloaded several time management apps and add ons, such as Tracking Time for Google Chrome (I can create projects and track how much time I have spent on them) and Be Limitless, also for Google Chrome (it tracks the time I spend on websites that I classify as either productive or not productive, although I have most unproductive sites quasi-blocked already anyways with StayFocusd, which limits me to 1 minute a day on unproductive sites).
Oh, here's some pics of my new working area! I gave away my old desk (the surface area wasn't large enough) and I bought a solid ikea desk with adjustable height as well as a comfortable office chair. It's been great so far, two days ago I spent 9 hours straight studying, and my legs didn't hurt like they used to after spending an hour or so sitting on my old chair. i guess I didn't realize it, but I was too tall for that chair or something about its ergonomics just weren't ideal for my taller frame.
O.k., this blog post is becoming way too long, haha, I'm cutting it off here and resuming my practice of blogging once a day, to keep the subjects of each post more concise, and also, to better keep track of my hours spent on coding every day.
Good stuff!
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
Javascript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 72)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 29% Complete
3. Ruby Programming 0% Complete
4. Ruby on Rails 0% Complete
5. HTML5 and CSS3 0% Complete
6. Javascript and JQuery 0% Complete
7. Getting Hired as a Web Developer 0% Complete
Hours Spent Coding Since Last Entry: 29 (note: I included the hours spent working on the next blog post in this one as well, since the next blog post does not include coding stats)
Total Hours Coding: 470
No comments:
Post a Comment