Forem: Modern Web

Part 1.1 - Build a fullstack blogging website using MERN ( MongoDB, ReactJS, ExpressJS and NodeJS )

Modern Web — Sat, 07 Oct 2023 12:11:06 +0000

👋 Hey there, today in this blog we will start a new series where we will learn “how to make a fullstack blogging website using MERN stack” basically we will make a website very similar to medium.com.

You probably think it is just some other tutorial claiming to make a fullstack website with just simple things but I will say, you should see the website demo first available below. You will see a lot of features there from having a fully working modern editor for writing blogs, to features like, like a blog, comment on blog and even replies to any comment ( basically nested comments ) on top of that a very good dashboard UI to manage blog and view insights like “like count, read count, comments count” and did I mention any interaction you do on website will store in database as a notification for other user. In short, its a kind of project which will just shine in your portfolio.

Okay so let’s see how we can start building this project, I can’t wait to start this blog.

This project is so big so the tutorial of this project will be in parts. In video formats it will be 4 or 5 parts that you can find on “Modern Web” youtube channel and In blogs there will be 3 - 4 parts for every video part

Website Demo

If you want to see the full website in action, all features from simple to advance. You can watch the demo below. The video below also include this blog in video format.

You can download full source code of this project if you want. Download Source Code

Github Initialisation

Okay, in order to follow this project, you need to download this github repo.

You can fork the repo in your account and then clone it on your system or you can just download the repo without forking it to your account. Once you have the repo, you will get 2 folders inside it

blogging website - frontend - this folder is frontend ( react ) code

server - this folder is backend ( node ) code

open both of these files on terminal separately because we need to install the packages in order to make this project. You don’t have to worry about any package name or version all of these things are mentioned in package.json file already.

`blogging website - frontend` folder setup

Once this folder is open in terminal, first run npm install cmd to install all the packages, after that you just need to start the frontend vite server whenever you want to access the website. You can do that by running npm run dev cmd in terminal.

`server` folder setup

Once this folder is open in terminal, first run npm install cmd to install all the packages.

That’s sit once you have installed all the packages we can start working on the project.

Navbar

Let’s start our project by working on our Navbar first. Let’s create navigation for easy user interaction. We will create navbar as a react component because we want to render navbar on multiple pages/routes. So open navbar.component.jsx under components folder. Create a very basic Navbar Functional component.



const Navbar = () => {
    return (
        <h1> Navbar </h1>
    )
}

export default Navbar; // default let's you import function without { }

Above component is returning an h1 to render for now so that we can check whether or not our component working properly. Also make sure to export the component as a default component.

Now to render it, we will go inside app.jsx file which is our app file where we will setup routes for this project later. In file you will see its returning an h1 by default. so remove that and instead add <Navbar /> to render it. ( Do not forget to import the component at top, in VScode you can do that automatically if you just press enter while typing component name from the suggestion VScode gives you )



import Navbar from "./components/navbar.component";

const App = () => {

    return (
       <Navbar />
    );

}

export default App;

So if you are getting “navbar” text on the page that means everything is working and if not then it’s time for you to recheck the code and see where you made mistake.

Okay, let’s create our navbar now. So instead of returning h1 return nav and we will create navbar inside it. Add Classname to it navbar because in index.css file, there is navbar class with bunch of tailwind CSS for navbar.



const Navbar = () => {
    return (
        <nav className="navbar">
            { 
                // nav elements will go here 
            }
        </nav>
    )
}

Navbar - Logo

In our navbar, we have a logo and whenever user click on that logo we want to redirect user to homepage. So first let’s make the logo inside navbar.



<nav className="navbar">

    <img src={logo} className="flex-none w-10" />

</nav>

img element has flex-none class, so that our navbar flex won’t affect its size. In the src I have given {logo} , if you don’t know what this { } used for then its simple inside JSX to access/write JS you can use { } and inside the brackets you can use JS and you can even call variable inside it to access variable name. So src is basically whatever this logo variable is. Now what is it ?

Well in order to use any external file in react you have to import it, whether its a component, function, image, svg anything. You have to first import it and this logo is exactly the import of image at the top of navbar.component.jsx file.



import logo from "../../imgs/logo.png"; // img path respective to components folder as the file is inside components folder

// rest of the code

Output

Okay we got img but how we can redirect user to / ( home route ). Well one way is to wrap the img inside an a tag.



<a href="/">
    <img src={logo} className="flex-none w-10" />
</a>

This will redirect you whenever you will click on image. But if you notice the site. You will see whenever you are clicking on image the page get’s reload and this destroy the concept of React Single Page Application concept as whenever you will click on image. Browser will ask for the website again from the server. So then, what can we use. To resolve this issue, instead of a we will use <Link> </Link> component offered by react-router-dom . React router is a library that help you mimc the functionality of Browser routing insider React application. So using Link component of that, we can redirect the user to whatever route we want without reloading the page.

So first import it at top.



import { Link } from "react-router-dom";
import logo from "../../imgs/logo.png";

// rest of the code

And now, wrap the img inside Link



<Link to="/" className="flex-none w-10">
    <img src={logo} className="w-full" />
</Link>

to prop means on which route we want to redirect. I have changed the classNameas well. That just adding the flex-none functionality to Link and w-full for img to cover full width that is w-10

But now you won’t see anything in the output. Why ? Because in order to use Link or any other features/components of react-router-dom you have to first wrap the <App /> component inside <BrowserRouter> which is also a component from react-router-dom which mimics the Browser routing functionality, and since we will have the <App /> inside it. The App which is our whole project, will be able to access the BrowserRouter functionalities.

So inside main.jsx wrap the App



<BrowserRouter>
  <App />
</BrowserRouter>

And make sure to import the BrowserRouter at the top too.



import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
    // React Component
)

Navbar - Search Box

After logo we need a search box in our navbar. Well we will make this search box functional later. But right now, let’s get the UI done. So after Link create a div and let’s create a search box input like this 👇



// inside <nav> tag after <Link> .. </Link>

<div className="absolute bg-white w-full left-0 top-full mt-0.5 border-b border-grey py-4 px-[5vw] md:border-0 md:block md:relative md:inset-0 md:p-0 md:w-auto">
    <input 
        type="text"
        placeholder="Search"
        className="w-full md:w-auto bg-grey p-4 pl-6 pr-[12%] md:pr-6 rounded-full placeholder:text-dark-grey md:pl-12"
    />
</div>

To understand the tailwind classes I use, I suggest you watch the video tutorial as you will get better understanding of each classes. Anyway, so basically the div is a container for input and the search icon that we will create next.



// after search box input

<i className="fi fi-rr-search absolute right-[10%] md:pointer-events-none md:left-5 top-1/2 -translate-y-1/2 text-xl text-dark-grey"></i>

For icons, I am using Flat Icons , in the Github files font awesome installation is already done, so you can use any font awesome icon directly in the project. The one I am using is fi fi-rr-search ( a magnifying glass icon )

After this we will see something like this.

Output - smaller screens

Output - medium screens

So it’s done, but in smaller screens, what we want is to show/hide the search box whenever user clicks on search icon visible on navbar. Something like 👇

To create that after the parent div of search box. Make another div and this will be a container for actions buttons on the right side in our navbar.



// after search box's div & inside nav

<div className="flex items-center gap-3 md:gap-6 ml-auto">
    <button className="md:hidden bg-grey w-12 h-12 rounded-full flex items-center justify-center">
        <i className="fi fi-rr-search text-xl"></i>
    </button>
</div>

So this JSX element with tailwind styles will give an output like this. Where you will see the search icon button in smaller screens and as soon as you hit medium screen size, you will not get the search icon because the search box will be inside navbar in that screen size.

Output - smaller screens

Output - medium screens

Now, how we can show/hide the search box. Well to achieve this I will use React States to track whether the search box should be visible or not. So let’s create a state first to track that.



const Navbar = () => {

    const [ searchBoxVisibility, setSearchBoxVisibility ] = useState(false) // default value will be false

    return (
            // navbar code here
    )

}

Now since we have a state now, we will toggle its value from true → false → true whenever the search icon got click. To do that add onClick to the button and run a function to call setSearchBoxVisibility function to change the state’s value.



// search icon button

<button className="md:hidden bg-grey w-12 h-12 rounded-full flex items-center justify-center"
    onClick={() => setSearchBoxVisibility(currentVal => !currentVal)}
>
    <i className="fi fi-rr-search text-xl"></i>
</button>

currentVal is the first parameter that you can use while calling setState functions to access the most recent value of the state and to just toggle that current Boolean value, you can return the currentVal with ! in the beginning.

Now if you click on the button, it should change the state value from false → true → false and so on. But you won’t see anything because the state is changing but its value doesn’t affecting the UI. So to show or hide the search box. We will add conditional classes to it.



<div className={"absolute bg-white w-full left-0 top-full mt-0.5 border-b border-grey py-4 px-[5vw] md:border-0 md:block md:relative md:inset-0 md:p-0 md:w-auto " + 
( searchBoxVisibility ? "show" : "hide" )}
>
    { 
                // search box input and icon
        }
</div>

Above code is just adding show or hide class on the basis of searchBoxVisibility state. show/hide classes are inside index.css file. If you didn’t get what is happening in above code. Well first, instead of " " for className there is { } is the start and the end, which means inside it we can use JS. Then, we are simply concatenating class string using “tailwind classes” + “class from the condition” . To add condition I have used ternary operator which is a short form of if else that you can use inside JSX instead of actual if else and its syntax is like this condition ? true case : false case . Now here are 2 things to remember while using classNames like this. First wrap you condition inside ( ) otherwise it will not concatenate with the string and second add a [space] at the end of the static classNames, like I have added space after md:w-auto at the end. This will make sure that the classes will have space after concatenation other wise after concatenation, if you don’t have space at the end, it will look like this md:w-autoshow instead of md:w-auto show and this will then not apply both styles to the element.

So now you should be able to show/hide the search box by clicking on the search button.

Output

But there is an issue, if you just hide the search box, and then go to medium or large screen sizes. You will notice that there is no search box and neither the search button to show/hide the search box visibility. That is because we have hidden class to the button on medium screen so its not showing and since the state is false, the parent div has hide class because of the condition. To fix this, add md:show class to the search box’s div . So that on medium screens even if we have hide class, it will have show class which will overwrite the hide styles.



<div className={"tailwind classes md:w-auto md:show " + 
( searchBoxVisibility ? "show" : "hide" )}
>
    { 
                // search box input and icon
        }
</div>

Navbar - Sign in / sign up button

Now we want some sing in / sing up buttons + a “write” button in the navbar for easy navigation for the user. So let’s create that. Inside the div where we have search button to show/hide the search box. Add a “write” Link element which will be hidden in smaller screens.



// search icon button 

