WebDev Bootcamp — Week 1

I enrolled in a Web Development Bootcamp, and I just finished week 1 of 6. We learnt basic HTML and CSS. For our first week, we had two guest speakers: Barbara Oakley and Zach Caeres. They spoke about how we can learn as programmers.

Read more about the Bootcamp here:

• Introduction
• Week 2
• Week 3
• Week 4
• Week 5
• Week 6

Schedule

Date	Description	Link
Jan 10 (Monday)	Learn HTML by building a cat photo app	freeCodeCamp
Jan 11 (Tuesday)	Learn basic CSS by building a cafe menu	freeCodeCamp
Jan 12 (Wednesday)	Learn CSS colors by building a set of colored markers	freeCodeCamp
Jan 13 (Thursday)	Guest Session: Learning How to Learn for Programmers	YouTube
Jan 15 (Saturday)	Office Hours livestream for Q&A	YouTube

Building a cat photo app

We learnt basic HTML elements (e.g. h1, p, main, body, footer, section, a, img ) and how to create a form using elements like fieldset, input, and legend.

See the Pen Untitled by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Building a cafe menu

We learnt how to change the appearance of the HTML document using CSS by using selectors, class selectors, and pseudo-classes.

See the Pen Untitled by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Building a set of colored markers

We learnt about primary, secondary and tertiary colours, and representing them using RGB, hex code and HSL. We also learnt more CSS properties (e.g. margin, padding, background, box-shadow) and functions (e.g. linear-gradient)

See the Pen CSS Color Markers by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Guest session

This week’s guests are Barbara Oakley and Zach Caeres, who are programmers that learnt how to code later in life. The topic was on about learning how to learn for programmers.

Here are the key messages that I took home from this session:

• As programmers, it’s important to get comfortable with being uncomfortable.
• We have long-term memory and working memory. Working memory can hold about four pieces of information at a given time.
  • When learning, working memory creates links so that it can store them in the long-term memory.
  • Learning has a heavy cognitive load which means there is not enough working memory available.
  • Good programming requires good working memory management. It is important to free your working memory so you can do things one at a time.
• Taking a break is an essential part of problem-solving.
  • We have two modes of thinking: focused mode and diffused mode (when your mind is relaxed). Our mind switches between the two.
  • In diffuse mode, our thoughts can become broader, which can allow us to view things from newer perspectives.
• To combat procrastination, they recommend using the Pomodoro technique. I am personally not a fan of it because it disrupts my flow state. I prefer the 10-min rule to help get me started and when I feel my focus start to dissipate, I take a break.
• An effective way to learn is through active recall and spaced repetition. They recommend using a flashcard program called Anki.
• Achieving procedural fluency is the goal.
  • Memorise the syntax and don’t have the “I can just look it up” mindset. This allows you to free up your mind to problem solve. Ask yourself “how often are you checking the docs?”.
  • It helps to learn shortcuts and improve your typing speed.
• Imposter syndrome is inevitable. There are two things that can help overcome that feeling:
  • Having small achievements.
  • Creating a log of nice things that people have said about you and your work.