Learning Web Development from YouTube

Hamid — Sat, 28 May 2022 14:11:49 +0000

Introduction

July 2020 is the first time I started learning web development. Sharing best youtube video where you able to master web developing.

HTML CSS

Coding Addict → This channels is best for beginners to intermediate I highly recommended to learn from Jhon Smilga.
Default Starter for CSS → Use this Starter for html and css. You gonna love this starter ✅.
Web Dev Simplified → Really good for beginners because he covers basic stuff

JavaScript

Traversy Media → There are so many stuff besides JavaScript like React
Coding Addict → Check out the Higher Order Function (like map, foreach, filter), also check his project with Vanilla Javascript → Incredible opportunity to learn JavaScript .

React.js

Coding Addict → React Fundamentals, Hooks, Context API, React Router, Custom Hooks (very recommended)

TypeScript & React

Ben Awad → Awesome content for learning typescript. Check out this video to clear generics concept Typescript Generics

Full-stack Next.js + GraphQL

CoderOne → Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker
Ben Awad → Great videos, but he uses some stack that is not familiar for beginners like Typescript and GraphQL

Animation in React

devaslife → Make your portfolio by learning framer-motion & three
CoderOne → Create Lovely Auto-Complete SearchBar framer-motion
CoderOne → Login/Register Form with smooth Animations using framer-motion

Additional Resources

Ben Awad → let's break our limits by learning algorithm & data structure ,importent of good sleep and by using vim to boost how fast you code.
Jason Lengstorf → Check his 90 minutes stream that covers a lot of topic. Also check out his - react-query video: it pretty similiar with SWR for data fetching and caching
Fireship → A lot of 'quick course' in 10 or 1 minute to give you knowledge about other tech stack

Courses that I Have Completed

Course is sorted based on the first one I completed:

React Tutorial and Projects Course → long duration, great materials,incredible teaching style. I Promise if you watch and practice along with this tutorial then you become intermediate to master level react developer.
Javascript Tutorial and Projects Course → Highly recommended this course will give you grip on javascript fundamental along incredible project.
NodeJS Tutorial and Projects Course → Very recommended if you are interested in learning backend language with MongoDB & Express Js. Jhon Smilga will cover every importent topic of node js in this course.

Summary

Learning web development can be very tiring because there are so many things that need to be covered from the very basic like HTML, CSS, JS, then you need to learn Git for version control, frontend framework, styling framework, backend services, database. But, you will eventually understand it with some time.

But, if you enjoy doing web development, watching these videos will feel like entertainment, you learn new stuff every day and keeps investing yourself with knowledge. Also, try to not only watching the video but follow along with the code and make your own project. It was the fastest way to learn for me.

Pro Tips: change the playback speed to 1.5x speed to make your productivity 1.5x faster

Simple way to write forms in React with Formik

Hamid — Wed, 08 Sep 2021 03:44:16 +0000

Formik is a best library and I use it every time. So today I am writing this post for fundamentals of formik and it covers the use of formik in simple way .

Create and style a login form

I created login form like this

 <form className="form">
        <div className="field">
          <label htmlFor="email">Email Address</label>
          <input
            id="email"
            name="email"
            type="email"
            placeholder="email"
          />
        </div>
        <div className="field">

          <input
            id="password"
            name="password"
            type="password"
            placeholder="password"
          />
        </div>
        <button type="submit" className="submit-btn">
          Login
        </button>
      </form>

and styled it like this

.App {
  font-family: sans-serif;
  text-align: center;
  display: grid;
  place-items: center;
}
.form {
  width: 300px;
  display: grid;
  gap: 10px 0px;
  margin-top: 50px;
  background-color: #ddd;
  border-radius: 8px;
  padding: 10px;
}
.field {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.submit-btn {
  width: 80px;
}
.error {
  color: red;
  font-size: 12px;
  justify-self: start;
  font-style: italic;
  padding-bottom: 10px;
  line-height: 3px;
}

After this, you'll get a login form same as this

Initialize formik default states

Lets import the useFormik first from the formik.

import { useFormik } from "formik";

Now you can initialize the initialValues of form using useFormik hook .

const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
)}

let's apply formik to our input fields .

   ...
          <input
            id="email"
            name="email"
            type="email"
            placeholder="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.email}
          />
     ...
          <input
            id="password"
            name="password"
            type="password"
            placeholder="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.password}
          />

Apply validations on login fields

I used Yup library to apply validations on my fields
So first import Yup like this .

import * as Yup from "yup";

Then I added validationSchema for my login fields

const validationSchema = yup.object({
    email: yup
      .string()
      .email('Please enter a valid email address')
      .required('Email is required'),
    password: yup
      .string()
      .min(8, 'Please enter strong password')
      .required('Password is required'),
  })
  const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema,
)};

Here Yup is validating if the values of the field are provided; if yes, then is it correct format or not.
So if any error happens according to our validation schema, it will be stored in formik's errors object and we can print it beside or below the field like this .

{formik.touched.email && formik.errors.email ? (
         <span className="error">{formik.errors.email}</span>
) : null}

Now our form looks like this with validation errors

Write submit form function

The last step is to create submit function and perform your operation on formik values. You can navigate to the next screen, call API, or anything you want to do. I just set a state on submit and shown a message to a user on the login .

const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema,
    onSubmit: (values) => {
      setIsLoggedIn(true);
    }
  });

and pass formik handleSubmit function to your form like this

<form className="form" onSubmit={formik.handleSubmit}>

and here your form is ready with field validations!!
You can find the full source code here

https://codesandbox.io/s/unruffled-tharp-uti1k?file=/src/App.js:727-781

DEV Community: Hamid