<Link to="/editor" className="hidden md:flex gap-2 link">
    <i className="fi fi-rr-file-edit"></i>
    <p>Write</p>
</Link>

Output

Now to create sign in / sign up buttons which will redirect the user to /signin or /signup route. Code this after the above code.



// search icon button & write button

<Link className="btn-dark py-2" to="/signin">
    Sign In
</Link>
<Link className="btn-light py-2 hidden md:block" to="/signup">
    Sign Up
</Link>

/signup button/Link will be hidden in smaller screens as we don’t want to clutter our navbar on small devices.

Output

Route Setup

So after navbar, let’s setup some routes in react app, so that we can deliver sign in / sing up form and start working on those pages. Now since, ReactJS is a SPA means a simple page application, creating routes is difficult. So we will take help of “react-router” again in order to setup Routes. So open App.jsx and let’s setup Routes.

So in return first remove everything and add Routes Component which is provided by “react-router-dom”.



import { Routes } from "react-router-dom";

const App = () => {

        return (
                <Routes>
                        { 
                            // All the routes will come here 
                        }
                </Routes>
        )

}

Routes Component basically allows you to setup routes for you projects. Now inside it we will use Route ( without s ) Component to create each and every routes. So inside it add this.



<Routes>
    <Route path="/" element={<Navbar />}></Route>
    <Route path="/signin" element={<h1> Sing In Form </h1>}></Route>
    <Route path="/signup" element={<h1> Sing Up Form </h1>}></Route>
</Routes>

Route component lets you define the routes using 2 props.

path - it defines the route path. In the above code we have created 3 Routes with /, /signup, /signin path. Where the react router deliver different Components.
element - it renders whatever elements you pass inside it when the path is matched. For instance, If I now access /signin path. I will see a h1 with “Sign in form” text.

After setting these 3 routes, if you go on these 3 routes, you will see the elements being render but there is a issue. Well basically, I want to show <Navbar /> component to /signin and /signup routes as well, not only those but as we will work on other pages, in most pages we want the navbar. So how we can do that, well the simple fix is that inside each page, render <Navbar /> separately, means add <Navbar /> in all pages at the top before writing their HTML. But thats not a good practice. So instead of doing that we will go for second option, which is Outlet.

Outlet is a component again provided by react-router which allows you to create nested routes and render multiple components at once. Let see how it works. So first of all we have to change our routes a little bit.



<Routes>
    <Route path="/" element={<Navbar />}> // `Navbar` will get render whenever the path matches i.e -> "/"
        <Route path="signin" element={<h1> Sing In Form </h1>} /> // h1 will get render on path -> "/signin"
        <Route path="signup" element={<h1> Sing In Form </h1>} /> // h1 will get render on path -> "/signup"
    </Route>
</Routes>

In the above code, I have nested the signin and singup route inside / path. Which will enable you to render 2 component because when you go to /signin let’s say, then 2 condition will be true, the first is / where react router will render Navbar and then the signin route where react router will render h1. But if you see your output, on all those 3 paths you will Navbar, but no h1.

So first, congrats as we got the navbar on all these 3 paths but we lost the h1 component. Well there is nothing to worry about it. To render components in this type of nested routes. We use Outlet Component from “react-router”. We will add this Outlet on the parent route component. So in this case the parent route is / and its component is Navbar. So open navbar.component.jsx and at the end in return add <Outlet /> make sure to import that and also wrap your <nav> and <Outlet /> in an empty component ( <></> ) so that react wont’s throw any error because in react you can only render 1 parent component.

This is how your navbar.component.jsx's return will look.



return (
    <>
        <nav className="navbar">
            // navbar code
        </nav>

        <Outlet />
    </>
)

So as long as we have Outlet in Navbar Component, we will see both routes on nested routes.

So thats sit for this blog, I hope you learned a lot by following this article. Make sure you follow me to not miss the next part whenever I will post it. Also if you want, you can checkout my channel, and show you love by subscribing me and you can watch the full tutorial of this part 1. If you have any doubt feel free to ask me in comments. Till then thanks for reading.

🔥🤯 Amazing Food Order hero section using HTML, CSS and JS.

Modern Web — Tue, 11 Jul 2023 13:00:45 +0000

If you know web development and tired of making simple looking websites. Then this article is right for you. In this article, you’ll learn to create a modern looking food order hero section using HTML, CSS and JS with cool animations and we will make it responsive too.

So, without wasting more time, let's start. To see how you can code full website, you can watch the tutorial below.

Video Tutorial

DEMO

If you want to code full landing page then follow the video tutorial above. Else continue reading.

Folder Strucutre

So to start any project you should know what is the folder structure of it. Well since this is a simple hero section ( part of a simple page ). There is no complex folder strucutre.

I have an img folder contains all the images we need, app.js, index.html and style.css files.

Download the images ( Github Repo ) , Download Full landing page source code

Link Files.

After you download the github repo, open index.html file and link style.css and app.js.



<head>
    <!-- default codes -->
    <!-- Style -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

   <!-- Scripts -->
   <script src="app.js"></script>
</body>

Navbar

Before we work on our hero section, let's first make our navbar. So make sure you have download the github repo I provided you above and follow me.

So In our navbar, we have 3 main things, first is a logo then links and the other is search box with cart icon.

So create those. I'll use nav tag and inside it. I will first create logo.




<body>

<header> <!-- header will wrap our navbar and hero section -->
        <!-- navbar -->
        <nav class="navbar">
             <!-- logo -->
            <img src="img/logo.png" class="logo" alt="">
        </nav>
</header>

</body>

So this will make an image, now we have to style our navbar to make it look like a navbar. For that in CSS file, you can add this CSS.




/* repo code above */

html {
    font-size: 16px;
}

body{
    font-family: 'Lato', sans-serif;
    color: var(--primary-text-color);
    background: var(--primary-color); /* variables are defined in :root selector of github repo*/
}

/* navbar */

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 0 10vw;
    z-index: 9;
    background: var(--accent-color);
}

.logo{
    height: 1.5rem;
}

So in the above code I am just setting "fixed" position to .navbar so it will stay on top irrespective of scrolling and gave it a display: flex so that we can make logo, search box, and links side by side instead of coming below each other.

So after logo, we need link. To create links we can use <ul> tag to create a list of <a> tags. Something Like this.



<nav class="navbar">

<!-- previous code -->
<!-- ul -->

<ul class="links-container">
    <li class="link-items"><a href="#" class="links">Menu</a></li>
    <li class="link-items"><a href="#" class="links">Order</a></li>
    <li class="link-items"><a href="#" class="links">Restaurants</a></li>
    <li class="link-items"><a href="#" class="links">Track Order</a></li>
</ul>

</nav>

and we can style to the ul so that the links come side by side.



.links-container{
    display: flex;
    gap: 1rem;
    list-style: none;
    margin-left: 7.5%;
}

.links{
    color: var(--primary-text-color);
    text-decoration: none;
    text-transform: capitalize;
    padding: .5rem 1rem;
    transition: .2s;
}

.links:hover{
    color: var(--secondary-text-color);
}

In Above code I have set .links-container element's display: flex so that all the links inside it comes side by side. Following that it has list-style: none property which if you don't know use to remove the bullet points from the list items.

After this we need a search box and cart icon in navbar. But to use icons I will use fontawesome. So use that, add its CDN in your head tag before style.css file.



<head>

<!-- previous code -->

<!-- font awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>

Now we can use fontawesome icons. So inside navbar, let's create search box.



<nav class="navbar">

           <!-- previous code -->       

            <!-- search box -->
            <div class="nav-extras">
                <!-- search box -->
                <div class="search">
                    <input type="text" class="search-box" placeholder="Search Restaurants, Cuisine..... ">
                    <button class="search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                </div>

                <!-- cart btn -->

                <a href="#" class="cart"><i class="fa-solid fa-cart-shopping"></i></a>
            </div>

</nav>

and add stylings.




.nav-extras{
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 1rem;
}

.search{
    position: relative;
    width: 20vw;
    min-width: 150px;
    height: 2.5rem;
    border-radius: .5rem;
    overflow: hidden;
}

.search-box{
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border: none;
    padding: 1rem;
    outline: none;
    font-size: .9rem;
}

.search-btn{
    position: absolute;
    border: none;
    right: 0;
    width: 3rem;
    height: 100%;
    background: var(--primary-color);
    text-align: center;
    cursor: pointer;
    color: var(--secondary-text-color);
}

.cart{
    width: 2.5rem;
    height: 2.5rem;
    color: var(--secondary-text-color);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: .5s;
}

.cart:hover {
    background: var(--alpha-secondary-color);
}

So after doing all this, the navbar should look like this.

Okay now let's come to the main part. The hero section.

Hero Section

In our hero section, we have 2 divs one for hero content which is a group of texts and action buttons and the other one is a group of images and graphics to make the hero section more appealing. So let's create the group of texts first.

Inside header but outside nav add main tag and this will our hero section.



<header>

       <nav class="navbar">... Navbar HTML</nav>

        <!-- hero section -->

        <main id="hero-section">

            <!-- hero content -->
            <div class="hero-content">
                <h1 class="hero-heading">Eat the best</h1>
                <p class="hero-line">Explore and understand the culture more by tasting the amazing dishes of that culture</p>

                <div class="search location">
                    <input type="text" class="search-box" placeholder="Search Restaurants, Cuisine..... ">
                    <button class="search-btn locate-btn"><i class="fa-solid fa-location-crosshairs"></i></button>
                </div>

                <div class="hero-action-btn-container">
                    <button class="btn">Order Food</button>
                    <p class="or">or</p>
                    <button class="btn transparent">Make reservation</button>
                </div>
            </div>

        </main>
</header>

Inside .hero-content element I have a h1 for heading, p for sub heading and then I have a .search.location element which is same as .search from the navbar I just added .location class to it so that I can add custom styles to this search box using .location class, and at last I have a div which contains 2 action buttons.

So now, let's style it and its really simple.



/* hero section */

#hero-section{
    min-height: 100vh;
    padding: 0 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--accent-color);
}

.hero-content{
    width: 40%;
}

.hero-heading{
    font-size: 4rem;
    line-height: 5rem;
    font-weight: 700;
    color: var(--secondary-text-color);
}

.hero-line{
    line-height: 2rem;
    opacity: 0.75;
    margin-top: 2rem;
}

.search.location{
    width: 100%;
    height: 3.5rem;
    border-radius: .2rem;
    margin: 2.5rem 0;
}

.locate-btn{
    font-size: 1.2rem;
    width: 4rem;
    transition: .5s;
}

.search.location .search-box{
    padding: 1rem 1.5rem;
}

.hero-action-btn-container{
    display: flex;
    align-items: center;
    gap: 2rem;
}

.btn{
    padding: 1rem 1.5rem;
    border: none;
    border-radius: .3rem;
    font-size: 1rem;
    color: var(--light-text-color);
    background: var(--secondary-color);
    text-transform: capitalize;
    cursor: pointer;
}

