Forem: Shangguan Wang

How to Survive Your First Software Engineer Internship

Shangguan Wang — Wed, 29 Nov 2023 04:20:52 +0000

I'm halfway through my first software engineering internship at Swoovy. Despite having prior internship and full-time professional experience, the software engineer ways of working are completely new to me.

01. Manage Expectation

In my previous role, I was often regarded as the most tech-savvy person in the room. Whenever there was a new tool or the Salesforce CRM software released a new version, I was that go-to person to figure things out and present my findings, and I enjoyed this process as playing with new toys. However, that's no longer the case when I started from scratch in a new field. I feel constantly challenged, and when I am assigned a new task, I don't have 100% confidence to nail it flawlessly, and surprisingly, it's perfectly okay. In fact, if every single task falls into your comfort zone, you should probably consider seeking new challenges elsewhere.

02. Navigate the Learning Curve

Another thing I noticed is that building personal projects is very different from working on a production-level codebase. When building personal projects, the majority of your time is spent on building new components and writing code. In contrast, I spent most of my first month acquainting myself with the codebase and reading existing code. In an environment with hundreds of components and thousands of lines of code in each file, pinpointing a specific component takes some effort. Also, I've never written a test case on my personal projects, but for enterprise software to be production-ready, unit testing is a must, so I've been learning Jest and Enzyme to ensure the code I wrote is reliable.

03. Raise Questions Early

During the interview, I asked our CTO Gerardo what kind of candidates would succeed in the role, and he painted someone who could set the expectations upfront, and bring questions to the table early. This might sound intuitive, but it really hit me on my first day ———— asking questions as a software engineer intern was not that easy. Just to give you a taste of the various challenges I faced:

I spent 3 hours configuring my codebase setup and still couldn't get the project running on my local machine
When assigned my first ticket, I didn't fully grasp the requirement
In an attempt to resolve a merge conflict, I opted for "keep both changes", and the program crashed...

To ask or not to ask, this is a question. I could either beat myself to death and get stuck while trying to figure things out on my own, or bring up the blockers during standup meetings and seek help from colleagues. The latter is way more effective, and I quickly realized a good question could also be a collective learning experience for other team members. As long as you demonstrate some effort in attempting to resolve the issue independently, you will likely get help instead of being laughed at, because everyone wanted you to succeed. Software engineers are well known for their willingness to help and share knowledge. So there is nothing to be embarrassed about asking a beginner question.

04. Master Git Inside Out

Prior to this internship, I learned how to use Git at Collab Lab, but collaborating on a production-level codebase requires Git commands that go beyond the fundamentals. Here are some essential commands I'm using daily:

git checkout <branch>
git pull
git add <filename>
git commit -m "commit message"
git push

And I'm learning some new ones:

git stash
git stash pop

Let's say you are on a and need to quickly switch to branch to address another task, yet there are unsaved local changes. Rather than committing all the changes on , you could use git stash command to save all changes locally to retrieve later.

Here is another handy one:

git rebase main
git rebase --continue

Imagine you checked out a , and new changes are being committed on the branch that you want to integrate into the . You can use git rebase main to incorporate the latest changes from to the .

While Git commands are not rocket science, it is crucial for codebase collaboration and version control. Spend a few days to fully understand each command and create your own cheat sheet, and your future self will thank you later.

Conclusion

As I navigated through the first few weeks of my internship, moments of self-doubt occasionally crept in, and I couldn't stop wondering if I had the talent to become a job-ready engineer, but because my incremental progress was recognized by my seniors, and I received a tremendous amount of encouragement from colleagues and friends, I am now more ascertain that I am on the right path.

I want to use my favorite quote from British Physicist David Deutsch to conclude my reflection:

Problems are inevitable, problems are solvable.

Happy coding!

A Complete Guide to Pass the AWS Cloud Practitioner Exam

Shangguan Wang — Sat, 18 Nov 2023 21:56:38 +0000

Have you noticed many job descriptions for software developers list Cloud technologies/AWS as a valuable skill? Given that AWS is the dominant cloud service provider, I decided to take the AWS Cloud Practitioner Exam to deepen my Cloud knowledge. After 3 weeks of preparation, I successfully passed the exam today. In this article, I will be sharing all the resources and exam preparation tips to help you ace the exam on the first try.

Study Resources

