100 Days of Code Challenge

Day 100 - 19/4/21

Project: Confetti Cannon

Skills: HTML | CSS | JavaScript

Progress: To celebrate finishing the 100 Days of Code Challenge I made this confetti cannon on CodePen.

Thoughts: I can't believe how far I have come in 100 days! It has been such great motivation to code everyday and I have learned so much! I have even started my own freelance business! I have found a passion for design and development and I am excited to keep learning!

Day 99 - 18/4/21

Project: Day 8 - 30 Days of JavaScript - Fun with HTML Canvas

Skills: JavaScript

Progress: I did a tutorial to build a really cool page using HTML canvas. You can use your mouse to creat a drawing. The line changes color and size as your draw.

Thoughts: I had no idea that you could do this. This was a really fun project!

Day 98 - 17/4/21

Project: Simple Calculator

Skills: HTML | Javascript | node.JS | Express

Progress: I built a simple calculator on a local server.

Thoughts: Still in awe that I can do this on my own computer. This has made me so excited to keep learning!

Day 97 - 16/4/21

Project: Created a 100 Days of Code webpage template

Skills: HTML | CSS | Bootstrap

Progress: I created a webpage template for others to use who are completing the 100 Days of Code challenge.

Thoughts: I can't believe I only have a few more days left!

Day 96 - 15/4/21

Project: Creating a local server

Skills: Express JS

Progress: I created my first local server today and used it to display "Hello World!" in the browser.

Thoughts: Never in a million years would I have thought that I could do anything like this. It's so cool!

Day 95 - 14/4/21

Project: Superhero/Supervillain Name Generator

Skills: Node.JS, NPM

Progress: I finished the module on node.JS and learned how to install NPM packages. I made a cool Superhero/Supervillain name generator that I can run through the command line.

Thoughts: This was really eye opening to all the possibilities there are with node and npm packages. I would love to make a cool webpage with this.

Day 94 - 13/4/21

Project: Command Line, back-end development

Skills: Command Line, Node.JS

Progress: I went back over the command line module on my web development course. The last time just didnt really make sense but it all clicked today. Then I started on the back-end development section and did the beginner Node.JS lessons.

Thoughts: All the back-end information seems kind of confusing right now but I'm sure it will all come together once I've done a few more lessons.

Day 93 - 12/4/21

Project: CSS Morph Effect Tutorial

Skills: HTML | CSS clip paths

Progress: I did a really cool tutorial today using CSS clip paths to make this cool morph effect.

Thoughts: I know I keep saying it but it is amazing what you can do with just CSS!

Day 92 - 11/4/21

Project:Type Ahead City/State Finder

Skills: JavaScript

Progress: This was day 6 of the 30 Days of Javascript course.

Thoughts: When I do these tutorials I feel like I know absolutely nothing about JavaScript, but then I will see something that I have done in one of them when I'm working on something else as I will think, "Yes! I know this!". So even if you do a tutorial and it doesn't seem to make a lot of sense, it is still beneficial because it helps you to become accustomed to the language and terms even if they don't make total sense at the time.

Day 91 - 10/4/21

Project: UX Design Portfolio

Skills: HTML | CSS | Bootstrap | JS

Progress: Finished!

Thoughts: I have never been more happy to finish a project! This took a really long time. I have learned that I need to do all my design ideations and pick one before I start building. This would have saved me a lot of time.

Day 90 - 9/4/21

Project: UX Design Portfolio

Skills: HTML | CSS | Bootstrap

Progress: I built the About Me page today and figure out how to make text wrap around and image using Bootstrap.

Thoughts: This was such a small thing to learn but it was really exciting!

Day 89 - 8/4/21

Project: UX Design Portfolio

Skills: Figma, HTML | CSS | Bootstrap | JS

Progress: I created several style ideations on Figma. I have updated my homepage with the new styling that I chose and a new logo.

Thoughts: I decided to go with this style because it is more minimalist and doesn't take away from showcasing my projects.

Day 88 - 7/4/21

Project: UX Design Portfolio

