Build a Custom E-Commerce Website wit Next.js Commerce

Next.js Commerce developer starter kit allows you to build fully customizable and scalable e-commerce sites with augmented app integrations. Next.js Commerce framework empowers developers to build a seamless e-commerce experience with a BigCommerce backend.

Next.js is a popular open-source web framework that allows you to build both SSR and static web applications with React. Created by Vercel, this production-ready framework is used by engineering teams the world over due to its scalability and ease of use.

Now the framework also offers Next.js Commerce, a developer starter kit for building high-performance, visually appealing, fully customizable e-commerce sites. These sites can then be augmented with various app integrations like shopping carts and analytics tools to provide a complete online shopping experience for customers and shop owners alike.

Next.js Commerce ships with BigCommerce out of the box, with plans to provide support for more popular e-commerce backends in the future.

Notable features

Internationalization

Since v10.0.0, Next.js has provided built-in support for internationalized routing. All you need to do is feed in a list of locales, the default locale, and domain-specific locales, and Next.js will set you up with automatic router handling.

Analytics

It is critical for any e-commerce business to monitor their application performance and how their users — and potential customers — are using it.

Some questions you might want answered are:

  • How fast does my app load?
  • Is it responsive, and does it offer a consistently satisfying experience across platforms?
  • Is there adequate visual stability?

These key metrics were established by Google in conjunction with the Web Performance Working Group.

Vercel Analytics collects these metrics and calculates a Real Experience Score, which offers a strong indication of your application’s overall health and performance. By augmenting your e-commerce site with powerful analytics, you can be alerted to any irregularities in your application vitals, helping you ensure your visitors enjoy a fast, seamless, and interruption-free experience.

Vercel Analytics Real Experience Score

Image optimization

Next.js also provides a built-in Image Component as well as Automatic Image Optimization as of v10.0.0.

The next/image component extends the HTML <img> element, while Automatic Image Optimization supports serving images in modern file formats like WebP. It also provides automatic resizing, readjusting very large images to appropriately fit smaller displays.

The feature works with any image, including those that are hosted by external data sources such as a CMS. Images are lazy-loaded by default, allowing rendering speeds to remain unaffected.

Hybrid applications

You can take advantage of both server-side rendering and static site generation within a single project.

Fast refresh

This feature enables you to have near-instant feedback on changes made to your React components without losing component state. With Fast Refresh enabled — the default since Next.js 9.4 — most changes should reflect within a second.

No configuration necessary

Equipped with automatic compilation and bundling, Next.js aims to be a production-ready framework, ready to scale from the start.

Other features include TypeScript support, built-in CSS support, code splitting and bundling, easy file-system routing, and API endpoint creation.

Getting started with Next.js Commerce

Prerequisites

Before getting started, make sure you have Next.js installed. If you don’t have it installed, you can do so by running:

npm i next

Keep in mind that you’ll need Node.js 10.13 or later to install Next.js.

Clone and deploy a demo application

In order to dip our toes into Next.js, we’ll clone and deploy a demo application. We’ll also customize the default shop logo with one of our own.

By the end of this tutorial, you should have an application up and running on Vercel with your very own store logo, and you can begin to modify the components on your own to customize the site as you like.

First, go to the Next.js Commerce homepage and click on Clone and Deploy. You’ll see a page that looks like this:

Next.js Commerce Clone Deploy

Log in with your GitHub, GitLab, or Bitbucket account. Alternatively, you can create a Vercel account with your email address. Once you’ve signed in, you’ll be directed to this page:

 

Next.JS Commerce Account

Input your project name and hit Continue.

You will then be asked to install BigCommerce’s third-party service, as Next.js Commerce currently supports a BigCommerce backend (although it plans on extending support to all major e-commerce backends in the near future).

Install Next.JS Integrations

Click Install. You should see the following:

Install BigCommerce to Vercel

If you have an existing BigCommerce Store, hit Log In and fill out your credentials. If not, follow the steps presented to sign up for an account.

Once you’ve signed up and/or logged in, you’ll see a blue checkmark next to the required BigCommerce integration.

BigCommerce Install Complete

Click on Continue. Now you’ll have a chance to create a Git repository as follows. Input your repository name and click on Continue.

Create Git Repository with Integrations

You’ll be directed to the following screen:

Create Git Repository Import Project

Leave the default settings as they are and click on Deploy — and now we wait! Deployment should take less than five minutes.

Next.js Import Project Deployment

N.B., if your screen gets stuck on “Completing Deployment…” for longer than that, simply go to your developer dashboard on vercel.com and see if the deployment is complete with a ready-to-visit URL.

Once your project is deployed, click on your project on the Vercel dashboard:

Vercel Dashboard After Deployment

When you click on your project, you’ll be able to view a project overview page:

Product Deployment Page Project Overview

Here, you can view your build logs as well as domains associated with your application. For now, we’ll simply click on Visit to see our app live and ready to view.

And there, your e-commerce store is live and ready to customize!

Demo E-commerce Site Live App

Now, let’s go ahead and make a quick tweak: we’ll change the default store logo to one of our own. For this example, we’ll be using a clothing icon.

Open up the repository in your favorite IDE, and open up components > ui > Logo. Here’s what the Logo component originally looks like:

Original Logo Component

  • Let’s replace the Logo component with the image of our choosing:
