I’ve been freelancing web development for roughly 2.5 years now. Building sites big and small, from scratch with code and on website builders such as Shopify and SquareSpace. This is what I’ve learned so far.

1. Figure out if this is a project you would want to work on.

Learn about the project. Do you like the idea of it? Are you going to enjoy building it? Ask yourself these questions. This is important to remain motivated throughout the project and ensure that the best work be done on it. …


The classic Web Developer Interview Question: Valentine’s Day Edition

Prompt

Create a Valentine’s Day card with a random cat picture and 5 random words. One caveat: Only render the content if both APIs successfully return data.

Random Cat Picture API
Endpoint: https://api.thecatapi.com/v1/images/search
Docs: https://docs.thecatapi.com/

Random Words Generator API
Endpoint: https://random-word-api.herokuapp.com/
Docs: https://random-word-api.herokuapp.com/home

The Base HTML:

<div id="card">
<div id="image-wrapper"></div>
<div id="text-wrapper"></div>
</div>

Before you scroll down and see my solution, I suggest you give it a try!

Solution 1. Using Fetch

Since we only want to render the content if BOTH APIs return data, I decided to chain both GET requests one after the other, because if the first promise (fetching from the cat API) gets rejected…


Take the example of having multiple cards, that all contain the same “X” close button present on the top right corner.

Here’s what the HTML looks like without using a custom element:

There is a saying — a PRINCIPLE — that goes along the lines of keeping yourself dry. What is dry, you might ask? Don’t Repeat Yourself. If there’s a way to remove duplication, do it! Your code will be shorter and look much cleaner!

And now, to present the same layout, using a custom element <close-btn>:

Isn’t that way nicer to look at? 😆

In…


Parallax Footer

The parallax effect reveals sections as if they were viewed from different positions. For this article, I will be focusing on the parallax effect on different instances of footers:

  1. Footers with fixed heights
  2. Footers that change in height due to content
  3. Footers that are taller than the device itself on certain breakpoints

You can check out this demo here and Github repo here.

1. Your footer has a fixed height on all devices


First to introduce the components, we have:

  • The sticky header <header>
  • The hero section <div class="hero"> (the top fold).
  • And the details section <div class="details"> (the mid fold).

Desired result:

We want to make the button in the header appear with a fade-in effect as soon as the user scrolls past the top fold. (Please note that I’ve only added the crucial parts to the fade-in effect and left out all other code).

HTML:

<header>
<a href="#" class="logo><img src="logo.svg"></a>
<a href="#" class="button">Get started</a>
</header>
<div class="hero">
.
.
</div>
<div class="details">
.
.
</div>

Javascript:

window.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', handleScroll)
})
function handleScroll() {…


Brooklyn Tech Week Urban Blockchain Hackathon sponsored by DAOStack and Consensys at the Bushwick Generator

Our prototype of the Bushwick Generator Digital Commune

As a brief introduction, I recently graduated from Flatiron Access Labs (a 15-week immersive Web Development Bootcamp). While I was attending, Anthony Albertorio, a developer at Consensys, invited me to participate in a blockchain hackathon (as always, thanks Anthony!!).

The purpose of the hackathon was to come up with an idea of a DAO that could be implemented in the Bushwick Generator, an emerging, decentralized, blockchain innovation space.

What is a DAO?

A Decentralized Autonomous Organization that encompasses a decentralized and self governed infrastructure. It utilizes smart contracts to…


ALGEBRA. PHYSICS. HTML. JAVASCRIPT — ALL COMBINED TO CREATE COOL SHIT.

Lines

y = mx + b

If you were to ask someone what equation this line makes, they would probably say y=-x.

We’re all used to a little something like this —


JavaScript modal feature

I really wanted to make this website easy flowing by having all the content on the same site, without the user being navigated to a whole new page. My solution was to have a modal appear right on top of the main webpage. For this example, I have put modals for the About, Contact, and Dine In buttons.


Final product

To start any website, you need to create an HTML “skeleton”. HTML is the code that holds the content for the website, whereas CSS is the “styling” of each HTML element.

It helps to have an idea of what content your website will have and how you want to present it. Using the above image as the mock, you can see that there are three sections: the navigation bar on top, the background image and main content in the middle, and the footer on the bottom.

Gina Lee

I’m a Web Dev/Artist

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