I spent 10 days to finish Stephane Maarek's [NEW] [Ultimate AWS Certified Cloud Practitioner CLF-C02 Udemy course. The course length is 15 hours, I like the practice questions at the end of each module to test my knowledge, it also includes one practice exam at the end. You can play the video at 1.75 speed, remember to take notes on the key exam topics Stephane highlighted in the video.
I also bought the 6 additional practice exams and did 4 of them the week before the exam. Personally, I found those practice exams to be harder than the real test. The key is not to remember answers but to grasp the distinction between different AWS services.
For example, what are the difference between AWS Pricing Calculator vs AWS Budget vs Cost Explorer? I complied related questions under the same topic to find keywords/patterns:

Pricing Calculator: estimate cost
AWS Budgets: receive alerts when exceeding threshold
Cost Explorer: visualize cost and usage, forecast cost

Sample questions:

What can you use to estimate the cost of your architecture solution? Pricing Calculator
What can you use to get alerts when your costs and usage are exceeding or are forecasted to exceed your budgeting amount? AWS Budget
A company would like to choose the best Savings Plan and forecast its cost in the next 3 months. Which AWS service can help? Cost Explorer

Another secret weapon I found is this YouTube channel @sthithapragna

Never doubt an Indian YouTuber to explain technical things clearly and boost your confidence level. He also shared lots of helpful tricks to recognize the right answers quickly: for example, the "Shared Responsibility Model" is a common exam topic. Anywhere you see the term "physical/data center/hypervisor/infrastructure" is a responsibility of AWS.
I encountered a few similar questions in the real exam, so if you are pressed on time, I recommend at least going through the latest Question Dumps on this channel.

The last resource I use is the AWS official documentation. Below are the common exam topics I found helpful. I bookmarked those links and read them daily and before the exam.

Logistics Tips

Exam Registration

If you identify as a woman, take advantage of the AWS CloudUp program to request a 50% discount voucher. I requested the voucher when I was halfway done with the Udemy course, as the voucher can take several business days to be issued, so I recommend doing it early.
If you are a non-English native speaker, you can get an extra 30 minutes by requesting accommodation BEFORE registering for the exam.

On the day of the exam
Make sure you clear your desk, log into PearsonVue 30 minutes early to check-in. You will be asked to do a system test, download the OnVUE software, use your phone to take photos of yourself, your ID, and the workspace. Expect a queue for proctor assignments, so allocate sufficient time for these steps.

During the exam
After reading a question, I try to formulate an answer before looking at the multiple choices to avoid distraction. You can always bookmark a question for review and come back later. I was able to finish the exam in 30 minutes, leaving plenty of time for review.

Remember, you will never be fully ready, so as long as you prep the exam with dedication and follow the tips I shared in this post, I promise you the exam will feel like a breeze! Good luck!

A Quick Accessibility Checklist for Frontend Developers

Shangguan Wang — Mon, 09 Oct 2023 19:57:44 +0000

I recently completed a full-stack project at The Collab Lab and developed a shopping list app with 3 other developers. Throughout this journey, I gained a profound appreciation for the importance of accessibility in web development. It is crucial for front-end developers to have accessibility awareness in mind so the apps we are building can be user-friendly to all. While I don't claim to be an accessibility expert, below are the 6 simple low-hanging fruit that you can grab to significantly enhance your site's accessibility.

1. Use Semantic Labels

Since we are all well-acquainted with HTML, this is an intuitive one. Utilize semantic labels such as <button>, <section>, <li> as opposed to overusing <div> tag all the way throughout the code.
However, it is easy to overlook this aspect when you are using third-party component libraries such as Daisy UI and simply copying example code from documentation without a second thought. This happened in our project where I used the Daisy UI accordion component and later found out the screen readers wouldn't announce the content because Daisy UI uses an <input> element without <label>. This is also a valuable lesson for me to choose external libraries with built-in accessibility to avoid potential pitfalls down the road.

2. Test Screen Readers

You can press Command + F5 to activate Voiceover screen reader on a Mac. While testing, navigate through your web page using only the keyboard by pressing tab to move forward and shift+tab to go backward. Ensure screen readers announce all necessary content, and the layout is structured in a logical and tabbable order. Also test across different browsers (Chrome, Firefox, Safari) to ensure consistent performance.

