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
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

Other:                                                                                          Status
CodeWars                                                                                      Rank: 6kyu 
                                                                                                     Honor: 59 
                                                                                                     Honor Position: #25871/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
Total Hours Coding: 72

Monday, August 8, 2016

First Post! Welcome to my Coding Blog!!

Hello World!
     Today I decided to start a blog chronicling my development as a coder.  This will help keep me focused and accountable towards my goals of learning about web and app development.  It will also help me keep track of the time I have spent learning to code and what I have picked up along the way.

     A good place to start seems to detail what I've achieved so far and what I'm working towards.  I started coding in earnest on July, 6, 2016 and since then have coded every day for a total of 31 days.  Most of this coding has been focused on advancing through the Free Code Camp curriculum. I have also started reading "Eloquent JavaScript" by Marijn Haverbeke, gone to an Austin,TX FreeCodeCamp meetup in order to network with like minded people, and signed up for account on GitHub, Codepen, Codecademy and CodeWars.

     Through the FreeCodeCamp meetup I heard about a new code boot camp that was about to start so I applied and was accepted. This seems like the perfect opportunity for me because not only will it allow me to develop my skills with an experienced instructor(s), it is free!  Coding boot camps seem like such a great option for learning these skills but I was hesitant to sign up for one because I am so new to this world. Today is the official first day of the first class of the Learn.Js Bootcamp and I couldn't be more excited!

     The Learn.JS Bootcamp is a remote immersive 20hr per week three-month program that will teach me how make websites, text-based games, and full-scale applications.  It was put together by Jon McEwen and is sponsored by Mikael Carpenter. The first class of the Learn.Js Bootcamp which I am a part of consists of 7 students. Today we all signed up to Slack for communication, were given our first assignments on Codecademy, and told to get Github and Codepen accounts in addition to a Text Editor (Atom was recommended but I'ma stick with Sublime Text for now). I am so excited to be part of an eager team of future developers working together under the guidance of experienced coders. The class will teach us the basics, and the n work towards building an application with React Native. "Along the way, we’ll learn Rails, version control, and dive into the subtleties of JavaScript. For our smaller projects, we’ll be building websites and text-based games."
 
     From the learndotjs.com website: "For the first half of the bootcamp, we’ll work through the fundamentals of HTML, CSS, and JavaScript (Think Sass, Bootstrap, jQuery, Closures, Promises, and More). For the second half of the program, we’ll cover more advanced topics such as version control, databases, and RESTful APIs. We’ll also spice things up with some Ruby for the backend. The bootcamp will conclude with a deep dive into ReactJS and its related technologies."

Well, that is all for this blog entry.  More great things to come!

SUMMARY OF CODING SKILLS 
LearnJS Bootcamp                                                                           Status (starts 8/8/2016)
Week 1: Basic HTML/CSS & Javascript                                               In Progress

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

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

Other:                                                                                          Status
CodeWars                                                                                      Rank: 6kyu 
                                                                                                     Honor: 36  
                                                                                                     Honor Position: #31795/64%
    

My Web Dev Portfolio: In Progress
CodePen Projects: http://codepen.io/LosslessBinary/
GitHub Projects: https://github.com/LosslessBinary
LinkedIn Profile: In Progress
Free Code Camp Profile: https://www.freecodecamp.com/losslessbinary
Hours Spent Coding During This Blog Entry:??
Total Hours Coding:  ???