Learning to Code: Reflections

Tuesday, April 5, 2016

Day 213: Responsive Design with Foundation

All right today I'm starting off with Foundation, so let's get to it!

We used the <nav> element to set up the navigation bar, and we gave it the class "top-bar" to tell Foundation how to style it.

I spent quite a bit of time today looking at portable second monitors and even considered buying an iPad just to use as a portable second monitor, but instead I decided to optimize my workflow by learning the shortcut keys to switch between tabs on chrome and between open programs.

So,

command tab will move you forward along the programs in the dock,

while

command shift tab will move you backwards,

then

command ` will move you to the next open instance of the SAME program.

Finally,

command option and the left or right arrow will move you through the tabs on the active browser window.

command r will reload the current page

I'm saving all of that and practicing it daily from now on.

I installed a package called emmet to my Atom text editor and if I click on ctrl + w, I'm able to wrap a selection in an HTML element, it's neat.

I worked a bit today with a fun piece of jQuery that lets you create a typing effect on the screen, it's cool and I'll probably be using it in my portfolio, which I should begin work on soon.

I also completed part of the Foundation course, about a third of the current section anyhow.

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
Framework Foundations (Bootstrap & Foundation) In Progress

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

Total Hours Coding: 1,108

Monday, April 4, 2016

Day 212: More Responsive Design with Bootstrap (a refresher), and Starting on Foundation

All right, today I'm starting off with the "Build a Website with Bootstrap" section of the Framework Basics course.

We learned how to make a custom Bootstrap build.

Here's something I saw on Stack Exchange, regarding making a jumbotron take up the full width of the page:

From the bootstrap docs "To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

Okay, I finished the Bootstrap work, now I need to decide whether to move on to foundation, or start wire-framing and coding up my portfolio in Bootstrap.

I'm going to go ahead with learning Foundation, even though I want to build my site already, it's better if I learn Foundation first, because maybe after learning Foundation, I will prefer Foundation over Bootstrap, and if so, then I can build my portfolio in Foundation instead of Bootstrap.

All right, so, learning Foundation now. So, Foundation is developed in SASS, a CSS pre-processor.

Foundation uses zepto, which is like jQuery, but with a lighter footprint, which helps performance on mobile devices. If we remove the zepto file, Foundation will fall back to jQuery however.

Today was a short day, tomorrow I plan on finishing the Foundation coursework, then starting on wireframing my portfolio with Balsamiq...that, or making my portfolio pieces responsive with Bootstrap and THEN working on the wireframing.

We'll see, but I've got plenty to do.

I'll watch Superman versus Batman also, we'll see if it's really as bad as some of the reviews make it out be. :)

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

Sunday, April 3, 2016

Day 211: More Responsive Web Design With Bootstrap (a refresher)

All right, I'm up to speed with the boot camp work, now I'm getting back to my own learning, so back to Bootstrap today!

I made a carousel today, and a modal window, which is like a pop-up window, except the user makes the pop-up appear when they click on a certain link, and it goes away if you click anywhere else on the page.

Here's the carousel (note the arrows on each side and the circles noting which slide the user is on, the 1st, 2nd, or 3rd slide):

Here's the modal:

All right, still working on the modal, adding more details to it. Bootstrap has pre-defined styles for form elements...that's great, because forms take a bit to type out.

Note that Bootstrap is built with the LESS preprocessor.

Here's my finished modal:

I'm taking a short quiz now on Bootstrap, and I'm also setting up my slack channel for the UT Boot Camp course, we got an email inviting us to join up today.

Ok, completed the "Prototyping With Bootstrap" badge on Team Treehouse, and I'll continue with the "Build a Website with Bootstrap" section of the Framework Basics course 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

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

Total Hours Coding: 1,104

Friday, April 1, 2016

Day 210: Responsive Design Refresher with Bootstrap (and some pre-work for the boot camp, and updating my resume)

Okay, I spent several days down in South Texas visiting my parents, but now I'm back in Austin, ready to get coding again. The boot camp starts in 19 days!

All right, we're still on the Bootstrap course, except now I'm using Atom as a text editor and I've been playing around with Brackets as well.

I received an email from the code camp today, with a series of assignments, so I'm working on that now.

The first video is about Git, the version control system which I've used for previous projects.

We're getting an SSH key now, which makes it so that every time we interact with GitHub, we won't have to enter a username and password.

Now we're installing mySQL. I installed Sequel Pro, which allows us to visualize the data in our database, it shows it in a GUI (graphical user interface) format.

Now I'm installing MongoDB.

I downloaded robomongo.

I went through a short Git tutorial.

All right, I finished the pre-work by uploading some basic work to GitHub and then emailing the link to the boot camp.

Okay, I spent a lot of today's coding time on updating my resume, because Career Services needed a copy of it before April 30th (it's only April 1st, but I don't want to procrastinate), and now it's done, I even made it in pdf format!

I am so ready for class to begin.

Now it's time to get back to Bootstrap.

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