.btn.transparent{
    background: transparent;
    border: .1rem solid var(--secondary-color);
    color: var(--secondary-text-color);
}

.hero-action-btn-container .or{
    color: var(--secondary-text-color);
}

After adding above CSS, you should see something like this.

Now, we will create the images groups of hero section. So let's first make 3 circles where we will place images on top later.



<main id="hero-section">

        <!-- previous code -->
        <!-- hero image container -->

        <div class="hero-img-container">
            <div class="backgrond-ele">
                <div class="ellipse"></div>
                <div class="ellipse"></div>
                <div class="ellipse"></div>
            </div>
        </div>      

</main>

.hero-img-container is a container which will contain all the images, review box and everything. .background-ele contains 3 divs of ellipse class. and we will use these 3 divs to create 3 circles of on top of each other with different width and rotation value. So add CSS now.



.hero-img-container{
    min-width: 30rem;
    min-height: 30rem;
    position: relative;
    transform: scale(0.9) translateY(1rem);
}

.background-ele{
    width: 100%;
    min-height: 100%;
    position: absolute;
}

.ellipse{
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    border: .01rem solid var(--secondary-color);
    transform-origin: center;
}

.ellipse:nth-child(1){
    width: 80%;
    transform: translate(-50%, -50%) rotate(20deg);
}

.ellipse:nth-child(2){
    width: 90%;
    transform: translate(-50%, -50%) rotate(40deg);
}

.ellipse:nth-child(3){
    width: 90%;
    transform: translate(-50%, -50%) rotate(-20deg);
}

And the above code will simply make all the .ellipse on top of each other with different width and rotation. :nth-child is a CSS selector which lets you select individual element of same class or tag and using this I am able to select .ellipse individually to give them different styles.

Now we want to add 3 food images on top this .background-ele for that, in HTML add the code inside #hero-section



<main id="hero-section">

         <!-- previous code -->

         <div class="forground-elements">
                <img src="img/hero-biryani.png" class="hero-img" alt="">
                <img src="img/hero-burger.png" class="hero-img" alt="">
                <img src="img/hero-pizza.png" class="hero-img" alt="">
         </div>

</main>

Now add styles.



.hero-img{
    position: absolute;
    width: 10rem;
    border-radius: 100%;
    box-shadow:  0 1rem 1rem var(--shadow);
}

.hero-img:nth-child(1){
    width: 20rem;
    left: -8%;
    top: -15%;
}

.hero-img:nth-child(2){
    width: 15rem;
    right: -15%;
    top: 15%;
}

.hero-img:nth-child(3){
    width: 15rem;
    left: 35%;
    bottom: -20%;
}

In above code I have given all the images position to absolute so that I can use top left bottom right properties to place the image anywhere we want. Now the problem using absolute is that it takes all the spaces then according to its relative parent so this is very important that you make sure that you have given relative position to .hero-img-container otherwise these absolute positioned elements won't consider .hero-img-container as a relative parent and to make sure that image stays on its place irrespective of screen size add a fixed width and height to .hero-img-container.

So you should see something like this now.

Now the last thing we want is a review box over the food images. For that add this HTML after inside .forground-elements.



<!-- hero section -->

<main id="hero-section">

    <!-- hero image container -->

    <div class="hero-img-container">
        <!-- previous code -->
        <div class="forground-elements">
            <!-- previouse code -->

            <div class="review-box">
                <div class="reviewer-info">
                    <img src="img/user-1.png" class="reviewer-img" alt="">

                    <div class="reviewer">
                        <div class="reviewer-rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star-half-stroke"></i>
                            <p>4.5</p>
                        </div>
                        <h2 class="reviewer-name">Arik</h2>
                    </div>
                </div>
                <div class="review-body">
                    <i class="fa-solid fa-quote-left"></i>
                    <p class="review">The restaurant was good. Staff was very welcoming and the food.... well no words for it. Chef was amazing and the view of sky from the top deck was fabulous.</p>
                </div>
            </div>
        </div>
    </div>
</main>

add add these styles.



.review-box{
    position: absolute;
    width: 30rem;
    padding: 1rem 2rem;
    bottom: 5%;
    left: -25%;
    border-radius: .5rem;
    background: var(--alpha-primary-color);
    backdrop-filter: blur(.5rem);
}

.reviewer-info{
    display: flex;
    gap: 1rem;
}

.reviewer-img{
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
}

.reviewer-rating{
    display: flex;
    gap: .1rem;
    font-size: .7rem;
    align-items: center;
}

.reviewer-rating i{
    color: var(--rating-color);
}

.reviewer-name{
    font-weight: 400;
    font-size: 1.2rem;
    margin-top: .75rem;
}

.review-body{
    display: flex;
    gap: 1rem;
    margin-top: .5rem;
    padding: 1rem 0;
}

.review-body i{
    font-size: 1.4rem;
    color: var(--secondary-text-color);
}

.review{
    line-height: 1.75rem;
}

Your hero section should look like this after applying above CSS styles.

Now the fun part, which will make this hero section next level. We need to add some animations. To add animations I will use AOS library, this library let's you add animation to elements on scroll. So to use it. We first need to import the library in our HTML file. So add these CDNS in their respective places.



<head>

    <!-- add this CDN before style.css link -->
    <!-- AOS CDN -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

</head>
<body>

    <!-- body HTML -->

    <!-- add this CDN before app.js import -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

</body>

So this will import the AOS library, now we need to initialise it in order to use it and we can do that by adding AOS.init() in our app.js



AOS.init();

AOS.init() also takes some parameters to change the default values of AOS library but we don't need that for now.

So the way we can add animation in HTML using this library is by adding data-aos attribute to the element. data-aos attributes is provided by AOS library and in value of data-aos you can give animation name either defaul animation or your custom animation name. So we can add this data-aos .hero-img-container HTML like this.



<!-- hero image container -->

<div class="hero-img-container">
    <div class="backgrond-ele" data-aos="fade-in" data-aos-delay="700">
        <div class="ellipse"></div>
        <div class="ellipse"></div>
        <div class="ellipse"></div>
    </div>
    <div class="forground-elements">
        <img src="img/hero-biryani.png" data-aos="zoom-in" data-aos-delay="0" class="hero-img" alt="">
        <img src="img/hero-burger.png" data-aos="zoom-in" data-aos-delay="150" class="hero-img" alt="">
        <img src="img/hero-pizza.png" data-aos="zoom-in" data-aos-delay="300" class="hero-img" alt="">

        <div class="review-box" data-aos="zoom-in" data-aos-delay="450">
            <div class="reviewer-info"  data-aos="zoom-out" data-aos-delay="600">
                <img src="img/user-1.png" class="reviewer-img" alt="">

                <div class="reviewer">
                    <div class="reviewer-rating">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star-half-stroke"></i>
                        <p>4.5</p>
                    </div>
                    <h2 class="reviewer-name">Arik</h2>
                </div>
            </div>
            <div class="review-body" data-aos="zoom-out" data-aos-delay="650">
                <i class="fa-solid fa-quote-left"></i>
                <p class="review">The restaurant was good. Staff was very welcoming and the food.... well no words for it. Chef was amazing and the view of sky from the top deck was fabulous.</p>
            </div>
        </div>
    </div>
</div>

In above code you can see, I have given data-aos to those element whom I want to add animations. But you can also see data-aos-delay attribute. Well this attribute sets the animation delay in ms. So by adding this I can add delay in the animation trigger and every element won't appear at once.

So by doing this, you should see the animation.

But if you something like this. Then we need to add another CSS. Well this data-aos adds transform properties on the element and since we are using transform to rotate the .ellipse already, data-aos is just re-writing its transform therefore creating this sort of effect. To fix this, we just need to tell CSS that don't overwrite .ellipse CSS like this.



[data-aos="fade-in"].aos-animate {
    transform: none !important;
}

So the above CSS is selecting the element through attribute data-aos="fade-in" which is the attribute we have on .background-ele then .aos-animate is a AOS class which AOS adds to the element whenever the element is in scrollable zone means from where user can see the element. So instead of just selecting .backgroud.ele and setting its transform to none. Select like this in order to get the most specificity.

This will fix the animation issue and you should see something like this.

So, that's it. Great work guys. We are done with the hero section.

I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Articles you may find Useful

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

Source Code
Thanks for reading

Here is how I made a strong password checker using Javascript.

Modern Web — Mon, 19 Jun 2023 12:58:22 +0000

In this article we'll see how I made a simple password checker which checks whether the password is strong or not. You might have seen this type of checker or validation in most of modern websites. So let's see how I made it.

In the above preview, you can see what exactly we will make. On the page there is a password field and you can type your password simply there. But when you focus it, a validation checklist will popup which tells what your password should include. As soon as your start typing the checklist will check the condition whatever gets satisfied. A cherry on top, there is eye icon on right where you can click to see password. Below you can find a Video tutorial where I am making this project step by step.

Video Tutorial

If you are seeing it then consider subscribing the channel as well. Okay coming to this blog. Let's see how to make it.

How everything is working ?

So if you just want a quick explanation of how everything is working, here it is. I am using CSS :focus selector to show/hide the checklist box and under the hood I am using regex in Javascript to validate the password everytime, there is a keyup event triggers using regex's test() method. And about the eye icon, its basically toggling the password input type to text from password to text on click event.

Let's code then.

Step 1 - Write basic structure.

So let's start with the basic HTML structure. So create an index.html file along with style.css and app.js file. Then just add a basic HTML structure boiler code and link the CSS and JS file. Something like this 👇



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strong Password Validation</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <script src="app.js"></script>

</body>
</html>

In the above code, I have Google Fonts - Poppins as well as FontAwesome CDN.



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #d34970;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

So once you have a basic structure done. Let's move on the next step.

Step 2 - Create the Password Input.

To create the password input, first let's create a div inside <body> to wrap the input of type=password as well as the eye icon and add class names to them so we can select style them in CSS files.



<body>

    <div class="password-input-box">

        <input type="password" placeholder="Password" class="password-input">
        <i class="fa-solid fa-eye show-password"></i>

    </div>

</body>



.password-input-box{
    position: relative;
    width: 300px;
    height: 40px;
}

.password-input{
    width: 100%;
    height: 100%;
    background: #fff;
    border: none;
    padding: 5px 15px;
    outline: none;
    border-radius: 5px;
    color: #d34970;
    padding-right: 45px;
}

.password-input::placeholder{
    color: #d34970;
}

.password-input:focus{
    box-shadow: 0 0 0 3px #d34970,
                0 0 0 6px #4fe222;
}

.show-password{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #92203f;
}

Output

Step 3 - Create the validation checklist.

