Jennifer Bland header image
≡ Menu

Contributing to Open Source isn’t that hard: my journey to contributing to the Node.js project

As a developer, you should consider contributing to open source software. Many of your potential employers will look favorably on these contributions.

But when you’re a new developer, it may feel like contributing to open source is beyond your current skill set. So I’m going to show you how to ignore those feelings of doubt, and how you can start contributing to open source right now.

How I learned Node.js

I first learned about Node.js at my coding bootcamp. The bootcamp specialized in JavaScript. Node.js provides a back-end for a project that is written in JavaScript. So if you have learned JavaScript on the front-end, then you can easily transfer your skills to the back-end with Node.js.

Once I graduated from my coding bootcamp, I was motivated to improve my coding skills as quickly as possible. The only way to do this was to write as much code as possible so I could improve. That’s when I joined freeCodeCamp.

Over a six month period, I completed all four of freeCodeCamp’s original certifications in the freeCodeCamp curriculum. When I got to the section focused on building projects, I used JavaScript and Node.js on the back-end. After completing all the certifications, I worked on one of freeCodeCamp’s initial non-profit projects. The project was for Crimes Committed Against Women.

[continue reading…]

Learn the CSS border-radius property by building a calculator

Have you ever seen a button on a web page that has rounded edges? Have you ever seen an image that fits within a circle? If so, you have seen the impact of using the CSS border-radius property.

You can give any element “rounded corners” by applying a border-radius through CSS.

Border-radius syntax

As with many CSS properties relating to margins, padding, and borders, there are four individual properties — one for each corner of a box element — and one shorthand property. Each of the corner attributes will accept one or two values.

The border-radius property is accepted in every major browser, but they have browser-specific attributes. Here are the CSS and browser-specific attributes:
css browser-specific attributes

Each of the individual corner CSS3 properties take either one or two length values (generally ‘px’ or ‘em’ values). If a single value is supplied, then that becomes the radius of a rounded corner. If two values are supplied, then they become the horizontal and vertical radii for an elliptical corner.
[continue reading…]

How to Ace Your Whiteboard Test on Your Job Interview

Whiteboarding exercises. If you interview for a programming position, you will face a whiteboarding challenge. Whether you are interviewing for your first programming job or interviewing for your next programming job, you will have to ace the coding whiteboard exercise. I have created a series of videos that show you how to ace the whiteboard exercise.

I have created a series of four videos that cover the topics of HTML, CSS, JavaScript and jQuery. Please watch these videos so they can help you prepare for your coding whiteboard interview.

HTML and CSS Interview Questions

[continue reading…]

Here are 5 Layouts That You Can Make With FlexBox

The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and developers have faced with CSS. Let me show you how to use it to generate some common layouts and challenges that you will face in designing a responsive website design.

I assume you already know the basis of Flexbox. If not there are many documents teaching you about Flexbox. I would recommend Understanding Flexbox: Everything you need to know.

Here is What We Will Be Making

In this article, I am going to show you how to make 7 different layouts using FlexBox.

  1. Navigation
  2. Center image on the screen
  3. Responsive website layout
  4. AddOn for an input field
  5. 3 column layout

Get The Code

All of the examples that I am going to show can be downloaded from my GitHub account. The code for every example is just HTML and CSS. I have created a master homepage that provides a link to every example that we are going to cover.
[continue reading…]