Learning to Code: Reflections: November 2015

Saturday, November 21, 2015

Day 160: "HTML & CSS," by Jon Duckett and Bill and Bonnie's Website

I got a ticket yesterday (for my registration being expired) and I had to go get my car horn fixed today (to get my inspection, to then get the registration, I think that's how it works), and while there, I was chatting up my mechanics, Bill and Bonnie. I really like them a lot, they're good folks, so I told them I'd build them a website. They're great mechanics, but not many people know they exist because they have virtually no web presence. So, this will be a charity project, I'll deploy the site, then perhaps add features to it later as I level up my skillset. I'll also make them a yelp page, since they don't have one of those either.

So, I'm going to approach this project from a mobile-first perspective. Here's the layout breakpoints I'll use:

Layouts

Default
Min-width: 780px
Tablet Portrait (to landscape and desktop)
Min-width: 768px / Max-width: 979px
Smartphone
Max-width: 480px (using 800 px height for my mockup)

But before we can even write one line of code, I should be wireframing the site with Balsamiq, so I'll be doing that as well, I want this to be a professional job, not a haphazardly thrown together piece of work. So here's my first draft for the mobile version:

It's simple, but I like that, I wanted to give off a very non-corporate, mom and pop vibe, because that's how Bill and Bonnie are in real life. Now, under the image, I'll probably enter a little html5 <figcaption> element with a nice note about Billy and Bonnie's parrots. I thought of including an email, but no one emails their mechanic...then again, on a long repair, that could be useful...but then you could just text. Not including email meshes better with the folksy vibe of the page, but perhaps I should include it anyways. I'll mull it over.

So I'm thinking the site will be www.billnbonnie.com. It's easy to remember and it sounds more Americana than billandbonnie, which would be more generic. Here's the first draft of the full page layout, it uses a different focal image, and has a small gallery beneath it, the pics are pics I just took a few hours ago when I went to get my horn repaired, and it was a bit too sunny for pics, but that's what I've got to work with, so that's what we're going with!

I like it, it's super basic, but continues with the folksy theme. I'll make sure to add the new HTML5 <figure> and <figcaption> elements, as well as use alt values, in case the image doesn't load, and for users with some disabilities. So, here's the tablet version, from 768px to 969px:

I'm not too sure on that one, I've never really done a table layout before. You know, I really like the mobile one because it captures Bill and Bonnie's personality. The large one is stylish, but the focus is then removed from Bill and Bonnie, and it feels somewhat lost. Meanwhile, the tablet version is something of a balance between the two. Also, I plan to use black letters with a white outline, as that's readable on any picture background. What's interesting is that I keep making modifications here and there, and if I had started the process by coding instead of by using Balsamiq, every modification would have been a LOT of work. Using Balsamiq so that I have a finished product, or as close to a finished product as possible, before I write one line of code, is the way to go. This also applies to solving algorithms, I've been jumping in and solving the problem as I write it, somewhat, but I see that writing up some pseudocode would be a fantastic way to make the algorithm-solving experience more efficient.

This project is helping me a lot. I've looked at a couple of other mobile mechanic sites, for inspiration, and they have a lot more content, with prices and such, but Bonnie and Bill prefer to be called and see what the problem is before they extend a quote, so I won't add those sections. I'm not planning on using Bootstrap on this project...but perhaps I should finish the HTML & CSS book before coding everything up, to make sure I'm as standards-compliant as I can be.

I'll work on that tomorrow morning, I'm going to take a break now. In addition to the work above, I got up to page 209 of the book today.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,503
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,239

Treehouse Ranking (%): "You have more total points than 93% of all students."

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)

Books Read or in Progress:

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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

