Challenge accepted. I’m always looking for new skillsets to add to the ‘ol resume. After reading a post mentioning 1.4 Million coding jobs available and only 400,000 students I decided why not? Via Twitter, I publicly accepted the challenge on June 1st, 2017 to hold myself accountable; I will learn to code.
Noticing a trend of “What I Learned from My First 100 Days of Code” posts, I decided to journal my journey, so I can eventually write my own:
Update: For some reason certain code example text won’t show up on this page when I publish it so Read full 100 Days on Google Docs
2017: Code Journal
Feeling good. Setup profiles; completed the first 15 lessons. Feels familiar from previous blog (WordPress.com) HTML experience.
My “Ah ha” moment came on CSS Lesson 19. It all just clicked!!!
Assignment: Set the Font Family of an Element requested I change the font to Monospace; which led to me adjusting it to say Arial; Times New Roman; etc just to see if it would work… and it did! It was surprisingly exciting to watch the text change before my eyes like magic with just the switch of a word! Starting to feel like a coder 🙂
Burned through the first 44 lessons in 3 days. I don’t wanna burn out but I’m addicted! Not that I have many followers on Twitter but on day 1, I publicly announced that I’d code for 30 min per day. However, I’ve quickly realized that’s not enough. So from here out it’s a 30 min minimum.
Very frustrating. My streak is over. All of my progress registered as tomorrow. (Yeah it’s weird.) I’ve worked 4 days in a row of my 💯 days of code challenge. Every lesson I completed on June 4th, registered on FCC as June 5th. Not gonna lie, I was crushed to see my “Longest Streak” counter reset itself, while it registers my completed assignments for a day that hasn’t even arrived yet! Ugh. Note to self… reset browser. Makes me feel like I’m living in Japan again being a day ahead!
Moving forward. I’m over the streak counter. As long as I hold myself accountable for my 💯 day commitment then I accept the FCC website is not on my 24hr schedule. It’s basically if I code every morning at 6am for 3 days and then the 4th day I can’t get online until after 6pm it registers like I missed a day. Whatevs… I know I’m here 🙂
Assignment: Override All Other Styles by using Important. I KNEW my code was right and yet my text wasn’t pink!
*Note to self: Don’t forget the semicolon!!!
End of the first week of the 💯 day challenge. Most of what I did today registered as yesterday (6th) starting to wonder what’s going on with the date and time, but again I forgot to refresh my browser. Oh well.
As a photographer, and Photoshop enthusiast up until today I considered myself something of a color master. Visually maybe I am… been using the RGB … CMYK … grayscale … Pantone codes for nearly a decade, yet somehow I missed the explanation of how those codes came to be … or how the numerical system works …. I’d never even heard of HEX code before today! WHAT?! How is this possible?
Moving into week two, and in the first 7 days I’ve officially questioned my entire creative existence. At this rate, I can’t even imagine what the full 100 days will bring.
I’m super tired but I will do my 30 min minimum … stuck on Assignment: Line up Form Elements Responsively with Bootstrap
The last 2 days have been busy and I didn’t start to code until after 10pm. Clearly my brain cannot do this after dark. Still stuck on Assignment: Line up Form Elements Responsively with Bootstrap! I need sleep.
Saturday. 6am. Coffee. Code.
Decided I cannot code late at night anymore. It’s counterproductive. I don’t retain what I learn or I’m just stuck unable to think straight and kicking myself.
*I was stuck on a problem for nearly 2 days because I forgot to add </div> closing tags to the ends of my classes! Simple mistake that became very clear in the morning 🌞…but 2 nights in a row I’m counting div tags instead of sheep. No more.
Moving onto lesson 87…
I’m working backwards today :}
Lesson 92 (I think) “Label Bootstrap Wells” and it passed me but it really doesn’t look right.
So I went back to lesson “Use an ID Attribute to Style an Element” for a refresher and it’s showing as incomplete bc background isn’t green like it was when I passed the level… irritating. So I guess I’ll redo it.
(Disregard all of this, but save bc it documents a very real moment of struggling through what should have been a simple task.)
Moving forward I realize it’s another simple oversight… DUH. I should have known the text was white and screaming wrong! My mistake was one arrow in the wrong place!
WRONG …(turned out to be right…
nope also wrong )
RIGHT… (nope it was wrong)
After all that fixing… it tells me it’s now wrong. So it looked wrong but it was right and now it looks right but it’s wrong. Damn it.
Okay my official conclusion on this is that I am a visual person and it looked wrong because there’s no style added yet. The text above my col-xs-6 actually read:
Assuming the system is correct I will move forward with the assignment and see what happens but I may come back to this…
After moving on to lesson “Give Each Element a Unique ID” before starting I look at the code and compare to the result and now it makes sense:
In the previous assignment, I added quotations and they shouldn’t be there!
Code now reads:
VISUAL Result reads:
If I’ve learned anything today it’s that I should stop getting ahead of myself and just follow the instructions. It’s usually much simpler than it seems.
Completed the 100th!!! 12 days to triple digits… making good time, but am I retaining the information?
Now that I’ve moved on to JQuery it seems I may need to supplement actual coding with time spent watching the FCC YouTube channel. While I’m good at following instructions I don’t think I truly understand what the $bling codes are doing yet… also as previously learned, do not get ahead of yourself!!!
Overslept. Time for one lesson and I’m stuck…my goal is to “Target the Parent of an Element Using jQuery.” I have done it 3 different ways and each time I get 3 out of 4 correct checkmarks and ONE big red X! Cleared to reset and I guess I’ll give it another go after work today…
WTF?! I AM using the .parent() function!!!
After watching the walk thru video by Jose Moreno on YouTube I realize I made a super obvious mistake… I had actually put text inside the parentheses (). Oops.
I had to come back to finish off jQuery and had so much fun with the “animated hinge” !!!
Set up a codepen.io account and played around with simple html headers, sub-headers, paragraph, and started messing around with color schemes.
Started researching Joseph Campbell for the Tribute Page project.
Going back through the fCC assignments and deciding which information I will need to use in my code for the tribute page.
I intend to make the page responsive using Bootstrap grid codes and found a very helpful link in addition to FCC content:
June 17th to 20th
All spent writing my tribute page. Gathered all info and started the layout in all html using no css. The hardest part the first day was adding the caption to the image. I did however figure out how to add solid or dotted line borders! I went with double line 6px! (But scrapped it later and started over).
18. I struggled with NOT using any additional CSS and also mixing up what goes where. Once I went back and watched the instruction video I realized he used ONLY bootstrap. It’s been fairly easy since I did a bootstrap tutorial and have researched GRID codes a bit more in depth. So I used thumbnails up top and a grid on the bottom.
19. added all timeline list text items but wish I’d have waited until I’d finished the full pg design for the sake of not having to spend so much time scrolling everytime I run the code!
20. Added the pull quote, which I had zero clue what he meant but a search turned this up which was exactly what I needed:
What I’m still working on now is getting 3 images aligned horizontally which i am able to do but since the pics are different sizes they don’t look right. I don’t know how to vertically center one image or maybe add text below to fill space.
Later this night… I’m so tired. I’ve used just about every combination I know of so far and still struggling to align the images the way I want them. Things are working most of the I just don’t know how much I like the look of the responsive pictures.
I’m definitely getting used to certain actions and I’m making sure to type out everything and not using shortcuts or much copy and paste (except links) to make sure it sticks in my brain.
If I’ve learned anything this past week working on the tribute page is that the hardest part is making all elements on the page work together and still look nice!
For days now I have been trying to submit my project and every time I go to do that I find one more thing that I want to alter or fix and then I have to do a little bit more research on how to do that so here’s another link:
I’m discovering how easy it is to find deprecated coding advice online. So must make sure to use specific search terms. I’m starting to narrow down the best places to get current information. Eventually I’ll have a full list.
I also watched the UDEMY preview and am considering taking a coding class so that I can truly understand WHAT I’m doing and WHY things work.
Spent most of the morning trying to figure out why on Earth my button links weren’t working and going back and forth debating whether I liked the buttons inside or outside of the image container… I went with outside.
Now I’m pretty much done with the tribute page. It’s been a long week and I tried not to be a perfectionist and just leave well enough alone … but I can’t help myself when I know a page CAN look better and it’s within my skillsets to figure it out… I must fix it or it eats at me.
So, I have a small paragraph of text and hated the way the jumbotron makes the font huge automatically. So to combat this problem I added a panel to the lower portion of the page and a footer to the bottom (instead of the <p> that I used previously).
Gonna do a few finishing touches and be done.
Up until this point I’ve completed all FCC lessons and the tribute page using my mobile devices (iPad and Moto Z phone) bc my iMac is broken. Ordered a new laptop that should arrive tomorrow so before starting the portfolio page I decided to take a step back today and tomorrow to read about code and also search other portfolios for inspiration. Sidenote • While I’ve had zero “likes” on my tribute page, someone did comment that they were unable to figure it out so they copied my code for block level buttons which is flattering and another person asked for advice on making a responsive page so I must be fairing well as a newbie!!! Also I took note of how many others pages turned in after mine and they were NOT responsive, so I feel confident. I liked the pages though … they had some really great content, like Pink Floyd, Muhammed Ali, Nirvana and more.
Tonight I read articles and watched the new Preetha youtube videos, before watching a documentary called C♀DE. It was eye opening and talked about the female presence in computer science or lack of…
So far, as a 34-year-old woman, I’m off to a decent start and have had no problems with anyone being anything more than friendly and helpful. But what do I know really? I’m not even in the industry yet, only learning the basics. So while I have no in-person experience, what I can vouch for at this point are the great people on FreeCodeCamp and Gitter forums. Who knows – maybe in the last few years there’s been such a shift in attitude toward women in the coding world that I will never see the struggle that once was… wouldn’t that be something?
Before starting my portfolio project, I’ve decided to go back and redo all the first lessons. Since I did all of them on my phone and tablet I figure it would serve as meaningful to actually do them again on my new computer! I should be able to burn through them faster on a full screen!!! Most importantly, I need a refresher. A quick review should do my brain a big favor 🙂
Taught my daughter some code and we spent most of the evening playing around on codepen. Mostly changing background colors and font styles using basic HTML and CSS.
My teenager showed me how he could get in the google code in the browser (which I had open and he was like oh I know this watch what I can do!) and proceeded to change his school grades. But refreshed and it changes back! Good to know 🙂
Lots going on a home trying to reorganize our house! So the last few nights and mornings have been spent re-doing as many lessons as I can squeeze in before starting homework.
The end of the first 30 Days!!!
Continuing the lessons, I’ve made it halfway through the responsive section, for the 2nd time! I realize I’ve gotten off to a late start in the coding world, so it’s most important to me to make sure I retain the basics … and I must say that these lessons are super easy now. Maybe because I’m not over thinking the instructions! Or perhaps it’s a new found confidence after putting together the tribute page, either way I’m one step closer to building the portfolio.
On that note I’ve wanted to quit redoing the lessons multiple times and just move on to start building, but I’ve had to stop myself, and remember that there’s no point in moving forward if I don’t have a good grasp on basic HTML and CSS. Things that didn’t make sense, now do and I’m picking up on little bits of information that I missed the first time around 🙂
Rebooted the PC and the browser brought up the tribute page automatically and I noticed that I forgot to fix the one block level button on top that is wider than the others. I’m wondering if it’s in the wrong container…???
Off to a late start. It’s almost 9pm and haven’t had a chance to code at all. I plan to do at least a few FCC lessons tonight!
Did a few bootstrap col/row/well lessons to refresh the memory in preparation for the portfolio. Note: I plan to use Bootstrap and not mess with other libraries yet.
Moving back to the portfolio project. Testing what happens when I use multiple jumbotrons with containers: it made a double line which looks cool but can’t figure out how to put the navigation bar inside or on top of the lines, so for now I’m scrapping this idea.
Disregard. *** I found a MUCH better way. (see link below) ***
I was ALL over the place today … but so much accomplished. A few resources for reference:
https://www.w3schools.com/css/css3_gradients.asp …seems like too many browsers don’t support diagonal gradients so even though I LOVE them I opt not to mess with it.
CSS Style Explanation: https://www.w3.org/Style/LieBos2e/enter/
HTML and CSS supports 140 Color Names: https://www.w3schools.com/colors/colors_names.asp
This is EXACTLY what I need. Click on the color and it goes to a page where I can view colors on top of the chosen background color; easily choose a color scheme without testing each color individually, which is what I’ve been doing. Boooooooo. Doing it the easy way from now on!!!!
This page will come in handy later: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Preprocessors Links (including Stylus)
***Make a responsive NavBar:
It’s been a LONG day of coding… pretty much all I’ve done with my Independence Day (with the exception of making breakfast, lunch, and dinner for the fam 🙂
- I learned that the word sprite has many definitions: Soul, ghost, elf, fairy, etc. but the one I needed was a “computer graphic that may be moved on-screen and otherwise manipulated as a single entity.” Interesting. Not gonna pretend to understand it yet. Making me wonder why a certain soda chose this name:)
So far, I am super happy with the portfolio page. I did as much as I could on my own which gave me a basic layout using bootstrap but wasn’t really happy with the look of it, so I copied some code from W3Schools and then played around with it until I figured out what each line of code actually did to my page. Then I went back and decided what I wanted to keep and what was unnecessary. Voila! I feel good about this project!!!
Currently working on creating an image gallery to show my skills/portfolio section, although I’m not sure if this is the best way yet… I may use thumbnails. ( I kinda want to do it differently than the tribute page so maybe not.)
Bookmark to page section: https://www.w3schools.com/html/html_links.asp
Thumbnail with Caption Example: https://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons
I have struggled consistently with horizontal lines, or actually the HR stands for “Horizontal Rules” seems like it should be simple but there’s lots of conflicting information online… much of it is outdated. It seems that CSS is the way to go rather than inline
…back to bookmarking the page sections … https://www.w3schools.com/html/html_links.asp
And realize I forgot to create the contact form. I knew something was missing!!! That may be a project for this weekend!
Information coincidently seems to appear at the right moments: After reading the “My Mistakes” portion of an article by Jose Manuel Gallego I realize that maybe I should finish the portfolio before moving on… in an effort to not make the same mistake this guy made!
Trying to make the best use of my time. There’s still quite a bit that needs to be done on the portfolio and I am just begging for time this weekend, so in the few minutes I can spare I started CodeAcademy lessons. Which allows me to reinforce the knowledge that I’ve gained so far on freecodecamp and also get a bit more explanation of WHY I am doing things. So while I absolutely LOVE FCC for making me learn by solving, it doesn’t always paint the full picture and knowing my own learning style… I think that going back over a code that doesn’t work and testing and re-testing by method of trial and error feels great when it’s over but does not leave me with the sense of knowledge.
Tried to work on the portfolio but couldn’t focus. Watched random videos about basic HTML and CSS.
Watched a few TedTalks; learned about the history of hackers and coding, facial recognition problems and where the world of programming is heading. (how code is the new literacy, etc) Also a really great talk about Moral Bias; Google algorithms, flawed search engines, and how at some point there’s always a human making decisions on the other end. Introduced to a program called Pivot that seems amazing (I’m a ‘lil late to this party as it was getting recognition 2010-14) and looks like it’s now part of Microsoft Silverlight? IDK . I actually think it could also be behind the success of Netflix … and other similar and emerging programs. Something to look into further.
I got around to setting up a Contact Form finally! Except now I’ve got a problem. I’ll Try to fix it tomorrow, but basically it is perfect and exactly what I was going for as far as style but when I transfer the code to my (already setup) portfolio site it doesn’t work. The style isn’t right. So I think it has something to do with not setting up ID’s and the confusion with bootstrap .container class. ???
Up at 6:30AM trying to make this portfolio Contact Form actually work. I’ve finally got it to a decent point by adding container/row/col classes to each block (idk if that’s the correct terminology?) But even at that point it looked like a scrambled mess of basic HTML and all the CSS was there… so I moved it from the CSS section to <style> in the HTML box and that nearly fixed it … However I scrolled up to see it changed the WHOLE page to have rounded box edges… So to fix that I added another custom class “.container-contact” and added that to the “.container” line.
At this point I’m questioning if I should have used the unique ID’s for this instead of adding another class… ??? I kinda want to start over from scratch. IDK.
After work… So I do some testing and see that the form looks how I want it to look when I remove bootstrap from the codepen settings. I’m at a loss. Looking into my other options if I can’t make it work, I may test out this tutuorial: https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form
SCRATCH that… this template is using AJAX and jQuery and when I started this portfolio I set out to only use basic HTML and Bootstrap CSS on this project to help me gain a real fundamental understanding before delving into other libraries, etc. Gotta stick to the plan!
That led me to search “standard bootstrap form markup” and found this helpful page: https://v4-alpha.getbootstrap.com/components/forms/#form-controls and it couldn’t have happened at a better time because I just had a great idea! … It reminded me of “Radio Buttons” and I could use them inside the contact form to help decipher why someone is contacting me… something like:
- I have a question
- Let’s collaborate!
- Job Offer…
One more thing I just noticed that bootstrap is making my container font automatically too small! Can’t worry about it now but need to eventually figure out how to override it!
OMG, Sometimes I feel so stupid! Yet again I notice how easily simple things can be overlooked… Notice anything missing from the bottom of this form code?:
YEAH the “=” sign is missing!!! DAYS spent being distracted by this problem … on “=”.
This is what they meant when they say you will spend more time reading the code than writing it. I’m so happy I found the mistake, but here’s what I still don’t understand: The practice page I set up (that was only for the contact form code) was missing the =equals sign also and it showed the “Submit” value and worked properly, so why did it not show “Submit” in the official version? It’s a mystery that will hopefully be solved in one of life’s infamous AhHA duh moments!
Got all the in-page section links working and added the social links too: Decided to use “<form action=” HTML instead of “<a href”
Struggling to figure out why 2 of my social links are working correctly and other 6 are not… they just go to a blank page… Coincidentally, the links that are working are both the first in each row (WordPress and BeHance) … I’m starting to think I may not even NEED the “value” attribute… I guess I don’t really understand what it does …
“The value attribute specifies the initial value for an input field:”
So… Is it just to allow the code reader to know what the intent of the block of code? I feel like I need to make a trip to the REAL library and get a book of definitions to have on hand … Sometimes, internet research is the best thing ever but more often than not I feel like it just causes more confusion. Side note: yesterday I looked into a degree at AMU for what I’m learning now and an AS degree in Web Publishing will run me between $16K-$32K. I am considering it, because I would have an actual piece of paper which is sometimes worth it, but more than that I feel like I wouldn’t be left on my own to figure it out… I sometimes like problem solving and the satisfaction of the achievement that I solved it on my own without any help, and yet even when I solve the issue, I cannot say with confidence (as of today) that I truly understand how or why a certain solution works.
Another link for reference: https://css-tricks.com/use-button-element/
Here’s the code: … Update: For some reason certain code example text won’t show up on this page when I publish it so Read full 100 Days on Google Docs
Okay, I can’t remember what gave me the idea to use <form action with <type submit, etc … I’m thinking I should not have done that. Also I notice that I didn’t add <a href= … so the question is WHY do some links work without <a href ??? … IDK.
*Took a break from the portfolio and started doing more lessons on CodeAcademy and LOVE IT!!! Here’s why… As I’ve stated before the lessons provide more information on the how and why things work, which is clear that I personally NEED that; just the type of learner I am I guess.) More than that, they provide a free trial QUIZ … I haven’t purchased the PRO version but a considering it; I really liked the quiz because I got 100% and that really feels good but more importantly, it reassures me that I am actually learning something!!
Completed the first 50 lessons on codecademy HTML and CSS! Earned 11 badges and have successfully built a super simple website … which is really easy after all the previous freecodecamp lessons however I’m definitely feeling more confident in the fundamentals of HTML.
It makes me wonder however why <!DOCTYPE> wasn’t a part of the FCC lessons. It seems pretty important to leave out! Although I notice that the <head> setup is separate in CodePen too, and not included on the page. Maybe that’s the new direction to help code be more clean and simple!
Woke up today wondering how is CSS created? From the back end I mean… what makes the style sheets work or how to design the library, like SASS, Bootstrap, etc. Read a bit about it and ran across “XML”https://developer.mozilla.org/en-US/docs/Glossary/XML and it says that XML can be used to “define other languages”… Food for thought!
Also read up on Pre-Processesors, and Terse vs, Verbose style coding http://anomaly.org/wade/blog/2013/07/coding_style_terse_vs_verbose_2.html
Fifty Days! Whoo hoo… 🙂 Halfway through the 100 Days Challenge with no signs of stopping!!!
Nothing significant; mostly just did a few quick lessons on Codecademy and then messed around with wording and text styles on the portfolio project for fcc. Used <span> to make the first letters of certain words a different style (change font/size/etc.)
Portfolio coming along nicely. Got tired of looking at empty thumbnails and figure since I have alot of work I’ve done over the years, I may as well use it instead of placeholders. So I made my gallery into 4 different sections:
- Graphic Design
- Web Design
- Published Articles
All of these things are relevant to the design industry so showing that I am capable of other things outside of what I am currently learning is good, I think it portrays me as well rounded. I don’t want to overdo it, so I am only doing 4 (gallery-thumbnail) rows total with 4 columns in each project category row. I will update with improved works as I progress.
Was on a roll adding content and getting it done with a fairly heavy workload today in Photoshop; to make sure all my images were the same size 500x300px. Nothing difficult just time consuming!!! Then I had the bright idea try to make a carousel slider. I should have left well enough alone because now I’ve wasted 2 hours trying to make that work properly and it won’t do what I want it to do, which is display text on right of image with a description and link. I give up. Going back to what I was doing before.
Reminder: KISS: Keep it simple stupid.
Adding HOVER color:
Finally got my picture uploaded, not the best but it’s all I’ve got for now since my hard-drive is formatted to Mac and I switched back to windows after the computer crash, I have no access to any pics of myself! The solution to the issue I was having not getting the text and image to line up horizontally was simple. I don’t know why I didn’t think of it sooner…
I put each element in a container and used the bootstrap grid (so it’s one big jumbotron container with 2 small containers inside.) It’s responsive and for the most part looks the way I want.
***Need to add an action for what happens when someone uses the contact form… not sure how I’ll do that yet. I also removed the background color from the contact form … it was a bit too much. And added hover action colors to match the top navigation bar.
Also I will come back to this later and read ALL of these books!!!
Woke up this morning with one goal: To fix this ridiculous issue with Photobucket not showing my third-party images anymore! They worked fine before… and all of sudden last night I start checking all my links to make sure the portfolio page functions correctly and my tribute page is all photobucket icons telling me to upgrade! Forget that. It’s all for the best though because the constant pop-up ads were super annoying and it forced me to look into other options.
After signing up with imgur, imgbb, imageshack; realizing they’re all great but weren’t gonna work for this purpose … and eliminating 500px, flickr and google photos from the running I reached out to the community for help … https://gitter.im/FreeCodeCamp/Help it seems I’m not the only one needing hosting… and there are always helpful people ready and willing to assist 🙂