Learn to Code

Sunday, September 25, 2016

Days 55 - 80

My coding group has ended! : (

So I was part of a free coding bootcamp that was starting to do some cool projects. There were 8 or so students all talking on slack. Assignment 6 was to make a text-based game and I think it slowed down a lot of students (myself included). The assignment wasn't that hard concept-wise, but I kept wanting to add functionality to my basic game plot and it took a long time to code. Anyways, before I had time to finish the assignment, a new task was assigned involving API's and react. People in my group became less active/talkative on slack and the last message I see from anyone was 2 weeks ago!

The experience has reinforced in my mind the need to code every day in order to maintain momentum so along with my bi-monthly status updates, I will start keeping a consecutive coding day streak counter to keep me focused. The streak counter FreeCodeCamp uses was a great motivator in making me code every day so why not continue the tradition by myself. Actually, that will be a good easy project to code now that I think of it. Anyways, my plan for today is to finish my coding of the game (Assignment 6) so that I can share it, and go deeper into Assignment 7.

Tuesday, August 30, 2016

Days 42 - 54

     Time flies! Over the past couple of weeks I haven't had as much time as I would like to spend coding but I've been working on a few projects.

     First, I worked on a clone of cactomain.co. For this clone, my teacher at the bootcamp recommended I try not to use bootstrap at all. He provided a great link https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css which is the source code for bootstrap and shows the normal CSS way of styling what the bootstrap classes do. Another resource I came across while working on this assignment was http://www.w3schools.com/html/html_layout.asp   which outlines layout techniques for html. I started with float and clear properties but the result wasn't responsive like the original website so I decided to experiment with flexbox.

     While working on the clone (still have some work to do!), a new assignment, #5, was sent to students. This assignment consisted of basic algorithm javascript problems from CodeWars. In addition to the CodeWars problems, my teacher also gave students the following problem: Write a function that takes in an array of numbers and a target number, and returns true if the array contains the number and false if it does not. My teacher introduced me to Jsbin.com which is a great Javascript sandbox to test code. The CodeWars Katas consist of the following: Double Char, Even or Odd, Count by x, Sum of positive, and any 2 other problems of the student's choosing. Of all the assignments given by the bootcamp, I completed this one in the least amount of time.

     The last assignment given by the bootcamp was to build a text-based browser game. The game will consist of a console where the user can enter designated commands that will further the storyline of the game. The user will have to collect items as they advance through the game that will be added to their inventory to be used at later parts of the game (EX: keys to open doors). As of right now, I have the basic functionality together which is combining HTML, Javascript, CSS and jQuery. I will be working today to finish this assignment.

     Anyways, thought it'd be a good idea to update the blog. According to my instructor, the next assignment will be the first bit of real world professional coding and will use a lot of new technologies like Node, Git, npm, express, and building a web app with an API. First I need to finish my game! Happy coding!

Hours Spent Coding During This Blog Entry:9.5

Total Hours Coding:108

Wednesday, August 17, 2016

Day 40 & 41

The past couple of days I've been working on the website clone for Assignment 3 of the bootcamp. In total, I've spent 10.5 hours on it. It took a lot longer than I thought it would, but I told myself going in that I was going to figure out as much of the coding as possible by myself before using Chrome's Inspect Element Dev Tools. In the process, I have learned/practiced the following: static/fixed position navigation bar, social media icons, linking images to local files, a lot of CSS, hover properties, positioning elements with Bootstrap's Gridmode, styling, buttons, and in-line elements. I also spent a lot of time trying to get a sliding picture carousel to work with some success but it was taking too much time so I'll be working on getting it just right tomorrow when I allow myself to inspect elements. I also read a little more of Eloquent Javascript.

We received a new assignment from the bootcamp today, which is to make another clone of a different website. The new website is a little more difficult than the first but my goal is to finish it faster than the first! The new assignment is due on the 21st so I have a few days to complete it but I want to finish it ahead of schedule this time. I'll be posting codepens of my code once the clones are complete. I've learned a lot the past few days but I know I'm just scratching the surface..... I can't wait until we start making programs!

Hours Spent Coding During This Blog Entry:10.5

Total Hours Coding:98.5

Monday, August 15, 2016

Day 38 & 39

Yesterday, my bootcamp received a new assignment, Assignment 3 in which our task is to clone the webpage for http://www.onsite.io. This will be a good assignment to try to use some of the new skills I have learned! Upon starting, I decided I would try to get as far as I could without looking at the website's code, but did allow myself to look at some of my previous projects and to use google. Once I made a perfect clone of the site or reached a point where I could not improve my clone further, only then would I allow myself to start inspecting the original site's elements using Chrome's Dev tools to uncover the site's true code. Lets get to it....

Here is a log of my activities:
After watching the assignment video, I set up sublime text, and began trying to recreate the code. Had some problems before I realized I hadn't added bootstrap. Found it can be a lot harder to recall syntax when you're staring at a blank screen.

Reviewed the instruction video, organized the main sections into Header, Article and Footer. Started downloading the images.

Struggled making downloaded images show up in clone. File could not be linked locally. Also, couldn't figure out how to download the majority of the images from the site.

Started organizing the article into columns and rows.

Added more text, still having problems with coloring sections.

It took awhile before i figured how to link to css, but one I got it working, I spent some time trying to match the site's css.

Next, I realized that the clone site has a navigation bar that stays at the top as the user scrolls through the rest of the site. I have never run across how to do this in my lessons so I went to my friend google. I found some code that accomplished this with a combination of html/css/javascript. Then, I figured out how to link my html to javascript. As of now I just started analyzing the code so that I can understand it instead of just using cut and paste, but it still is not working on my clone. Plan on staying up a couple more hours and trying to figure it out before I go to sleep for the night.

It's good to be applying my new knowledge to actual projects. Building things is the best way to learn! As promised, I will be updating my coding skills summary twice a month. It's that time, so here you go:

SUMMARY OF CODING SKILLS

LearnJS Bootcamp                                                                           Status (starts 8/8/2016)

Week 1: Basic HTML/CSS & Javascript                                               Complete 

     Codecademy: Introduction to Javascript                                       Complete
     Codecademy: Make a Website                                                      Complete
     Codecademy: Make an Interactive Website                                   Complete
     Codecademy: Learn the Command Line                                 21% Complete
     Codecademy: Learn Sass                                                       17% Complete 
Week 2: Clone a Website                                                                  In Progress 


Books:                                                                                              Status

"Eloquent Javascript" by Marijn Haverbeke                                   11% Complete

Free Code Camp (FCC) Status

1. Get Started with Free Code Camp Complete

2. HTML5 and CSS Complete

3. Responsive Design with Bootstrap Complete

4. Gear up for Success          75% Complete
5. jQuery          Complete
6. Basic Front End Development Projects    33% Complete
7. Basic JavaScript        Complete
8. Object Oriented and Functional Programming           Complete
9. Basic Algorithm Scripting       Complete
10. JSON API's and Ajax     Complete
11. Intermediate Front End Development Projects          0% Complete

12. Intermediate Algorithm Scripting 42% Complete

13. Advanced Front End Development Projects Incomplete

14. Claim Your Front End Development Certificate Incomplete

15. Video Challenges 60% Complete

Other: Status

CodeWars Rank: 6kyu

Honor: 59

Honor Position: #26418/71%

My Web Dev Portfolio: In Progress
CodePen Projects: http://codepen.io/LosslessBinary/

GitHub Projects: https://github.com/LosslessBinary

Free Code Camp Profile: https://www.freecodecamp.com/losslessbinary

Hours Spent Coding During This Blog Entry:4.5

Total Hours Coding:88

Friday, August 12, 2016

Days 35 & 36

Over the past couple of days, I have completed the "Make a Website" and "Make an Interactive Website" courses at codecademy. I learned about Events ("Write code so that user actions (eg. clicking a mouse or pressing a key) make things happen on the page"), DOM Manipulation ("Use JQuery to allow user actions to modify and add HTML elements"), and Effects ("Use JQuery to present your site's content with fancy effects"). My favorite part of this learning experience has been using Javascript to write event handlers that modify the HTML. Here is an example of an event handler which cycles through some slides on a carousel by fading in and out of the displayed picture whenever the user clicks an arrow with the class ".arrow-next"

     Today, our main teacher for the Learn.Js Bootcamp, Mikael, asked students for examples of websites we thought were well designed so that we'd have examples to go over next week. Here is what some of my peers came up with:

http://www.mikiyakobayashi.com/projects

https://www.tigersdencrossfit.com/

http://vlog.it/

     All of the above sites are quite impressive and are great motivation to continue down this rabbit hole of coding and learning.

     No new assignments yet so I might start looking into the "Learn Sass" course on codecademy. Mikel mentioned it was not required but would be good to know as a bonus. We will be abandoning codecademy after this so I might as well get what I can from it because who knows when/if I'll ever make my way back to codecademy lessons. Stay tuned!

Hours Spent Coding During This Blog Entry:6

Total Hours Coding:81

Wednesday, August 10, 2016

Day 34

     Well, I finished the Codecademy "Make a Website" course today and we received a new assignment from the Learn.Js Bootcamp which is to complete the "Make an Interactive Website" Codecademy course by this Saturday. I'm currently at 29% completion of the new assignment but I've decided I will only be posting my updated "Summary of Coding Skills" in full every 1st and 15th of the month. Eventually, I plan to be posting snippets of code into this blog and I don't want to make it excessively cluttered.

     The last section of the "Make a Website" and the new material from the "Interactive Website" courses have been fun to learn. Great to see how Javascript, CSS and HTML all work together. So far I've only been using my new knowledge in the interactive lessons but looking forward to applying it to my portfolio once I learn a little more.

     As far as working on my personal projects, I mainly just made a few minor adjustments to my Web Dev portfolio and cleaned up some of my pens on Codepen. Plan on staying up a few more hours coding tonight but I wanted to update the blog before the day officially ended.

   After this new Bootcamp assignment, we will be abandoning the Codecademy tutorials. Next week we will be focusing on Web Development and "generating our own webpages from scratch. We'll also talk about responsive design, best practices, and the tricks being used in industry today to design beautiful modern websites."

Hours Spent Coding During This Blog Entry:3

Total Hours Coding: 75

Tuesday, August 9, 2016

Day 33

     Today I started with what I thought to be a simple Kata on CodeWars but it ended up taking me a couple hours to get a working solution. The Kata was called Tortoise racing and basically involved the following: Two tortoises are racing. 'A' travels at a given speed, and 'B' travels at a speed that is faster than A but by the time B starts, A has already travels a given distance. Write a program that returns an array (in [hour, min, sec] format) with the amount of time it takes B to catch A, given an input of v1(A speed), v2(B speed), and g (distance A gained on B before B started). Problem I had was Javascript giving rounding errors after using the Math.floor function. I ended up having to use a Modulo % to get a result that passed the test. Goes to show there are always multiple ways to solve a problem!

     Next, I worked more on the Codecademy curriculum and finished the Introduction to Javascript. Most of the lessons were a review for me but the last lesson was very helpful because it went over the Document Object Model (DOM), and how to use the DOM manipulate jQuery, HTML and CSS. I have been learning about Js, Html, CSS and jQuery and this lesson was particularly helpful in seeing how these different components all work together to make interactive websites. Afterwords, I watched a video on FCC about the DOM which helped review what I had learned.

     I am almost done with the assigned work from my Bootcamp a day early so tomorrow after I finish up the Codecademy work, I plan to spend time working more on the the Basic FCC projects (Tribute Page, Personal Portfolio) and might begin some of the Intermediate projects.

SUMMARY OF CODING SKILLS

LearnJS Bootcamp                                                                           Status (starts 8/8/2016)

Week 1: Basic HTML/CSS & Javascript                                               In Progress

     Codecademy: Introduction to Javascript                                       Complete
     Codecademy: Make a Website                                                81% Complete 

Books:                                                                                              Status

"Eloquent Javascript" by Marijn Haverbeke                                   11% Complete