Sharing My 100-Day Web Development Journey & Seeking Advice

Hello everyone,

I wanted to share a bit about my current journey in web development. I have some experience with JavaScript, React, and programming in general, but things have gotten a bit rusty over time. My ultimate goal is to learn through practical application and become capable enough to create web app products as an indie hacker.

Here’s my plan: Over the next 100 days, I’ll be building a variety of projects based on FreeCodeCamp courses, specifically:

  • Responsive Web Design with 17 projects
  • JavaScript Algorithms and Data Structures with 5 projects
  • Front End Development Libraries with 5 projects
  • Back End Development and APIs with 5 projects

To keep myself accountable and motivated, I’ll be joining the #100DaysOfCode challenge and will be tweeting daily about what I’ve learned. I’m also planning to be active in this forum, sharing my progress, and seeking ways I can help others based on the topics I’ve learned.

Today (8th July 2023), I’ve started my first project - the CatPhotoApp, and I’ll be hosting all of my projects on my Github page for anyone who’d like to follow along or offer feedback.

I’m sharing this not just to document my journey, but to hopefully inspire others who might be on a similar path. Most importantly, I’m also looking for advice or tips from the community.

Are there any resources you’d recommend in addition to what I’ve listed? Any pitfalls to avoid or best practices to adopt? All feedback is greatly appreciated!

Thank you for reading, and I look forward to engaging with you all.

Best,
Joni

Just curious, what was the experience?

While fCC is great and you’ll learn a lot, I always get a lot out of books as well. One that gets recommended a lot is Eloquent JavaScript, and the onlne version is free.

1 Like

Thanks for the book recommendation, I’ll check it out!

I learned JavaScript 12 years ago in school but didn’t use it until my previous job. I was a data scientist/analyst and more comfortable with Python.
In some projects I completed at that job, I added a few visualizations to an existing internal React web app using a little bit of React and quite a lot of D3. Also got to experience deploying the app and maintaining the app. It was a rather painful experience to be honest, half the time I felt like I’m pulling my hair out dealing with npm, deploying, and JavaScript/promises. I think it’s because of lacking proper foundation on nodes/npm/and all the modern web dev stacks

:rocket: Day 2 of my #100DaysOfCode challenge & working on a ‘Cafe Menu’ project. Encountered a hiccup with Github pages deployment - looks like subfolder HTML files don’t display, only the main HTML. I’ll transition to Heroku for hosting in future.

View my progress: :small_blue_diamond: Day 2 notes on GitHub : Link:small_blue_diamond:

Today’s learnings🧠:

  1. The importance of <html lang="en> in accessibility, SEO & styling.
  2. The <head> contains vital info like the page title, meta info, and links to CSS/JS.
  3. In-line CSS can be handy, but for organization, using a separate .css file is recommended.
  4. Utilized type and class selectors in CSS for better control over styling.
  5. The power of viewport meta attribute in creating responsive designs.
  6. Remember to use width and max-width together for better legibility on wide screens.
  7. Using padding for internal distance management in an element.
  8. The <hr> element is a great tool for visual content separation.
  9. Pseudo selectors for link behavior - a crucial aspect of UX.

:computer: Question:

  • Is it possible to host multiple static pages on Github page? This is my Github page to list the link to the projects I’ve created , which I stored as html file in sub folder of the parent repo. However the sub project do not get displayed by Github pages. I guess it’s not possible?

Let’s keep coding! :rocket:

FreeCodeCamp isn’t a one stop shop. It wont teach you everything, and in some areas its actually outdated. For example, the lessons in React don’t go over the “modern” way to use React.

As such I’d like to provide supplemental resources to use as you go through freeCodeCamp. fCC is great as a starting point, learning framework, roadmap, and community, but again it still has its gaps you’ll keep in mind as you go.

Resources

  • MDN Mozilla Developer Network - MDN Web Docs - reference site that goes over all things web development, from html, to css, to JavaScript to “how the internet works” MDN is developed, opened source and maintained by the same organization that manages the firefox browser. Its a great reference and resource to use at any point.

  • https://react.dev/ - the new React docs, I’d recommend going through freeCodeCamp to learn the “classical” way of using React, but also “double up” on projects and use the official docs once you want to go out and build your own.

  • freeCodeCamp.org - YouTube - want to learn other things that freeCodeCamp doesn’t go over? Refer to their youtube for courses on a wide range of stuff in video format. You wont get the awesome online experience, but this should still be ok when out and about learning random stuff

  • freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More - the news feed can introduce you to new things and give you that “whats over the knowledge horizon” viewpoint of learning things just randomly. Just to be clear, you don’t need to know most of this stuff, but just being aware is always nice to keep feeding you inspiration and context.

Good luck, keep building and keep learning!

1 Like

I just clicked on those links to the sub projects and they are displaying for me.

1 Like

Hello fellow coders,

Today marks the third day of my #100DaysOfCode challenge, and it was a day filled with discovery and new insights. Let’s dive right in:

  1. VSCode Auto-fill: If you’re an HTML coder and use VSCode, here’s a time-saving tip. After typing “=”, VSCode automatically generates a pair of quotes and positions your cursor right between them. Be mindful not to type the quote again as it places your cursor outside the quote pair, and moving it back can be slightly inconvenient. This Reddit thread provides a brilliant explanation of this behavior.

  2. Text Editor and Typing Speed: After today’s experience, I’m convinced that choosing the right text editor and optimizing your typing speed are pivotal to web development productivity. I experimented with “vim” mode within VSCode today and was pleasantly surprised by how much it reduced my typing time. The “vim” mode especially excels at copy-pasting blocks of code and editing slight variations in HTML elements. I’m still on my journey to mastering VIM, but this MIT Missing Semester Video on VIM and text editors has been a fantastic guide.

  3. Justify-content: This is an incredibly handy tool when you need to position multiple items in a harmonious manner. The ‘space-around’ value places content equidistantly and maintains half the distance to the borders. Here’s a quick example:

#pond {
	display: flex;
	justify-content: space-around;
}

Can’t wait to see what Day 4 holds for me. As always, please share your thoughts, suggestions, or any tips you might have. Keep coding and progressing, everyone!

#100DaysOfCode #Day3 #VSCode #VIM #HTML #CSS