Background

The goal of this repo is documenting my journey for learning web development. I do have some background on JavaScript, React and programming, though rather rusty. My goal is to learn by doing and become competent enough to create web app products as an indie hacker.

The Plan

So for the next 100 days, I will create projects based on FreeCodeCamp courses:

Responsive Web Design course 17 projects
JavaScript Algorithms and Data Structures Projects 5 projects
Front End Development Libraries 5 projects
Back End Development and APIs Projects 5 projects
Coding Interviewe Take Home Projects 20 projects

For staying motivated:

join the 100 days of code challenge
- tweet everyday on what I learned, tag #100daysofcode
- search for 2 ppl with that tag and reply to them
participate in free code camp forum
- post what i learned
- find 2 posts where i could help and reply them. maybe by searching on the topics I just learned

Progress Log

Daily progress log will be maintained here

Day 1

8 July 2023. Project: CatPhotoApp. I'm hosting the projects with Github page

Day 2

9 July 2023. Project: Cafe Menu.

Day 3

10 July 2023: Project: Survey Form. Completed the html part. Will work on CSS part tomorrow. Had fun playing on flexboxfroggy.com while learning CSS.

Day 4

11 July 2023. Project: Rothko Painting. Finding CSS typing tedius, I was looking for a hack - copying CSS from websites, Tailwind CSS, Bootstrap, ... Then I realized I still to know CSS even with though frameworks. So back to FreeCodeCamp it is. Wonder if there are more fun ways to learn CSS?

Day 5

12 July 2023. Project Photo Album Play flexboxfroggy.com.

Day 6

13 July 2023. Project Nutritional Lable

Day 7

14 July 2023. Project Tribute Page to Plastic.

Day 8

16 July 2023. Project Balance Sheet

Day 9

17 July 2023. Project Picasso Painting

Day 10

21 July 2023. Project Piano

Day 11

25 July 2023. Project Technical Documentation

Day 12, 13, 14

Learn backend with Express JS

Day 14, 15

30 July 2023. Project City Skyline

Day 16, 17, 18

31 July - 2 Aug VueJS

Day 19, 20

3 Aug Grid & Flex revision

Day 21, 22

4, 5 Aug Magazine

Day 23, 24

6, 7 Aug Project Product Landing Page

Day 25 - 28

8 - 12 Aug Project Music Band Page

Day 29

13 Aug Finished learning basic JS Project Ferris Wheel Project Penguin

Day 30

14 Aug Continue learning JavaScript, Vue and MongoDB

Finished these challenges about JS events Project Event handler with JavaScript

To continue: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing

Day 31

15 Aug Project Portfolio Page

Day 32

16 Aug

Reading up on JavaScript promises and event loop
Project Flexbox photo gallery following this template on Codepen. Not happy yet because margins keep disppearing, to revisit tomorrow codepen link
Learned about mix-blend-mode which makes overlapping elements look like they are transparent

Day 33

17 Aug

JavaScript callback and promise

Day 34

18 Aug

JavaScript promise, async await
Project Animated Alices in sequence using JavaScript Promise
Blog post about Promise and asynchronous functions in JavaScript

Day 35-42

19-26 Aug

Completed Vue tutorials video
Learned about linting with ESLint and Prettier
Hosted a Vue app on github Reaction Timer Game

Day 43

27 Aug Created Streamlit web app for uploading and asking questions about pdf documents repo here

Day 45

29 Aug Started A/B Test calculator web app project using Vue and JS. Finished the rough logic and UI repo here

Day 46, 47, 48

3 Sep Learning TailwindCSS. Class names are intuitive but mastering it and getting productive with the right setup, linting and plugins take time

Day 51

8 Sep Deployed a TailwindCSS landing page to Netlify, deployed page repo

Day 54

11 Sep Refactored Stat Sig Calculator app to use TailwindCSS (I built this last month using Vue and plain CSS). Deployed using Netlify deployed page

Day 55

12 Sep Finished another TailwindCSS landing page and deployed to Vercel. Also another way to create hamburger menu for the mobile screen using JS.

Day 57

14 Sep User authentication with Node.js repo here

Day 58

16 Sep User Roles and permissions with Node.js. Same repo as above

Day 59

17 Sep Finished another Tailwind landing page - see folder mamed "shortly". TODO: deploy

Day 60

18 Sep Made a motivational quote Chrome extension.

Day 61

19 Sep Learned Object Oriented programming on JS.

Day 62

20 Sep Learned functional programming on JS.

Day 63

21 Sep Watched tutorials on Nuxt.

Day 64

22 Sep Learned Regex.

TODO: To select from 20+50 projects and implement those I find interesting

Day 65-73

29 Sep

started using Nuxt 3
started using Firebase Authentication

Day 74

read Vue 3 Design Pattern book chapter 6
refresh CSS with a frontend challange notifications-page-main

Day 75

14 Nov

built a HackerNews reader - WIP
completed a fun CSS challenge https://codepen.io/hangjoni/pen/yLZoWYv

Day 76

15 Nov

add a thread view in HackerNews reader - wip
learned SASS on freeCodeCamp

Day 77

5 Nov

learned Bootstrap, completed the content on freeCodeCamp

Day 78

19 Dec

learned jQuery, completed the content on freeCodeCamp

Day 79

17 Jan

Deployed Hacker News Reader app written in Vue.js
Revised CSS for responsive website

Day 80

21 Jan

Start day 1 of 30 days of JS project, repo here

Day 81

15 Feb 2024

Finish day 15 of 30 days of JS
Started relearning React

3 May 2024

Started CSS challenge #1 CSS animation and buttons

hangjoni/webdev