Forem: Thu Nghiem

Learn HTML basics in 15 minutes for Absolute Beginners | HTML Tutorial (2021)

Thu Nghiem — Fri, 08 Jan 2021 22:49:19 +0000

If you want to build a website, the first language that you need to learn is HTML.

In this video, we are going through the basics of HTML and we are going to build a basic website using only HTML.

By the end, you will understand HTML and will be unable to use it to create basics websites

Video:

__________ 🔖 Tutorial Structure __________

INTRODUCTION -- [00:00] - Introduction

-- HTML basics --
[00:24] - HTML element
[01:48] - HTML nesting
[02:07] - Element Attributes
[03:28] - Most common HTML elements
[04:32] - Block-level and Inline elements
[05:51] - Other topics
[06:20] - Beginner Commom Mistakes

-- HTML document --
[07:22] - HTML document explain

-- Build Pancake recipe page --
[08:43] - Setups
[09:28] - Header Section
[10:33] - Main Section
[13:39] - Footer Section

-- Happy coding --
[15:41] - Happy Coding

__________ 🐣 About me __________

I am the founder of https://devchallenges.io/
Follow my Twitter https://twitter.com/thunghiemdinh
Join Discord https://discord.com/invite/3R6vFeM

Build a Modern Website from Scratch - FULL Tutorial 1+ hour [FREE]

Thu Nghiem — Sun, 20 Dec 2020 20:56:03 +0000

In the modern web, responsiveness is so important that your website needs to respond to every device with different screen sizes.

In this tutorial, we are going to build a Modern and Professional website using HTML, CSS, and a bit of JavaScript.

We are going to use the Mobile-First Approach.

If you want to follow along, be sure to download the resource: HERE.
Demo Website: HERE

__________ 🎥 Video Tutorial __________

__________ 🔖 Tutorial Structure __________

INTRODUCTION
[00:00] - Introduction
[00:48] - Project setups + Working Figma
HERO AREA
[01:42] - Hero Area section HTML
[06:13] - Hero Area section CSS
[19:56] - Hero Area section Responsiveness
[22:34] - Organizing CSS + Comment sections
ABOUT US
[25:02] - About us section HTML
[26:52] - About us section CSS
ACCOMMODATIONS
[33:36] - Accommodations section HTML
[38:17] - Accommodations section CSS
[44:37] - Accommodations section Responsiveness + Animation
TESTIMONIALS
[49:35] - Testimonials section HTML
[54:16] - Testimonials section CSS
IMPROVEMENTS
[01:01:32] - Fixed Top Navigation With Transition
[01:06:39] - Date input Safari, Default Date input value
DEPLOYMENT
[01:07:53] - Deploy Website with Github Pages
[01:09:27] - Happy Coding

__________ 🐣 About me __________

I am the founder of https://devchallenges.io/
Follow my Twitter https://twitter.com/thunghiemdinh
Join Discord https://discord.com/invite/3R6vFeM

Web Developer Roadmap 2021 in 10 minutes

Thu Nghiem — Tue, 08 Dec 2020 18:59:59 +0000

I am going to tell you what exactly I would do if I had to start to learn web development in 2021.

I will cover:

Essential Tools
Programming Languages
Libraries/Frameworks
Projects you can do

Essential Tools:

Programming Languages

Libraries/Frameworks

🐣 About me

I am the founder of DevChallenges
Subscribe to my Youtube Channel
Follow my Twitter
Join Discord

Full Project-based Tutorial - React + Next.js [FREE]✨

Thu Nghiem — Wed, 04 Nov 2020 23:09:04 +0000

If you want to learn to code by building real-life projects, this tutorial is for you. Together, we will build a complete application (World Ranks) using React and Next.js.

LIVE APP: https://world-ranks.vercel.app/

📖 You will learn:

Data sorting, filtering
Responsive Layout without any CSS framework
Dark/Light Mode
Server-side rendering
Deploying with Vercel

🍜 Resources:

Design: https://bit.ly/3l1aH3D
Resources: https://bit.ly/36p79SX
API: https://restcountries.eu/
Source Code: https://github.com/nghiemthu/world-ranks

✨ You can find the tutorial here:

🔖 Tutorial Structure