const Logo = ({ className = '', ...props }) => <img src={"[<https://icon-library.com/images/icon-clothing/icon-clothing-4.jpg>](<https://icon-library.com/images/icon-clothing/icon-clothing-4.jpg>)"} width="40" height="40" alt="Logo" /> 

16. Push the changes to Git. As soon as you push, Vercel will begin re-deploying your application:
Vercel Deployment with Git Changes

And voilà! The app is up and live, customized with our very own logo.

Conclusion

In a similar vein, you can go ahead and customize the many ready-to-use e-commerce-specific components available with the Next.js Commerce template, including a variety of cart, wish list, and product page components, among others.

Paired with Vercel’s easy-to-use deployment platform, the Next.js Commerce framework empowers developers to build a seamless e-commerce experience with a BigCommerce backend, and it will soon be able to support many other major e-commerce backends — including Shopify, Swell, Saleor, and more.

Original article source at https://blog.logrocket.com

#nextjs #webdev 

Build a Custom E-Commerce Website wit Next.js Commerce
Samuel Tucker

Samuel Tucker

1664172350

How to Build a FrontEnd App with React.js

In this tutorial, you'll learn how to create a front-end application with ReactJS, MaterialUI, Routing, Forms Handling and API Requests

Tools we have used:

  • npm: npm is the default package manager for the JavaScript runtime environment Node.js.
  • ReactJS: React is a free and open-source front-end JavaScript library for building user interfaces or UI components
  • MaterialUI: MUI provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster.
  • React Router DOM: React Router DOM enables you to implement dynamic routing in a web app. Unlike the traditional routing architecture in which the routing is handled in a configuration outside of a running app, React Router DOM facilitates component-based routing according to the needs of the app and platform

Concept covered:

  •    ReactJS Components
  •    ReactJS Hooks
  •    ReactJS Routing
  •    MaterialUI Forms
  •    API Requests to Backend
  •    Fetch from URL and Convert response to JSON

And with that concepts, you will be learning so many things and you can create your own big project with React and add it to your portfolio.

You will learn

  •    How to Build React Application
  •    How to Implement Routing Functionalities
  •    How to Build Single Page Application with ReactJS
  •    How to build Stateful Project in React
  •    How to use Hooks in React
  •    How to handle Forms in React
  •    How to make API calls in React
  •    How to communicate with data in React
  •    And A Lot More...

Requirements

  •    Basic ReactJS Knowledge is Required
  •    Basic HTML, CSS, JavaScript (ES6) is Required

Who this course is for:

  •    Who knows ReactJS and wants to build a Project with ReactJS
  •    Practical Person who wants to practice React Projects

#react #javascript #webdev 

How to Build a FrontEnd App with React.js
Jade Bird

Jade Bird

1663919385

Create SubMenu in Drop Down with HTML and CSS

In this tutorial, you'll learn how to create a side menu bar with a sub-menu in drop down with HTML and CSS. 

