WebDev Bootcamp — Week 2

I enrolled in a Web Development Bootcamp that lasts for six weeks and I have finished week 2. The concepts we learned this week include building forms, the CSS box model, using flexboxes and Git. This week, we were joined by Rizèl Scarlett, who spoke about GitHub.

Read more about the Bootcamp here:

• Introduction
• Week 1
• Week 3
• Week 4
• Week 5
• Week 6

Schedule

Date	Description	Link
Jan 17 (Mon)	Learn HTML & CSS by building a registration form	freeCodeCamp
Jan 18 (Tue)	Project: Build a Survey form	freeCodeCamp
Jan 19 (Wed)	Learn the CSS Box model by building a Rothko painting	freeCodeCamp
N/A	Learn CSS Flexbox by Building a Photo Gallery	freeCodeCamp
Jan 20 (Thu)	Guest Session: Intro to Git	YouTube
Jan 22 (Sat)	Office Hours livestream for Q&A	YouTube

Building a registration form

We learnt how to build a form using elements like <form>, <fieldset>, <input>, <label>, <select> etc. and how to validate the user’s input.

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

Project: Building a survey form

For this project, we had to create a survey form and be creative with it. There were 16 user stories that had to be fulfilled to pass the assignment.

A user story is an informal, general explanation of a software feature written from the perspective of the end user. Its purpose is to articulate how a software feature will provide value to the customer.

— Max Rehkopf, Atlassian

We can check whether we have fulfilled the requirements using their Test Suite (the green hamburger menu).

See the Pen Survey Form (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Building a Rothko painting

Mark Rothkko was a painter who was known for his irregularly-shaped, rectangular abstract paintings. For this lesson, we learnt more about the CSS box model which consists of the margins, borders, padding, and the content.

See the Pen Rothko painting (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Building a photo gallery

This lesson was done in our own time. We learnt about flexboxes and creating them using display:flex, flex-direction, flex-wrap, justify-content, align-items etc. We also touched briefly on media queries to specify breakpoints.

See the Pen Flexbox Photo Gallery (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Guest session: Intro to Git

For this guest session, we had Rizèl Scarlett, who is a Developer Advocate at GitHub and Program Director at G{Code}.

She introduced us to the basics of version control, Git, alternatives to GitHub (e.g. GitLab, Bitbucket, GitBucket, AWS CodeCommit, Sourceforge) and went through how to create our first repository.

I personally found the Q&A session more informative as I already have a bit of experience with GitHub.

Here are the key takeaways I got from the Q&A session:

• Create a series of small commits rather than one big chunky commit. It will be easier to go back and track where you have made mistakes.
• Tips for contributing to an open source project:
  • She wrote a blog post about her experience contributing to her first open source project.
  • She recommends checking out firsttimersonly.com. It has resources on where to find beginner-friendly projects and how to get your first pull request accepted.
  • opensauced.pizza/ — Helps you track the open source projects that you’re contributing to
  • hot.opensauced.pizza/ — Helps you find the most popular open source projects
• She recommends GitHub Learning Lab for GitHub tutorials.
• There are commit message conventions that some repositories adhere to. Examples of these conventions can be found on the Conventional Commits website and on the Angular GitHub repository.