[00:00] - Introduction
[1:37] - Setting up Next.js project
[6:00] - Build Layout Component
[10:25] - getStaticProps
[12:30] - Build Input Component
[18:40] - Build Country Table Component
[27:10] - Sort Countries by state (value and direction)
[38:47] - Filter Countries by Name, Region and Subregion
[41:46] - Dymanic Route in Next.js
[43:47] - getServerSideProps (Server Side Rendering)
[45:43] - Styling Country Page
[1:11:52] - Build Responsive Layouts
[1:29:51] - Build Dark/Light Theme Switcher
[1:36:42] - Create new Github repo and deploy to Vercel
[1:39:15] - getServerSideProps and getStaticProps/getStaticPaths
[1:43:01] - Happy Coding!

🐣 About me

I am the founder of DevChallenges
Subscribe my Youtube Channel
Follow my Twitter
Join Discord

Complete tutorial - Grid component with React + Typescript + Storybook + SCSS

Thu Nghiem — Wed, 28 Oct 2020 13:08:11 +0000

One of the best ways to learn React is by creating reusable components. Instead of using bootstrap or other frameworks when working with Grid layout, why don't make it yourself?

In this tutorial, I am going to show you:

Set up create-react-app with typescript template
Create a simple Box component
Create a Reusable Grid Component using Flexbox
Create Grid Ruler using CSS Grid
Handle Responsiveness in Grid Layout
Add dynamic props JustifyContent and AlignItems
Set up storybook
Write Grid Document in storybook
Deploy storybook with Netlify

What you will learn in this tutorial:

React

React is a popular Front-end framework and one reason for that is the ability to create Reusable component, so why not start learning by creating those amazing components?

Typescript

I am not going to go into details about Typescript in this video but you will have an idea of how React and Typescript working together

Flexbox and CSS Grid

By working with the basic concept, we will use and master the basics of Flexbox and CSS Grid

SCSS + CSS modules

We are going to work with some of the most common features in SCSS like:

Variables
List
Map
Mixins,...

Storybook

One of my first tasks, when I started my job, was maintaining the storybook for our design system.

Storybook is a great tool to document Reusable components or even multiple flows in UI.

Netlify

We are going to use Netlify to deploy and host our storybook
Demo

🏝 Source code: Grid React Component

📝 Text Editor: https://code.visualstudio.com/
Plugin:

Prettier
ESLint
Auto Import

Video:

For other resources, check out:
👉 https://devchallenges.io/

Follow me:
🐦 Twitter

Build Registration Page with HTML and CSS in 30 minutes

Thu Nghiem — Sat, 17 Oct 2020 16:02:37 +0000

Building a Login/Registration page can be tricky. In the video, by using HTML and CSS, I will show how to create Behold registration form.

We are going to work with:

Inputs, Form,..
Grid, Flex, Media query, Transition,...

All the resources will be provided. If you want to try before watching the video or code along, be sure to check out the resources and design below:

🚀 Download the resources and design:

The starter: https://github.com/nghiemthu/behold-starter
Design: https://bit.ly/2IGn5Ib

🏝 Source code: You have to create yourself

📝 Text Editor: https://code.visualstudio.com/

🧑‍💻 BEM naming convention: https://en.bem.info/methodology/naming-convention/

⛑ Other tools that I use

Video:

For other resources, check out https://devchallenges.io/

Follow me:
🐦 Twitter

Build a Responsive Website Using HTML and CSS in 30 minutes

Thu Nghiem — Mon, 12 Oct 2020 18:48:17 +0000

In this video, I will show you how to create a responsive website using HTML and CSS. We will use Grid, Flex, Google Font, Font Awesome,... This tutorial is suitable for people who are starting with HTML and CSS.

We are going to create this website and you will be provided with the resources and design.

🚀 Download the resources and design:
Download starter: https://bit.ly/2Ifvxh8
Design: https://bit.ly/2GVUJbV

🏝 Source code: You have to create yourself

📝 Text Editor: VS code

🧑‍💻 BEM naming convention - I created my own, you can follow me or read more here

Words within the names of BEM entities are separated by a hyphen (-).
The element name is separated from the block name by a double hyphen (--).
Boolean modifiers are separated from the name of the block or element by a double underscore (__).

⛑ Other tools that I use

For other resources, check out devchallenges.io

