Learning to Code: Reflections: April 2016

Wednesday, April 27, 2016

Day 233, 234, and 235: UT Coding Boot Camp Assignments

Okay, I haven't updated this blog in about a week because I've been super busy with coding and the boot camp.

I've gone to three more classes for the boot camp (classes range from 3 hours to 5 hours), I went to an event at Facebook's offices here in Austin (but I don't include that time as "coding time for purposes of the blog), and I've been coding up various assignments.

Anyhow, here's some screenshots of the portfolio we've been working on for class, using a boot strap theme:

So that's what I've been working on, it's a single page app.

Check out the logo I made, and several iterations (the last one is the final one, and it's a lot darker on the actual webpage, but the screenshot faded it):

I've also been working on another, super basic portfolio site which we created based on some images (we had to measure pixels).

Okay, I turned in that assignment, and it's live on heroku:

https://pacific-refuge-33093.herokuapp.com/assignment2/index.html

I like heroku, it's pretty cool.

Now it's time to work on the next project, Hangman!

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
Framework Basics (Bootstrap and Foundation) 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) In Progress

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

My Web Dev Portfolio: www.adamcamacho.com
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: 24

Total Hours Coding: 1,238

Tuesday, April 26, 2016

Day 232: UT Class Today and GitHub Course

So today I'm heading over to class about 8 hours early, I want to beat traffic, and I've got to do a lot of studying anyways, so I may as well head to the coffee shop and start studying.

I took more of the GitHub class, and then in the UT Bootcamp, we deployed our code to heroku, and we sent in that link, since deploying to heroku was part of our assignment.

Here's my heroku portfolio project (we had to copy a design, this is not my design):

http://immense-retreat-16372.herokuapp.com/

Cool. I deployed my portfolio (which is actually already live anyhow) to heroku, just to test it:

http://arcane-bayou-53032.herokuapp.com/

And it's deployed:

Neat. All right, short day today, only 3 hours of coding. I've actually been sick these last few days, I've got a slight cough coming on, and I've been spending most of my day in bed, but I've gotten out to go to class.

Hopefully it'll pass soon.

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
Framework Basics (Bootstrap and Foundation) 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) In Progress

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

My Web Dev Portfolio: www.adamcamacho.com
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,214

Sunday, April 24, 2016

Day 230 and Day 231: JavaScript Race & Uploading Simon Game to GitHub

Okay, today I attended an event hosted by MakerSquare, a coding boot camp here in town. It was a JavaScript race, with really basic JavaScript problems combined with an easter-egg hunt, so we were given clues at the end of each challenge that would guide us to the next challenge, and so on.

My team won 1st place, and I won a $750 class, but I ceded the prize, since I couldn't attend the class due to the UT Boot Camp being partially at the same time.

So I got a $20 gift card to Torchy's Tacos instead.

It was a good day.

On Monday, I started the process of uploading my CodePen projects to GitHub, so I have to create files linked to each other and to CDN's, to hold every project.

The first project that I uploaded was my Simon Game. There is an issue with the Simon Game code on Firefox and Safari, and I spent over 6 hours trying to find a way around the issue, but it remains. Nonetheless, it works on Chrome, Internet Explorer, and Opera, so I added appropriate notes to the README.md file.

Here's a productivity screenshot from yesterday:

Also, I ran my JavaScript through JSLint, and there were some issues, not huge ones, but they needed to be addressed nonetheless. I'm using validators regularly now, they're so important.

I'm using GitHub daily now, which is pretty great.

Oh, also, I'd been having an issue with my Chrome browser not opening index files in a new tab, it would only open index files if Chrome was closed. Well, I contacted Chrome support on a message board for that, and a fellow named Johnny suggested a setting change which could be changed to resolve that issue, and it worked. It wasn't anything I had done, it was just some setting that causes that in some cases.

Tomorrow we've got class again, and I'm super excited!

So now my Simon Game is uploaded on my GitHub, I turned in my class assignment about a week early, and all is well with my family.

Life's good.

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
Framework Basics (Bootstrap and Foundation) 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) In Progress

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

My Web Dev Portfolio: www.adamcamacho.com
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: 7.5

