DEV Community

Hikari
Hikari

Posted on • Edited on

What I learned during the 100 Days of Code Challenge

#100daysofcode #javascript #webdev #programming

I completed the #100DaysOfCode challenge (almost in a row every day)🎉! The challenge was a great journal to track my coding experience so I'd like to look it back, and set a goal for the next challenge!

Here's my very first post of the challenge:

At this point, what I had coding skills were

  • Basic coding skills of HTML and CSS
  • Bits of basic knowledge Javascript syntax

Let's see what I have learned during 100days!

What I learned

  • HTML
  • CSS, Sass
  • Algorithms solving
  • JavaScript: DOM manipulation, API
  • Java: OOP, DataBase, Spring tool, PostgreSQL
  • React: JSX, Props, State, class component, Hooks (UseState)
  • Tools: Command line, Github, Heroku, Figma, Semantic UI

What I created (excerpt)

  • HTML and CSS (Sass)

Challenges from Fronted menter were good to train my HTML and CSS skills and gave me some ideas about designs. Especially getting used to implementing responsive design took me time, but Sass function such as @mixin makes my life easier😂

  • JavaScript: DOM munpilation

During these 100days, I think one of the most parts I focused on was learning DOM. At the beginning, I've completed the #JavaScript30 tutorials to get general ideas about what I can do with it.

Image description

After finishing the tutorials, I tried to create several small components or projects to get used to writing codes by myself from scratch.

Many bugs and getting stuck taught me these essential JavaScript DOM methods such as below.
Here are some examples:

✅getElementId (to access any element virtually)
const myExample = document.getElementById(“example_btn”);

✅Node (to access each nodes)
const myNodeList = document.body.childNodes;

✅createElement
const myNewListItem = document.createElement(“li”)

✅appendChild
myList.appendChild(myNewListItem);

✅removeChild
myList.removeChild(myRemoveLink);

✅innerHTML
myList.innerHTML = “<p> </p>”;

Below work helped me a lot to get hang of this method.

✅setAttribute (to set the value of an attribute on the specified element)

add.addEventListener("click", () => {
    i++; 
    const img = document.createElement("img"); 
    const section = document.querySelector("section"); 
    img.src = "https://i.pravatar.cc/100?u=" + i;
    section.appendChild(img);
  });
Enter fullscreen mode Exit fullscreen mode
  • JavaScript: API

I also learned about API to get ready to go through React since I'm aspiring to become a front-end developer.
The below project is for fetching the Breaking Bad character information. Invoking too many DOM was tiring me a bit so my friends told me I'm going to fall in love with React😂

But through this project, I reviewed some JavaScript objects such as
filter(), includes(), toLowerCase(), map() methods
and learned the difference between static and dynamic variables as well.

  • Java (OOP)

It's not JavaScript, it is Java! I got confused to understand the concept of OOP so I watched the class recording over and over again. The struggle moments gave me some general idea of programming😇

This is an application I made by Java:

And also I experienced a group project to make a company management system by Java. Through it, I learned how to corporate with other developers and use Github.

  • React (JSX, Props, State, class component)

It has been already a month since to start learning React so far and already gotten confused a lot to understand some concepts. But the knowledge of JavaScript helps me sometimes!

What I want to learn next 100days of code challenge

I'm currently working on round 2 of the 100 Days Of Code challenge. After finishing the next 100days, I assume I'm getting the ball rolling to prepare a job hunting.
So my goal for the next challenge is to learn and work about:

  • React
  • TypeScript
  • UI framework
  • making a few projects for my upcoming portfolio (4 or 5 projects)
  • Contributing to Open source
  • etc...😉

I feel learning programming is repeating the cycle that learning new knowledge, getting confused, seeing tons of errors and figuring them out, and then getting to know somehow. But I love this process to see how I grew up and feel it.

There's no end to learning programming. I will keep it up consistently with fun🤗🔥

Top comments (0)

Read next

msnmongare profile image

How to Generate and Display Swagger (OpenAPI) Documentation for Your Laravel API

Sospeter Mong'are -

jullymac profile image

Como publicar um pacote no npm: um guia passo a passo

Juliana Macêdo -

paharihacker profile image

The Art of Lazy Loading: Speeding Up JavaScript Applications

Rajesh Dhiman -

marcuskohlberg profile image

Building simple event-driven applications with Pub/Sub

Marcus Kohlberg -