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
- 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.
Just curious, what was the experience?
Thanks for the book recommendation, I’ll check it out!
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: Day 2 notes on GitHub : Link
- The importance of
<html lang="en> in accessibility, SEO & styling.
<head> contains vital info like the page title, meta info, and links to CSS/JS.
- In-line CSS can be handy, but for organization, using a separate .css file is recommended.
- Utilized type and class selectors in CSS for better control over styling.
- The power of viewport meta attribute in creating responsive designs.
- Remember to use
max-width together for better legibility on wide screens.
padding for internal distance management in an element.
<hr> element is a great tool for visual content separation.
- Pseudo selectors for link behavior - a crucial aspect of UX.
- 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!
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.
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
Good luck, keep building and keep learning!
I just clicked on those links to the sub projects and they are displaying for me.
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:
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.
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.
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:
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