3. Utilize Aria-Label and Aria-Live

Include aria-label as an attribute of any interactive element such as a <button> so screen readers can convey the purpose of the button. One use case in our app is we have an icon button used for copying tokens.

Since this button lacks a textual label, we need to include an aria-label like below:

<button aria-label="copy to clipboard" onClick={copyToken}>
    <ClipboardDocumentIcon />   
</button>

You can read more on the MDN Docs aria-label.

On the other hand, aria-live serves a different purpose. It is used to announce live updates such as a state change. By wrapping your content inside an aria-live <div>, whenever the content changes, the screen readers will reread.

<div aria-live="polite">your content</div>

You can read more on the MDN Docs aria-live.

4. Maintain Input Field Focus

If you have an input field, ensuring the focus remains on the input can be helpful. In our app, we have an input field that allows users to filter items by name. After they clear the field, notice how the focus is brought back to the input field so they can start typing again without manually clicking into the input field again.

You can achieve this in React using the useRef hook and ref attribute in <input>.

import { useRef } from 'react';
const filterInputRef = useRef(null);
<input
    type="text"
    name="filter"
    id="filter"
    value={inputItem}
    onChange={handleInput}
    ref={filterInputRef}
    placeholder="Start typing here..."
/>

5. Ensure Sufficient Color Contrast

When picking your color palette, it is crucial to maintain enough color contrast between the text and background so users with low vision can still read the content clearly.
You can use a Color Contrast Analyzer or install a Google Chrome extension called Lighthouse to generate an accessibility report.

6. Reduced Motion

Some users may have sensitivity to motion effects or prefer slower animations. In our app, we use Toastify to display notifications, and the default transition mode bounce might be too fast for slow-motion users, so we've adjusted it to Slide instead.

import { ToastContainer, toast, Slide } from 'react-toastify';
<ToastContainer position="top-center" transition={Slide} />

Those are the 6 accessibility lessons I learned from building this project. What are some other good tips to ensure your web app can serve everyone? Let me know in the comment below!

If you found this post helpful, please give me a 💜

How to Ace your first Take-Home Coding Challenge

Shangguan Wang — Mon, 11 Sep 2023 22:55:55 +0000

Today I completed my first take-home coding challenge🎉, it was a new experience for me and I hope this post would be beneficial for other early-career devs looking to land their first job.

What are take-home challenges?

Take-home challenges are coding assessments that consist of a list of feature requirements. Some devs have mixed feelings about take-home because they can take 10-15 hours to complete. However as a junior dev, I actually quite like take-home challenges over other formats. Unlike Leetcode, take-home assignments mimic coding problems you would encounter in real-world settings at that specific company, you can utilize all the practical knowledge you've built upon up to this point, as well as online resources to complete the challenge, without the stress of getting all the syntax right in one-go in a live interview. If you did well, you will get the chance to explain the development process to hiring managers in subsequent rounds, which gives you talk points to answer questions like:

Tell me about your favorite project?
What technical challenges have you faced and how did you solve it?

Rather than viewing take-home assignments as a way to trick you, think of it as a mini-hackathon to pick up new skills and get code review feedback from interviewers. I gave myself a crash course on Redux in 3 days, and it might take me weeks if Redux was not in scope of this take-home assignment.

How to ace a take-home challenge?

1. Prioritize key features over sprinkles
When creating a personal project, we are facing a blank canvas and can let creativity flow freely for new features. However, under a tight deadline, it would be wiser to set those bonus features aside and focus on the core functionality. For example, allowing users to filter events by category is more important than adding a like button.

2. Break the project into small chunks and make regular commits
Once you have the list of core functionalities, break those further into small manageable chunks. Consider creating an issue for each feature, title it in the format As a user, I want to do ${ABC} by ${XYZ}.

I can reassure you the pure act of making the issue list will make you feel better, the assignment no longer felt like a giant monster😆
Once you made steady progress, make git commits regularly with meaningful comments, this will show hiring managers not only the final product but also your thought process and highlights your problem-solving ability. You are also doing yourself a favor if you ever need to go back and refer to a technical challenge you've solved during an interview.

3. Test Responsive Design
Ensure the app displays correctly on both desktop and mobile devices. This could be a deal-breaker if you didn't test responsive design on a smaller sized screen, so don't forget that!