Skills: HTML | CSS | Boostrap | Javascript

Progress: I completed the homepage on my UX portfolio today.

Thoughts: I'm still working on some different styling but the structure will remain the same.

Day 87 - 6/4/21

Project: 100 Days of Code (this page!)

Skills: HTML | CSS | Bootstrap

Progress: Finally styled the way I want it and added all the early days that I was missing.

Thoughts: I'm so proud of this project and I am going to be using it to make a template for others to use for their 100 Days of Code challenges.

Day 86 - 5/4/21

Project: Intro to React

Skills: JavaScript | React

Progress: I spent 25 minutes on Edabit doing JavaScript challenges then I started the React module of my web development bootcamp today. I only did a few simple challenges but I can see amazing potential!

Thoughts: This is really exciting to learn. I haven't done much with it yet but I can see it is going to be so useful and most front-end jobs require React.

Day 85 - 4/4/21

Project: UX Portfolio Prototype

Skills: Figma

Progress: I guess this wasn't technically coding but I am counting it anyway. I spent a long time today working out how to use Figma and managed to prototype my UX Portfolio homepage.

Thoughts: It is so much more efficient to use design software than to build the site and play with the design through code, which is what I have been doing. Using Figma is going to save me so much time. It seemed really complicated at first but I read a few tutorials and watched some videos and I've got the basics down now.

Day 84 - 2/4/21

Project: JavaScript challenges on Edabit

Skills: JavaScript

Progress: I've been spending a lot of time designing the past week so I spent some time today refreshing my JavaScript knowledge. I'm giving myself a goal of 25 minutes on Edabit daily.

Thoughts: JavaScript is something I'm going to have to constantly work on. It is hard! But it is so important for web development.

Day 83 - 1/4/21

Project: Building my UX Portfolio

Skills: HTML | CSS | Bootstrap | JavaScript

Progress: I started building my portfolio homepage today. I have used the super cool TypeIt JS plugin.

Thoughts: It has been so much easier to build my porfolio this time!

Day 82 - 31/3/21

Project: Designing a UX Portfolio

Skills: wireframing, prototyping with Canva

Progress: I have started building a new portfolio which will incorporate my new UX design skills. I spent a lot of time looking at other portfolios for ideas. My two favourites are Gloria Lo who works for Canva and Shabnam Kashani who is an interaction designer at Google.

Thoughts: This course is really great because they don't only teach you design skills but really help you to build an online presence and start networkng.

Day 81 - 30/3/21

Project: Google UX Design Certification

Skills: UX/UI

Progress: I worked some more on finishing touches for some projects for my portfolio. I've also started the Google UX Design certificate through Coursera.

Thoughts: I really love front-end development and I think UX design skills will really compliment that. I have really enjoyed the course so far.

Day 80 - 29/3/21

Project: Movable Stacked Card Row tutorial

Skills: CSS | SASS

Progress: I spent some time today refactoring code on some of my previous projects. I also learned how to make the cool movable stacked cards on the CSS-Tricks website. You can find the tutorial video here.

Thoughts: I couldn't believe I found this video. I had been admiring the layout and styling of the CSS-Tricks website for the last couple of days and decided to try to replicate the cards. I did a google search and there was a video from Chris Coyier of how to do it!

Day 79 - 28/3/21

Project: What the Flexbox? course by @WesBos

Skills: CSS Flexbox

Progress: I started a refresher course on CSS flexbox to improve my knowledge. I've got throught the first 10 lessons explaining main and cross axis, justify-content, align-items, align-content, and flex properties. Tomorrow I will be doing a few projecs with this. You can sign up for the free course here.

Thoughts: I'm really going to focus on improving my CSS and vanilla JavaScript skills for the rest of this challenge. I know having a solid foundation in HTML, CSS, and JavaScript with make everything else easier to learn.

Day 78 - 26/3/21

Project: Learning the Command Line

Skills: Command Line

Progress: I downloaded the Hyper terminal for more functionality and learned how to create folders through the command line.

Thoughts: Still so much to learn!

Day 77 - 25/3/21