In Progress: "HTML and CSS," by Jon Duckett (On pg 209 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

My Progress on Free Code Camp (FCC):
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 JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects On 4 of 5
10. Intermediate Algorithm Scripting On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.

Hours Spent Coding Today: 5

Total Hours Coding: 734

Friday, November 20, 2015

Day 159: "HTML & CSS" by Jon Duckett

All right, I'm on page 187 of the book, it's early (10:37 a.m.), let's see how much I can knock out today.

When using <div> elements, it may be helpful to add a note next to the closing tag, to note which div is being closed, for example:

</div>

That's a useful tip, since it's common to fill div elements with other div elements and then lose track of which closing tag belongs to which opening tag. I haven't used the <span> element too often, but basically, it's used to tag content within another element, say, text within a paragraph. You can then give the span an id and apply CSS to it.

The term iframe is an abbreviation for inline frame.

SUMMARY OF CODING SKILLS

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Books Read or in Progress:

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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

In Progress: "HTML and CSS," by Jon Duckett (On pg 191 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 2

Total Hours Coding: 729

Wednesday, November 18, 2015

Day 158: "HTML & CSS," by Jon Duckett

O.k., today I'm starting on page 155 of the "HTML & CSS" book, which deals with input elements. I really want to continue with the FCC problems, but I've got to refresh a lot of my HTML and CSS knowledge.

According to an answer on Quora by FCC's founder, of the 142,513 campers (students) going through Free Code Camp, 208 have earned the Front End Dev Certificate, while 22 have earned the Full Stack Dev Certificate. That's a tiny percentage, about .14 for the front end cert and about a tenth of that for the full stack cert. Here's a screenshot:

Knowing this gives me quite a jolt of motivation. Completing FCC puts you squarely in a very small, elite group of campers. That's good stuff.

So, HTML5 is introducing form validation via the browser. That's new. At the time of the book's writing, only Chrome and Opera supported HTML5 validation. I'm on page 179 of the book now, it goes over forms in general, and HTML5 improvements to them in specific.

This is the DOCTYPE declaration that is used for HTML5 documents:

<!DOCTYPE html>

After that would go the <html> opening tag, then the <head> and <body> opening and closing tags, with the tags containing the content of each within, and at the end of the document, the closing </html> tag. Comments in HTML 5 are placed inside the document like so: . I should be using comments much more than I currently am, as creating code in a work environment often involves collaboration, and it's not always easy for another person to understand someone else's code.

HTML id attributes can begin with any letter or an underscore, but must have a unique name. Attributes should use lower case letters. If we want to give an element multiple classes, we can separate the classes with a space (but put all the classes in the same set of quotes).

SUMMARY OF CODING SKILLS

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Books Read or in Progress:

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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

In Progress: "HTML and CSS," by Jon Duckett (On pg 187 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 2

Total Hours Coding: 729

Tuesday, November 17, 2015

Day 157: "HTML & CSS" by Jon Duckett

O.k., I'm stuck on FCC on an algorithm problem on objects. I'm also stuck on the pomodoro clock project, which involves combining JavaScript, HTML, CSS, and JQuery. Since I'm stuck there, my current strategy is to complete "HTML & CSS" and "JavaScript & JQuery," both by Jon Duckett, thereby expanding my knowledge on the four subjects, and then attempt the problems again.

I'm still sick, I've been sick several days now since I got back to America, as the climate is much drier and colder here than in the Philippines, and I'm adjusting. I've been spending most of my day in bed and drinking a lot of water. Being back in America is a big change from the Philippines, and I've been spending time re-assessing my goals and how my time is spent. Web Development, becoming proficient at it, is my focus, and I'm even more motivated now to continue with it. Life's good, my cough not withstanding.

Today I'm starting on page 101 of "HTML and CSS." All right, let's go!

IMAGES:

O.k., when setting image sizes in our code, we should do so in pixels, not in inches. SVG and bmp file formats are used for saving vector images, which can be increased in size without losing any quality, because they are made up of lines with colors filling in the space between the lines (think of a logo).

This is all basic stuff that I already know, but it's a nice to refresh my knowledge. Oh, this is new, HTML5 has introduced a new <figure> element, it's used to wrap an <img> and a <figcaption></figcaption> element, so that the caption for an image can appear right below the image. Sometimes, browsers indent the contents of the <figure> element. If an image uses flat colors, saving it as a GIF is ideal, while photographs are for JPEG's.

TABLES:

All right, so these next sections deal with tables in HTML. I went over table headings <th></th>, table rows <tr></tr>, and table data <td><td>. We also used the colspan and rowspan attributes, like so, <td rowspan="2"></td> or like so, <tr colspan="3"></tr>. These are used to have a td element span several columns or rows. When you do that, you omit the unnecessary td elements. All these elements belong inside of a <table></table> element. That element then contains a <thead></thead> section followed by a <tbody></tbody> section. Here's an example:

<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>10th of January<th>
<td>20</td>
<td>40</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

That's an example similar to the example in Mr. Duckett's book. Not that empty cells in the top left should still be inserted as a table head element, <th></th>. Note that th elements should have a scope attribute, like so:

<th scope="col"></th>

or

<th scope="row"></th>

These indicate whether the th is for a row or column.

FORMS:

With forms, the method attribute is used, and it will have a property of "get" or "post." Get is used for short forms and to retrieve data from the server (as opposed to sending information to add or delete from the server). Post is used for more complicated things, like when passwords are sent, to upload a file, or to add information to or delete information from a database.

O.k., that's enough for today, starting up again tomorrow.

SUMMARY OF CODING SKILLS

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Books Read or in Progress:

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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

In Progress: "HTML and CSS," by Jon Duckett (On pg 155 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 3

Total Hours Coding: 727

Saturday, November 14, 2015

Day 156: Treehouse Objects Course and Duckett Books

All right, I'm having a great day, I've got a bit of a cough, but that's o.k., I'm powering through it. :)

Today I'm continuing with the Treehouse objects course.

Here's a function to print JavaScript output to HTML:

function print(message) {
var div = document.getElementById('output');
div.innerHTML = message;

}

I'll be using that for the project I'm working on. O.k., I didn't enjoy the treehouse course, I took most of it, but it didn't go as deep as I need it to go on objects.

Okay, I still need a lot of work on objects. I'm going to try the Jon Duckett books now and see if those prepare me better for completing FCC.

I'm on page 101 of "HTML and CSS" by Jon Duckett. I'll complete this book, then continue with "JavaScript and JQuery" by Jon Duckett, and then attempt the FCC object task and the pomodoro clock task again.

SUMMARY OF CODING SKILLS

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Books Read or in Progress:

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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

In Progress: "HTML and CSS," by Jon Duckett (On pg 101 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 4

Total Hours Coding: 724

Wednesday, November 11, 2015

Day 155: Treehouse Objects Course

Today I'm continuing with the Treehouse course on Objects. I need to understand Objects well in order to solve the next FCC problem. Afterwards, I have a choice of delving more into Treehouse or working on the Duckett books. I'm leaning towards the Duckett books, because of how much I learned from the Myers book, but it's all open. The main thing is to keep learning and continuously apply that knowledge by creating various projects, projects which will serve as my portfolio.

By the time I'm applying for a job, I want to be HIGHLY qualified. I have the time to invest in myself, and there's no reason to not take advantage of that. This is great!

O.k., say we have this object:

var brazil = {
hemisphere: 'southern',
holidays: ['carnival', 'turkey day', 'beach day'],
age: 143
}

Then, this below:

brazil.holidays.length

Would let us know how many holidays brazil has, and this below:

brazil.age += 1

Would add 1 to the age of brazil.

Then this below would access the property 'turkey day'.

brazil.holidays[1];

Would access the property 'turkey day'. A JavaScript object literal is like a series of named variables, each with their own value, packaged into a single item (the object). When making objects, be sure to denote strings with quotes, and anything not in quotes should be a variable, or a number, or a boolean, for example.

When using a for in loop, only bracket notation will work, do not use dot notation with a for in loop. Here's out object literal again:

var brazil = {
hemisphere: 'southern',
holidays: ['carnival', 'turkey day', 'beach day'],
age: 143
}

And here's a for in loop that iterates through it, outputting the property values:

for (var prop in brazil) {
console.log(brazil[prop])
}

The output would be:

southern
["carnival", "turkey day", "beach day"]

143

Neat. On the other hand, if you just want to access the properties, this would do it:

for (prop in brazil) {
console.log(prop);
}

The output would be:

hemisphere
holidays
age

If you want to output every property and property value, this would do it:

for (prop in brazil) {
console.log(prop, ' : ', brazil[prop]);
}

The output would be:

hemisphere : southern
holidays : ["carnival", "turkey day", "beach day"]

age : 143

This does the same thing:

var shanghai = {
population: 14.35e6,
longitude: '31.2000 N',
latitude: '121.5000 E',
country: 'CHN'
};

for (var key in shanghai) {
console.log(key, ': ', shanghai[key]);

}

Think of key like the i in for loops.

O.k., I spent a few days down in South Texas with my family, and now it's the 11th of November, time for the first Free Code Camp Austin Meetup! I'm heading out in a bit to have the first study session for my meetup group, which I'll be hosting! :)

Great stuff!

My class on JavaScript objects today mentioned JSON for the first time, which stands for JavaScript Object Notation. JSON is commonly used with a technology called AJAX to exchange information with a web server. Information sent in JSON format can easily be converted to a JavaScript format, and be displayed on a webpage. I downloaded a Chrome extension called JSON view, which makes viewing JSON data easier. JSON is a string formatted to look like a JavaScript object, which allows it to be easily converted to a JavaScript object.

The meetup was great, I just got home and posted a recap of the meeting on the FCC group Facebook page. Time to get some sleep!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,449
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,184

Treehouse Ranking (%): "You have more total points than 93% of all students."

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 4

Total Hours Coding: 720

Saturday, November 7, 2015

Day 154: FCC, Intermediate Algorithm Scripting

O.k., today I'm continuing with the Intermediate Algorithm Scripting. I've been making steady progress, there's 21 code challenges in this section, and I've completed 5 of them so far.

I'm on problem 4, which deals with objects. So, first I'm going to review the chapters on objects in Mark Myers' book, and then, I'll see how to use a for loop to iterate through an object. Working on that now.

I'm back in Austin, TX and I need to review some JavaScript material, especially material on Objects, so that I can answer problem 4. So, I'm going to Treehouse and reviewing some of the JavaScript videos.

Also, I ordered two books while I was still in Asia, "HTML and CSS," and "JavaScript and JQuery," both by Jon Duckett, and they've arrived already. They're pretty amazing, graphically speaking, and they've got great reviews, so I'm really looking forward to going through them.

Also, I launched the Austin meetup group for Free Code Camp, and I've set up meetups that alternate Wednesdays at 7 p.m. between Buzzmill Coffee and Cherrywood Coffeehouse.

My current plan is to finish the Treehouse Front End Web Development course, then attempt the Free Code Camp projects and algorithms again, armed with new knowledge. If I still have difficulty, then I'll go through both of Jon Duckett's books and try again. Reading "A Smarter Way to Learn JavaScript" really improved my JavaScript skills, so much so that some of the challenges were very easy for me. So based on that experience, I'm going to immerse myself in front end development via Treehouse and books (Jon Duckett's), with the goal being to reach a level of skill at which I can complete the FCC algorithm problems, projects, and other challenges in a confident and expeditious manner. I aim to achieve a very high level of skill at front end development (and possibly back-end also once I'm at a solid level with front end), and I'm going to put in the time required to do so.

This code generates a random number:

function randomNumber(upper) {
return Math.floor(Math.random() * upper) + 1;
}

I've used that several times in the past, but it came up again, so I thought I'd note it.

clear() will clear the JavaScript console.

We went over shift(), unshift(), push(), and pop(). Here's a quick way to make an array with a bunch of numbers in it:

var myArray = []

for (var i = 0; i < 10; i++) { myArray.push(i);};

myArray becomes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Neat, huh? This creates an HTML list, it's really cool:

var playList = [
'I Did It My Way',
'Respect',
'Imagine',
'Born to Run',
'Louie Louie',
'Maybellene'
];

function print(message) {
document.write(message);
}

function printList( list ) {
var listHTML = "<ol>";
for ( var i = 0; i < list.length; i += 1) {
listHTML += "<li>" + list[i] + "</li>";
}
listHTML += "</ol>";
print(listHTML);

}

printList(playList);

It's code from Treehouse. I'm realizing that I have to continuously be learning both HTML and CSS, AND JavaScript and JQuery. If I don't then my skills in one area get rusty as I focus solely on the other area. To prevent this, I'm thinking of keeping this in mind every day and structuring my day to do work on all four technologies, every single day, so that my skills never get rusty in any particular technology, and also, so that I can keep leveling up all four skills in order to create beautiful things. Knowing how to solve algorithms doesn't help me create beautiful web pages, in and of itself. Knowing how to make wonderful site layouts doesn't help me make a website interactive, which I need to be able to do. The point is, the four technologies are extremely limited when used independently, even if someone is an expert at one particular technology. These technologies shine when they are used in combination with one another.

So, that's what I've got to do to reach the next level. I need to invest daily into my skills in each technology. Duckett's books, as well as Treehouse and FCC, combined with each other, will forge me into a great front end developer, I just have to structure my days to utilize all these sources in an efficient manner.

We went over .join() and .concat(), which I've gone over before, join joins items in an array into a string divided by whatever you place in the parentheses (in quotes), while concat creates a new array combining the two arrays called.

I watched a video by Quincy Larson, the founder of Code Camp. One of the interesting things is that FCC will soon have an

To access an item in an inner array, the code is like so:

theArray[0][1]

The 0 is the index in the outer array, while the 1 is the index in the inner array. O.k., now I'm watching a video on JavaScript objects. I might be able to solve the bonfire after completing this course on objects on Treehouse.

Objects are made up of key and property pairs. To create an object, we assign an object literal to a variable. We do so with curly braces, like so:

myObject = {};

So, it's just like an array, except with curly braces instead of brackets. Here's an example:

myObject {
name: "Jack",
grades: [80, 85, 90, 95]
};

Notice the comma after the string, and also notice there is no comma after the last property, the array. We should place each key and property pair on its own line, and indent the key on each line. We went over how to access properties in an object. Objects use keys to access their properties.

myObject['name'] and myObject.name would both access "Jack"

The code below would change name to "Paola":

myObject.name = "Paola";

The code below would add a new key and property pair:

myObject.height = "5 feet 2 inches";

This function prints the message entered as a parameter to the HTMl document:

function print(message) {
var div = document.getElementById('output');
div.innerHTML = message;
}

You would just store the string inside a variable called message, for example.

SUMMARY OF CODING SKILLS

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 4

Total Hours Coding: 716