Thursday, April 14, 2016

Day 220: More Work on My Portfolio Site

Okay, I've got several different versions of the site (different background images) that I'm considering right now.


That's one.  Then there's this:



Of course I would change the color around the frame of the profile picture if I went with either of those.  There's this:

 
I'm liking the forest one so far, it looks more cheery than the others.

Okay, I upgraded the borders:



Sweet.  I tried out another design, but then saw that I had to give attribution to the photographer, and I don't want that to distract from the site, so instead I went with this:


 I think it looks professional.  Here's the "Portfolio" page:




And then the "Home" page.


So far so good.  However, that home page is far too empty.  So, I'm working on adding something neat to it...

I did it!!!

I would need a video to show it, and I don't want to upload a video, but basically, the text on the page is typed as the user watches!  Just imagine it:



Super!   So, I changed it up a bit, it's left-justified now, and I got the cursor to stick where it's supposed to, let's take a look:


The centered version actually looks better in still-frame, but in motion, as it is, it actually looks better left-justified, as the eye can follow the script (instead of being stuck in the center).  So, that works.

I'm super proud of that, I remember the first time I saw something like that in a website, I thought, "I want to learn how to do that!"

And now I know it's actually super simple.  

That's the way it goes as you level up as a dev, things that used to impress you become completely understood, and then they no longer impress.  

It is what it is.  :)  

I'm at 6.5 hours so far today, and I've made pretty great progress!  

Okay, I'm calling it a day at 8 hours.  I'm almost finished with my site, all I need is the contact me section, so that'll be tomorrow's work load.

Today was a great day, I finished the "About" section and the "Home" section.  I also solved a quick algorithm, find the largest number in an array, and return the index of that number within the array:

var array = [1,2,10,3,4];
var num = 1;
var final;
var indexCounter = 0;

for (var i = 0; i < array.length; i++) {
    if (array[i] > num) {
      num = array[i];
      final = array[i];
    }
}

indexCounter = array.indexOf(final);

console.log("the highest number is " + num + " and the index of that number is " + indexCounter);


It was simple, but it was still good practice.  I'm going to start refreshing on algorithms more often, perhaps daily, as coding interviews involve white-boarding algorithms, so I want to keep my algorithm skills fresh.  

Good stuff. 


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) 
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,159.5

No comments:

Post a Comment