Dynamically Load Markdown Files for markdown-to-jsx — I was fussing about how to display copy in one of my React components. Instead of dealing with HTML divs, paragraphs, images, **tables**, etc. I found a way to just import the .md (markdown) files I already have. This process involves: markdown-to-jsx light knowledge of React state management & life-cycles; we’ll use hooks here light knowledge of the JavaScript Fetch API (very light knowledge, don’t worry)

Mix and match your copy-write components. Writing, image galleries, and video. Browse our Teachable courses. We’ll build this webpage out of 6 components. 1. BlogPage.js — the main container for our posts 2. Post.js — a single blog post 3. WriteUp.js — a place to show your copy-write 4. Gallery.js — an image gallery 5. PrimaryAsset.js — a place to show a…

We include a custom auto-play slideshow and custom navigation bar. We’ll build this webpage in 5 main sections. 1. Section 1 — our product logo and an image gallery 2. Section 2 — information about our product 3. Section 3 — accolades about our product 4. Section 4 — opportunities to buy our product 5. Section 5 —…

Save the sites you browse in a Pinterest board. This write-up assumes you know how to create a JavaScript Pinterest Clone from scratch. If you don’t know how, watch the tutorial here. For this tutorial, we are simply upgrading the functionality of our JavaScript Pinterest Clone and integrating it into…

A basic component for your React arsenal — Let’s get the skeleton for our component written up. We’ll be using ‘react-router-dom’ and font awesome for this project. <div className=”nav_bar”> <div className=”icon_container menu_switch”> </div> <div className={`nav_container`}> <div className=”icon_container logo”> </div> <ul className=”menu_items”> </ul> </div> </div> We have a place for our open/close menu button, a logo, and the menu…

A beginner website made better with Slideshows and Navigation Bars — We’ll build this webpage in 3 main parts: 1. Top — the greeting for our customer 2. Middle — a place for information about our business’ mission 3. Bottom — a footer for information about our business We’ll create a Home.js component for our main page. The Top All we’re going to do here is set an image for our…

React Parallax Website Design — We’ll build this webpage in 3 parts: 1. Top — the greeting for our customer 2. Middle — a place for information about our business’ mission 3. Bottom — a sign-up option and footer for information about our business The Top. All we’re going to do here is set a bunch of images in place and write a greeting. <div className=”section1" > <img src=”./images/space.png” alt=”” className=”space-background”/>

Copy some text, search for that text. Simple. — This tutorial uses a boilerplate Google Chrome Extension setup. If you want to know how to get that setup, check out our write-up here: How Does A Chrome Extension Work? (Web Development) There are 5 parts to a Chrome extension:anobjectisa.medium.com The Rundown We’ll have a simple HTML page that allows our user to pick a search engine; this page will be the popup in our Chrome Extension.

Add parallax elements to your next web design. Browse our Teachable courses. The general solution we’re working with is this: We are going to create an HOC (Higher Order Component). It’s a function that’s going to take a JSX Element. ex. higherOrderFunction(<div></div>) It’s then going to return a JSX Component. ex. ParallaxComponent We’ll then render it to our page like this: <ParallaxComponent…