Follow me:

🐦 Thu Nghiem Twitter

An Introduction to Reusable Components and how to create Typography Component

Thu Nghiem — Tue, 08 Sep 2020 15:41:25 +0000

One reason why React has become so popular is because of its reusable components. During the last few years, the concept of design system has also become popular among web developers.

I see many people making a mistake when learning React: they go straight to learning Redux and start building complex applications. They forget about learning the basics.

Because of that, they don't know why they are using React. Is it really useful or is it just trendy?

In this article, we will look at what reusable components are, and why they are one of the best ways to get started with React. And we will build a typography component together.

What are reusable components?

When a component is used more than once, it is reusable. For example in a list, we don't want to make a list item more than once. So we have to make that component reusable.

But reusable components are more than just an item inside a list. Some examples of reusable components are button and input. These are global components as they can be used anywhere.

Some are reusable but it's not necessary that they can be used everywhere. One example is that <tr>, <th>, <td> are reusable in <table> but cannot (should not) be used anywhere else.

You might already use reusable components. For example, if you are using BEM naming, you can see that Block names are global components, and Element names are scoped components.

Reusable components get more exciting when it comes to React.

Why you should care about them

At this point, you might already see the benefits of reusable components. But here is a list:

Efficient

You no longer have to spend your time thinking about pixels and doing the same things over and over again. You can save time by relying on your reusable components. This means that you have more time to improve quality, get your app done faster, and reduce costs.

Consistent

Having consistency in your application is more important than you might think. As your users start to use your application, they will start to learn about it. They will start to find a pattern.

An application with consistency will help your users find information faster and with less confusion.

Maintainable

Let's say that your designers decide to change the padding in the buttons. Now you have to search for every place that has <button>, go to every CSS file, and try to find where the padding is.

That is a lot of work. So instead of doing that, if you have reusable components you just need to change it in one place.

Avoids duplicated code

Duplicated code is not a bad thing, as it makes your app more flexible. But the code that you have to write again more than three times is not a good thing. Using reusable components helps you avoid copying your code every time.

How to make a good reusable component

Building a reusable component can be tricky. Here are a few things you want to look out for:

Component should be dumb

For example, the Button should not know the current theme. Instead, the application should tell the Button which theme it is.

Incorrect



const Button = ({ children, ...props }) => {
  const { state } = useContext(AppContext);
  return (
    <button
      className={cn({
        "button--theme-dark": state.theme === "dark",
      })}
      {...props}
    >
      {children}
    </button>
  );
};

In this example, we get the global state from AppContext in Button component. This means we have created a dependency between the Button and the Application. Therefore, the component is only reusable in the Application Context and we want to avoid this.

Correct



const Button = ({  theme, children, ...props }) => {
  return (
    <button
      className={cn({
        "button--theme-dark": theme === 'dark',
      })}
      {...props}
    >
      {children}
    </button>
  );
};

The button in this example is independent and can be used in any application. This is what we want to do.

Scalable

The component should be flexible enough that you can add more configuration easily later on.

In this example, instead of having hasPrimaryColor as a boolean, it should have a prop: backgroundColor="primary". Some other props should not be boolean like: size, varient,...

Incorrect



const Button = ({ hasPrimaryColor, children, ...props }) => {
  return (
    <button
      className={cn({
        "button--color-primary": hasPrimaryColor,
      })}
      {...props}
    >
      {children}
    </button>
  );
};

Correct



const Button = ({ color, children, ...props }) => {
  return (
    <button
      className={cn({
        "button--color-primary": color === "primary",
      })}
      {...props}
    >
      {children}
    </button>
  );
};

Simple

The more complex the component is, the harder to maintain it. You might hear the terms: Stateless Components and Stateful Components, most of the time Stateless Components are simpler than Stateful Components.

But what are the differences? Well.. it deserves a separate post. But basically, if you can move the logic outside the component and keep it dumb, then you should do it 🙂

Building a Typography Component

User stories

As a user, I can choose to have 10 variants: h1, h2, h3, h4, h5, h6, subheading 1, subheading 2, body 1, and body 2
As a user, I can choose to have primary or error colors

Design On Figma

Step 1: Create-react-app and install classnames

Let's create a React app and install classnames. Classnames will allow you to have multiple classes conditionally.