So since we have the password input now, we need the validation checklist box as well it order to show the user in frontend what conditions passwords should match. So inside the div with class name password-input-box make another div which will be the box of checklist and inside it use ul to create an unordered list to create the checkpoints. Something like this 👇



<div class="password-checklist">
    <h3 class="checklist-title">Password should be</h3>

    <ul class="checklist">
        <li class="list-item">At least 8 character long</li>
        <li class="list-item">At least 1 number</li>
        <li class="list-item">At least 1 lowercase letter</li>
        <li class="list-item">At least 1 uppercase letter</li>
        <li class="list-item">At least 1 special character</li>
    </ul>
</div>



 .password-checklist{
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    padding: 20px 30px;
    background: #ef547f;
    border-radius: 5px;
}

.checklist-title{
    font-size: 15px;
    color: #922037;
    margin-bottom: 10px;
}

.checklist{
    list-style: none;
}

.list-item{
    padding-left: 30px;
    color: #fff;
    font-size: 14px;
}

.list-item::before{
    content: '\f00d';
    font-family: FontAwesome;
    display: inline-block;
    margin: 8px 0;
    margin-left: -30px;
    width: 20px;
    font-size: 12px;
}

.list-item.checked{
    opacity: 0.5;
}

.list-item.checked::before{
    content: '\f00c';
    color: #922037;
}

Output

So let's write Javascript to make everything functional.

Step 4 - Show/hide password.

The first thing we can do in JS is, toggling our password's input type from password to text to back to password. For that we first have to select the icon as well as the input in JS. Afterwards we can add click event to icon using addEventListener method and in callback, we can use if and else to check whats password type currently is and what we have to change.

You can understand this in detail from the code below.



// show password toggler

let showPasswordBtn = document.querySelector('.show-password');
let passwordInp = document.querySelector('.password-input');

showPasswordBtn.addEventListener('click', () => {

    // toggle icon 

    // font awesome class for eye icon
    showPasswordBtn.classList.toggle('fa-eye'); 

    // font awesome class for slashed eye icon
    showPasswordBtn.classList.toggle('fa-eye-slash');

    // ternary operator a shorthand for if and else to change the type of password input
    passwordInp.type = passwordInp.type === 'password' ? 'text' : 'password';

})

Step 5 - Adding the validation

So we are at the end on the main function of this project. So let's see how I did it.

So first we have to hide the checklist box and only show it when the password input get's focused and we can do that like this.



.password-checklist{
    ... 
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: .5s ease;
}

.password-input:focus ~ .password-checklist{
    opacity: 1;
    transform: translateY(0);
}

So since the box is only visible when the password input is in focus. Now write JS.



// string password validation

let passwordChecklist = document.querySelectorAll('.list-item');

let validationRegex = [
    { regex: /.{8,}/ }, // min 8 letters,
    { regex: /[0-9]/ }, // numbers from 0 - 9
    { regex: /[a-z]/ }, // letters from a - z (lowercase)
    { regex: /[A-Z]/}, // letters from A-Z (uppercase),
    { regex: /[^A-Za-z0-9]/} // special characters
]

passwordInp.addEventListener('keyup', () => {
    validationRegex.forEach((item, i) => {

        let isValid = item.regex.test(passwordInp.value);

        if(isValid) {
            passwordChecklist[i].classList.add('checked');
        } else{
            passwordChecklist[i].classList.remove('checked');
        }

    })
})

If you read above JS code, you will see validationRegex variable, that variable is an array of regex expressions for each conditions we want for the password. So inside the array, we have objects with key regex and the value of that key is the expression. One thing you have to keep in mind while making this array is that you make sure that the expression's index number is same as the <li> condition in HTML. Which is, if I have <li> for 8 characters long in HTML file the the first item in the array should be the regex expression for 8 characters, otherwise you will see in UI that wrong condition is getting checked.

Anyway coming again to the javascript, once we have the array of regex. I am just looping through it whenever there is a keyup event happening on passwordInp. And inside it we are selecting each regex expression and using test() method to validate the password value and storing the boolean value inside isValid variable.

Then at last I am using If and else to add or remove the checked class from <li> tag.

So after all the steps, you will have a fully working password validation checker at the end. I hope like this article and found this helpful. Thanks for reading this article. If you any suggestion or any doubts or anything to share feel free to leave it in comments. If you are interested in learning how to make some fully working websites you can checkout my YouTube channel.

Responsive Travel website using HTML, CSS and Javascript

Modern Web — Thu, 16 Mar 2023 12:23:53 +0000

In this article, you will learn to create this awesome fully responsive travel website using only HTML, CSS and Javascript. It is fully responsive and has animation on scroll, smooth scrolling, tile animated background images slider and a lot of stuff.

You can download the code.

So without wasting time let's see how to code this.

Video Tutorial

Video tutorial if you like to watch a video and follow along.

Let's go

So to start coding or following this article. First you need to setup the folder.

For this project, we will use Google Fonts , AOS library for animations and Fontawesome for icons.

So you can either add CDNs manually or you can download the start files from this repo

Repo also includes all the images

So I hope you have the starting files now. Let's start with our navbar first.

Navbar

To create navbar we need to make a header and that header will contain the navbar, as well as the main section.

index.html



<header>
    <nav class="navbar">
        <ul class="links-container">
            <li class="link-item"><a href="#travel">Travel</a></li>
            <li class="link-item"><a href="#explore-section">Explore</a></li>
            <li class="link-item"><a href="#hero-section"><img src="img/logo.png" class="logo" alt=""></a></li>
            <li class="link-item"><a href="#services">Services</a></li>
            <li class="link-item"><a href="#booknow">Book Now</a></li>
        </ul>
    </nav>
</header>

The value of href of links are id of the sections that we will create next. Giving ids as a link will take you to that section after clicking on the link.

But to add a smooth scrolling effect to the navbar links. Make sure you give scroll-behaviour to the html.

style.css



html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Poppins', sans-serif;
    background: #161813;
    overflow-x: hidden;
}

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100px;
    padding: 20px 10vw;
}

.navbar.bg{
    background: #161813;
}

.links-container{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

.logo{
    height: 50px;
    margin-top: 10px;
}

.link-item{
    margin: 0 20px;
    transition: .5s;
}

.link-item a{
    color: #fff;
    text-decoration: none;
    padding: 20px;
}

.link-item:hover{
    transform: scale(1.2);
}

Output

Hero Section

Now to create hero section we will use main tag inside header after nav.

index.html



<main class="hero-section" id="hero-section">

    <div class="hero-section-content" data-aos="fade-up">
        <h1 class="hero-section-title">wonderful experience</h1>
        <p class="hero-section-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

    <!-- scroll down img -->
    <img src="img/down arrow.png" class="scroll-down-icon" alt="scroll down indicator">
</main>

If you notice, i used data-aos attribute in code. This attribute is custom provided by AOS library to add sroll animations. In this case, I am adding fade-up effect. To make it work though. you have to put AOS.init() in app.js along with the CDNs provided in the github repo.

Make sure you download the repo to start

style.css



.hero-section{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.hero-section-title{
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 80px;
    text-align: center;
    text-transform: capitalize; 
}

.hero-section-sub-heading{
    text-align: center;
    text-transform: capitalize;
    margin: 20px 0;
    font-size: 20px;
}

.scroll-down-icon{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    animation: down ease 1s infinite;
}

@keyframes down{
    from { bottom: 10% }
    to { bottom: 8% }
}

Output

Now the best part of this whole website, the background image slider.

Image Slider

To create Image Slider, first we will create a img below the content and then above img we will create 6 divs of background black in a grid. Those divs will cover whole image when needed. So basically, we will show those divs and hide them and in between we will change the background image using JS.

For this make .background div inside main before hero-section-content

index.html



<div class="background">
    <img src="img/img1.png" class="background-image" alt="hero-section image">

    <!-- grid -->
    <div class="grid-slider">
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
        <div class="grid-item hide"></div>
    </div>

</div>

And give some styles.



.background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.background::before, .background::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
}

.background::before{
    top: 0;
    left: 0;
    background: var(--gradient-top);
}

.background::after{
    bottom: 0;
    background: var(--gradient-bottom);
}

.grid-slider{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.grid-item{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 1;
    transition: .5s;
}

.grid-item.hide{
    opacity: 0;
}

If you see above code, I used ::before and ::after to create some linear gradients over the image to create the depth. The variables I used are in the CSS file of repo.

Output

Now to make this slider working. Just add this simple JS code inside app.js file



//header

// slider images array

const sliderImgs = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png", "img6.png"];
let sliderImage = document.querySelector('.background-image');
let sliderGrids = [...document.querySelectorAll('.grid-item')];

let currentImage = 0;

setInterval(() => {
    changeSliderImage();
}, 5000);

const changeSliderImage = () => {
    sliderGrids.map((gridItem, index) => {
        setTimeout(() => {
            gridItem.classList.remove('hide');

            setTimeout(() => {

                if(index == sliderGrids.length - 1){
                    if(currentImage >= sliderImgs.length - 1){
                        currentImage = 0;
                    } else{
                        currentImage++;
                    }

                    sliderImage.src = `img/${sliderImgs[currentImage]}`;

                    sliderGrids.map((item, i) => {
                        setTimeout(() => {
                            item.classList.add('hide')
                        }, i * 100);
                    })

                }

            }, 100);

        }, index * 100);
    })
}

After adding this, the slider will work. In above code we are basically using timeout to hide and show the 6 divs and in between changing the src of the image.

Output

Explore Section

To create next section which is "explore section" Its actually simple. Just add this in index.html file.

index.html



<section class="explore-section" id="explore-section">
    <h1 class="section-title" data-aos="fade-up">Explore the world</h1>
    <p class="section-para" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum
        sem augue, vitae bibendum nibh tempor nec. Aenean quis commodo lectus, in rhoncus lorem</p>

    <!-- grid -->

    <div class="tours-container">
        <div class="tour-card" data-aos="fade-up">
            <img src="img/australia.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Australia</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/maldives.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Maldives</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/paris.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Paris</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/dubai.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Dubai</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/india.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">India</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>

        <div class="tour-card" data-aos="fade-up">
            <img src="img/italy.png" class="tour-img" alt="tour-image">
            <div class="tour-body">
                <h3 class="tour-name">Italy</h3>
                <p class="tour-action">View city</p>
            </div>
        </div>
    </div>
</section>

style.css



/* explore section */

.explore-section{
    position: relative;
    width: 100%;
    padding: 80px 10vw;
    color: #fff;
}

.section-title{
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
}

.section-para{
    width: 50%;
    min-width: 300px;
    display: block;
    margin: 30px auto;
    text-align: center;
    line-height: 25px;
    opacity: 0.6;
}

.tours-container{
    position: relative;
    width: 100%;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
    margin-top: 100px;
}

.tour-card{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    box-shadow: 0;
    overflow: hidden;
    padding: 10px;
    display: flex;
    align-items: end;
}

.tour-card:nth-child(2){
    grid-row: span 2;
}

.tour-card:last-child{
    grid-column: span 2;
}

.tour-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
    z-index: -1;
}

.tour-card:hover .tour-img{
    opacity: 0.8;
    transform: scale(1.1);
}

.tour-name{
    font-weight: 300;
}

.tour-action{
    margin-left: 20px;
    font-size: 14px;
    position: relative;
}

.tour-action::before{
    content: '';
    position: absolute;
    left: -20px;
    top: 2px;
    background: url('img/pin.png');
    width: 15px;
    height: 15px;
    background-size: contain;
}

Output

If you see your output, you'll notice that the navbar and explore sections are overlapping and navbar is not fully readable. To fix that, we need to add background to the navbar after a certain amount of scroll using JS.

app.js



// nav

const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
    if(scrollY >= 188){
        navbar.classList.add('bg');
    } else{
        navbar.classList.remove('bg')
    }
})

