emanueltimlopez / challenges

#100DaysOfCode

Hi there! If you're reading this, you're probably interested in the #100DaysOfCode challenge for React, JavaScript, HTML and CSS. In this challenge, you commit to coding for at least an hour every day for 100 consecutive days. It may sound daunting, but don't worry! This challenge is a great opportunity to improve your programming skills.

I'm excited to see what you'll accomplish in these next 100 days! Good luck and have fun!

If you have any problem or comment, you can contact me on @twitter.

- Day #1

Learn how to use NVM and Node.

• Install NVM: MacOS / LinuxWindows.

• Install two versions of Node and set the newer one as the default version using an alias.

• Read about Node and NPM. What is Node.js and how it works (explained in 2 minutes)

• Execute a file with Node (for example, a console.log)

- Day #2

Start a project.

• Initialize a project:Create React App.
• Explore the folders.
• Put your name in the example component of the project, and change the image to a picture of a pizza.

- Day #3

Your first components.

• Read about React. React in 100 Seconds.
• Read about components in React.
• Create three components (in a components folder, each in a different file):
  • A greeting header that introduces you (using heading tags, two minimum).
  • An image of yourself or something that represents you (using the image tag).
  • Links to your socials (using anchor tags).
• Clean the home page file of the project and import your components.

- Day #4

Your library will continue to grow.

• Learn about semantic HTML.
• Learn about array map function.
• Create a component with your list of your favourites things in the world, which:
  • Uses an HTML list element.
  • Iterates over an array of things using the .map function to render each item.

- Day #5

Why is this working?

• Read more about React React Tutorial for Beginners.

- Day #6

The tools

• Learn about browser devTools, and how you can explore the HTML generated by React. Chrome DevTools

- Day #7

Now we have state.

• Start learning about React Hooks React State Management.
• Create a component with hidden content and a button that toggles the visibility.
  • Changes the state to hide and show the content with the button (using useState).
  • Uses conditional rendering to show the hidden content.

- Day #8

- Day #9

- Day #10

- Day #11

- Day #12

- Day #13

- Day #14

- Day #15

- Day #16

- Day #17

- Day #18

- Day #19

- Day #20

- Day #21

- Day #22

- Day #23

- Day #24

- Day #25