Contents
- Post 18: Chrome Developer Tools & CSS Games
- Post 17: Back to it after camping!
- Post 16: JQuery Slideshow
- Post 15: Scrimba CSS Challenges, Day 3, 4, and 5
- Post 14: Scrimba CSS Challenge, Day 2: Navbar
- Post 13: Scrimba CSS Challenge, Day 1
- Post 12: Survey Page
- Post 11: Applied for Codeacademy Free Membership
- Post 10: Daily Coding Goalzzz
- Post 9: Tribute Page Portfolio Project on FCC
- Post 8: Finally finished this very silly "rabbit racer" challenge!
- Post 7: Starting CSS at Free Code Camp
- Post 6: I'mma try to embed some javascript here!
- Post 5: More interactive illustrations!
- Post 4: Beginning the Advanced JS Course
- Post 3: I finished KA's CSS/HTML course!
- Post 2: Goals
- Post 1: I'm starting a programming blog!
Post 18: Chrome Developer Tools & CSS Games
Yesterday I completed some exercises in Codecademy that have really helped me understand how to use Chrome Developer Tools much more effectively. Although I have been using them a lot (and they are incredibly helpful not just for coding, but also for designing) since being introduced to them a few months ago, they are starting to become more clear to me; instead of just using part of them, I'm understanding more of what I can do with them and how. I practiced making a lot of changes to various websites and their DOMs, which was very satisfying!
I have also been practicing with CSS flexbox and other games designed to help you understand CSS more easily, and they are quite helpful when it comes to memorizing and visually understanding selectors and the Flexbox model in CSS. Just like with Chrome Development tools, even though I've done more than one CSS course and used Flexbox multiple times, the games are just one more way for me to expand my understanding and more rapidly recall how to use the tools.
2 of my favorites are:
- Flexbox Froggy
This one teaches you how to better visualize how FlexBox works, and that's really helpful!
CSS Diner - Your goal is to turn basic HTML into a responsive, functional navbar, which includes both arranging the items and styling them.
- The navbar must stretch across the whole page & have a background color set.
- The items must be arranged horizontally & be placed below the title, which is centered in the middle of the navbar.
- Complete CSS/HTML course on KA
- Review/work through Photoshop Course on Udemy
- Review/work through Illustrator Course on Udemy
- Work through Adobe XD Course on Udemy
- Complete a daily simple illustration using JS
- Begin youtube series where I redesign things that annoy me on the web (primarily using Sketch and Axure).
- Pass LinkedIn HTML Exam
- Pass LinkedIn CSS Exam
- Pass LinkedIn JavaScript Exam
- Pass LinkedIn Photoshop & Illustrator Exams
- Complete KA's Advanced Javascript course
- Complete KA's HTML & Javascript Course
- Redo my portfolio projects so that they're good enough that I actually want to share them with people ; )
- Finally finish that interactive costume I designed with capacitive sensors and sound loops, using an arduino or teensy.
CSS Diner, meanwhile, demonstrates all the ways you can select different elements, and I had no idea there were so many ways. I can't imagine using some of them, such as the "nth-child-selectors" but it is good to understand that you CAN use them if you ever need them!
I also want to try out Flexbox Defense as well.
Oh, and I've also been working on Wordpress, and have it all set up on my computer so that I can design websites offline, which is very satisfying! I'm really enjoying how the new courses I'm taking (Wordpress and Codecademy) are showing me the nuts and bolts of coding and the extra but critical (for professionals) coding skills, such as using the Command Line, GiT, Dev Tools, VScode, etc. Khan Academy and Free Code Camp are exceptional at making coding and its basic concepts accessible by providing online editors, etc., but they leave out a lot of the practical knowledge that is necessary to becoming a web developer.
Post 17: Back to it after camping (& a Bonus Video)
Wednesday, July 17th
I floated the Main Salmon River for a week and it was glorious. Now I am back & back at coding, as well as applying for jobs! I applied for 4 jobs today -- woohoo! I'm also working on a couple of websites for friends who are in Boise, including a tango instructor and a biking project, which I am VERY excited about!
Besides that I've spent the last couple days plugging away at the Codecademy Web Dev course I'm doing, and also the "Wordpress for Developers" course I'm taking on Lynda. I'm focusing on those right now, because it's so easy to get overwhelmed with different projects!
However, I keep getting pinged that folks are still watching & liking the youtube tutorials I created for the Khan Academy Javascript course, which is very exciting!
People really seem to like this one where I animated a cat, which I'm particularly proud of:
Post 16: JQuery Slideshow
Wednesday, June 17th
I was looking over some of my projects from Khan Academy, and I realized that I haven't shown ANY of the projects I made using jquery! Well, to rectify that, I'mma linke to one of the projcts I made while working on the "Making Websites Interactive with jQuery" course, the "jquery slideshow project. Here it is!
View on Khan Academy (Including Code Editor)
Post 15: Scrimba CSS Challenges, Day 3, 4, and 5
Wednesday, June 17th
I just finished the "Day 5 -- Hover Game" Scrimba CSS challenge. It was an absolutely delightful challenge, and I'm very satisfied with my final rendition. I now realize that I completely forgot to post the other challenges (for day 3 and 4) before I did this one, so I'll do that now. But anyway, enjoy!
Day 5
See the Pen Hover Game -- Scrimba CSS Challenge Day 5 by Kare (@karebaer) on CodePen.
Day 4
See the Pen Day 4 CSS Scrimba Challenge: Animate Colors by Kare (@karebaer) on CodePen.
Day 3
See the Pen Scrimba Day 3 Challenge: Blog page by Kare (@karebaer) on CodePen.
Post 14: Scrimba CSS Challenge, Day 2
Friday, June 12th
Here is the "Day II" Scrimba CSS challenge. I know, I know, I did both challenge I & II in the same days because I started a day late, but the whole point is to do all the challenges, right? : )
Here is the description of the requirements, just so you can see what I was supposed to do, and judge how well I did it:
JChallenge:
Hints: Use Flexbox!
Topics Covered: Flexbox, Box Model
See the Pen Navbar Challenge (Scrimba CSS Challenge Day II) by Kare (@karebaer) on CodePen.
Post 13: Scrimba CSS Challenge, Day 1
Friday, June 12th
I was emailed a 7-day CSS Challenge on Scrimba, so here is the first challenge that I finished, as a codepen. This first one was very basic, just centering the text, applying margins, etc., but the challenges are supposed to get harder as the week goes on. Hopefully they will make basic CSS more automatic for me!
See the Pen Scrimba CSS Challenge Day 1 by Kare (@karebaer) on CodePen.
Post 12: Survey Form
Wednesday, June 10th
Here is the finished Survey Form! P.S., I got the Codecademy Pro Membership scholarship! I am doing the web dev course and I'm working on the first project now. I'll post it when it's done. Goal is by tomorrow!
See the Pen FCC Survey Draft II by Kare (@karebaer) on CodePen.
Post 11: Applied for Codeacademy & Working on Survey Form
Tuesday, June 1st
I applied for the Codecademy free pro membership today! They are offering it to folks whose employment was adversely affected by the pandemic... I'll hear back within 14 days, but I am hopeful!!! I'd like to do their javascript program because they offer real-world portfolio projects in their curriculum, plus their information is likely to be A LOT more up-to-date than the Khan Academy curriculum. Unfortunately there have been a lot of updates, I'm finding, to the Javascript language since the KA programs were produced, such as ES6 changes. I'd like to work through some programs where I can be using the languages as I would use them on the job.
Yesterday was a super productive day: I managed to cross out almost every item on my to-do list... I also reached out to the scrum master at a company I applied to (for a UX position), which I'm really proud of myself for. Asking for an informational interview DOES NOT come easily for me, but I know it's really important to find out about the culture of a company and if I'd be a good fit. Unfortunately the person (who is a 2nd-degree contact on LinkedIn for me) declined the offer stating that they didn't want to undermine the application process. So... I'm going to research better ways to ask for informational interviews. Unfortunately my region is pretty dead right now when it comes to networking events, even though the pandemic restrictions have almost entirely be lifted. Oh well -- I need to get creative and find some more online events, I think. AND figure out how to better reach out to folks I think I can learn from individually!
My goals for my day today are to do at least one lesson on Khan Academy (I have to decide which course to do next!), work on the next jQuery video, update my blog (done!), apply to two industry jobs, research networking events, do 5 lessons in the JS tree on FCC, and complete the survey portfolio project. That's a lot, but I definitely don't think it's out of reach. Oh, I also need to embed, in a nice way, all of my youtube videos in this blog. I'm thinking a sort-of grid layout with thumbnail images would be nice... I'd also eventually (this week) like to do that with all the projects and challenges from Khan Academy that I've completed so far... but that's definitely a lower priority than the survey project. So, let's go!
Post 10: Coding Every Day Challenge
Monday, June 1st
For all of March and April I pretty much coded every day... although I feel I basically just ticked off boxes. I could've worked a LOT harder, tbh. I lost a little bit of steam when there was a glitch in KA and it didn't record a couple of my days of coding -- sooo sad!! I admit, that shouldn't have been enough to stop me from coding EVERY day-- I should be able to know for myself that I am reaching my goals, but I am definitely one of those students who loves to see the gold star and the "A+'s" -- visual indicators are just sooo motivating for me. But anyhow, I'm going to renew my code-every-day goal (longest was around 50 days, I believe!) but this time I'm going to up my game. I'm going to shoot for the github, KA, AND FCC visuals. I want every one of those blocks on FCC and github to be filled in.
Actually, it would be really cool if I could show those visuals on my blog... I'll have to figure out if I can host pictures on github somehow? That's probably possible -- but I'll get back to you ;)
UPDATE: The solution is really easy, actually! I can put the images on google photos and then link to them. Woohoo!
Hmm... looking at the FCC tracker above, I know that I can DEFINITELY do more. I feel I have learned so much, but I only coded on FCC for 15 days... on those days I finished the entire CSS & HTML "Responsive Web Design" course, as well as the Basic Javascript course and a good chunk of the rest of the Javascript cert course. I know that if I can stick to coding EVERY day, I can do a LOT more!
Post 9: Tribute Page
Monday, June 1st
It's been a while since I updated this blog, oops... However, I've still been coding in the meantime! Although I deviated a little from my "goals" list, I have completed some of the tasks, and added/completed others. I suppose goals naturally update/change as I learn more about the task ahead of me and web dev in general!
Anyway, I completed the KA CSS/HTML course long ago, in April, I believe, and then I completed the Free Code Camp "Responsive Web Design" course. It would have been wise to do the projects of the course right after I finished, but instead I skipped those and went on to the Javascript course. Now I've finally come back to the CSS projects and they're probably quite a bit more challenging than they would have been if I hadn't basically stopped using CSS for the month of May and focused on jQuery and Javascript...
Lessons learned, I suppose. Anyway, I went back and worked on the portfolio projects, and project 1 is done! I've made a tribute page to Lynn Hill, badass female climber. You can view that below. I do still need to figure out how to pass the last "test" of the tribute page.... I am getting an alert that the image doesn't responsively resize, even though it DOES resize. I think the test wants me to solve the problem in a specific way, but I feel that I have come up with at least one solution, which is why I'm sharing it now. I'll update the blog when I manage to pass the test. UPDATE: after getting some hints from folks on the Free Code Camp forum, I was able to pass all the tests!
Oh! Also in the past month and a half I've been making videos of the Khan Academy challenges that I complete! I finished the "Making Webpages Interactive with JS" course, and also the JQuery course... I am still working on recording the final JQuery challenges, but the entire series can be viewed on my youtube account, here. Onward and upward!
See the Pen Tribute Page FCC Project 1 by Kare (@karebaer) on CodePen.
Post 8: rabbit racer challenge
Friday, April 10th, 2020
I finished the below challenge today! WebDev teachers are very silly, no?
Please note that most of the code in this program is not mine. Khan Academy gives you little challenges where they ask you to add or change two or 3 steps to existing code. My job in this challenge was to add a button and the functionality that allows the user to click and move the far right rabbit forward. All the other code was already written.
Then why did I share the program? Because I'm proud of that one button and how fast the rabbit can run! Very, very proud!
Spin-off of "Challenge: Rabbit Racer"
Made using: Khan Academy Computer Science
Post 7: CSS at Free Code Camp
Thursday, April 9th, 2020
Yesterday (after I wrote my blog post) I managed to embed some Javascript on GitHub (you can see that in my last post!) and after that I worked a little bit more on the Adv. JS course, and also started a CSS course at Free Code Camp. I like their exercises because they are standalone and easy to do one at a time, which I think is a good introduction to a lot of tags and "functionality" I wasn't exposed to during the KA CSS & HTML course. It's nice to do when my brain is sort of processing the JS logic that I'm trying to learn in the Advanced JS program (which, let's face it, sometimes take a while!!!).
I've been talking to a good friend of mine on (my old boss!) who is also a highly creative person and technically skilled as well. He is currently doing an MFA in writing BUT shared with me an app he created over Christmas break. It's quite a useful, concise app, and so inspiring to see another creative person who also taught himself how to code, doing some really interesting, technical things. I am inspired to do my own stuff even more... I might resurrect my idea to do make a roommate to-do app. In fact, I think I might just design a simple to-do app... first it would be fun to do just the research and design of it (and put it in my UX portfolio) but then at some point maybe I could even try just coding it! That would be a really fun project, to make my own app. I've thought about doing it before, but seeing my friend's great work is very encouraging!!!
I still need to do my animation for today -- I'll make sure to post that when I do, but I also wanted to embed this interactive animation I finished earlier this week:"KA Project: Build-a-House -- Click the Mouse to Make leaves Fall "
Made using: Khan Academy Computer Science
Post 6: Embed JS test
Wednesday, April 8th, 2020
Made using: Khan Academy Computer Science
Post 5: More interactive Illustrations!
Wednesday, April 8th, 2020
Yesterday I tried to go give blood, but they sent me home as I had a temperature of 99.6, which is apparently the cut-off! I wanted to help with the coronavirus and blood shortage (there is soon to be a huge one due to the pandemic) but I am sick, I guess!! It's weird because I've only seen a very limited number of family members (who are also all working from home) for the last month and a half, and for two weeks of that I was pretty much in complete quarantine. It'll definitely be a testament to the HIGHLY contagious nature of this virus if I am sick with it. I feel fine so far, though!
Anyway, so far today I have done more work on the Advanced JavaScript Animations course (I learned more about making buttons) and this morning I also edited an old animation (where gems fall on the screen when a user presses the mouse) so that now you need to press a BUTTON to make the gems fall. I also evaluated some other users' projects on KA and submitted another help request!
Now I have transferred over this blog to github entirely, and I am going to start trying to embed my projects from KA here, and build an actual website for my portfolio AND coding projects. Woohoo!!! That'll be crazy and cool to ACTUALLY deploy a real website, that I made all by my lonesome. Oh, I also found a better photoshop series to watch, although it's not going to be QUITE as good, just because it's one long 3 hour video, rather than little short videos that are easier to reference. But whatever. I feel confident that I'm making progress. :)
Edit: Wow, it turns out that not having the "Oh Noes" guy in the KA environment makes coding & finding errors a lot trickier! Adding this one, little, simple blog post in Github was actually a little time consuming, just because I had to hunt down the 3 or so teeny tiny typos I made. I'mma hafta figure out what to do to make error handling & debugging code easier.
Post 4: Began Advanced JS Course
Tuesday, April 7th, 2020
Yesterday I managed to animate one of my old programs: the loopiing practice program with the house. I made leaves fall when clicked! I also got my first help request answered by another KA member: very cool.
I'm continutally impressed by the level of the coursework on KA, as well as the community. I also started the photoshop course (free) on UDEMY yesterday and it was.... not great. The pacing is too slow and redundant about easy, intuitive concepts, but then goes too quickly over new, useful information! That's fine -- it's free, right? But compare that to Pamela's courses on computer programming on KA... it's possible to have free training that is also high quality! And I have proof! ;P
Speaking about paywalls, and such... I discovered that my Squarespace account doesn't allow me to embed JS (I was trying to embed some of the animations I made onto my portfolio page) even though I pay $15/month or so for that site!!!!???!!!! They allow normal paying members to embed CSS and HTML, but not JS. That's for BUSINESS members only, apparently (hard eye roll).
Since I can code, though, I guess I no longer need a site like Squarespace to host my portfolio... I can just build my site my self!!! Onward and upward!
Post 3: Finished CSS/HTML
Monday, April 6th, 2020
I finished the CSS/HTML course yesterday. Whereas the Javascript Course took 3 weeks, this one took 3 days. ; )
I'm feeling a leeeeetle bit lost without the goal of just rampaging through a course as fast as possible. I went back and edited my "house" project from the JS course this morning so that it has some simple animation, and I submitted my first "help request," so that was good, but now I know I reaaaaallly should work on my portfolio. My S.O. and I chatted last night about how it's great that I'm working on "upskilling," (yeuch, what an "industry term") but I really need to make sure to keep applying for jobs. He also reminded me (and I already knew this, but it's good to hear it again, especially from a developer) that certifications and such are fine and all, but seeing what a designer can do is really what he looks for when hiring someone. Sigh. Can't I just take multiple choice tests foreeeeevveeeeerrrrrrrrr???? Lol.
Okay, okay. So today my goal is to hit the Photoshop course I'm taking on Udemy, hard. And also apply for my "two jobs/day." I want to work on the photoshop course because though I know I am competent with it already, it would be a huge boost to my confidence as a designer to have actually gone through a course, end-to-end. Working through the Sketch course I did felt really good, and when I finished it, I felt much less like I was just masquerading as a UX designer.
I will also work on adding the coding that I've done to my portfolio site. It would be great if I added it as a separate page... with the animations that I've done embedded there.
I did my one animation for today, so hopefully I can keep that up! Wouldn't it be cool if, when someone visited my website, they could see each small animation I do everyday... and look at how much I've improved? : )
Post 2: Goals
Saturday, April 4th - 2020
I'm still working on some of my skills for UX design and on sprucing up my portfolio, as well as learning new programming skills. My goals, for both UX Design & Programming, are as follows:
I'm starting a programming blog!
Saturday, April 4th - 2020
Today, I started a programming blog to document my programming & web design journey on Khan Academy...and beyond! So far I've completed the Intro to Javascript course (I finally finished on Wednesday -- it took me 3 weeks!) and now I'm about 3/4 of the way done with the HTML & CSS course. After that, I'm going to do the HTML & Javascript course, and eventually, the Advanced Javascript course.
I also want to continue working on my goal of "making the piggy tap his foot." Let me explain. ; )
For one of my first programming challenges, I drew a piggy. It turned out the drawing I made was a BIT too complicated for the problem I was trying to solve, so I started over and animated a much simpler animal, but I kept the piggy and his code, in hopes that later I'd be able to make him dance! Even though I finished the Intro to Javascript course, I still haven't reached my goal. That's another of my projects that I'm going to keep working on while finishing this HTML/CSS course.