and after adding this, you'll see after 188 of scrollY navbar changing its background color.

Service Section

In this section, for icons I am using fontawesome, so make sure you have its CDN to be able to see the icons in your code.

index.html



<section class="services-section" id="services">
    <h1 class="section-title" data-aos="fade-up">Why Us ?</h1>
    <p class="section-para" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

    <!-- services grid -->
    <div class="serives-grid">
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-earth-americas card-icon"></i>
            <p class="service-text">We are based all over the world</p>
        </div>
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-coins card-icon"></i>
            <p class="service-text">Travel the World,Without thinking</p>
        </div>
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-book-open card-icon"></i>
            <p class="service-text">Get to know about local cultures</p>
        </div>
        <div class="service-card" data-aos="fade-up">
            <div class="circle"></div>
            <i class="fa-solid fa-person-snowboarding card-icon"></i>
            <p class="service-text">Have you best experience</p>
        </div>
    </div>

    <div class="bg-circle"></div>

    <div class="travel-grid" id="travel">
        <img src="img/img1.png" data-aos="fade-up" alt="">
        <img src="img/img2.png" data-aos="fade-up" alt="">
        <img src="img/img3.png" data-aos="fade-up" alt="">
        <img src="img/img4.png" data-aos="fade-up" alt="">
        <img src="img/img5.png" data-aos="fade-up" alt="">
        <img src="img/img6.png" data-aos="fade-up" alt="">
        <img src="img/australia.png" data-aos="fade-up" alt="">
        <img src="img/dubai.png" data-aos="fade-up" alt="">
        <img src="img/maldives.png" data-aos="fade-up" alt="">
        <img src="img/paris.png" data-aos="fade-up" alt="">
        <img src="img/india.png" data-aos="fade-up" alt="">
        <img src="img/italy.png" data-aos="fade-up" alt="">
    </div>

</section>

style.css



/* services section */

.services-section{
    color: #fff;
    padding: 80px 10vw;
}

.serives-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.service-card{
    margin-top: 100px;
    width: 100%;
    height: 250px;
    border-radius: 20px;
    border: 1px solid #2D2D2D;
    background: #161813;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
    position: relative;
}

.card-icon{
    text-align: center;
    font-size: 60px;
    z-index: 1;
}

.service-text{
    text-align: center;
    padding: 0 20px;
    z-index: 1;
}

.circle{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    clip-path: circle(0% at 100% 100%);
    transition: .5s;
}

.service-card:nth-child(1) .circle{
    background: url(img/img5.png);
    background-size: cover;
}

.service-card:nth-child(2) .circle{
    background: url(img/img2.png);
    background-size: cover;
}

.service-card:nth-child(3) .circle{
    background: url(img/img6.png);
    background-size: cover;
}

.service-card:nth-child(4) .circle{
    background: url(img/img4.png);
    background-size: cover;
}

.service-card:hover .circle{
    clip-path: circle(141.4% at 100% 100%);
}

.travel-grid{
    width: 100%;
    columns: 3;
    column-gap: 20px;
    margin-top: 200px;
}

.travel-grid img{
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 10px;
}

.bg-circle{
    z-index: -1;
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--sphere-gradient-one);
    right: -250px;
}

Output

Book Section and footer

And the last but not least, book now and footer.

index.html



<!-- contact section -->
<section class="book-section" id="booknow">
    <div class="book-content" data-aos="fade-up">
        <h1 class="book-now-title">Book your travel today</h1>
        <p class="book-now-text">Give yourself and your family a peacfull and wonderful vacation this holiday</p>

        <button class="book-now">book now</button>
    </div>
    <div class="bg-circle-2"></div>
    <img src="img/book.png" data-aos="fade-up" class="book-now-img" alt="">
</section>

<!-- footer -->
<footer class="footer">
    <img src="img/logo.png" class="footer-logo" alt="">
    <div class="footer-text">
        <p>Travel the world, on this holiday</p>
        <p>Email - support@travel.com</p>
        <p>Phone - 99 88 776655, 99 88 776644</p>
    </div>
    <p class="copyright-line">This design is a concept design. Made by Modern Web ❤️</p>
</footer>

style.css



/* book now section */

.book-section{
    position: relative;
    display: flex;
    padding: 0 10vw;
    align-items: center;
    width: 100%;
    height: 100vh;
    gap: 30px;
}

.book-now-img{
    position: absolute;
    width: 50%;
    right: 0;
}

.book-content{
    width: 50%;
    color: #fff;
}

.book-now-title{
    font-size: 50px;
    font-weight: 300;
    width: 300px;
}

.book-now-text{
    width: 300px;
    opacity: 0.5;
    line-height: 25px;
    margin: 30px 0;
}

.book-now{
    position: relative;
    padding: 10px 20px;
    outline: none;
    border: none;
    background: #000;
    text-transform: capitalize;
    color: #fff;
    border-radius: 20px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 18px;
    cursor: pointer;
    overflow: hidden;
}

.book-now::before{
    content: '';
    position: absolute;
    top: -10px;
    left: -30px;
    width: 20px;
    height: 200%;
    background: #fff;
    opacity: 0.2;
    transform: rotate(5deg);
    transition: .5s;
}

.book-now:hover::before{
    left: 100%;
}

.bg-circle-2{
    z-index: -1;
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background:  var(--sphere-gradient-two);
    left: -125px;
    bottom: -100px;
}

.footer{
    width: 100%;
    padding: 100px 10vw;
    background: #000;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.footer-logo{
    width: 100px;
    opacity: 0.3;
}

.footer-text{
    color: #fff;
    opacity: 0.5;
    font-size: 20px;
}

.footer-text p{
    margin: 20px 0;
}

.copyright-line{
    width: 100%;
    background: #000;
    color: #fff;
    text-transform: capitalize;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 0;
}

Output

So we are done, now to make this website responsive. Just use media-query of CSS like this.

style.css



/* tab view */

