Get started with a Pinterest clone. No external libraries needed.

Browse our Teachable courses.

Image for post
Image for post

We’ll build our mock-up in steps.

1. Create a mock-up of a single Pinterest Pin.
2. Create a mock-up of the Pinterest “Add a Pin Screen”.
3. Merge the above; Use the “Add Pin Screen” to generate a single Pinterest Pin.
4. Transfer the logic of our merge in step 3 into our Pinterest Layout.

“Pinterest Pin” Mock-Up

1. Pin title — the user won’t see this; you can use this on the back-end as a way to store the Pin in a database
2.


Get Pinterest’s unique grid layout.

Browse our Teachable courses.

Image for post
Image for post

We’ll only need 2 Components

A ‘PinterestLayout.js’ component that we’ll use for the Pinterest board.

A ‘Card.js’ component that we’ll use for the actual pins on the board.

Let’s write the PinterestLayout component

function PinterestLayout() {
return (
<div style={styles.pin_container}>
</div>
)
}
const styles = {
pin_container: {
margin: 0,
padding: 0,
width: ‘80vw’,
display: ‘grid’,
gridTemplateColumns: ‘repeat(auto-fill, 250px)’,
gridAutoRows: ‘10px’,
position: ‘absolute’,
left: ‘50%’,
transform: ‘translateX(-50%)’,
justifyContent: ‘center’,
backgroundColor: ‘black’
}
}

Note:

  • margin — simply used to normalize our container
  • padding — simply used to normalize our container
  • width — this boundary will determine how many cards are displayed horizontally, before they…

Just HTML, CSS, & JSS

Browse our Teachable courses.

Image for post
Image for post

We’ll build our mock-up in steps.

1. Create a mock-up of a single Pinterest Pin.
2. Create a mock-up of the Pinterest “Add a Pin Screen”.
3. Merge the above; Use the “Add Pin Screen” to generate a single Pinterest Pin.
4. Transfer the logic of our merge in step 3 into our Pinterest Layout.

“Pinterest Pin” Mock-Up

1. Pin title — the user won’t see this; you can use this on the back-end as a way to store the Pin in a database
2. Pin modal — this is the overlay for each card; this won’t be functional for this tutorial, just cosmetic


A programmer’s solution to Parallax web design

Browse our Teachable courses.

Image for post
Image for post

The general solution we’re working with is this:

We are going to fix an HTML element on page (in this case a DIV shaped like a circle).

When we scroll our page down, we’ll manually scroll the HTML element up.

Since we are manually scrolling our element up, we can control how fast or slow it moves.

This creates our parallax effect.

Normalize the page and make it vertically long so we have scroll space.

body {  overflow-x: hidden;  width: 100vw;  height: 300vh;  background-size: contain;  background-image: url(‘./back.png’);}

Create a DIV…

<body>  <div class=”orb”></div></body>

that we’ll style into a circle.


Using a few simple lines of CSS, create Pinterest’s Pin layout.

Browse our Teachable courses.

Image for post
Image for post

Let’s start by declaring some CSS variables.

:root {
--card_width: 250px;
--row_increment: 10px;
--card_border_radius: 16px;
--card_small: 26;
--card_med: 33;
--card_large: 45;
}

Note:

  • card_width: 250px — the width of our card/pin
  • row_increment: 10px — we are using a CSS GRID to build our layout; technically, each card is made up of multiple 10px increments for the rows; not columns
  • card_border_radius: 16px — used to round the card’s edges
  • card_small: 26 — a small card is made up of 10px * 26 increments (with the margins included: 230 x 230)
  • card_medium: 33 — a medium card is…

Responsive, Auto-Play & Manual Navigation

We’re going to build a JavaScript image slider that has an auto-play function as well as manual navigation buttons.

We won’t be using any external libraries; all native HTML, CSS, and JS.

Browse our Teachable courses.

Image for post
Image for post

We’ll start by putting all of our elements on screen.

We need two components: Deck.js and Card.js

We have 6 elements to work with:

  • In the Deck.js
    1. an img that we’ll use as a button for moving right (IMG)
    2. an img that we’ll use as a button for moving left (IMG)
    3. a view port (DIV)
    4. an images container (DIV)
    5. a DIV to hold our “radio” buttons (DIV)
  • In the Card.js
    6. a “card” which we’ll use to hold the image (DIV)
    7. the actual image (IMG)

Responsive, Auto-play, Manual Navigation Buttons

We won’t be using any external libraries; all native JSX, CSS, JavaScript.

Browse our Teachable courses.

Image for post
Image for post

We’ll start by putting all of our elements on screen.

We need two components: Deck.js and Card.js

We have 6 elements to work with:

  • In the Deck.js
    1. an img that we’ll use as a button for moving right (IMG)
    2. an img that we’ll use as a button for moving left (IMG)
    3. a view port (DIV)
    4. an images container (DIV)
    5. a DIV to hold our “radio” buttons (DIV)
  • In the **Card.js**
    6. a “card” which we’ll use to hold the image (DIV)
    7. the actual image (IMG)

Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.

This is Phase Two of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

Browse our Teachable courses.

Image for post
Image for post

We have 4 large tasks on-hand.

  1. TOUCH navigation.
  2. BUTTON navigation.
  3. WHEEL navigation.
  4. Snap-back functionality.
for (let i = 0; i < this.images.children.length; i++) {
this.updated_position = this.last_positions[i] + difference;
this.images.children[i].style.left = `${this.updated_position}px`;
this.last_positions[i] = this.updated_position;
}

What it says is this:
Take the current position of all of the images — where are they on the X-axis?; add some difference which will move them to a new position.

We have a last_positions array to keep track of where our images are on screen.

Let’s code up the TOUCH navigation.

We’re concerned with three touch event listeners.

  1. touchstart’ — When the user first…

The final Phase of our Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Six of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Image for post
Image for post

Like any Chrome Extension, we need to inject the foreground page into the User’s browser.

We, of course, inject from our Background.js script.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === ‘complete’ && tab.url.includes(‘http’)) {
active_tabId = tabId;
chrome.tabs.executeScript(tabId, { file: ‘./inject_script.js’ }, function () {
chrome.tabs.executeScript(tabId, { file: ‘./foreground.bundle.js’ }, function () {
console.log(“INJECTED AND EXECUTED”);
});
});
}
});
chrome.tabs.onActivated.addListener(activeInfo => {
chrome.tabs.get(activeInfo.tabId, function (tab) {
if (tab.url.includes(‘http’)) active_tabId = activeInfo.tabId;
});
});

Staying in our Background.js file, we’ll create those two functions…


Fully responsive; Mobile & Desktop; Button, Wheel, & Touch navigation.

This is Phase Two of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

Browse our Teachable courses.

Image for post
Image for post

We have 4 large tasks on-hand.

  1. TOUCH navigation.
  2. BUTTON navigation.
  3. WHEEL navigation.
  4. Snap-back functionality.
for (let i = 0; i < images.children.length; i++) {
updated_position = last_positions[i] + difference;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
}

What it says is this:
Take the current position of all of the images — where are they on the X-axis?; add some difference which will move them to a new position.

We have a last_positions array to keep track of where our images are on screen.

Let’s code up the TOUCH navigation.

We’re concerned with three touch event listeners.

  1. touchstart’ — When the user first…

An Object Is A

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store