Project: Girl Power Quotes

Skills: HTML | CSS | JavaScript

Progress: I changed the styling to use the neon sign lettering that I learned yesterday. Still need to add lots more quotes.

Thoughts: I have really enjoyed making this. It is the first project that I have done just for fun.

Day 76 - 24/3/21

Project: Neon Sign Lettering

Skills: HTML | CSS

Progress: I used some code snippets that were shared on Twitter to make a really cool neon sign heading that flickers.

Thoughts: It is so cool to be able to use code snippets. When I first started I had no idea what they were or how to use them.

Day 75 - 23/3/21

Project: Finishing old projects

Skills: HTML | CSS | Bootstrap

Progress: I have finished the front-end section of my Web Development bootcamp so I spent today working on finishing up some of the projects that I had started.

Thoughts: I can't believe it's been 75 days!

Day 74 - 22/3/21

Project: Simon Game

Skills: HTML | CSS | jQuery

Progress: I finished the game today and it works!

Thoughts: This was a complicated project but it all came together in the end and it is fun to play! I've now come to the end of my front-end section of my course. I'm going to spend the next week completing some unfinished projects before I move on the the back-end section.

Day 72-73 - 20/3-21/3/21

Project: Girl Power Quote Generator

Skills: HTML | CSS | vanilla JavaScript

Progress: I wanted to get a bit more practice with vanilla JavaScript so I built a Girl Power Quote generator which selects a random image with a quote each time the "New Quote" button is pushed.

Thoughts: It feels like such an accomplishment to make a unique project that uses JavaScript and it actually works! I still need to add lots more quote images and work on the styling but I'm really proud of this.

Day 71 - 19/3/21

Project: Simon Game

Skills: jQuery

Progress: Started building a Simon game using jQuery. Added event listeners to buttons and made buttons flash on click. Still have quite a bit to do to finish the game.

Thoughts: Using a library makes JavaScript so much easier!

Day 68-70 - 16/3-18/3/21

Project: Drum Kit

Skills: Javascript

Progress: Day 68 - Started on another drum kit project using javascript. Today's lesson explained event listeners and I was able to create an alert that said "I've been clicked!" when one of the buttons on screen was clicked.
Day 69 - Learned about constructor functions and added images and sounds to drum kit. Each drum now plays a different sound when clicked or a keyboard press.
Day 70 - Added animations when buttons are clicked or pressed. Drum kit finished!

Thoughts: The lessons for this project explain the process much better than the Javascript 30 lessons did. I feel like I really understand the javascript concepts this time around.

Day 67 - 15/3/21

Project: Dicee Game

Skills: HTML | CSS | Javascript

Progress: Built a Dicee game using my own JavaScript

Thoughts: This was the first time that I have been able to recall what I have learned and write my own Javascript to build this game. I feel like this was a big accomplishment!

Day 66 - 14/3/21

Project: 100 Days of Code project (this page!)

Skills: HTML | CSS | Bootstrap

Progress: Continued to add previous days work and fixed the navbar to the top of the page.

Thoughts: Still a lot of work to be done. I want to add a "Days index" and a resources page.

Day 65 - 13/3/21

Project: DOM manipulation

Skills: JavaScript

Progress: Went back through the beginner DOM lesson on my Web Development course and was able to select different HTML elements and change them using Javascript.

Thoughts: I first did this lesson about a week ago and it didn't make sense at all. I decided to take a break from it for a few days. When I've gone back over it again today it all made sense and I was actually able to complete the challenges without any trouble.

Day 64 - 12/3/21

Project: 30 Days of JavaScript

Skills: vanilla JavaScript | CSS Flexbox

Progress: Built an interactive photo grid

Thoughts: I continue to be amazed by what you can do with CSS. I have found another tutorial on CSS Flexbox that I am going to go through next week.

Day 63 - 11/3/21

Project: 30 Days of JavaScript

Skills: vanilla JavaScript