A drop-down menu is a horizontal list of menu options that each contain a vertical menu. When you hover or click one of the primary options in a drop-down menu, a list of choices will “drop down” below the main menu. The most common type of drop-down menu is a menu bar or Navigation Menu bar.

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Sidebar Menu with sub-menu | codequs </title>
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="btn">
         <span class="fas fa-bars"></span>
      </div>
      <nav class="sidebar">
         <div class="text">
            Side Menu
         </div>
         <ul>
            <li class="active"><a href="#">Dashboard</a></li>
            <li>
               <a href="#" class="feat-btn">Features
               <span class="fas fa-caret-down first"></span>
               </a>
               <ul class="feat-show">
                  <li><a href="#">Pages</a></li>
                  <li><a href="#">Elements</a></li>
               </ul>
            </li>
            <li>
               <a href="#" class="serv-btn">Services
               <span class="fas fa-caret-down second"></span>
               </a>
               <ul class="serv-show">
                  <li><a href="#">App Design</a></li>
                  <li><a href="#">Web Design</a></li>
               </ul>
            </li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Overview</a></li>
            <li><a href="#">Shortcuts</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </nav>
      <div class="content">
         <div class="header">
            Sidebar Menu with sub-menu
         </div>
         <p>
            HTML CSS & Javascript (Full Tutorial)
         </p>
      </div>
      <script>
         $('.btn').click(function(){
           $(this).toggleClass("click");
           $('.sidebar').toggleClass("show");
         });
           $('.feat-btn').click(function(){
             $('nav ul .feat-show').toggleClass("show");
             $('nav ul .first').toggleClass("rotate");
           });
           $('.serv-btn').click(function(){
             $('nav ul .serv-show').toggleClass("show1");
             $('nav ul .second').toggleClass("rotate");
           });
           $('nav ul li').click(function(){
             $(this).addClass("active").siblings().removeClass("active");
           });
      </script>
   </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.btn{
  position: absolute;
  top: 15px;
  left: 45px;
  height: 45px;
  width: 45px;
  text-align: center;
  background: #1b1b1b;
  border-radius: 3px;
  cursor: pointer;
  transition: left 0.4s ease;
}
.btn.click{
  left: 260px;
}
.btn span{
  color: white;
  font-size: 28px;
  line-height: 45px;
}
.btn.click span:before{
  content: '\f00d';
}
.sidebar{
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  background: #1b1b1b;
  transition: left 0.4s ease;
}
.sidebar.show{
  left: 0px;
}
.sidebar .text{
  color: white;
  font-size: 25px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  background: #1e1e1e;
  letter-spacing: 1px;
}
nav ul{
  background: #1b1b1b;
  height: 100%;
  width: 100%;
  list-style: none;
}
nav ul li{
  line-height: 60px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
nav ul li:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a{
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding-left: 40px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}
nav ul li.active a{
  color: cyan;
  background: #1e1e1e;
  border-left-color: cyan;
}
nav ul li a:hover{
  background: #1e1e1e;
}
nav ul ul{
  position: static;
  display: none;
}
nav ul .feat-show.show{
  display: block;
}
nav ul .serv-show.show1{
  display: block;
}
nav ul ul li{
  line-height: 42px;
  border-top: none;
}
nav ul ul li a{
  font-size: 17px;
  color: #e6e6e6;
  padding-left: 80px;
}
nav ul li.active ul li a{
  color: #e6e6e6;
  background: #1b1b1b;
  border-left-color: transparent;
}
nav ul ul li a:hover{
  color: cyan!important;
  background: #1e1e1e!important;
}
nav ul li a span{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}
nav ul li a span.rotate{
  transform: translateY(-50%) rotate(-180deg);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #202020;
  z-index: -1;
  text-align: center;
}
.content .header{
  font-size: 45px;
  font-weight: 600;
}
.content p{
  font-size: 30px;
  font-weight: 500;
}

Related Videos

Sidebar Menu | With Sub-Menus - Using HTML, CSS & JQuery

Sidebar Menu With Sub-Menu Dashboard Template UI - Side Navigation Bar - Using CSS, HTML & jQuery

Responsive Sidebar Menu With SubMenu Using HTML CSS And JavaScript

#html #css #webdev

Create SubMenu in Drop Down with HTML and CSS
Alfie Mellor

Alfie Mellor

1663918002

Box Shadow Generator with HTML, CSS and JavaScript

In this tutorial, you'll learn how to create a box shadow generator with HTML, CSS and JavaScript. The box-shadow generator enables you to add one or more box shadows to an element. 

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Shadow Generator</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="result">
        <div id="element"></div>
      </div>
      <div class="sliders">
        <div class="slider-wrapper">
          <label for="h-shadow">Horizontal Shadow:</label>
          <input type="range" id="h-shadow" max="100" min="-100" value="0" />
        </div>
        <div class="slider-wrapper">
          <label for="v-shadow">Vertical Shadow:</label>
          <input type="range" id="v-shadow" max="100" min="-100" value="0" />
        </div>
        <div class="slider-wrapper">
          <label for="blur-radius">Blur Radius:</label>
          <input type="range" id="blur-radius" max="100" min="0" value="0" />
        </div>
        <div class="slider-wrapper">
          <label for="spread-radius">Spread Radius:</label>
          <input type="range" id="spread-radius" max="50" min="-50" value="0" />
        </div>
        <div class="slider-wrapper">
          <label for="shadow-color">Shadow Color:</label>
          <input type="color" id="shadow-color" />
        </div>
        <div class="slider-wrapper">
          <label for="shadow-color-opacity">Shadow Color Opacity:</label>
          <input
            type="range"
            id="shadow-color-opacity"
            max="1"
            min="0"
            step="0.1"
            value="1"
          />
        </div>
        <div class="input-wrapper">
          <label for="shadow-inset">Inset Shadow:</label>
          <input type="checkbox" id="shadow-inset" />
        </div>
      </div>
      <div class="code-wrapper">
        <textarea rows="2" id="code"></textarea>
        <button onclick="copyCode()">Copy</button>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #0075ff;
}
.container {
  background-color: #ffffff;
  padding: 30px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 80vmin;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(2, 42, 83, 0.2);
}
.result {
  padding: 150px 0;
}
#element {
  height: 50px;
  width: 50px;
  position: relative;
  background-color: #0075ff;
  margin: auto;
}
.sliders {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 20px 15px;
}
.slider-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
input[type="range"] {
  width: 100%;
}
.code-wrapper {
  display: grid;
  grid-template-columns: 10fr 2fr;
  gap: 5px;
  margin-top: 20px;
}
textarea {
  resize: none;
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
}
.code-wrapper button {
  background-color: #0075ff;
  border-radius: 5px;
  border: none;
  color: #ffffff;
}

Javascript:

let elem = document.getElementById("element");
let code = document.getElementById("code");
let inputs = document.querySelectorAll(".sliders input");

inputs.forEach((inp) => inp.addEventListener("input", generateShadow));

function generateShadow() {
  let hShadow = document.getElementById("h-shadow").value;
  let vShadow = document.getElementById("v-shadow").value;
  let blurRadius = document.getElementById("blur-radius").value;
  let spreadRadius = document.getElementById("spread-radius").value;
  let shadowColor = document.getElementById("shadow-color").value;
  let shadowColorOpacity = document.getElementById(
    "shadow-color-opacity"
  ).value;
  let shadowInset = document.getElementById("shadow-inset").checked;

  //Using ternary operator to check if inset checkbox is checked or not.
  //If checked we add the inset prefix
  //Else no inset prefix is added
  let boxShadow = shadowInset
    ? `inset ${hShadow}px ${vShadow}px ${blurRadius}px ${spreadRadius}px ${hexToRgba(
        shadowColor,
        shadowColorOpacity
      )}`
    : `${hShadow}px ${vShadow}px ${blurRadius}px ${spreadRadius}px ${hexToRgba(
        shadowColor,
        shadowColorOpacity
      )}`;
  elem.style.boxShadow = boxShadow;
  code.textContent = `box-shadow: ${boxShadow};`;
}