4. Write user-friendly documentation
Similar to the last point, consider providing a short summary on each issue and listing out testing acceptance criteria. You can even go the extra mile and attach a screenshot or gif of the before-and-after effect.

At the end, write an exemplary Readme, which should includes the following sections:

Overview of what the app does: set the context for readers
Main features: check each requirement off the checklist
Tools used: demonstrate your technical competency
Instructions to run the app on local computer: make reviewer's life easier

That's all! if you found this post helpful, please give me a 💜
What's your view on take-home coding challenges? Let me know in the comments!

Tips on applying to the Collab Lab in 2023

Shangguan Wang — Fri, 04 Aug 2023 02:07:49 +0000

Introduction
What is Collab Lab
Application Tips
Conclusion

Introduction

Hi, I'm Shangguan👋🏼, a self-taught developer, currently in my month 6 of studying frontend development full-time. I hope this post will help you stand out in the Collab Lab application process. Let's get started! 🚀

About Collab Lab

What is Collab Lab? My journey with this program began when I heard glowing reviews from a fellow alumna, Andrea, whom I met through the Women Who Code community. As a self-taught dev, I realized while building personal projects can sharpen the technical side, the missing piece is collaboration with teammates, i.e. committing to different branches, pulling git requests etc. This is where Collab Lab comes in handy. Collab Lab offers early-career developers a chance to gain real-world experience in professional settings. Over the course of 8 weeks, you will work with 3 other developers to create a React app while receiving valuable guidance from dedicated volunteer mentors.
Check out the official website for more: https://the-collab-lab.codes/

Application Tips

1. Prep work

Before applying, you should have a solid foundation in HTML, CSS, JavaScript, and React. I recommend exploring free learning resources like freecodecamp and Scrimba.

2. Demonstrate your passion

The application process is straightforward, involving two questions about your coding journey and your motivation to join the program, and a link to your Github.
As the saying goes:

Show, don't tell

In the creative world of coding, actions speak louder than words. Showcase your dedication through Github commit history, allowing the admission team to witness consistency in coding.
Consider adding a well-crafted Readme.md to your Github profile, including a brief bio and Github Stats like what I have below. Github serves as your resume in the dev world, and it takes a few seconds for a recruiter to screen resume. Given the high volume of applicants, guiding the admissions team into your digital garden. Pin your proudest personal projects, and ensure an informative readme in each that explains your building process.

Aside from passion for coding, it's crucial to showcase your genuine interest in Collab Lab. How did you hear about them and what do you know about the program? Delve into their social media (Youtube and Twitter) with a level of enthusiasm akin to stalking your EX(minus the emotional baggage, of course!).
Consider reaching out to past alumni to gain insights into their experiences. This process is also beneficial to build connections and align expectations so you know what you are getting into.

3. Show your authentic self

Everyone's coding journey is different, and this is where you will shine. Embrace your unique coding journey and highlight how you found the grits to switch into this field? And how did your past experience help you collaborate in a team environment? How did you juggle between life and work, and conquer any setbacks? Don't be afraid to show your aspirations. Your essay is like a Crystal ball🔮 that shows the admission team your past, present, and future. Articulate your career aspirations clearly. For instance, instead of mentioning "I want to become a frontend developer", try "I want to find a junior React developer role at a small startup".
Also worth mentioning if you possess any skills to offer, remember the Collab Lab thrives on a group of kind-hearted volunteers, and they could very much use some help if you are willing to give back to the community.

Conclusion

This was my second time applying to the Collab Lab, I first applied in March 2023 and didn't get in. Back then, I just got started on my coding journey and lack the confidence to code in React. This experience taught me two things, I need to master React, and I need to use Github more often to show my track record. Fast forward 5 months later, a momentous email landed in my inbox:

The key is don't give up. If you apply, you will get two result: good news or valuable learning lessons. Good luck!

If you like this post, consider giving it a like, it means a lot to me🍀

Build Personal Portfolio Website for Developers

Shangguan Wang — Fri, 05 May 2023 20:57:27 +0000