@media screen and (max-width: 996px) {
    .link-item{
        margin: 0 10px;
    }
    .hero-section-title{
        font-size: 60px;
    }
    .tours-container{
        height: 900px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    .tour-card:last-child{
        grid-column: span 1;
    }
    .tour-card:nth-child(3){
        grid-row: span 2;
    }
    .serives-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .service-card:nth-child(3), .service-card:nth-child(4){
        margin-top: 0;
    }
    .travel-grid{
        columns: 2;
    }
    .book-now-img{
        width: 40%;
    }
    .footer-logo{
        width: 70px;
    }
    .footer-text{
        font-size: 16px;
    }
}

/* much smaller device */

@media screen and (max-width:798px){
    .navbar{
        height: auto;
    }

    .link-item{
        margin-top: 80px;
        text-align: center;
    }
    .link-item:nth-child(3){
        margin: -50px -30px 0 -30px;
    }
    .link-item a{
        padding: 10px;
        margin: auto;
        display: block;
    }

    .section-title{
        font-size: 50px;
    }
    .grid-slider{
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-section-sub-heading{
        font-size: 16px;
    }
    .section-para{
        width: 100%;
    }
    .tours-container{
        height: 1200px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
    .tour-card:nth-child(2){
        grid-row: auto;
    }
    .tour-card:last-child{
        grid-column: span 1;
    }
    .tour-card:nth-child(3){
        grid-row: span 1;
    }
    .serives-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .service-card:nth-child(2){
        margin-top: 0;
    }
    .travel-grid{
        columns: 1;
    }
    .book-section{
        height: auto;
        padding: 80px 10vw;
    }
    .bg-circle{
        display: none;
    }
    .bg-circle-2{
        z-index: 2;
    }
    .book-now-img{
        width: 100%;
        opacity: 0.3 !important;
    }
    .book-content{
        width: 100%;
        z-index: 2;
        text-align: center;
    }
    .book-now-title, .book-now-text{
        width: 100%;
    }
}

And the website is done. Its fully responsive now too.

So we are done, we made this awesome responsive travel website. If you stuck anywhere or run into some error, feel free to leave a comment or DM me on instagram.

I hope you like this article, you like the website design and the tutorial. If this helped you in someway make sure you follow me on my instagram and youtube.

You can checkout my youtube channel, I create lots of content like this including fullstack ecommerce website and fullstack blogging website.

You can download the code. Thanks for reading 👋

HTML 101: Adding Images and Videos to Your Webpages

Modern Web — Sun, 15 Jan 2023 12:11:19 +0000

How to add image or video in a webpage. If you have these questions on your HTML learning journey. Today is time, you can clear this things.

If you want to learn whole HTML, you can watch this video tutorial. This blog is a part of it.

These things are easy but as a complete beginner in HTML. You don’t know, how to add image or video. You can continue reading this blog.

Image in HTML

So, in today’s world. We see lots of images over the internet from Instagram to Facebook to any website, even this dev to website, you can see the banner of the blog. But how we add images in pages using HTML.

Its pretty simple. In HTML, you know use use different types of tags ignorer create the elements and all the tags you see in HTML mostly has <tag> ( opening tag ) and a </tag> ( closing tag ).

But for image, in HTML we have <img> tag and this doesn’t have any closing tag. Why ??

Because whatever tag you see with closing tag. Have some written text content inside.

But in case of images. We don’t want any text info, right ? That’s why, the image tag is a self closing tag.

And this is how, you use it.


<img src=“image.png” alt=“An alternate text if image file not found”>

So this is how you can add image in HTML. So let’s about about its 2 attributes.

src - “ src “ mean source. This attribute specify the image file path.
alt - it is use to add text, if the image file not found or can’t be load for some reason. Then “alt” text will show up.

And this is how you add images in HTML, But how can you add video. Its kind of similar. There are 2 ways by which you can add video in the site.

Video in HTML

First way is that you can use <video> tag and this is similar to <img> tag. Its a self closing tag.

<video src=“video.mp4” controls autoplay muted loop>

This is how you add video. But there you can see some new attribute, which is for video element.

controls - this shows the video controls, so you can play, pause and much more.
autoplay - It autoplay the video after the page loads.

But in chrome, you can’t simply make any video autoplay. Its against chrome policy. So to make the video autoplay. You have to mute it first.

muted - and to mute the video. This attribute helps.
loop - It used to play video on loop.

So these are some common attributes of video element that you can use.

The second way, by which you can add video is actually same as this.


<video controls autoplay loop muted>

    <source src=“video.mp4” type=“video/mp4”>
    <source src=“video.mkv” type=“video/mkv”>

    A text if no video is found.

</video>

In this method, you close the <video> tag to create some content inside it. This way you can add multiple video formats using <source> tag. By adding multiple sources, you can be sure that at least one file will load.

But in case if no video found. Then, the text at the end will show up.

So this is how, you add videos and images in HTML. There are lots of other stuffs too that you can do with HTML. If you are a beginner or just want to refresh the HTML concept. Well you can watch my HTML Tutorial for complete beginners

Thanks for reading this blog. If you find this helpful, you can like this post and subscribe my YouTube channel for support. In case you have any doubt, well you can ask me in the comments. I will be happy to answer.

Have a nice day 😎

Build Fullstack Shopping/online store Website 🔥 [ Video Tutorials ]

Modern Web — Mon, 05 Sep 2022 11:04:03 +0000

Hello there, Today in this blog we'll see some of my tutorials I made in past on e-commerce website. E-commerce website or online store can be a very good project in web development cuz it covers a lot of topics of web development and deal with frontend and backend.

Well in past when I thought of making this site, I saw in youtube there are lots of tutorial on E-commerce website but those were only the frontend part, they just made the HTML, CSS part and that's it.

That's why, I created a fullstack tutorial on shopping / e-commerce / online store website. Which covers frontend as well as backend. It has lots of features.

✅ Home page
✅ Dynamic Product Page
✅ Working Search Page
✅ Working Cart system
✅ Login / Signup options for consumers
✅ A dashboard for seller where he can add/edit/delete products
✅ Dedicated add product page to add the data to database
✅ Checkout page
✅ Stripe Payment Gateway too, to make payment easily.
✅ Buyer can add review for products
✅ Much more....

Oh god! isn't its lot of features.

If you ask for demo well, I can't use codepen as it is for frontend only, so unfortunately there is no demo I can give in this blog but you can watch videos below, to see the website in full features.

Videos

This is the 1st video of 5. The tutorial is in 5 parts, covering all the features.

01

02

03

04

05

This was my latest Ecom series on YouTube, If you want more updated versions Ecom site with different features and look. Make sure to follow me on my YouTube and tell me in comment.

Wait, My latest ecom series ?? Do I have more than 1 ecom series. Well yes, I do have a lot of fullstack projects on my channel.

The E-commerce 1.0

This is also a 1st video of the playlist. This version of mine was kind of a success for me, as is the only video over 100K+ views on my channel. (Yeah it crossed 100K+ view if you think this or any other of my video deserves more, just show the support by subscribing my channel 🙏)

Okay, I hope you found this blog helpful. I just want to share this (in hope of getting views 😎). Along with that I do a lot of fun website tutorials on my channel. Make sure to give it a visit. I assure you, you want regret 😉.

So with that, Thanks for reading and giving your valuable time.

By the way if you are interested in the Source code of the E-commerce Site.

Responsive Portfolio with HTML, CSS and JS only

Modern Web — Sun, 04 Sep 2022 14:36:03 +0000

Hello 👋, Hope you all are doing great. Well in this blog you are going to make an awesome modern looking responsive portfolio website which you can proudly you to showcase your projects to your clients. So without wasting time let see what we gonna do today.

So basically in this portfolio we have a one page layout which has home page, about page, project section and contact section. Some of its features are

✅ Modern Looking
✅ Responsive to all screens
✅ TimeLine layout in about section
✅ Interactive Project section with awesome popup
✅ Smooth Scrolling and custom selection in website

Video Tutorial

If you guys interested in watching video tutorial, you can find it below.

If you can just subscribe my channel and like the video it will motivate me to make more awesome contents like this 😊

You can download the source code.

Lets Code

So I guess without wasting more let see how to code the website.

Folder Structure

You can download the images folder from here. You can see we have app.js, index.html & style.css files. But I also have project.js file. This file basically contains an array "projectData" which contains more than 1 "JS Objects" and those objects are nothing but the project card data itself. So basically I have this file here so that we can easily add projects to our site by editing the "Array" instead of editing the HTML file and figuring out why CSS styles are not working on some cards. It will make the life easy.

Project.js



let projectData = [
    {
        image: 'img/project-1.png',
        name: 'project one',
        detail: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, augue quis rutrum auctor, erat est mattis velit, vel luctus est nisl',
        github: '#',
        live: '#',
        tags: '#javascript, #fullstack, #css'
    },
    more objects like this 👆
]

So let's open index.html and style.css file to start with the site. Go ahead and write the basic HTML5 Template, give it some title and link the CSS files to it too. Also you can link Roboto google font in your html file. Once done with that, let's create the navbar.

So For navbar, code this HTML.



<nav class="navbar">
    <h1 class="logo">Modern Web</h1>
    <ul class="nav-links-container">
        <li class="nav-link"><a href="#home-section" class="links active">home</a></li>
        <li class="nav-link"><a href="#project-section" class="links">projects</a></li>
        <li class="nav-link"><a href="#about-section" class="links">about</a></li>
        <li class="nav-link"><a href="#contact-section" class="links">contact</a></li>
    </ul>
</nav>

The above HTML should make the navbar, Now we just need to style it.



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: auto;
    width: 100%;
    position: relative;
    background-color: #fcfcfc;
    font-family: 'Roboto', sans-serif;
}

/* navbar */

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 80px;
    padding: 0 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fcfcfc;
}

.logo{
    font-size: 1.5rem;
    font-weight: 300;
}

.nav-links-container{
    display: flex;
    list-style: none;
}

.links{
    text-decoration: none;
    color: #000;
    margin: 0 5px;
    padding: 10px;
    text-transform: capitalize;
    font-size: 1rem;
    opacity: 0.5;
    transition: .5s;
}

.links.active, .links:hover{
    opacity: 1;
}

After giving these styling, you should see something like this.

Great so its looking cool, now we can work on header section. So basically our header section will have some content on left side and the image of a user on right side. For that you can code HTML structure like this, after navbar.



<!-- header -->
<header class="header" id="home-section">
    <div class="content">
        <h1 class="header-heading">Hey, I am <span class="brand-name">modern <span>web</span></span></h1>
        <a href="#" class="btn">Hire</a>
    </div>

    <div class="header-img-container">
        <div class="circle"></div>
        <img src="img/header-img.png" class="header-img" alt="">
    </div>
</header>

The site is nothing with CSS so let's add that too.



/* header */

.header{
    width: 100%;
    height: 100vh;
    padding: 0 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.header-heading{
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 40px;
}

.header-heading .brand-name{
    display: block;
    text-transform: capitalize;
    font-size: 5rem;
    margin: 10px 0;
    font-weight: 400;
}

.brand-name span{
    color: #9f5264;
}

.btn{
    color: #121212;
    text-decoration: none;
    cursor: pointer;
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 10px;
    padding: 10px 30px;
    text-transform: capitalize;
    transition: .5s;
    margin-right: 20px;
}

.header-img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.header-img{
    position: absolute;
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    object-fit: cover;
}

.circle{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: #9f5264;
    margin-left: 20px;
    position: relative;
    user-select: none;
}

.circle::before{
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    bottom: 40px;
    right: 40px;
    border: 10px solid #fff;
    border-radius: 50%;
}

You should see something like this. As we are done with header section too.

Now, let's create about section. But before that, the code is pretty simple to understand but if you don't understand anything you can just go and watch the video tutorial for detail understanding or you can simply ask me in discussions, I'll answer your questions. Okay to the topic, for about section, code something like this.



<!-- about section -->

<section id="about-section">
    <h1 class="heading">about me</h1>
    <!-- about -->
    <div class="about-container">
        <div class="image-container">
            <div class="square"></div>
            <img src="img/about.png" class="about-img" alt="">
            <div class="social-links">
                <a href="#"><img src="img/github.png" class="social-img" alt=""></a>
                <a href="#"><img src="img/insta.png" class="social-img" alt=""></a>
                <a href="#"><img src="img/fb.png" class="social-img" alt=""></a>
                <a href="#"><img src="img/twitter.png" class="social-img" alt=""></a>
                <a href="#"><img src="img/linked.png" class="social-img" alt=""></a>
            </div>
        </div>

        <!-- info part -->
        <div class="info">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae voluptate a magni aut expedita, aliquid, eveniet recusandae mollitia explicabo consequatur dignissimos quidem atque quas dicta eligendi odio iusto fuga reiciendis. Labore maxime dignissimos provident saepe veniam ullam at laboriosam culpa enim. Unde laborum enim, nulla fugiat officiis atque. Ducimus consectetur voluptas praesentium rerum facere recusandae blanditiis necessitatibus repellat ullam vitae reprehenderit harum ex ipsam enim molestias voluptatibus illum repellendus animi doloribus minus, tempora atque? Excepturi vel consectetur facere consequuntur atque reprehenderit quis tempore fugit voluptates iusto aliquid ad dignissimos, alias ut, soluta similique praesentium non cum quidem laborum enim debitis.</p>
            <a href="#" class="btn">hire me</a>
            <a href="#" class="btn">download CV</a>
        </div>
    </div>
</section>

Give it styling.



/* about section */

#about-section{
    position: relative;
    padding: 100px 10vw;
}

.heading{
    text-align: center;
    text-transform: capitalize;
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 100px;
}

.about-container{
    width: 100%;
    margin: 50px 0 100px;
    display: flex;
    gap: 100px;
}

.image-container{
    width: 40%;
    position: relative;
}

.about-img{
    width: 90%;
    height: 500px;
    display: block;
    object-fit: cover;
    margin: 10px auto;
    border-radius: 10px;
}

.square{
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #9f5264;
    position: absolute;
    right: 10px;
    top: -30px;
    z-index: -1;
    transform: rotate(45deg);
}

.social-links{
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.social-img{
    width: 30px;
    height: 30px;
    opacity: .4;
    transition: .5s;
}

.social-img:hover{
    opacity: 1;
}

.info{
    width: 50%;
}

.info p{
    font-size: 1.2rem;
    line-height: 2rem;
    margin: 30px 0;
}

If you notice, we have the id of the section inside href of navbar a links. That is because so that when we click on the link it will take you to that section, but if you click on that now, you'll get not smooth scrolling effect. So to get smooth scrolling effect add this in CSS file.



html{
    scroll-behavior: smooth;
}

::selection{
    background: #9f526430;
}

The above code will make smooth scrolling and change the background colour of text on selection.

Now let's create the skills and time line, since these are also a part of about section make sure you add the HTML structures inside #about-section section.



<!-- skills part -->
<h2 class="sub-heading">skills</h2>

<div class="skills">
    <p class="skill-name">HTML</p>
    <p class="skill-name">CSS</p>
    <p class="skill-name">JavaScript</p>
    <p class="skill-name">React.js</p>
    <p class="skill-name">Node.js</p>
    <p class="skill-name">PSQL</p>
    <p class="skill-name">MongoDB</p>
    <p class="skill-name">Firebase</p>
    <p class="skill-name">Fullstack Development</p>
    <p class="skill-name">Frontend Development</p>
    <p class="skill-name">APIs</p>
    <p class="skill-name">React Native</p>
    <p class="skill-name">More</p>
</div>

<!-- time line -->

<h2 class="sub-heading">education and experiences</h2>

<div class="timeline-container">
    <div class="card-container">
        <div class="card">
            <h1 class="card-title">2000 - 2002</h1>
            <p class="card-body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, rerum obcaecati. Fuga officiis at libero dolore. Necessitatibus numquam ipsum rem?</p>
        </div>
    </div>
    +4 more cards.
</div>



/* skills */

.sub-heading{
    font-size: 2.5rem;
    font-weight: 300;
    margin: 40px 0;
    text-transform: capitalize;
}

.skills{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 60px;
}

.skill-name{
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #cecece;
    cursor: pointer;
    transition: .2s;
    border-radius: 10px;
}

.skill-name:hover{
    color: #fff;
    background-color: #9f5264;
}

/* time line */

.timeline-container{
    width: 100%;
    position: relative;
}

.card-container{
    width: 100%;
    padding: 0 10%;
    margin-top: -100px;
}

.card{
    display: block;
    width: 45%;
    min-height: 200px;
    min-width: 300px;
    background: #000;
    color: #fff;
    border: 1px solid #fcfcfc;
    border-radius: 10px;
    position: relative;
}

.card-container:nth-child(1) .card{
    margin-top: 150px;
    background-color: #fe6666;
}

.card-container:nth-child(2) .card{
    background-color: #ffa654;
}

.card-container:nth-child(3) .card{
    background-color: #18bfa1;
}

.card-container:nth-child(4) .card{
    background-color: #33c0df;
}

.card-container:nth-child(5) .card{
    background-color: #cb3bb4;
}

.card-container:nth-child(even) .card{
    margin-left: auto;
}

.card-title{
    width: 100%;
    height: 60px;
    font-weight: 300;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
}

.card-body{
    padding: 20px;
    font-size: 1.1rem;
    line-height: 1.8rem;
    opacity: 0.8;
    font-weight: 300;
}

.card-container:nth-child(odd) .card::after{
    content: '';
    position: absolute;
    height: 120%;
    right: -11%;
    top: 50%;
    border-right: 2px dashed #9f5264;
    transform: translateY(-50%);
}

.card-container .card::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    right: -7.5%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 3px solid #9f5264;
}

.card-container:nth-child(even) .card::before{
    left: -8%;
}

You should see something like this.

So great, we are done with the about section too, now let's make project section.



section id="project-section">
    <h1 class="heading">Projects</h1>

    <div class="filter">
        <button class="btn filter-btn active">all</button>
        <button class="btn filter-btn">css</button>
        <button class="btn filter-btn">javascript</button>
        <button class="btn filter-btn">fullstack</button>
    </div>

    <!--  project cards -->

    <div class="project-container">
        <div class="project-card">
            <div class="project-wrapper">
                <div class="project-thumbnail">
                    <img src="img/close.png" class="close-btn" alt="">
                    <img src="img/project-1.png" class="project-img" alt="">
                    <span class="tags">#javascript, #css, #fullstack</span>
                </div>

                <div class="project-body">
                    <h1 class="project-name">project 1</h1>
                    <p class="project-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eum et veniam eos ratione accusantium aut, accusamus deserunt quis dolores.</p>
                    <a href="#" class="btn">github</a>
                    <a href="#" class="btn">see live</a>
                </div>
            </div>
        </div>
    </div>
</section>

This section is hard to understand so I suggest you checkout the tutorial.



/* project section */

#project-section{
    position: relative;
    margin: 50px 0;
    padding: 0 10vw;
}