//Converting Hex value to rgba
function hexToRgba(shadowColor, shadowColorOpacity) {
  let r = parseInt(shadowColor.substr(1, 2), 16);
  let g = parseInt(shadowColor.substr(3, 2), 16);
  let b = parseInt(shadowColor.substr(5, 2), 16);
  return `rgba(${r},${g},${b},${shadowColorOpacity})`;
}

//Copy the generated code to clipboard
function copyCode() {
  code.select();
  document.execCommand("copy");
  alert("Code Copied To Clipboard");
}

//Call the generateShadow function on every page load
window.onload = generateShadow();

#html #css #javascript #webdev 

Box Shadow Generator with HTML, CSS and JavaScript
Garry Taylor

Garry Taylor

1663912783

How to Build a Web Application with Svelte and Firebase

In this tutorial, you'll learn how to build a web application with SvelteJS & Firebase. Learn how to handle Svelte and Firebase by coding a Pokedex

You'll learn:

  • SvelteJS basics with no knowledge
  • Advanced techniques & core concepts of Svelte
  • Firebase setup from scratch
  • Firebase Auth with Google, store/get data with Firestore & Database
  • Routing, route guards & redirect with Routify
  • Webdesign with Tailwindcss

What is Svelte?

Just like React and Vue, Svelte is a JavaScript framework offering a productive approach for making frontend interfaces easy to build. The biggest technical advantage of Svelte is high performance, browser-friendly JavaScript with small bundle sizes.

Why to use Svelte.js?

If you are looking for an efficient Javascript framework with a nice learning curve to build front-end applications, you'll love to play with Svelte. This framework provides a fluid & light approach of coding that open new horizons for beginners and seniors developers.

Svelte/Firebase, a good mix?

As you may already know, Firebase offers you the opportunity to create an app serverless. It means that you don't need to code any back-end at all. Moreover, this is for free! How amazing is that? Combined with Svelte makes this course even more interesting for those who want to create a front-end app.

What is our program?

In this course, I'll teach you how to handle Svelte and Firebase by coding a Pokedex! Why? Because it provides to us an already-made database (I'll provide you a JSON to use during the course) that we'll inject inside our Front-End application directly from Firebase.

Concerning Svelte, you'll learn:

  •    Svelte mechanic, logic & lifecycles,
  •    Adding data,
  •    Dynamic attributes,
  •    Conditions, key, DOM events...
  •    Styling,
  •    Nested components,
  •    Components & views relationships,
  •    Assignments, declarations, statements,
  •    Updating values,
  •    Declaring props,
  •    Manage stores...

But not only. I'll use my senior skills to show you how to architecture a Front-End application properly. In details, this is our roadmap:

  •    Svelte install & configuration,
  •    Routing with Routify,
  •    Firebase project configuration,
  •    FireAuth, FireStore & FireDatabase initialization,
  •    Authentication, routes guards & sessions,
  •    JavaScript modules & Front-End architecture,
  •    API interface design,
  •    Views & components logic in Svelte,
  •    CSS Design with Tailwindcss,
  •    Autocomplete for pokemons,
  •    Listing pokemons,
  •    Store favorites pokemons...

This is a complete program and all of this in less than 2 hours.

Svelte is a radical new approach to building user interfaces [...] As we all know the popularity of Svelte is at the moment way lower than other JS frameworks/libraries like React.js or Vue.js, but that is no reason for Svelte to lose the game.

Svelte. What is your opinion about the lightweight JS framework? by Dennis Frijlink

Requirements

  •    Javascript basics

Who this course is for:

  •    Developers

#svelte #firebase #webdev #javascript 

How to Build a Web Application with Svelte and Firebase

How to Create Fast 3D Hover Effects with VueUse

In this video, we will learn how to create fast 3D hover effects with VueUse

VueUse is a collection of utility functions based on Composition API, working for Vue 2 and 3. It's inspired by react-use. This package aims to provide a fast and clean way to use the Vue Composition API.

Subscribe: https://www.youtube.com/c/LearnVue/featured 

 

 

Source Code 

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMouseInElement } from '@vueuse/core'
const target = ref(null)
const { elementX, elementY, isOutside, elementHeight, elementWidth } =
  useMouseInElement(target)
const cardTransform = computed(() => {
  const MAX_ROTATION = 6
  const rX = (
    MAX_ROTATION / 2 -
    (elementY.value / elementHeight.value) * MAX_ROTATION
  ).toFixed(2) // handles x-axis
  const rY = (
    (elementX.value / elementWidth.value) * MAX_ROTATION -
    MAX_ROTATION / 2
  ).toFixed(2) // handles y-axis
  return isOutside.value
    ? ''
    : `perspective(${elementWidth.value}px) rotateX(${rX}deg) rotateY(${rY}deg)`
})
</script>
<template>
  <div
    class="w-full p-8 rounded shadow-2xl bg-charcoal-600 card"
    ref="target"
    :style="{
      transform: cardTransform,
      transition: 'transform 0.25s ease-out'
    }"
  >
    <h1 class="mb-2 text-2xl font-bold">B.S. Meeting Notes 🥴</h1>
    <section class="flex items-center">
      <img
        src="https://learnvue.co/img/matt-maribojoc.png"
        class="w-8 h-8 mr-4 rounded"
      />
      <h2 class="font-2xl">@mattmaribojoc</h2>
    </section>
    <p class="mt-4">
      Organic growth beef up, and shotgun approach note for the previous submit:
      Can you ballpark the cost per unit for me. Conversational content reach
      out, what's the status on the deliverables for eow?
    </p>
  </div>