npx create-react-app typography
cd typography
npm i classnames

Step 2: Import font

You can go to Google Font to choose the ones you wish. In our case, we use Ubuntu.

You can import by using <link> tag inside <head>



<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Ubuntu+Mono&display=swap" rel="stylesheet">

or you can import in your css file



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&amp;family=Ubuntu+Mono&amp;display=swap');

Step 3: Use the font and reset the default styling

Let's reset some of the default styles and use our font. By resetting the default, we are free to give it our own style without knowing what the default values are.

In our cause, let's remove the default padding and margin. Some other components might have border, background-color, text-decoration,..



body {

  margin: 0;

  font-family: "Poppins", sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

,

::after,

*::before {

  box-sizing: inherit;

}

h1,

h2,

h3,

h4,

h5,

h6,

p {

  margin: 0;

  padding: 0;

}

Step 4: Create a typography component

Always remember to pass ...props to your component, so that we don't lose the default attribute.



import React from "react";

import cn from "classnames";

import "./typography.css";

// Defining the HTML tag that the component will support

const variantsMapping = {

  h1: "h1",

  h2: "h2",

  h3: "h3",

  h4: "h4",

  h5: "h5",

  h6: "h6",

  subheading1: "h6",

  subheading2: "h6",

  body1: "p",

  body2: "p",

};

// Create a functional component that take 

// variant: the selected html tag

// color: the selected color

// children: the node passed inside the Component

// ...props: the default attribute of the Component

const Typography = ({ variant, color, children, ...props }) => {

// If the variant exists in variantsMapping, we use it. 

// Otherwise, use p tag instead.

  const Component = variant ? variantsMapping[variant] : "p";

return (

    <Component

      className={cn({

        [typography--variant-</span><span class="p">${</span><span class="nx">variant</span><span class="p">}</span><span class="s2">]: variant,

        [typography--color-</span><span class="p">${</span><span class="nx">color</span><span class="p">}</span><span class="s2">]: color,

      })}

      {...props}

    >

      {children}

    </Component>

  );

};

export default Typography;

Step 5: Add styling to your component

The last step is to give style to our component. This code is straightforward, we add different font-size and font-weight to each variant option and color to color option.



.typography--variant-h1 {

  font-size: 6rem;

  font-weight: 500;

}

.typography--variant-h2 {

  font-size: 3.75rem;

  font-weight: 500;

}

.typography--variant-h3 {

  font-size: 3rem;

  font-weight: 500;

}

.typography--variant-h4 {

  font-size: 2.125rem;

  font-weight: 500;

}

.typography--variant-h5 {

  font-size: 1.5rem;

  font-weight: 500;

}

.typography--variant-h6 {

  font-size: 1.25rem;

  font-weight: 500;

}

.typography--variant-subheading1 {

  font-size: 1rem;

  font-weight: 500;

}

.typography--variant-subheading2 {

  font-size: 0.875rem;

  font-weight: 500;

}

.typography--variant-body1 {

  font-size: 1rem;

}

.typography--variant-body1 {

  font-size: 0.875rem;

}

.typography--color-primary {

  color: #f2994a;

}

.typography--color-error {

  color: #eb5757;

}

Challenge

The component is not totally complete. I challenge you to add more props like: align, display, marginButton,...

Result

You can find the source code here if you want to check it out.

Conclusion

After making Typography component, we can see that making reusable components can be difficult and usually saves you a lot of time in the future. It is also a good way to get started learning React or Vue.

Next time, when working with React, don't be lazy and simply copy code from other places. If you think it should be a component, make it one. It will help you out a lot.

Here are 2 challenges to get started creating Reusable components and learning React:

Button Component

Input Component

Do you have some questions? Free feel to leave me a comment 😁

🐦 Thu Nghiem Twitter
🐦 Devchallenge.io Twitter
🔥 Devchallenges Website

8 Projects with modern designs to become a Full-stack Master 2020

Thu Nghiem — Wed, 02 Sep 2020 13:44:09 +0000

Are you looking for projects to sharpen your skills? Are you stuck at coming up with new ideas?

As developers, we love to code, but sometimes it's hard to find designs or ideas to work on.

Hi, my name is Thu. You might hear from me in some previous posts. In the last months, I have been working on creating 8 real-life projects that include designs and requirements.

I have designed 8 distinct projects that help you to practice every skill needed to become a super-star developer.

With these projects, you can do to build an outstanding portfolio and become a Full-stack Master.

What you will practice

I had always wanted to build a chat application and I have done it and it was super fun. In this challenge, you will build a Multiple chat group application. You will learn about real-time databases, you might also get more familiar with technologies like websocket, socketio...

By integrating your authentication application, you will learn how to manage your users, add them to the group, handling messages,...

You will also build a simple but not so simple UI 😆

Level

Front-end: ⭐⭐⭐
Back-end: ⭐⭐⭐⭐

7. Tweeter - Twitter Clone

What you will practice

I love this UI, simple and sleek.

I am telling you, if you can re-create Twitter, you can do anything 😬.

In this project, you will create a profile similar to Facebook, Twitter. You will learn how to make "follower-following" system.

You will also learn how to post a new Tweet, add comments to them. How to filter different Tweet type,...

This is definitely one of the most challenging projects yet. But I promise you will learn a lot 😎

Level

Front-end: ⭐⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐⭐

8. Thullo - Trello Clone

What you will practice

I know... it's already the last challenge in this post. But I have to tell you. This project is damn challenging, even for me to design it 😅

You will learn thousands of things in this project, as there are millions of things going on:

You will learn how to create a team, project, card, list,... and at the same time, the user should be able to edit and delete them.

In the Front-end, you will create Drag and Drop functionality that will haunt you for some amount of time 😜

You will also create commenting, uploading, and other tricky functionalities.

There are even more to this project. But I'll let you find out 😋

Level

Front-end: ⭐⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐⭐

Conclusion

You can find all projects on DevChallenges.io. I really hope that these projects inspire you not only for developers but for designers. If you want to get more updates from me. Feel free to follow me and leave me a comment.

🐦 Thu Nghiem Twitter
🐦 Devchallenge.io Twitter
🔥 Devchallenges Website

Steps to replicate a design with only HTML and CSS

Thu Nghiem — Sun, 19 Jul 2020 22:14:26 +0000

Introduction

Many people make mistakes that they do not plan before implementing a design. Because of that they usually get stuck or the design does not turn out as they planned. Here are the steps that I take in order to ensure that implementing is an enjoyable experience and it will turn out to be what I want.

Given a design that shows my challenges page. We will try to translate it into code.

Step 1: Draw the layout

When working with HTML and CSS, you need to plan, you need to draw out the layout before getting started with coding.

You should break the layout to the smallest components and also check if they need a container or wrapper. Here an example of how I break down the layout. You can do it quickly in your head as well.

Step 2: Add HTML

After you have the structure layout, either on paper or your head, the next step is to work with HTML.

You need to decide which element it is. You can ask yourself: Is it a button? Which heading is that? Should it be flex or grid?...

In order to have the answers to these questions. One of the most important properties in CSS you need to understand is display. You need to know the differences at least between these values:

1. display: block

Displays an element as a block element (like <p>). It starts on a new line and takes up the whole width

2. display: inline

Displays an element as an inline element (like <span>). Any height and width properties will have no effect

3. display: flex

Displays an element as a block-level flex container

4. display: inline-block

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

With these 4 basic values of the display property, you can replicate almost every layout.

Step 3: Add classes

If you are working with CSS without any pre-processor, I recommend you to check out BEM naming. Try to think about components that can be reusable. For example in code below, card, tag, level, input,... are reusable components:

<div class="panel">
  <div class="heading">
    <h1>My challenges</h1>
    <i class="material-icons">trending_flat</i>
  </div>

  <p>Welcone back Thu, ready to continue your challenges</p>

  <div class="tabs">
    <button class="tabs__item tabs__item--active">In Progress</button>
    <button class="tabs__item">Completed</button>
    <button class="tabs__item">Favorite</button>
  </div>

  <div class="input-wrapper">
    <input class="input" type="text" placeholder="Search..."/>
  </div> 

  <div>
    <div class="card">
      <div class="card__image">
        <img src="https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FPortfolioThumbnail.png?alt=media&token=417f625d-715a-4611-8215-2c19aaf490f9" alt="portfolio challenge" />          
      </div>

      <div class="card__content">
        <div class="tag">Responsive</div>
        <h5 class="card__content__title">Portfolio Challenge</h5>
        <div class="level">
          <label class="level__title">Intermediate</label>
          <div class="level__indicator">
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item"></span>
            <span class="level__indicator__item"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card__image">
        <img src="https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/CatwikiThumbnail.png?alt=media&token=4a59b587-4766-48ac-ada0-d59fe12d924e" alt="catwiki challenge" />          
      </div>

      <div class="card__content">
        <div class="tag">Full-stack</div>
        <h5 class="card__content__title">CatWiki Challenge</h5>
        <div class="level">
          <label class="level__title">Advanced</label>
          <div class="level__indicator">
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 4: Work with CSS - the most fun part

There are few tips when starting to work with CSS to keep it consistent and easy:

tip 1:

Reset all the default stylings and use:

*, *:before, *:after {
    box-sizing: border-box;
}

tip 2:

Use CSS variables

:root {
  --font: 'Poppins', sans-serif;
  --primary-color: #FF7A4E;

  --grey-1: #F2F2F2;
  --grey-2: #BDBDBD;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.5rem;

  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --rounded-sm: 8px;
  --rounded: 16px;

  --shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

Alright, so the styling is all up to you now. You can check out the final result here: Final Result

Step 4: Check it on mobile and add media query if needed.

@media only screen and (max-width: 600px)  {
  .card {
    display: block;
  }

  .card__image {
    width: 100%;
  }
}

Step 5: Fix your spacing and color if needed.

Checkout Figma for the correct font and spacing. And try to improve your design.

Wrapped up

My name is Thu, creator of devchallenges.io. I write blogs to help my users - students. If you wonder what devchallenge is. check it here: https://devchallenges.io/

Or connect with me:

Twitter: https://twitter.com/thunghiemdinh
Youtube: https://www.youtube.com/channel/UCmSmLukBF--YrKZ2g4akYAQ

How I became a software engineer

Thu Nghiem — Fri, 17 Jul 2020 13:00:08 +0000

Hi everyone,

You might know me from a few posts as the creator of devchallenges.io. I really wanted to make youtube videos as it's challenging and I wanted to challenge myself.

Here is my first Vlog, this describes my story of coming to Finland and become a software developer and why I made devchallenges.io

Please check it out. Hopefully, some of you would enjoy it.

Channel: Thu Nghiem

Top 5 free HOSTING sites with Instructions

Thu Nghiem — Tue, 07 Jul 2020 20:58:58 +0000

Getting your website deployed is probably the first thing you want to do and with these 5 sites, you can do it in just minutes.

Table of Contents - The order is alphabetical

Firebase
Netlify
Render
Surge
Vercel

Firebase

With Firebase hosting, you can deploy web apps - both static and dynamic content by a single command.

Step 1. Install the Firebase CLI

npm install -g firebase-tools

Step 2. Sign into Firebase

firebase login

Step 3. Navigate into your project

firebase init

Step 4. Prepare your site

npm run build

Step 5. Deploy

firebase deploy

Netlify

Netlify supports GitHub, GitLab and Bitbucket, it will redeploy the site just by pushing the code without manually rebuild.

Step 1. Login to Netlify and select New site from git

Step 2. Choose your repository and configure settings with options:

Branch to deploy, default master
Build Command, default npm run build
Publish directory, default public, but it is usually public, dist, build,...

Step 3. Select Deploy site

Render

With Render, you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.

Step 1. Login to Render and create a new Web Service and give access to your repository

Step 2. Enter your settings

Environment: Static Site
Build Command: e.g npm run build
Publish Directory: e.g public, dist, build,...

Step 3. Select Create Web Service

Surge

Surge is a cloud platform to publish static web
for Front-End Developers.

Step 1. Install the surge CLI

npm install -g surge

Step 2. Build your site

npm run build

Step 3. Deploy your site providing your Publish Directory

surge public/

Vercel

Vercel is a cloud platform for websites and serverless APIs, free and easy to use

Step 1. Install the Vercel CLI

npm i -g vercel

Step 2. Deploy

vercel

Conclusion

Deploy and hosting is fast and easy. These sites are perfect for you to host any solutions from devchallenges.io

Feel free to leave me any comments