.filter{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.filter-btn{
    margin-right: 0;
}

.filter-btn.active{
    background: #9f5264;
    color: #fff;
}

.project-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    justify-content: center;
}

.project-card{
    width: 250px;
    height: 250px;
    overflow: hidden;
    display: flex;
    background: #ebebeb;
    transition: .5s;
    border-radius: 5px;
    position: relative;
}

.project-thumbnail{
    width: 100%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.close-btn{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 20px;
    cursor: pointer;
    display: none;
}

.project-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card.active{
    border: 1px solid #cecece;
}

.project-wrapper{
    transition: 1s;
}

.project-card.blur{
    filter: blur(5px);
}

.project-card.active .project-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: rgba(0,0,0, 0.1);
}

.project-card.active .project-thumbnail{
    width: 300px;
    height: 300px;
}

.project-card.active .close-btn{
    display: block;
}

.project-card.active .tags{
    position: absolute;
    bottom: 10px;
    z-index: 2;
    left: 10px;
    color: #fff;
    opacity: .9;
}

.project-body{
    display: none;
}

.project-card.active .project-body{
    display: block;
    width: 300px;
    height: 300px;
    background: #fff;
    border-radius: 5px;
    padding: 30px;
    border: 1px solid #cecece;
}

.project-name{
    font-size: 2rem;
    font-weight: 300;
    text-transform: capitalize;
}

.project-detail{
    font-size: 16px;
    line-height: 20px;
    margin: 20px 0;
}

.project-body .btn{
    display: inline-block;
    margin-top: 10px;
    margin-right: 5px;
    padding: 10px 20px;
}

And you'll get something like this at the end

Now its time to write JS to make the project cards from the data we have in "project.js". So just link project.js and then app.js file in the HTML file and let's start.

Inside project.js file



const createProjectCards = (data) => {
    let projectContainer = document.querySelector('.project-container');

    projectContainer.innerHTML += `
            <div class="project-card" data-tags="${data.tags}">
                <div class="project-wrapper">
                    <div class="project-thumbnail">
                        <img src="img/close.png" class="close-btn" alt="">
                        <img src="${data.image}" class="project-img" alt="">
                        <span class="tags">${data.tags}</span>
                    </div>

                    <div class="project-body">
                        <h1 class="project-name">${data.name}</h1>
                        <p class="project-detail">${data.detail}</p>
                        <a href="${data.github}" class="btn">github</a>
                        <a href="${data.live}" class="btn">see live</a>
                    </div>
                </div>
            </div>
    `;
}

projectData.forEach(data => createProjectCards(data));

So first comment the project card in HTML file and then code this in project.js file. This is basically we made a function which will select the project container elements and adding the HTML of our product card using inner.html method. We have used template literals for adding the HTML structure to the container.

And at the last line its simple forEach loop which is calling the function for each object present in the array to create the cards.

It will create the cards, so now let's add the popup and close effect along with the filters.

Code this inside app.js file



// project cards open and close functions

let projects = document.querySelectorAll('.project-card');

projects.forEach((card, index) => {

    let closeBtn = card.querySelector('.close-btn');
    closeBtn.addEventListener('click', () => {
        projects.forEach((item, i) => {
            item.classList.remove('blur')
        })
        card.classList.remove('active');
    })

    card.addEventListener('click', (e) => {
        if(e.path[0] != closeBtn){
            projects.forEach((item, i) => {
                if(i != index){
                    item.classList.add('blur')
                }
            })
            card.classList.add('active')
        }
    })

})

// project filter function

const tags = document.querySelectorAll('.filter-btn');

tags.forEach(btn => {
    btn.addEventListener('click', () => {
        projects.forEach(card => {
            if(btn.innerHTML.toLowerCase() == 'all'){
                card.style.display = 'block';
            } else{
                if(card.getAttribute('data-tags').includes(btn.innerHTML.toLowerCase())){
                    card.style.display = 'block';
                } else{
                    card.style.display = 'none';
                }
            }
        })

        tags.forEach(item => item.classList.remove('active'));
        btn.classList.add('active')
    })
})

If you find it hard to understand let me know in the comments.

So since we are writing the JS, why don't we write the navbar active class toggle thing too. So that when we click on link it will make that link active.



// nav toggle 

let links = document.querySelectorAll('.links');

links.forEach(link => {
    link.addEventListener('click', () => {
        links.forEach(item => item.classList.remove('active'))
        link.classList.add('active');
    })
})

So for now our JS is done and everything will work good. So we just need to make the contact form now.

index.html



<section id="contact-section">
    <h1 class="heading">contact</h1>
    <div class="form">
        <input type="text" placeholder="name">
        <input type="email" placeholder="email">
        <input type="text" placeholder="subject">
        <textarea placeholder="message"></textarea>
        <button class="contact-btn">contact</button>
    </div>
</section>



/* contact section */

#contact-section{
    margin: 100px 0;
    padding: 0 10vw;
}

.form{
    width: 100%;
    margin-top: -50px;
}

input, textarea{
    width: 100%;
    height: 5vh;
    font-size: .9rem;
    padding: 1vw;
    background-color: #fff;
    border: 1px solid #cecece;
    border-radius: 5px;
    margin: 10px 0;
    outline: none;
}

::placeholder{
    color: #b4b4b4;
    text-transform: capitalize;
}

textarea{
    height: 20vh;
    font-family: 'roboto', sans-serif;
    resize: none;
}

.contact-btn{
    padding: 10px 20px;
    background: #9f5264;
    color: #fff;
    border: none;
    outline: none;
    font-size: 1rem;
    text-transform: capitalize;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
}

You'll get something like this. So we are done, we made this awesome modern portfolio website. Since the blog is being too lengthy, I am not adding the "responsive" part here. You can check that in video.

I hope you like this post, you like the website design and the tutorial. If this helped you in someway make sure you follow me on my instagram and youtube.

You can download the code. Thanks for reading 👋

Fully Working Online Store Website by HTML, CSS and JS only

Modern Web — Fri, 01 Apr 2022 12:48:54 +0000

Hey guys, welcome back. In this post, we'll discuss about this awesome e-commerce store made by using HTML, CSS and JS only.

I am Kunaal from modern web, made this website's tutorial on my YouTube channel. This site includes everything from add product from seller dashboard to add them into cart and process the payment using cards.

This has home page, seller page, login/signup page, product page, search page, cart page, 404 page, payment page, checkout page and a lot of stuffs. User can login or logout from the site, he/she can add a product reviews. User can also search for product and apply for seller dashboard. Sellers then can add products to the site using add product page, and edit them later, save them as a draft and a lot of other cool stuffs.