</template>

<style scoped>
/* .card {
  transform: v-bind(cardTransform);
  transition: transform 0.25s ease-out;
} */
</style>

#vuejs #vue #javascript #webdev

How to Create Fast 3D Hover Effects with VueUse
Jacob Banks

Jacob Banks

1663900030

Building a Website with Gatsby.js

Learning the fundamentals of Gatsby so that you can build your own blazing fast blog website with Gatsby

You'll learn:

  • How to building blazing fast website using Gatsby
  • How to add styles using tailwindcss
  • How to build and use reuseable components like Layout
  • How to use markdown files to generate data for blog
  • How to deploy Gatsby website to Netlify

In this course, you will be learning the fundamentals of Gatsby so that you can build your own blazing fast blog website with Gatsby
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps


We will start with an introduction to Gatsby, then set up the development environment so that you can follow along.
After getting familiar with the file structure of the project we will cover the fundamentals like adding styles to the page. How to add data in Gatsby using GraphQL and then with the knowledge we gain. We will build our own travel blog website.

At last, we deploy our blazing-fast website online with the help of Netlify

Requirements

  •    Working knowledge of React

Who this course is for:

  •    Beginner React developers want to create blazing fast PWA, SEO optimized, static websites with Gatsby
  •    Web developers curious to build blazing fast websites

#gatsby #react #webdev #javascript

Building a Website with Gatsby.js
Sefali Warner

Sefali Warner

1663854067

Most used front-end languages and frameworks.

In this blog, we take a look at the most popular front-end web development frameworks and languages. We explore what each one is used for and some of their pros and cons. By the end of this video, you'll have a good idea of which framework or language might be best for you to learn.

 

#FrontEnd #frameworks #webdev #programming #language 

Most used front-end languages and frameworks.
Daisy Rees

Daisy Rees

1663832952

How to Create a Scroll Down Button with HTML and CSS

Learn how to create a scroll down button with HTML and CSS. Make scroll down button with amazing animation effect using HTML and CSS. Scroll Down Button with HTML & CSS Tutorial

The scroll down button consists of an animation that indicates the user to scroll down to a new section. Clicking on the button takes the user to the next section of the page. This is not limited only to the section. This button can be used to scroll to any section of the page.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll Down Button</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section id="section-1">
      <a id="scroll-btn" href="#section-2"></a>
    </section>
    <section id="section-2">
      <h1>HELLO THERE</h1>
      <h2>WELCOME TO CODING ARTIST</h2>
    </section>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html {
  scroll-behavior: smooth;
}
section {
  height: 100vh;
  position: relative;
}
#section-1 {
  background-color: #2d8df8;
}
a#scroll-btn {
  position: absolute;
  height: 10em;
  width: 6.25em;
  border: 0.5em solid #ffffff;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 6.25em;
  border-radius: 3em;
}
a#scroll-btn:before {
  position: absolute;
  content: "";
  margin: auto;
  left: 0;
  right: 0;
  top: 1.2em;
  height: 1.2em;
  width: 1.2em;
  background-color: #ffffff;
  border-radius: 50%;
  animation: move-down 2s infinite;
}
@keyframes move-down {
  80% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(5.3em);
    opacity: 0;
  }
}
a#scroll-btn:after {
  position: absolute;
  content: "SCROLL DOWN";
  width: 12em;
  display: block;
  width: 12em;
  text-align: center;
  left: -4.2em;
  bottom: -2.5em;
  font-size: 1.6em;
  color: #ffffff;
  letter-spacing: 3px;
  font-weight: 600;
}
#section-2 {
  background-color: #111315;
  color: #ffffff;
  font-size: 2.7em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
@media screen and (max-width: 500px) {
  a#scroll-btn {
    font-size: 12px;
  }
}

 


Related Videos

CSS Scroll Down Animated Button | Scroll More Button

Create a "Scroll To Top" Button with HTML, CSS & JavaScript | Web Design Tutorial For Beginners

#html #css #webdev

How to Create a Scroll Down Button with HTML and CSS
Alfie Mellor

Alfie Mellor

1663751453

Login Form with Password Show or Hide Button using HTML & CSS

In this tutorial, you'll learn how to create a login form with password show or hide button using HTML & CSS. Create a Login Form with a password show or hide a button in HTML & CSS

