How I met your Gatsby - Day 1 && Day 2

I tried out styling the components this time. I copy pasted

1) Styling a component using CSS Modules
2) Building a new page using CSS Modules

Seemed interesting. The working of props and imported variables are kind of cool.

import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)

const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)

export default () => (
  <Container>
    <h1>About CSS Modules</h1>
    <p>CSS Modules are cool</p>
    <User
      username="Jane Doe"
      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
      excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    />
    <User
      username="Bob Smith"
      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
      excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    />
  </Container>
)

I managed to find out some random new npm packages and other tools for different purposes eventhough i only cover a small portion of gatsby.

• Surge
• Deployhq
• Netlify

1)Surge-Static web publishing for Front-End Developers

npm install --global surge

2)Deployhq - Build, deploy, and manage
modern web projects

3)Netlify - Build, deploy, and manage
modern web projects(Extra stuffs)

Upcoming- Creating nested layout components