Ready to add another tool to your developer toolbelt? Styled-components are great for reusability, maintenance and debugging. Styled-components allow us to write CSS in JavaScript template literals.
Let’s get started!
We need to install styled-components so let’s type the command below:
npm install styled-componentsOnce the installation is done, let’s style our first component! We also need to import styled from ‘styled-components’ at the top of our file. For this example, I will be showing you how to style a simple button element.
Git ready, Git set, Go! I was really intimidated by Git when I first started using git(git it?) Okay, I’ll stop. I’m here to give you confidence it just takes time and practice. Version Control is a tool that allows you to maintain a productive work-flow and allows you to collaborate with others more efficiently.
1. Git init
Creates a NEW/EMPTY repository. Typically, when creating a new project this is one of the first commands you’ll use.
git init 
Mad props to the folks who create this awesome open-source, front-end, JS Library known as React. React is great for single-page apps, rendering Data to the DOM, routing, and state management. I find it helpful to simplify over-complicated terms and break them down, so in case you’re just starting out I hope you find these bullets helpful.
I recently came across a tweet that got me thinking:
As you see here, society tells us that technology is a place for males. We start this narrative at a young age, saying to young boys, shoot for the stars (literally). The illusion that technology is an exclusive boys club might start in the toy box, but it is regularly reinforced over time through entertainment, advertising, and pop culture.
A survey conducted by Microsoft found that young girls start showing interest in STEM subjects at age 11 and then lose it again by age 15. While the study couldn't…
CSS(Cascading Style Sheets) is the code that styles the web content bringing our webpages to life with color and pizzaz. Don’t you find it amazing what a little color, border, or font change can bring to your applications? If you don’t have any experience, let me help you unlock your CSS potential.
Linking your HTML page to your CSS file
- We create a stylesheet with a
.cssextension and include its link in the HTML document, like this:
<head>
<link rel="stylesheet" href="yourfilename.css">
</head>Be sure to change the filename.
Selectors
CSS selectors are used to “find” (or select) the HTML elements you want to style. …
Let’s talk about the ternary operator! The ternary operator is a conditional operator that can efficiently replace several lines of IF statements, allowing us shorter and tidier code. The ternary operator is the only JavaScript operator that takes 3 operands.
IF statement
let pay_babysitter = trueif (pay_babysitter) {
"Paid!"
} else {
"Need to pay!"
}// output: "Paid!"
VS
Ternary Operator
Typically, programmers are always looking for ways to make their jobs easier and faster. Enter in: Arrow Functions. They put the FUN in function.
Arrow functions were introduced in ES6, with the intention to write shorter function syntax. Sign me up!
Example of Name Function vs Arrow Function
Kelsey Dickson
Developer in NYC 🤠