HTML:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Login Form</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
   </head>
   <body>
      <div class="center">
         <div class="header">
            Login Form
         </div>
         <form>
            <input type="text" placeholder="Email or Username">
            <i class="far fa-envelope"></i>
            <input id="pswrd" type="password" placeholder="Password">
            <i class="fas fa-lock" onclick="show()"></i>
            <input type="submit" value="Sign in">
            <a href="#">Forgot Password?</a>
         </form>
      </div>
      <script>
         function show(){
          var pswrd = document.getElementById('pswrd');
          var icon = document.querySelector('.fas');
          if (pswrd.type === "password") {
           pswrd.type = "text";
           pswrd.style.marginTop = "20px";
           icon.style.color = "#7f2092";
          }else{
           pswrd.type = "password";
           icon.style.color = "grey";
          }
         }
      </script>
   </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
 margin: 0;
 padding: 0;
 background: radial-gradient(#a429bc,#9225a7,#7f2092);
 height: 100vh;
 overflow: hidden;
 font-family: 'Noto Sans TC', sans-serif;
}
.center{
 width: 430px;
 margin: 130px auto;
 position: relative;
}
.center .header{
 font-size: 28px;
 font-weight: bold;
 color: white;
 padding: 25px 0 30px 25px;
 background: #5c1769;
 border-bottom: 1px solid #370e3f;
 border-radius: 5px 5px 0 0;
}
.center form{
 position: absolute;
 background: white;
 width: 100%;
 padding: 50px 10px 0 30px;
 box-sizing: border-box;
 border: 1px solid #6d1c7d;
 border-radius: 0 0 5px 5px;
}
form input{
 height: 50px;
 width: 90%;
 padding: 0 10px;
 border-radius: 3px;
 border: 1px solid silver;
 font-size: 18px;
 outline: none;
}
form input[type="password"]{
 margin-top: 20px;
}
form i{
 position: absolute;
 font-size: 25px;
 color: grey;
 margin: 15px 0 0 -45px;
}
i.fa-lock{
 margin-top: 35px;
}
form input[type="submit"]{
 margin-top: 40px;
 margin-bottom: 40px;
 width: 130px;
 height: 45px;
 color: white;
 cursor: pointer;
 line-height: 45px;
 border-radius: 45px;
 border-radius: 5px;
 background: #5c1769;
}
form input[type="submit"]:hover{
 background: #491254;
 transition: .5s;
}
form a{
 text-decoration: none;
 font-size: 18px;
 color: #7f2092;
 padding: 0 0 0 20px;
}

How To Make Login Form With Password Toggle In HTML CSS JS

#html #css #webdev

Login Form with Password Show or Hide Button using HTML & CSS
Charles Cooper

Charles Cooper

1663750171

Side Navigation Menu Bar with HTML & CSS

In this tutorial, you’ll learn how to create a Side Navigation Menu Bar with HTML & CSS. Responsive Side Navigation Bar in HTML and CSS

The sidebar can be used to encourage the reader or visitors to read the more detailed main article.

In this Sidebar, there are some menu items and when you click on the specific icon this web page scroll and show you the clicked section. That means when click on the about section the page will scroll down and show you the about section. In the menu items you can see there is a small vertical line on the left corner of items. That line is used to inform that which item is active now.

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Side Menu Bar</title> 
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <ul>
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#gallery">Gallery</a></li>
         <li><a href="#services">Services</a></li>
         <li><a href="#feedback">Feedback</a></li>
         <li><a class="contact" href="#contact">Contact</a></li>
      </ul>
      <section>
         <i class="fas fa-bars"></i>
         <div class="sec1"></div>
         <h2 id="about">
            About Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec2"></div>
         <h2 id="portfolio">
            Portfolio Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec3"></div>
         <h2 id="gallery">
            Gallery Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec4"></div>
         <h2 id="services">
            Services Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec5"></div>
         <h2 id="feedback">
            Feedback Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec6"></div>
         <h2 id="contact">
            Contact Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec7"></div>
      </section>
    <script>
         $(document).ready(function(){
           $('i').click(function(){
             $('ul').toggleClass('ul_show');
             $('section').toggleClass('slide_image');
           });
           $('li').click(function(){
             $(this).addClass('active').siblings().removeClass('active');
           });
         });
         
      </script>
   </body>
</html>

