#100DaysOfCode Weekend Update: The Hardest Part About This Challenge

Almost forgot to post an update of what I did over the weekend. Sorry. I have no excuse other than the fact that I was busy with other things besides coding and writing.  Sneaking in my own coding sessions during my breaks at work has become difficult. I’m now working through them and have been for the last week.  Just to give you guys a glimpse into my personal life: I was recently promoted at work.  With the promotion, I’ll be responsible for leading the team in charge of building our district’s new website and app that is to be launched this Spring.  Though I’m grateful and excited about the opportunity, much work lies ahead for me, and staying organized is my priority.  I’ve set goals for myself outside of work that I don’t intend to give up on.  Even as I write this as my eyes are bleed with exhaustion, just know that #100DaysOfCode will continue.  As I said in earlier posts, the hardest thing about this challenge is not coding, but writing about it.  I hope you all forgive me if the posts become more sporadic.

Besides studying jQuery this past week, I also worked on the Bootstrappin’ Portfolio site.  I say I spent probably a total of 6 hours of the challenge on it so far, and it’s turning out well.  Over the weekend, I worked on the index and services.html pages.  I imported web fonts, fixed the hover animations on the navigation bar, worked on alignment of the column grid, changed the button structure, and incorporated some icons.  Here’s what the two pages now look like:

new home (index.html) page

new home (index.html) page

 

port_three

new services page with icons and center-aligned content

A cool thing I learned to do that I always wanted to incorporate on a site is a blinking cursor effect that you can see above in the first pic. I just like the way it looks and it reminds me of writing (my first creative passion).   I shared the sample code below:

/* BLINKING CURSOR */
.blinking-cursor {
   font-weight:100; 
   color:#fff; 
   -webkit-animation:1s blink step-end infinite; 
   -moz-animation:1s blink step-end infinite; 
   -ms-animation:1s blink step-end infinite; 
   -o-animation:1s blink step-end infinite; 
   animation:1s blink step-end infinite;
}
@keyframes "blink" {
   from, to {color:transparent;}
   50%{color:#fff;}
}
@-moz-keyframes blink {
   from, to {color:transparent;}
   50%{color:#fff;}
}
@-webkit-keyframes "blink" {
   from, to {color:transparent;}
   50%{color:#fff;}
}
@-ms-keyframes "blink" {
   from, to {color:transparent;}
   50%{color:#fff;}
}

I’m using the CSS class blinking-cursor, so place the following code <span class=”blinking-cursor”> | </span> where you want the cursor to be in your HTML file, and walla!

To finish the project off, I plan on adding a section for a developer’s bio to the services page, and including some additional page options for the portfolio section of the site.  Even though the Bootstrap grid is responsive, I haven’t tested what my latest additions look like in mobile view, so I’ll probably spend a day of the challenge on that.  I also want to refactor the code as a single page site, maybe with AngularJS since I’m more comfortable with routing views. That’s the future though, and I’ll just be thankful to get through this week.  Course 4 of the full stack web development specialization I’m in just started, so lookout for more and frequent posts on using Cordova and Ionic framework capabilities for building hybrid mobile apps.

You can check out the code I did over the weekend at the #100DaysOfCode Github repo.

*** Day 18 & 19 Recap ***

  1. Added font awesome icons to services.html page
  2. Changed font options for the entire site
  3. Fixed the alignment issues on the services.html and index.html pages
  4. Added code to create a blinking cursor effect
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s