Learning to Code: Reflections: March 2016

Monday, March 28, 2016

Day 209: Responsive Design with Bootstrap (a refresher)

So, I want to make my projects responsive before I showcase them in the portfolio I'll be designing, (which will also be responsive), and that means I'll be focusing my attentions next on responsive design, be it via bootstrap, foundation, or skeleton.

Lets get going!

Okay, I started the day by going through some of my bookmarks and organizing them, as they can get out of hand, and in order for them to be useful, they have to be organized.

Note that jQuery is required to use Bootstrap, so include it before the Bootstrap link. This is from the Bootstrap site:

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Cool. So that explains that meta tag.

Note that Bootstrap includes the normalize.css file within it (or a modified version of it anyhow).

I'm attending a meetup today for MEAN stack pair programming. The meetup group is called Austin Pair Programming Circle & Code Camp.

The meetup was interesting, I stayed about two hours.

Now I'm working on some Bootstrap stuff, here's some screenshots:

The neat thing is that the page is responsive, and centered, without having written a single line of CSS. That's quite efficient.

I learned a new command today, command + ctrl + g will select EVERY copy of whatever you highlight. That comes in handy, it's pretty cool.

I'm working with Bootstrap right now, i can't wait to apply this to my portfolio! It's interesting how Boostrap is mobile-first.

Here's the bottom of an html document with jQuery connected via CDN and Bootstrap connected via a file:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

Cool.

I worked on a single page app today, it's neat, in this version, you set the sections you don't want displayed by default to display: none, and the section you want to display in initially to display: block (or anything else that's visible). Then, when you click on other sections of the nav bar, the click sets the currently visible element to display: none and the new element to display: block (or anything else that's visible). This is great, because you can avoid having a bunch of files all over the place, so I'm thinking I'll use this technique for my portfolio site.

Here's how to put a downward pointer next to a link:

<li class="dropdown">
<a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a></li>

That's one more arrow in my toolkit.

I held a meetup today and it went great, we had about 12 or more people show up. I helped a one of the attendees with an API issue she was having.

Good stuff!

I downloaded atom and brackets. Both have some interesting features that I haven't used with Sublime, but atom is really, really making a good impression.

This is neat, it adds a little camera to your page, it's the format for adding icons in Bootstrap:

<b class="glyphicon glyphicon-camera"></b>

I'll be using that. This adds a "user" icon:

<b class="glyphicon glyphicon-user"></b>

Here's a pic with both icons:

Bootstrap is great!

As an aside, in Bootstrap, when we give a div a class of "container," that sets the element to a max width of 1000px, according to the video.

Okay, I'm driving down to South Texas now (6 hour drive), so I'm going to close out this entry and continue tomorrow.

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

"Head First HTML and CSS," by E. Robson & E. Freeman                      Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web pages with JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% 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 Complete
5. jQuery Complete
6. Basic Front End Development Projects 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 Complete

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel)

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen Projects: http://codepen.io/Adancode/

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

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 8

Total Hours Coding: 1,096

Thursday, March 17, 2016

Day 208: Completed most of the Stanford Computer Science course, VERY basic course, moving on

Okay, I'm on week 3 of the Stanford Computer Science course. I want to knock this out TODAY, so I can move on to moving my projects over to GitHub, getting my portfolio deployed, and and brushing up on responsive layouts and prototypal inheritance!

All right, I went through that course and completed most of the assignments.

I did about 5 hours of videos and exercises today with the course, at this point, I'm calling a halt to any activities on this course and moving on to the activities I described above.

So, first up on the menu is to work on responsive design by designing my professional portfolio. Once I've done that, i'll use the responsive design Ii pick up while doing that to upgrade my CodePen projects to be responsive.

Once that's done, I'll copy those projects over to Github, and then deploy my portfolio. That's the plan for now, I'll reassess as I move forward.

Check it out, I helped someone out today! I feel so happy!

And it helped me solidify the concept too! Woohoo!

I've actually been helping people out here and there to solve algorithms, this is the latest one, but it's pretty cool, it helps me stay sharp, and it creates a chain of helping folks that hopefully the folks I help out will continue. :)

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

"Head First HTML and CSS," by E. Robson & E. Freeman                      Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web pages with JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% 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

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel)

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen Projects: http://codepen.io/Adancode/

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

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 5

Total Hours Coding: 1,088

Wednesday, March 16, 2016

Day 207: Stopping Harvard CS50, doing Stanford Computer Science 101 instead to complete UT Coding Bootcamp Pre-Requisite Quickly and then Re-Prioritize Web Development

All right, working on week 1 of the Harvard course. Taking down notes from the lecture.

A compiler gets us from source code to object code, which is 1's and 0's.

We're going over some C samples. They remind me a lot of JavaScript.

I'm learning about the IDE we'll be using for the course, called CS50IDE.

In C,

#include <stdio.h>

gives us access to a library of pre-made functions in C. The professor entered it above:

int main(void)
{
printf("hello, world\n");
}

NOTE:

Okay, I'm going deeper into the lecture and it keeps going deeper into C (the programming language). Now, I have nothing against learning C, but I have to optimize my time, and I'd like to improve my skills with responsive layouts (flexbox, bootstrap, and skeleton), port my portfolio over from codepen to github, learn React, study prototypal inheritance more, and then dive into the back end.

I made the mistake when I was 18 and in college of letting others dictate my education, and I have to learn from those mistakes and de-prioritize this course. My time is finite, and at this juncture, it's better to spend my time upgrading the skills I already have than learning something brand new from scratch (C), which I may never use in my career. I'm sure it's great to know C, just like it's great to know French, and Chinese, and Spanish (I actually do know Spanish), but it's even greater to know the languages and technologies which I need to know to launch a startup, or that are listed in job ads, at a high enough level to get a return on my significant time investment. It's simply a matter of priorities, so I have to make the call.

It's tough, sometimes you want to keep going with what you've already started, but the thing is, if you make a wrong decision, you have to be able to recognize it and turn the train around as soon as possible. That's what this is. I've got so much web dev momentum, and this course is bringing it to a crashing halt, at the exact same time that I have a long list of things I need to do to get to the next level!

So, I'm stopping this course, I want to be a web developer, and I need to be very careful with what I invest my time into, and C does not give me as high a return investment as upgrading other parts of my intellectual portfolio.

That said, I'm supposed to finish at least one of three courses that were given to me as an option (the Harvard course was one of them), so I'm going to take the Stanford Computer Science course today, as it's about 10 hours long, instead of Harvard's 80 hours plus course (some people said they spent over 50 hours on a single problem in that course). I simply have many other areas where 50 hours would yield a greater return on investment.

All right, I feel confident in that decision.

Now, let me knock out this Stanford class and get back to web development!

All right, this course is very basic, I'm knocking out the exercises...

Note that to make gray, all three RGB values should be the same. Black and white, the two ends of grey, are 000 and 255, 255, 255, respectively.

Okay, the course is 6 weeks, and I'm on week 3 now.

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

"Head First HTML and CSS," by E. Robson & E. Freeman                      Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web pages with JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% 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

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel)

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen Projects: http://codepen.io/Adancode/

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

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 2

Total Hours Coding: 1,083