100 Days Of Code Log

My #100DaysOfCode log

Generate Convert Improve

Install / Use

npx skills add james-priest/100-days-of-code-log

Installs into whichever agent you are using.

About this skill

Quality Score

0/100

README

<-- back to Table of Contents

James Priest

100 Days Of Code

| Log 1 | Log 2 | Log 3 | Log 4 | Log 5 | | --- | --- | --- | --- | --- | | this log | 100 Days Round 2 | 100 Days Round 3 | 100 Days Round 4 | 100 Days Round 5 |

Challenge & Commitment

This is part of Alexander Kallaway's 100DaysOfCode challenge. More details about the challenge can be found here: 100daysofcode.com.

Commitment: I will code daily for the next 100 days.

| Start Date | End Date | | ------------- | ------------ | | June 12, 2017 | January 25, 2018 |

Goals

[x] Code daily
[x] Expand portfolio
[x] Hone my Git CLI skills
[x] Complete as many courses, classes, challenges, & certifications as possible
[x] Get established in Twitter dev community
- This has been awesome!
- Great support and encouragement from my Twitter family!
- Use #100DaysOfCode hashtag.

Secondary Goals & Resources

[x] Complete as many Code School courses as possible. These are highly focused, subject matter classes that can be completed in a week's time. Completed 18 courses!
[x] Got accepted into the #GrowWithGoogle Challenge Scholarship and will be doing the #GoogleUdacityScholars program as part of #100DaysOfCode Round Two!

Code Log

Final Thoughts for Round 1

January 26, 2018

A.K.A: A Love Letter to my Twitter Fam.

Dear Fam,

This was a completely successful and highly effective challenge. It gave me a format to help me keep myself accountable. It brought out my best and helped me struggle through my worst - the self-doubt, frustration, and uncertainty that comes along with learning the skills to be a cutting edge developer today.

The Twitter community was the key. This challenge helped me connect with like-minded folks who are taking the same classes, learning the same information, and sharing support and direction at every turn.

Will Ferrell said it best when he said,

"Facebook makes you hate people you already know & Twitter makes you love people you've never met."

That completely sums up my experience with this challenge. It was an exercise in commitment and consistency which ironically enough is the recipe for success in this field:

Consistency over time.

If you can master that while leaning on the support of the community then you've got it made.

Thank you once again to Alexander Kallaway for providing access to this community and thank you to all the friends I've made during the seven months of coding it took me to get 100 Days of Log entries knocked out. :P :)

100. CSS Grid Practice App on CodePen

Day 100: January,25 2018 - Saturday

Project: CSS Grid SPA

Progress: Completed project!

Thoughts: I had gotten a couple requests from folks about chekcing out the code - which anyone is free to do by forking the repo. So, since it's all straight HTML, CSS, & JS, I created a Pen on CodePen that you can check out as well.

Link to Work:

99. Navigation, Splash Page, Code Hints - CSS Grid SPA

Day 99: January,15 2018 - Saturday

Project: CSS Grid SPA

Progress: Completed the addition of navigation, splash page, & code hints.

Thoughts: I needed a simple way to provide site navigation to any page without requiring too many clicks from the user. I added a slide-out left nav following the same structure as Dave Geddes' Grid Critters learning app.

The next thing I tackled was creating a splash page in order to give some background on this project and to properly acknowledge Dave's work with creating Grid Critters and Flexbox Zombies. This is also where I discuss what technologies where used in building this app.

Both the slide-out nav and the splash page were created with absolute positioned divs set to display: none and opacity: 0. I then created a class with the 'show' state and set that class on the div element with an 'onclick' event. The animation was done by setting a transition on both of the div elements.

Lastly, I created a 'code hints' section which allow you to 'show' the answer to the proposed question and also paste this answer in place.

Link to Work:

My Practice Environment on GitHub Pages
GitHub Repo for this project
Grid Critters - CSS Grid learning app
Flexbox Zombies - Flexbox learning app

98. JSON, Media Queries, & Transitions - CSS Grid SPA

Day 98: January,10 2018 - Monday

Project: CSS Grid SPA

Progress: Created a JSON file to contain the data for each page of the SPA.

Thoughts: I had originally built this site with static pages but it was a pain to maintain. It was definitely NOT DRY (Don't Repeat Yourself). So I isolated the pieces of information that changed from page to page and put those in a JSON file. I then gutted the HTML so that only the semantic structure remained.

Once I hooked up the Back and Next buttons to load the appropriate page data, I then needed the app to animate nicely when moving from one page to another. This was done with CSS transitions.

Lastly, I added some fine-tuning to the layout and font-size through media queries to make the site responsive.

Link to Work:

My Practice Environment on GitHub Pages
GitHub Repo for this project

97. My CSS Grid Practice Environment

Day 97: January,5 2018 - Monday

Project: CSS Grid Practice Environment

Progress: Created a stripped down version of the learning environment from Grid Critters.

Thoughts: In going through Dave Geddes' Grid Critters learning app, I was inspired to try my hand at replicating the functionality. I didn't just want to code along with the exercises but I wanted to see if I could build an environment that replicated the lessons of the game.

I figured in doing this I'd have the opportunity to not only "flex" my coding skills (Ouch, bad pun :P) but also have a #100DaysOfCode project to work on. It would also stretch my coding skills to build something from scratch. Heck, this would not only ingrain the material, but it might even serve as sample of work when finished.

And how long would it take? I figured maybe a week or two. That was my first naive step down this road armed only with the notion of, "Well... how hard could it be?"😉😁

I found out exactly how hard was after spending six weeks coding not just the stuff that worked but all the stuff that didn't!

It was a GREAT exercise and I learned alot in the process.

Link to Work:

My Practice Environment on GitHub Pages
GitHub Repo for this project

96. MCE (My Code Editor) - Undo & Redo History

Day 96: December 31, 2017 - Sunday

Project: MCE (My Code Editor) project

Progress: Modified code to work with browser's Undo History

Thoughts: I found out that whenever we programmatically manipulate the contents of an editable region on a web page, we circumvent the browser's built-in "undo" history. This is