Source Code

If you are interested in making this website you can either follow my Youtube coding tutorial or you can just simply download the its source code, (Hurry up! get source code for just $2, limited time offer)

Coding Tutorial

Subscribing my channel will be very appreciable

Above one is first part, you can access the full playlist here.

So, that's it. I hope you do like this project. I made some more awesome projects like this. If you are interested you can check them too on my YouTube channel.

Thanks for reading this article guys. If you have anything to ask, you can ask me in the comments.

CSS functions - Learn about CSS function 2022

Modern Web — Mon, 14 Mar 2022 18:09:08 +0000

Hey, I hope you are doing great. In this article, we'll talk about CSS functions. So without wasting time let's see what are these.

CSS Functions

CSS functions are used as a value for various CSS properties. So basically we use it to evaluate some of the CSS values. Let's see some of the functions.

1. attr()

This function is used to access value of the element's attributes. Let's understand it with the example.

<div data-bg="black"></div>

div{
    width: 100px;
    height: 100px;
    background: attr(data-bg);
}

You can see we have a "div" with "data-bg" a custom attribute and now I can access its value inside CSS using attr(). So, that's how you can do a lot of fun stuffs.

So the output will be something like this.

2. calc()

After attr() we have calc(). As the name suggests, it helps in performing calculations for CSS values. This can be useful when we want to do precise calculation.

<div class="box"></div>

.box{
    width: calc(100px * 5 - 50px);
    height: calc(100px - 30px);
}

In the above code I used calc() to set div's width and height.

3. max()

Then we have max(), It takes two value and use the largest value for that CSS property. This can be useful in making responsive width and heights.

<div class="box"></div>

.box{
    width: max(50%, 500px);
    height: max(60%, 300px);
}

The div will have the maximum possible width and height in this case, if 50% is greater than 500px than its width will be 50% otherwise it will be 500px, same for height also.

4. min()

And the last but not least, we have min(), It takes two value and use the smallest value for that CSS property. This is opposite of max().

<div class="box"></div>

.box{
    width: min(50%, 500px);
    height: min(60%, 300px);
}

So the output of this will be exact opposite to our max(). It will set the smallest value as its width and height.

That's it. We do have some more functions but they are specific for properties. If you do have any doubt feel free to ask me in comments or you can join my discord server. We'll talk there.
Also, if you want to master web development, make sure to follow me on my Instagram and YouTube.

With that all. Thanks for reading 😎

CSS Variables - Learn CSS Variables in 2022

Modern Web — Sun, 13 Mar 2022 18:27:00 +0000

Hello guy👋. Hope you are doing great? In toady's article we'll talk about CSS Variables. So without wasting time, let's see what is it ??

What are variables ?

Variables are used to store data in it. Think of it like you have a box and you put some books inside it. Then those books are the data and the box is variable in terms of computer science.

Okay, but why we use it ??

Let's take an example to understand why we use variable ?

body { background-color: blue; }

h2 { border-bottom: 2px solid blue; }

.container {
  color: white; 
  background-color: white; 
  padding: 15px;
}

button {
  background-color: white; 
  color: blue;  
  border: 1px solid blue; 
}

If you see the above code, If I say you I don’t want any blue color in website and change that color to green. Even though the last code is very short but still to change the color you’ll have to copy and paste each and evey color line, right ??

So, for exactly this situation we use variable, now think If we just make a variable “color” and store blue in it.

And just code all the color equal to that variable instead of “blue”. If we do this. Now, we just have to change the color in one line and all the color will change itself.

Isn’t its awesome ????

Define variables

We usually define variables in :root selector

Why? If we declare a variable inside root, then we can access it from anywhere in the code but if you define a variable inside any other element you’ll be able to use it within the { }. This is basically known as scope.

Syntax of declaring variable inside :root is

Make sure variable name must start with ( -- ) double dash and it is case sensitive which means “--variable” is not equal to “--VARIABLE”

Access variables

Okay, we defined a variable but how we can access it. For that we have var( ) function in CSS

So, that it now let's see a full example using CSS Variable.

:root{
  --primary-color: blue;
  --secondary-color: white;
}

body { background-color: var(--primary-color);  /*blue color*/}

h2 { border-bottom: 2px solid var(--primary-color);  /*blue color*/}

.container {
  color: var(--primary-color); /*white color*/
  background-color: var(--secondary-color); /*white color*/
  padding: 15px;
}

button {
  background-color: var(--secondary-color); /*white color*/
  color: var(--primary-color);  /*blue color*/
  border: 1px solid var(--primary-color); /*blue color*/
}

So, now if you see the above code, you can use how exactly you can use variables in CSS. And now you can easily, change color with just 1 line.

You can use variable to store any CSS value. Even store whole border value. Isn’t its awesome ?

That’s it. This was all about CSS Variables. I hope you got each and every point. Still if you have any doubt you can ask me in comments or you can contact me on my Instagram.

And if you want to master you web dev skills, you can checkout my YouTube channel. I make very helpful coding tutorials. With that all 😎

Thanks for reading. Have a nice day

How to make simple card hover effect in 2022. Very easy Card hover effect for beginners

Modern Web — Sat, 12 Mar 2022 17:51:51 +0000

Hello there 👋. I hope you all are doing great. In today's article we'll see to create an amazing card hover effect. Its a beginners friendly tutorial, so if you don't know anything still you can follow this to code this card.

Card Hover

So this what we are going to create today.

Video tutorial.

You can follow the video tutorial. If you like, you can also subscribe my channel.

Let's start

So, let's start. For this we just need 2 files index.html and style.css file.

Write the basic HTML5 template and link style.css file to it. You can use google's "roboto" font also, if you like.

After done with linking fonts and CSS files. Let's make the body bluish first.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: #36768c;
    font-family: 'roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

So the above code will make the background blue. We gave display: flex to body, so that the card will place at centre.

Now let's make the card. So code this in index.html file.

<div class="card">
    <img src="img.jpg" class="card-img" alt="">
    <div class="card-body">
        <h1 class="card-title">NYC</h1>
        <p class="card-sub-title">new your city</p>
        <p class="card-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum non laboriosam tenetur! Molestiae sapiente ut enim quibusdam asperiores nihil itaque, ex harum soluta, reiciendis illum?</p>

        <button class="card-btn">book tour</button>
    </div>
</div>

And style all the elements like this, you can modify any of the properties on your likings.

.card{
    width: 320px;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    border: 8px solid #fff;
    position: relative;
}

.card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.card-body{
    width: 100%;
    height: 100%;
    top: 0;
    right: -100%;
    position: absolute;
    background: #1f3d4738;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 2s;
}

.card:hover .card-body{
    right: 0;
}

.card-title{
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 500;
}

.card-sub-title{
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 300;
}

.card-info{
    font-size: 16px;
    line-height: 25px;
    margin: 40px 0;
    font-weight: 400;
}

.card-btn{
    color: #1f3d47;
    background: #8fabba;
    padding: 10px 20px;
    width: 120px;
    border-radius: 5px;
    text-transform: capitalize;
    border: none;
    outline: none;
    font-weight: 500;
    cursor: pointer;
}

Output

When Hover -

So, that's it. I hope you guys like the effect and the article as well. If you do have any doubt feel free to ask me in comments or you can join my discord server. We'll talk there.

Also, if you want to master web development, make sure to follow me on my Instagram and YouTube.

With that all. Thanks for reading 😎

What is CSS Box Model ? Complete guide on Box model — Margin, Padding, Border & Content

Modern Web — Fri, 11 Mar 2022 17:28:50 +0000

Hello there 👋! hope you are doing great. Today, in this article we’ll discuss about CSS box model. We’ll talk about what it is ? and how we can take advantage of it. So let’s start.

📌What is CSS Box Model ?

CSS Box Model is basically a box which wraps around each HTML element. It consists of all the spaces — margins, paddings, border and the actual content itself.

Okay so it is a combination of margin, padding, border and content but what are these ??

→ Margin — This is a space outside the elements.

→ Padding — This is the space inside the element or content.

→ Border — As the name suggests, it is a border after padding not content.

→ Content — And the last, it is the actual content could be any HTML element from text to image to video to everything.

It is a very simple concept of CSS but often we forget about this. So this is all about it, but let’s understand this better with 1 example 👇

If you see the above image, If I ask you what is the width of our content. Its 100px right?

And you are right, its width is 100px but is it covering only 100px of the screen, I don’t think so. Let’s do some calculation to check

So you see its actual width is 100px but it is covering 150px.

So you just saw, it doesn’t matter really what’s a content width is, when we want to do some serious design where every px matters. So that’s why CSS Box model visualise us the correct spacings so that we can design website very precisely.

That’s it. This was all about CSS Box Model. I hope you got each and every point and made this concept very clear to you. Still if you have any doubt you can ask me in comments or you can contact me on my Instagram.

And if you want to master you web dev skills, you can checkout my YouTube channel. I make very helpful coding tutorials. With that all 😎

Thanks for reading. Have a nice day

Forem: Modern Web

Part 1.1 - Build a fullstack blogging website using MERN ( MongoDB, ReactJS, ExpressJS and NodeJS )

Website Demo

Github Initialisation

blogging website - frontend folder setup

server folder setup

Navbar

Navbar - Logo

Navbar - Search Box

Navbar - Sign in / sign up button

Route Setup

🔥🤯 Amazing Food Order hero section using HTML, CSS and JS.

Video Tutorial

DEMO

Folder Strucutre

Link Files.

Navbar

Hero Section

Articles you may find Useful

Here is how I made a strong password checker using Javascript.

Video Tutorial

How everything is working ?

Step 1 - Write basic structure.

Step 2 - Create the Password Input.

Output

Step 3 - Create the validation checklist.

Output

Step 4 - Show/hide password.

Step 5 - Adding the validation

Responsive Travel website using HTML, CSS and Javascript

Video Tutorial

Let's go

Navbar

index.html

style.css

Output

Hero Section

index.html

style.css

Output

Image Slider

index.html

Output

Output

Explore Section

index.html

style.css

Output

app.js

Service Section

index.html

style.css

Output

Book Section and footer

index.html

style.css

Output

style.css

HTML 101: Adding Images and Videos to Your Webpages

Image in HTML

Video in HTML

Build Fullstack Shopping/online store Website 🔥 [ Video Tutorials ]

Videos

01

02

03

04

05

The E-commerce 1.0

Responsive Portfolio with HTML, CSS and JS only

Video Tutorial

Lets Code

Folder Structure

Project.js

Fully Working Online Store Website by HTML, CSS and JS only

Source Code

Coding Tutorial

CSS functions - Learn about CSS function 2022

CSS Functions

CSS Variables - Learn CSS Variables in 2022

`blogging website - frontend` folder setup

`server` folder setup