CSS;

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: montserrat;
}
ul{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -240px;
  width: 240px;
  background: #1e1e1e;
  height: 100vh;
  overflow-y: auto;
  transition: all .3s;
}
ul li{
  height: 65px;
  outline: none;
}
ul li a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 70px;
  font-size: 20px;
  color: white;
  padding-left: 10%;
  background: #1e1e1e;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid black;
  border-left: 5px solid transparent;
}
li a.contact{
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.active a{
  color: #B93632;
  border-left: 5px solid #B93632;
  background: #1B1B1B;
}
section{
  margin-left: 0px;
  transition: all .3s;
}
i{
  position: fixed;
  margin: 20px 25px;
  font-size: 40px;
  color: orangered;
  cursor: pointer;
}
.sec1{
  margin-left: -20px;
  background: url(home.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec2{
  margin-left: -20px;
  background: url(about.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec3{
  margin-left: -20px;
  background: url(portfolio.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec4{
  margin-left: -20px;
  background: url(gallery.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec5{
  margin-left: -20px;
  background: url(services.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec6{
  margin-left: -20px;
  background: url(feedback.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec7{
  margin-left: -20px;
  background: url(contact.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
h2{
  font-size: 40px;
  padding: 15px 20px;
}
p{
  padding: 0 20px 10px 20px;
  text-align: justify;
}
.ul_show{
  margin-left: 0px;
}
.slide_image{
  margin-left: 260px;
}

Related Videos

Responsive Side Navigation Bar in HTML and CSS | Dashboard Side Nav Bar with HTML and CSS

Responsive Side Navigation Bar in HTML CSS And JavaScript | Dashboard Sidebar Menu

Responsive HTML & CSS Side Menu From Scratch

Sidebar Menu Dashboard Template UI | Side Navigation Bar - Only Using CSS and HTML

#html #css #webdev 

Side Navigation Menu Bar with HTML & CSS

Responsive Navigation Bar with HTML, CSS & JavaScript

In this tutorial, you'll learn how to create a responsive navigation bar with HTML, CSS and Javascript. Create a quick and easy responsive navbar using HTML, CSS and Javascript.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navigation Bar</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <a href="#home" id="logo">Site Logo</a>
        <i class="fas fa-bars" id="ham-menu"></i>
        <ul id="nav-bar">
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li>
            <a href="#team">Team</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
    <section id="home">
      <h1>Home Section</h1>
    </section>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
*:not(i) {
  font-family: "Poppins", sans-serif;
}
header {
  position: fixed;
  width: 100%;
  background-color: #2c8eec;
  padding: 3rem 5rem;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
nav a {
  font-size: 1.8rem;
  text-decoration: none;
}
nav a#logo {
  color: #000000;
  font-weight: 700;
}
nav ul a {
  color: #ffffff;
  font-weight: 600;
}
nav ul a:hover {
  border-bottom: 2px solid #ffffff;
}
section#home {
  height: 100vh;
  display: grid;
  place-items: center;
}
h1 {
  font-size: 4rem;
}
#ham-menu {
  display: none;
}
nav ul.active {
  left: 0;
}
@media only screen and (max-width: 991px) {
  html {
    font-size: 56.25%;
  }
  header {
    padding: 2.2rem 5rem;
  }
}
@media only screen and (max-width: 767px) {
  html {
    font-size: 50%;
  }
  #ham-menu {
    display: block;
    color: #ffffff;
  }
  nav a#logo,
  #ham-menu {
    font-size: 3.2rem;
  }
  nav ul {
    background-color: black;
    position: fixed;
    left: -100vw;
    top: 73.6px;
    width: 100vw;
    height: calc(100vh - 73.6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: 1s;
    gap: 0;
  }
}
@media only screen and (max-width: 575px) {
  html {
    font-size: 46.87%;
  }
  header {
    padding: 2rem 3rem;
  }
  nav ul {
    top: 65.18px;
    height: calc(100vh - 65.18px);
  }
}

Javascript:

let hamMenuIcon = document.getElementById("ham-menu");
let navBar = document.getElementById("nav-bar");
let navLinks = navBar.querySelectorAll("li");

hamMenuIcon.addEventListener("click", () => {
  navBar.classList.toggle("active");
  hamMenuIcon.classList.toggle("fa-times");
});
navLinks.forEach((navLinks) => {
  navLinks.addEventListener("click", () => {
    navBar.classList.remove("active");
    hamMenuIcon.classList.toggle("fa-times");
  });
});

Related Videos

Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

Responsive Navbar Tutorial

Responsive navbar tutorial using HTML CSS & JS

 

#html #css #javascript #webdev 

Responsive Navigation Bar with HTML, CSS & JavaScript
Zachary Palmer

Zachary Palmer

1663660416

Responsive Website Like LinkedIn with HTML, CSS & JavaScript

Learn how to make a complete responsive website like LinkedIn with HTML, CSS & JavaScript. Make a professional social network website like LinkedIn.

In this tutorial, we will learn how to make a professional social network website like LinkedIn. Here we will make front-end design of social networking website using HTML, CSS and JavaScript. In this tutorial we will create multiple pages like home page and profile page of the website. This website design will be completely responsive for small screen devices.

After watching this complete tutorial you will be able to make any kind of static website or front end website design, because in this video I have included all the important HTML tags and CSS properties.
So I would suggest you to watch this video completely without skipping any part. Also you can use this project in your own portfolio whether you are a student or a working professional.

-------------------------------------
Chapters:

00:00 Course overview
03:32 Code files setup
06:47 Create Navigation bar of website
24:28 Create Left Sidebar of website
44:43 Create Right Sidebar of website
01:00:30 Make new post section
01:11:44 Add list of post on website
01:26:40 Make the sidebars sticky
01:27:50 Create Drop-down menu on the website
01:40:14 Make profile page for the website
02:09:48 Create sidebar on profile page
02:22:15 Make the website responsive

Finally your responsive front-end website has been completed

Download Image:
https://drive.google.com/file/d/16-cATiSCT-PgtLF-IBrLHgWu0oB1BSby/view?usp=sharing

#html #css #javascript #webdev #linkedin 

Responsive Website Like LinkedIn with HTML, CSS & JavaScript
Corey Brooks

Corey Brooks

1663571430

Profile Card Hover Effect with HTML and CSS

Learn how to create a profile card with a cool hover effect using HTML and CSS. Create a profile card with amazing hover effect using HTML and CSS. This profile card comes with a sleek and modern UI. 

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profile Card</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="card">
      <img src="profile-img.jpg" />
      <h5>Market Research Analyst</h5>
      <h3>Stephen Brown</h3>
    </div>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #5ca3ff;
}
.card {
  width: 350px;
  height: 500px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  box-shadow: 0 35px 65px rgba(6, 34, 70, 0.6);
  overflow: hidden;
}
.card img {
  width: 100%;
  transition: 0.5s;
}
h3 {
  background-color: #5ca3ff;
  width: 60%;
  position: absolute;
  bottom: 80px;
  right: -65%;
  padding: 10px 0;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: 600;
  transform: skew(-5deg);
  transition: 0.3s;
}
h5 {
  background-color: #ffffff;
  width: 80%;
  padding: 12px 0;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.5px;
  position: absolute;
  right: -85%;
  bottom: 37px;
  transform: skew(-5deg);
  transition: 0.3s;
}
.card:hover h3,
.card:hover h5 {
  right: -2%;
}
.card:hover img {
  transform: scale(1.15);
  filter: contrast(120%);
}

#html #css #webdev 

Profile Card Hover Effect with HTML and CSS
Joshua Yates

Joshua Yates

1663562595

Build Your Own Navigation Bar from Scratch with React

Learn earn how to build your own react-navigation bar from scratch. Build Your Own Navigation Bar with React.

We’ll go over the basics of building navbars in React. We’ll build a navbar that’s fixed to the top of the page, and the user will be able to switch between webpages like you can on a dashboard, for instance. We’ll then put all our newfound skills into practice by building a live sample app.

Installation

Let’s get right into the code. To create a React app, make sure you have Node.js installed on your computer. If you haven’t built a React app before, you can check to see if you have Node.js installed by typing the following into your terminal:

node -v

If not, just go to the Node.js website to download the latest version.

Once that’s done, we can get started with our React app by running this command:

npx create-react-app nav-bar                                             

Then, we navigate into our project folder on the terminal:

cd nav-bar

Setting up the React Router library

Using the React Router library in our application allows us to navigate between different pages or components in React, and actually makes these changes to the URL of each page or component. In fact, it can also handle more complex functionalities, like passing data between pages through queries and nested routes — but that’s beyond the scope of this article.

For this example, we’ll only need to install the React Router library to help us switch views of the animals in our app when we click on the animal names on the links.

npm install react-router-dom

First, we’ll build the navbar itself. To do that, we’ll create a file named navbar.js in src/components/navbar:

import React from 'react';
import {  Link } from "react-router-dom";
const navbar= () =>{
  return (
  <div>
    <li>
      <Link to="/">Dogs</Link>
    </li>
    <li>
      <Link to="/cats">Cats</Link>
    </li>
    <li>
      <Link to="/sheeps">Sheeps</Link>
    </li>
    <li>
      <Link to="/goats">Goats</Link>
    </li>
  </div>
  );
}
export default navbar;

We have to import Link from the react-router-dom library we’ve already installed. <Link> comes out of the box from the React Router library to allow us to navigate to the exact route name in the to attribute. What it does is convert whatever’s inside the attribute (text, images, etc.) into a link. When you click it, you are taken to the route that’s already indicated in the to attribute.

Creating the individual to attribute links

Back to our example — we have the name of our animals listed in the to attribute, and each name will link to the corresponding animal page. Now, let’s create the component for the animals we’ve listed in our navbar.

We’ll place them in src/pages/navbar, like so:

Dogs.js

import React from 'react';
const Dogs = () =>{
  return (
    <div>
      <h3>Dogs</h3>
      <div>
        <img src="./dog.png"/>
        <img src="./dog.png"/>
      </div>
    </div>
  );
}
export default Dogs;

Dogs.js

Cats.js

import React from 'react';
const Cats = () =>{
  return (
    <div>
      <h3>Cats</h3>
      <div>
        <img src="./cat.png"/>
        <img src="./cat.png"/>
      </div>
    </div>
  );
}
export default Cats;

Cats.js

Sheeps.js

import React from 'react';
const Sheeps = () =>{
  return (
    <div>
      <h3>Sheeps</h3>
      <div>
        <img src="./sheeps.png"/>
        <img src="./sheeps.jpg"/>
      </div>
    </div>
  );
}
export default Sheeps;

Sheep.js

Goats.js

import React from 'react';
const Goats = () =>{
  return (
    <div>
      <h3>Goat</h3>
      <div>
        <img src="./goats.png"/>
        <img src="./mountaingoat.jpg"/>
      </div>
    </div>
  );
}
export default Goats;

Goat.js

You’ll notice that the code is the same for each animal page.

Now, go into your App.js, and import react-router-dom into your project:

import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import navbar from "./components/navbar"
import Dogs from "./pages/Dogs"
import Cats from "./pages/Cats"
import Sheeps from "./pages/Sheeps"
import Goats from "./pages/Goats"
function App() {
  return (
    <Router>
      <navbar />
      <Switch>
        <Route path='/' exact component={Dogs} />
        <Route path='/cats' component={Cats} />
        <Route path='/sheeps' component={Sheeps} />
        <Route path='/goats' component={Goats} />
      </Switch>
    </Router>
  );
}

export default App;

When importing react-router-dom, you can choose to import the specific things we need. Here, we’ll import BrowserRouter (which we renamed Router for clarity), Switch to help us move between one page at a time, and Route to define each path and its related component or page. By default, once the the page loads, the user is taken to the component with the empty path *path*='/'. In our case, the user is initially sent to Dogs.js.

navbar is outside our Switch because we want it to be at the top of our page permanently, so it’s unaffected when we switch between different animal components.

Checking our results

Let’s start the server to view our final product. Just run the command below:

npm start
Final demo of our example animal app

 

Let’s quickly recap on what we’ve done. First, we used Create React App to get started with the project, then we installed the react-router-dom library. Once that was done to our project, we built the navbar itself, and the component for each animal was also added.

Finally, we go into our App.js and connect the names on the navbar to the corresponding component using our react router.

Conclusion

Congrats, you’ve successfully built your first navbar in React. You can find the sample project on my GitHub. Although more complex routing is possible with our navbar, this should be sufficient to handle simple routing between different components through a navbar.

#react #reactjs #javascript #webdev 

Build Your Own Navigation Bar from Scratch with React