This repo contains my final projects solutions for web-related courses I've done on freeCodeCamp in 2021.
- Visit here to see actual web pages.
- See my timeline on freeCodeCamp here: start in 2021/03/11, finish in 2022/07/04. There is a big gap in this journey, after I finished all the courses listed below except the "Front End Development Libraries". It's because after gone through that course, I still feel uncomfortable developing Front End. Too many libs, frameworks, tools, concepts.
- If you want to play around with this repo locally, fork it, inspect the code,
especially the shell scripts,
Makefileand.githubworkflows. The repo should be runable after cloning viamake serve
- Course link
- Cert
- Total time: 10h
This is easy if since I already have some experience with LeetCode, just need to get a bit more familiar with data structure in JS. Thankfully, JS has strong support for functional programming.
- Course link
- Cert
- Total time: 35h
The course is very helpful, I learned many things: Flex Box, Grid, media query...
Except the Documentation page (Markdown Guide), other 4 projects is hand-written HTML, CSS and JS. It feels a bit weird to do that in 2021, when there are too many JS frameworks available. But on the other hand, it feels cool to finally able to build such sites.
- Course link
- Cert
- Total time: 18h
d3 is awesome! I don't know how many times I have that thought when working on
this cert. There's a lot of things in and behind it. No wonder why there's so
many books on d3. I will definitely use it for my other (real) data
visualization projects.
Beside many things I've tried with these projects, I feel like my code for iterate through data and rendering the chart is not efficient. I need to learn more about JS performance. The code could also be structured better.
- Course link
- Cert
- Time:
- Course: 20m, pretty quick since I'm experienced and there's only 56 multi choice questions.
- Problems: 4h, need time to learn Python OOP
- Course link
- Cert
- Total time: 13h
- 8.5h for final projects.
- 4.5h for the course, but I spent probably only 30m on the course content (skipped videos, guest the answers), and use the rest to write scripts for converting Python scripts to Jupyter Notebook, HTML and markdown, then live serving the HTML as I editing the Python script. What's a waste of time, yes. But in the end, we have some nice pages to view.
There's a lot of things to I've yet to learn. Don't count on my data analysis skill with Pandas, Numpy, ... I think I'm just good at reading documents and guessing.
Off topic, I used to try Jupyter when it first came out, and used to think about seriously learn Data Analysis. However, I couldn't edit code on the web interface (because of Vim, but I'm not complain), so I drop that thought. I can't understand why web editing become so popular now. Perhaps many people are OK inefficient workflows.
- Course link
- Cert
- Time:
- 15.5h to setting up local development, heroku site, Github Actions, then benchmark and try nodejs cluster to see if it could be faster. The result of this effort is used for other courses like QA, infosec, so perhaps it's not fair for this course to to include this time here. But, who care?
- 3.5h to implement all final projects.
This and other courses need a backend require more setup. So I build a small Express app to serve all of them on Heroku.
In order to do that, I had to modify some files that's suppose to not modified,
remove the app = express() and expose express.Router(). See the main app
code and some custom middleware in
heroku folder
The setup works quite well for passing the courses quickly, but I'm not happy
with its performance. I've tried stress test the dummy GET /,
implement buffered logging and use cluster to run it with multi cores. If you
know any good resources or see any of my mistakes, I'm eager to learn.
- Course link
- Cert
- Time:
- 2.5h for the course, learn about using Passport.js, seem like a good framework to use if I would build backend with NodeJS.
- 10h for final projects. I focused only on the API, ignored the UI. So please don't expect the UI to be usable.
For this course, honestly I'm not interested in the final projects. I like unit test, but I really hate this combination:
- Unclear spec that force us to guess what the author means.
- Hidden tests that make it extremely frustrated to pass them. Yes, I could find the source for the tests, but that doesn't change my feeling about hidden tests.
As a result of such bad feelings, I have to do my best to get rid of those projects as quickly as possible, including writing dummy tests in some of below projects to pass the FCC tests. Sorry.
- Course link
- Cert
- Time:
- 40m for both helmet and python part. For python part, I just guess, didn't watch the videos.
- 8h for the final projects. I've tried to build a proper game, but it needs much more time, so let's do it later. See note for the game project for more detail.
- Course link
- Cert
- Time:
- 10m for guessing on multi choice questions
- 22h for final projects.
See its note here
This doesn't have a cert, but I still do it to understand more about JS. See here for the notes and some solutions.
- Course link
- Cert
- Time: more than 20h, span through 1 year due to procrastination
| Task | Site | Time | Lib |
|---|---|---|---|
| Build a Random Quote Machine | ./fe/quote | 4h | React |
| Build a Markdown Previewer | ./fe/markdown | 4h | Vue |
| Build a Drum Machine | ./fe/drum | 3h | Svelte |
| Build a JavaScript Calculator | ./fe/calc | 3h | (none) |
| Build a 25 + 5 Clock | ./fe/clock | 4h | React |
Note:
-
I tried to use a minimal setup for these exercises, which load the UI libraries (React, Vue, ...) directly in the browser instead of using typical NodeJS build process, because I don't want to pull thousands of modules and also to challenge myself.
-
Learned about various
<script>types:module,babel/text,importmap(doesn't work natively on Firefox and Safari at the moment) -
I actually didn't pass all the test for the last project (25 + 5 clock), although my implementation should cover all user stories. Their requirements are incomplete (what happens when we click
*-increment,*-decrementbuttons during timer running), and their tests are faulty (clickingresetbutton in my solution perfectly reset all the labels and values, but it keeps failing, there's also funny error message likeValue in element with id of "break-length" is less than 1.: expected '5' to equal '1'). I spent too much time try to work around their test, but eventually gave up.