Total Hours Coding: 1,211

Saturday, April 23, 2016

Day 229: UT Coding Boot Camp Class, Refreshing on HTML, CSS, and GitHub

So, apparently, we can't add empty directories to GitHub.

Also, if we upload a repository that contains a folder with a repository within it, GitHub will show it as two little black folders.

Cool. Here's some code I worked on today:

The index.html:

<!doctype html>
<html>
<head>
<title>Floats</title>
<link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>

<div id="top-left">
<p class="box-text" id="text-one"><div></p>
<p class="box-text">position: fixed</p>
</div>
<h1 id="title">Parading</h1>
<p id="paragraph1">Suspendisse tortor leo, convallis quis eros non, gravida fermentum justo. Donec nisi elit, iaculis at fringilla placerat, placerat aliquet nisi. Donec a dolor mi. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>
<div id="middle-div">
<p class="box-text" id="text-three"><div></p>
<p class="box-text">position: relative</p>
<div id="middle-right-div">
<p class="box-text" id="text-two"><div></p>
<p class="box-text">position: relative</p>
</div>
</div>
<p id="paragraph2">Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>

</body>

</html>

And the CSS:

* {
box-sizing: border-box;
text-align: center;
}

/* Fill in your CSS Below */

body {
margin: 0 auto;
}

header {

background: #ccc;
padding: 20px;
margin-bottom: 20px;
color: #333;
}

section {

}

#left {
float: left;
width: 33.33%;
background: black;
color: white;
height: 50px;
padding-top: 16px;
}

#middle {
float: left;
width: 33.33%;
background: grey;
color: white;
height: 50px;
padding-top: 16px;
}

#right {
float: left;
width: 33.34%;
background: black;
color: white;
height: 50px;
padding-top: 16px;
}

#full {
padding-top: 100px;
}

#division {
width: 100%;
height: 50px;
padding-top: 16px;
background: lightblue;
margin-top: 70px;
}

aside {
float: left;
width: 33%;
margin-top: 65px;
background-color: white;
height: 200px;
margin-left: 30px;
}

footer {
margin-top: 160px;
background: grey;
height: 50px;
padding-top: 16px;

}

And another index file:

<!doctype html>
<html>
<head>
<title>Floats</title>
<link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>

<div id="top-left">
<p class="box-text" id="text-one"><div></p>
<p class="box-text">position: fixed</p>
</div>
<h1 id="title">Parading</h1>
<p id="paragraph1">Suspendisse tortor leo, convallis quis eros non, gravida fermentum justo. Donec nisi elit, iaculis at fringilla placerat, placerat aliquet nisi. Donec a dolor mi. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>
<div id="middle-div">
<p class="box-text" id="text-three"><div></p>
<p class="box-text">position: relative</p>
<div id="middle-right-div">
<p class="box-text" id="text-two"><div></p>
<p class="box-text">position: relative</p>
</div>
</div>
<p id="paragraph2">Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>

</body>

</html>

And some more CSS:

body {
max-width: 700px;
min-width: 700px;
}

#top-left {
height: 100px;
width: 150px;
background: lightgrey;
position: fixed;
z-index: 100;
}

#title {
font-size: 30px;
margin-left: 100px;
}

#paragraph1 {
margin-left: 100px;

}

#middle-div {
position: relative;
background: grey;
height: 200px;
width: 600px;
background: lightgrey;
margin-left: 100px;
}

#middle-right-div {
position: absolute;
top: 100px;
left: 475px;
height: 100px;
width: 150px;
background: grey;
}

#paragraph2 {
margin-top: 20px;
margin-left: 100px;
}

.box-text {
text-align: center;
}

#text-one, #text-two {
margin-top: 30px;
margin-bottom: -15px;
}

#text-three {
padding-top: 50px;
margin-bottom: -15px;

}

Basic stuff.

Today was super short, I attended class, and then I took most of the day off to just have some time alone with my thoughts.

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
Framework Basics (Bootstrap and Foundation) 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) In Progress

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

My Web Dev Portfolio: www.adamcamacho.com
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.5

Total Hours Coding: 1,203.5