Today I will use my personal website(https://shangguanw.com/) as an example to illustrate how to build your own developer portfolio website from scratch.

Do you really need a personal portfolio website?

A personal portfolio website can give you a competitive edge in the job market. I've noticed many companies, particularly when hiring for junior developer positions, ask for a personal website link. This is an opportunity to showcase your technical skills and convince hiring managers to give you a chance, especially if you come from a non-traditional background. Not only that, a personal website establishes your online presence that goes beyond job-searching purpose. For example, if you are attending a tech conference, a personal website can serve as a powerful networking tool.

Step 0: Planning

As a beginner, there is no rush to build a personal website. After all, it's like a jewelry box to display your portfolio projects, and those projects take time to build. Instead, start by gathering design inspirations. I have a bookmark folder dedicated to collecting outstanding examples. Once you have 2-3 projects under your belt, you can start planning the styles and layout for your website piece by piece.

Step 1: Decide on the Tech Stack

While there are many combinations of tech stacks to choose from, I chose React, Tailwind CSS, and Material UI. I wanted the portfolio website itself to be a project to demonstrate my newly acquired skills and go beyond the plain HTML-CSS-JavaScript combo. If you are targeting specific companies, you may even refer to their frameworks. For example, TypeScript is an open-source project maintained by Microsoft, and Meta invented React.

Step 2: Divide Sections

Since React is based on the core principles of components, it forces you to think about the building blocks for each section. A good framework not only makes coding easier but also teaches you a new way of thinking. Here is a section checklist for my website, feel free to customize to your needs:

Navigation Bar: jumps to the right section when clicked and should always stay at the top while scrolling.
Hero:
- Name, Title
- Social Icons with links
About:
- Profile Photo
- Bio Paragraph
- Technical Skills as badges (optional)
- Experience
- Education
Projects: each project should include the following
- A screenshot
- Title, a short sentence description, list of tech stack used
- Live link and Github link
Footer: include copyrights and the tech stack used to build the site

Step 3: Bonus Points

Once you have the contents, it's time to add some design sprinkles. Remember the design inspirations you collected? Pick some elements you like and blend them into your site, don't copy paste the exact design, and avoid using popular designs that are too common such as the typewriter effect. Here are some sprinkle ideas to consider:

Animate the social icon with a little bounce when hovered over.
Add a fade in reveal animation effect while scrolling using the React Awesome Reveal library
Utilize LottieFiles for animated illustrations.
Add tooltips to the tech stack icons. A non-technical person may not recognize those language logos, so some tooltip text would be helpful.
Consider adding a "working in progress" project, this shows potential employers that you are constantly improving yourself through new projects.

Other things to consider:

Responsive Design: does the page still function well from tablet and mobile screen? My lesson learned here is always start the base CSS with a mobile-first approach, then add rules for larger breakpoints. Mobile layout is usually simpler and nowadays mobile users outnumbers desktop users, so make sure to follow best practices to get the mobile design right first.
Accessibility: It is also crucial to allow people with disability to enjoy your content.

Further Resources:

Josh Comeau's free e-book: Building an Effective Dev Portfolio https://www.joshwcomeau.com/effective-portfolio/
Portfolio review videos on Youtube: Scrimba

I hope you found this post informative and helpful. If you enjoyed it, please consider giving it a like or share it with your friends. Happy Coding!

A beginner's guide to study algorithms

Shangguan Wang — Fri, 31 Mar 2023 05:02:58 +0000

Solving an algorithm challenge is like walking on ice; you never know when you will slip, but every moment of standing is a blessing. -- by me

What does the word "algorithm" even mean? Simply put, algorithm is a way to get things done; it's a way of solving problems in an elegant way.

Why should we study algorithms? They are the core components of technical interviews for developers and comprehensive tests on logical thinking, syntax familiarity, and strong work ethic. Even if your target company is not FAANG, practicing algorithms will build a solid foundation for your programming skills and prove to potential employers you are willing to devote time and effort to solve difficult problems.
Even traditional CS students find algorithms challenging, but for self-studying career transitioners and bootcampers, we have a significant advantage. We don't have to start with the textbook definitions of binary search or linked list. We can gamify the learning process, and dive right into solving interesting problems.

Instead of spending months on long lectures, let's begin with the easiest algorithm challenges. I highly recommend Codewars, their leaderboard ranking system and question lists are incredibly fun and approachable. I immediately got hooked and now am addicted to solve a few challenges each day. In just 15 days of using the platform, I've already solved 50 challenges, and my ranking has improved from the 99th percentile to the 55th percentile.

At first, it would take me half an hour to solve the easiest challenge, and I would run my code on a local editor and console log every line to see where it went wrong. After some practice, I started to pick up certain patterns and could solve a problem in 5 minutes. Then I got more ambitious and not only wanted to solve the problem, but also solved it in an elegant way. You know the feeling when you wrote 30 lines of code, passed all the test, only to found out the most voted solution only has one line? Programming is truly an art more than science. The best programmers have taste, and through practicing algorithms I also get to improve my taste on code. One caveat is not to go too far on the shortest code to solve the problem. Readability is more important than showing off cleverness, and during an interview you don't want to fall into the trap of writing code that's hard to explain or understand.

Once you started grasping the common techniques of manipulating strings, arrays, and objects, consider taking a short crash course online to deepen your knowledge. I recommend Udemy's course The Coding Interview Bootcamp: Algorithms + Data Structures by Stephen Grider. I love how Stephen sets the tone that algorithms are learnable. You don't have to be good at advanced math to solve an algorithm challenge. His way of laying out the logic in a flow diagram also helped me become better at explaining my logic. Instead of vaguely knowing where to begin, now I can lay a 3-step outline in pseudocode, then execute it.

While portfolios get you the first round of interview, algorithms determine whether you pass the second-round technical interview. The good news is you can still learn in public with algorithms. Create a folder on Github for every challenge you solved or struggled with, and write down study notes like I did. That's one piece of advice I got from a senior engineer interviewer. She prefers candidates whose Github has algorithms and data structure contents. Github commit is a great way to show consistent dedication.
I hope you find this post helpful. Let me know in the comment how you study algorithms, or any other topics you would like to see. Happy coding!

How to Handle Coding Burnout

Shangguan Wang — Fri, 17 Mar 2023 04:25:36 +0000

I'm on my Day40 of the #100DaysofCode challenge, and for the past month I've been cramming myself every single day in the world of programming. I've learned html, CSS, JavaScript, and am in the process of learning React. I've built 3 personal projects to test my skill, and never skipped a single coding challenge through the courses. But this week, I'm feeling less motivated to catch up with the speed I was going. So here are the steps I've taken to maintain the momentum while giving myself some time to breathe.

1. Find more success stories, find your community

One of the biggest reasons why I'm feeling burnout is just that there are so much to learn from scratch, and the bar for an entry-level developer job seems hard to reach, especially in this current economic conditions. One way to reboot your confidence is to hear more success stories. I particularly love freeCodeCamp's career change blog and the Scrimba Podcast. I've heard stories where a butcher or a store manager or a musician navigated through career change and successfully landed their first job. I admire their persistence and discipline, that's the two qualities that distinguish those who succeed versus those who gave up too early. Another way is to find a community. As a self-studying programmer, I cannot emphasize enough how important a community is to stay sane. I highly recommend Women Who Code, they have local chapters based on where you are, and tons of scholarships or resources you can get. You can also create your own online community. I started a frontend learning group on Discord this month and just asked on a forum randomly who wants to join. Now the 7 of us are giving each other pat on the shoulder daily.

2. Build new projects

Yes you heard it right, the answer to deal with coding burnout is... more coding:D. But hear me out before you throw away your keyboard. The reason we have coding burnout is because we feel stuck in a little corner without knowing how to get out. Maybe the course materials are too challenging, maybe you didn't full grasp what to do with all those new functions. Why am I even learning all of those? Well, the solution is you need to test your existing knowledge, and prove to yourself how good you have been learning. Plus personal projects are fun, that's where you can let your creativity comes in. Then you will realize, code is just a tool to bring ideas to life. Maybe the tool is a little hard to use at the beginning, but you get to be the mother of your ideas, so it's worth the bump.

3. Solve Coding Challenges

I used to despise coding challenges, why would I grind all those questions with perfect syntax while I could always ask ChatGPT? Plus my goal wasn't trying to get into FAANG anyway. But here is the thing, it's not about whether you know the syntax or not, it's the daily practice of logical thinking and optimal problem solving that makes it valuable. There are many new platforms that makes the user experience more smooth than LeetCode. My personal favorite is CodeWar. I have a competitive personality so it's almost addictive to me now to solve a few of these every day in order to rank up, plus it's free.

So here are my tricks of dealing with coding burnout. What about you? Would love to hear your thoughts in the comment. Happy Coding!

How I Completed My First Web Design Course on freeCodeCamp

Shangguan Wang — Thu, 23 Feb 2023 07:00:50 +0000

I first heard of freeCodeCamp in 2021 when a friend of mine successfully landed her first web development job through self-learning. She recommended freeCodeCamp as the No.1 resource to get started with programming. I decided to give a try, but soon got swamped by my day job and left it aside.
Fast forward to Feb 2023, I resigned from my job without any backup plan. The only thing I knew was that I missed building things from scratch and needed a goal to keep my life together. This time I completed my 1st Web Responsive Design course in 18 days.

Here is what I learned through this journey:

Find your "Why"

Coding, just like anything in life, is not easy. To accomplish a challenging task, There are two steps:

Find a reason to do it.
Do it.

Counterintuitively, Step #1 takes 80% of the work. Before rushing into an online course, write down on a piece of paper what your motivation is for completing this course. Do you want to build a website for your own side project? Are you curious about programming or just want to acquire a new skill? No matter how trivial the reasons are, they will be your North Star to guide you through the bumps on the road. Once you have your list, make this course the No.1 top priority, Every morning when you wake up, no matter how busy the day ahead will be, the first thing is to crash several challenges, and same thing before bed.

Make a plan, adjust dynamically, and stick to it

In my prior life, I worked as a bid manager at a big tech company. Every time we received a new request for client proposals, the first thing was to make a plan: Who needs to complete what by when?
Mark your calendar, and set the daily targets realistically. I felt content about myself when I coded my first HTML static page until I realized there are 16 more units to go, at the current pace it could take me months to finish the full course. So I decided to condense my plan more; otherwise, I may never finish. It is reasonable to adjust your plan, after all, cramming is not the best practice for absorbing knowledge, but be sure to track your progress rigorously.

Ask for help

I often wonder why hair volume is a concern for many senior developers, until I learned what a bug is. Bug is inevitable, and I'm feeling inevitably frustrated, spending hours trying to find what went wrong, only to learn I forgot a semicolon, or mistyped a variable name. So before you pulling your hairs all out, ask for help. Developers are naturally willing to share knowledge and help each other, that's the spirit behind open-source projects and the internet. Fortunately for introverts, there are online forums like freeCodeCamp forum and stackoverflow. If you are still stuck, chat GPT is your best tutor. 9/10 times it points me to the right direction, no judgement no shame.

As you are marching towards your goal, learn in public is a great way to fuel the momentum. Consider joining #100DaysOfCode challenges on Twitter or Github. There are days I felt lazy but pushed it through because I still need to tweet my challenge, and I also got inspiration from other posts under the #100DaysOfCode hashtag.

I hope you feel set to success for reaching your programming goals. Let me know what valuable lessons you learned from your own journey, and I will be sharing more self-study coding hacks.
Happy Coding!

Forem: Shangguan Wang

How to Survive Your First Software Engineer Internship

01. Manage Expectation

02. Navigate the Learning Curve

03. Raise Questions Early

04. Master Git Inside Out

Conclusion

A Complete Guide to Pass the AWS Cloud Practitioner Exam

Study Resources

Logistics Tips

A Quick Accessibility Checklist for Frontend Developers

1. Use Semantic Labels

2. Test Screen Readers

3. Utilize Aria-Label and Aria-Live

4. Maintain Input Field Focus

5. Ensure Sufficient Color Contrast

6. Reduced Motion

How to Ace your first Take-Home Coding Challenge

What are take-home challenges?

How to ace a take-home challenge?

Tips on applying to the Collab Lab in 2023

Table of Contents

Introduction

About Collab Lab

Application Tips

1. Prep work

2. Demonstrate your passion

3. Show your authentic self

Conclusion

Build Personal Portfolio Website for Developers

Do you really need a personal portfolio website?

Step 0: Planning

Step 1: Decide on the Tech Stack

Step 2: Divide Sections

Step 3: Bonus Points

Other things to consider:

A beginner's guide to study algorithms

How to Handle Coding Burnout

1. Find more success stories, find your community

2. Build new projects

3. Solve Coding Challenges

How I Completed My First Web Design Course on freeCodeCamp

Find your "Why"

Make a plan, adjust dynamically, and stick to it

Ask for help