Progress: Learned how to use .filter, .sort, .reduce, .map with arrays and worked on my Web Development Bootcamp on Udemy. Signed up to edabit.com and started doing intermediate JavaScript challenges. Also found two great articles for self-taught web developers.
1. Journey of a Psych Grad to Developer
2. Learn to Code in 2021, Get Hired, and Have Fun Along the Way

Thoughts: Javascript is so complicated! But I feel confident that if I keep working that it is all going to click eventually. I really like the challenges on Edabit.

Day 62 - 10/3/21

Project: 30 Days of JavaScript

Skills: vanilla JavaScript | CSS

Progress: Built a page where you can change the spacing, blur, and border-color of the picture

Thoughts: I really love working with CSS!

Day 61 - 9/3/21

Project: 30 Days of JavaScript

Skills: vanilla JavaScript | CSS

Progress: Built a simple clock

Thoughts: Everything seemed really complicated at first but by the end of the video I felt like I had a good grasp of the concepts.

Day 60 - 8/3/21

Project: 30 Days of JavaScript

Skills: vanilla JavaScript

Progress: Built a keyboard drum kit

Thoughts: I have so much to learn but this was really fun!

Day 59 - 6/3/21

Project: 100 Days of Code project (this page!)

Skills: HTML| CSS | Bootstrap

Progress: I finally tried out Carbon to make pictures of my code.

Thoughts: It's so much easier than trying to take screenshots of VS code!

Day 54-59 6/3-11/3/21

Project: 100 Days of Code project (this page!)

Skills: HTML| CSS | Bootstrap

Progress: Started work on a page to document my 100 Days of Code challenge.

Thoughts: I wish I would have thought of this at the beginning but better late than never, right? I thought it would be cool to be able to go back and look at all the projects I did along the way.

Day 58 - 10/3/21

Project: Portfolo site

Skills: Javascript

Progress: Had a suggestion to use the TypeItjs function for my typewriter effect in my titles instead of pure CSS. I definitely need some more JS training. I did get it to work but it had a negative effect on the positioning on my page and I couldn't figure out how to fix it or why it happened! Also learned a bit about styling markdown language and have used this in this readme :-)

Thoughts: Really frustrating! But it was still good practice.

Day 56 - 8/3/21

Project: Networking

Progress: Posted my portfolio site link and code link to my web dev course's Discord channel. Connected with several others on the course. Continued to work on 100 Days of Code project page.

Thoughts: Discord is such a great resource for new web developers, especially if you are self taught.

Day 53 - 5/3/21

Project: Started learning about the DOM and adding Javascript to websites.

Skills: Javascript, DOM

Progress: Started working on DOM manupilation on Chrome

Thoughts: Feeling confused! I started to get a bit down but I know from experience that if I take a break and come back to it the next day it usually makes more sense. Let's hope so!!

Day 42-52 22/2-4/3/21

Project: Portfolio Website

Skills: HTML | CSS | Bootstrap

Progress: Finished!!!

Thoughts: Really proud of this! Considering I've only used HTML/CSS, I'm really happy with the way it looks. I look forward to being able to add some javascript in the near future.

Day 42-47 - 15/2-20/2/21

Project: No Ordinary Gal Podcast landing page

Skills: HTML | CSS | Bootstrap

Progress: Finished!!!

Thoughts: I had so much fun with this. This is my friend's podcast. It was great to get to use my Bootstrap skills on a real-life project.

Day 38-41 - 11/2-14/2/21

Project: TinDog landing page

Skills: HTML | CSS | Bootstrap

Progress: Created a landing page for a new startup "TinDog" using Bootstrap. Learned how to use the Bootstrap Navbar and Bootstrap rows and collumns.

Thoughts: I had no idea there were frameworks like Bootstrap that made web design so much easier!

Day 34-37 - 7/2-10/2/21

Project: Chuck Roach - Artist Portfolio

Skills: HTML | CSS | Bootstrap

Progress: I made this to practice my Bootstrap skills. This artist uses Weebly for his site so that he can make updates himself, but allowed me to use his photos to build a practice site.

Thoughts: It was great to be able to design a website from scratch. He has now commissioned me to update his Weebly site!