Get started with a Pinterest clone. No external libraries needed.
Browse our Teachable courses.
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
Each Pin is made up of 3 sections.
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.
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
It’s a very simple component.
function PinterestLayout() {
return (
<div style={styles.pin_container}>
</div>
)
}The container is what powers our entire layout.
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.
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
Each Pin is made up of 3 sections.
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.
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.
Let’s get our HTML and CSS written.
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.
Let’s start by declaring some CSS variables.
In our CSS…
: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.
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’re going to build a ReactJS image slider that has an auto-play function as well as manual navigation buttons.
We won’t be using any external libraries; all native JSX, CSS, JavaScript.
Browse our Teachable courses.
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.
Phase one can be found here.
Browse our Teachable courses.
We have 4 large tasks on-hand.
- TOUCH navigation.
- BUTTON navigation.
- WHEEL navigation.
- Snap-back functionality.
The basis for ALL navigation is this piece of code here:
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.
- ’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.
Expert Web Developer?
Understand how ReactJS-Chrome Extensions work:
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;
});
});
Now that we’ve done that, let create GET and SET state functions for our entire App.
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.
Phase One can be found here.
Browse our Teachable courses.
We have 4 large tasks on-hand.
- TOUCH navigation.
- BUTTON navigation.
- WHEEL navigation.
- Snap-back functionality.
The basis for ALL navigation is this piece of code here:
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.
- ’touchstart’ — When the user first…
An Object Is A
Learning to code…
