web design – CodingNepal

How to Create Responsive Fiverr Website in HTML and CSS

CodingNepal — Wed, 11 Oct 2023 11:00:31 +0000

If you’re a beginner web developer, creating a Fiverr website using HTML and CSS is a valuable opportunity to gain real-world experience. By recreating the design of a well-established platform like Fiverr, you’ll not only develop practical skills in HTML and CSS but also demonstrate your ability to replicate existing designs.

In this easy-to-follow blog post, I’ll show you how to create a responsive Fiverr website using only HTML, CSS, and JavaScript. You’ll learn how to create an interactive website’s homepage with a navigation bar, position elements on the page, and style them to match the Fiverr look and feel.

Throughout the post, we’ll explore a variety of HTML tags and CSS properties to efficiently create our Fiverr-inspired homepage. To create an attractive layout that attracts viewers and ensures a simple interface, we’ll use tags like nav, sections, divs, inputs, links, and other commonly used tags.

Video Tutorial of Fiverr Website in HTML and CSS

Steps To Create Fiverr Website in HTML and CSS

To create a responsive Fiverr-inspired Homepage using HTML and CSS, follow these step-by-step instructions:

First, create a folder with any name you like. Then, put the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Download and place the Images folder in your project directory. This folder includes the Fiverr logo and the hero background image.

To start, add the following HTML codes to your index.html file. These codes include a navigation bar (nav), sections, input fields, links, and various other tags necessary for your webpage. Additionally, this code includes a few lines of JavaScript code to toggle the mobile menu on small screens.





  
  
  Fiverr Homepage Clone | CodingNepal
  
  
  


  
    
      
        
      
      
        Fiverr Business
        Explore
        
          
            language
            English
          
        
        Become a Seller
        Sign In
        Join Us
        close
      
      menu
    
  

  
    
      Find the right freelance service, right away
      
        
        
      
      
        Popular:
        
          Webite Design
          Logo Design
          WordPress
          AI Design

Next, add the following CSS codes to your style.css file to make your webpage look like the Fiverr Homepage. These codes include various styles for elements like color, background, border, and even the homepage image. Additionally, they make your webpage responsive using media queries.

/* Importing Google font - Fira Sans */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fira Sans', sans-serif;
}

body {
  background: #1B1B1D;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 20px;
}

header .navbar {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .menu-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 30px;
}

.navbar .menu-links li a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}

.navbar .menu-links .language-item a {
  display: flex;
  gap: 8px;
  align-items: center;
}

.navbar .menu-links .language-item span {
  font-size: 1.3rem;
}

.navbar .menu-links li a:hover {
  color: #1dbf73;
}

.navbar .menu-links .join-btn a {
  border: 1px solid #fff;
  padding: 8px 15px;
  border-radius: 4px;
}

.navbar .menu-links .join-btn a:hover {
  color: #fff;
  border-color: transparent;
  background: #1dbf73;
}

.hero-section {
  height: 100vh;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  padding: 0 20px;
  align-items: center;
}

.hero-section .content {
  max-width: 1280px;
  margin: 0 auto 40px;
  width: 100%;
}

.hero-section .content h1 {
  color: #fff;
  font-size: 3rem;
  max-width: 630px;
  line-height: 65px;
}

.hero-section .search-form {
  height: 48px;
  display: flex;
  max-width: 630px;
  margin-top: 30px;
}

.hero-section .search-form input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 1rem;
  border-radius: 4px 0 0 4px;
}

.hero-section .search-form button {
  height: 100%;
  width: 60px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #1dbf73;
  color: #fff;
  border-radius: 0 4px 4px 0;
  transition: background 0.2s ease;
}

.hero-section .search-form button:hover {
  background: #19a463;
}

.hero-section .popular-tags {
  display: flex;
  color: #fff;
  gap: 25px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 25px;
}

.hero-section .popular-tags .tags {
  display: flex;
  gap: 15px;
  align-items: center;
  list-style: none;
}

.hero-section .tags li a {
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  padding: 4px 12px;
  border-radius: 50px;
  transition: 0.2s ease;
}

.hero-section .tags li a:hover {
  color: #000;
  background: #fff;
}

.navbar #hamburger-btn {
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 1.7rem;
}

.navbar #close-menu-btn {
  position: absolute;
  display: none;
  color: #000;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 1.7rem;
}

@media screen and (max-width: 900px) {
  header.show-mobile-menu::before {
    content: "";
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    backdrop-filter: blur(5px);
  }

  .navbar .menu-links {
    height: 100vh;
    max-width: 300px;
    width: 100%;
    background: #fff;
    position: fixed;
    left: -300px;
    top: 0;
    display: block;
    padding: 75px 40px 0;
    transition: left 0.2s ease;
  }

  header.show-mobile-menu .navbar .menu-links {
    left: 0;
  }

  .navbar .menu-links li {
    margin-bottom: 30px;
  }

  .navbar .menu-links li a {
    color: #000;
    font-size: 1.1rem;
  }

  .navbar .menu-links .join-btn a {
    padding: 0;
  }

  .navbar .menu-links .join-btn a:hover {
    color: #1dbf73;
    background: none;
  }

  .navbar :is(#close-menu-btn, #hamburger-btn) {
    display: block;
  }

  .hero-section {
    background: none;
  }

  .hero-section .content {
    margin: 0 auto 80px;
  }

  .hero-section .content :is(h1, .search-form) {
    max-width: 100%;
  }

  .hero-section .content h1 {
    text-align: center;
    font-size: 2.5rem;
    line-height: 55px;
  }

  .hero-section .search-form {
    display: block;
    margin-top: 20px;
  }

  .hero-section .search-form input {
    border-radius: 4px;
  }
  
  .hero-section .search-form button {
    margin-top: 10px;
    border-radius: 4px;
    width: 100%;
  }

  .hero-section .popular-tags {
    display: none;
  }
}

Conclusion and Final words

To wrap up, creating a Fiverr website using HTML, CSS, and JavaScript is a valuable project, especially for beginners in web programming. By following the instructions outlined in this post, you’ve successfully created a responsive Fiverr-inspired homepage.

Remember to keep experimenting with code and expanding your skills by creating more impressive websites. I suggest exploring and recreating the other remarkable website designs available on this website.

If you encounter any problems while creating your Fiverr website, you can download the source code files for this Fiverr Homepage project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Create Website with Login & Registration Form in HTML CSS and JavaScript

CodingNepal — Thu, 31 Aug 2023 18:33:30 +0000

If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.

In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.

In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.

The website’s navigation bar and forms are completely responsive. This means that the content will adjust to fit any screen size. On a smaller screen, the navigation bar will pop up from the right side when the hamburger button is clicked and in the forms the left image section will remain hidden.

Video Tutorial of Website with Login & Registration Form

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In this video, I’ve explained each line of code and included informative comments to make the process of creating your own website with login and registration forms beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you’ll have your own website with forms that are simple to customize and implement into your other projects.

Steps to Create Website with Login & Registration Form

To create a responsive website with login and registration forms using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css to hold the CSS code.
Create a file called script.js to hold the JavaScript code.
Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this project.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML elements, such as header, nav, ul, form, and more for the project.





    
    
    Website with Login and Registration Form | CodingNepal
    
    
    
    


    
        
            menu
            
                
                CodingNepal
            
            
                close
                Home
                Portfolio
                Courses
                About us
                Contact us
            
            
        
    

    
    
        close
        
            
                Welcome Back
                Please log in using your personal information to stay connected with us.
            
            
                LOGIN
                
                    
                        
                        Email
                    
                    
                        
                        Password
                    
                    Forgot password?
                    
                
                
                    Don't have an account?
                    Signup
                
            
        
        
            
                Create Account
                To become a part of our community, please sign up using your personal information.
            
            
                SIGNUP
                
                    
                        
                        Enter your email
                    
                    
                        
                        Create password
                    
                    
                        
                        
                            I agree the
                            Terms & Conditions
                        
                    
                    
                
                
                    Already have an account? 
                    Login

Next, add the following CSS codes to your style.css file to apply visual styling to your website and forms. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a unique touch to your website.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background: url("images/hero-bg.jpg") center/cover no-repeat;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.navbar .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar .logo {
    gap: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo img {
    width: 40px;
    border-radius: 50%;
}

.navbar .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.navbar .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.navbar .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.navbar .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.navbar .links a:hover {
    color: #19e8ff;
}

.navbar .login-btn {
    border: none;
    outline: none;
    background: #fff;
    color: #275360;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.15s ease;
}

.navbar .login-btn:hover {
    background: #ddd;
}

.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-popup .form-box {
    display: flex;
}

.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-details {
    padding: 0 40px;
    background: url("images/login-img.jpg");
    background-position: center;
    background-size: cover;
}

.signup .form-details {
    padding: 0 20px;
    background: url("images/signup-img.jpg");
    background-position: center;
    background-size: cover;
}

.form-box .form-content {
    width: 100%;
    padding: 35px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}

.input-field input:focus {
    border: 1px solid #00bcd4;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #00bcd4;
    font-size: 0.75rem;
}

.form-box a {
    color: #00bcd4;
    text-decoration: none;
}

.form-box a:hover {
    text-decoration: underline;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    margin: 25px 0;
    background: #00bcd4;
    transition: 0.2s ease;
}

form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar .logo img {
        display: none;
    }

    .navbar .logo h2 {
        font-size: 1.4rem;
    }

    .navbar .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .navbar .links.show-menu {
        left: 0;
    }

    .navbar .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .navbar .links a:hover {
        color: #00BCD4;
    }

    .navbar .login-btn {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

After applying the styles, load the webpage in your browser to view your website. The forms are currently hidden and will only appear later using JavaScript. Now, you will only see the website with the navigation bar and hero image.

Finally, add the following JavaScript code to your script.js file. The code contains click event listeners which can toggle classes on various HTML elements. Although the code is simple and easy to understand, it is recommended to watch the video tutorial above, pay attention to the code comments, and experiment with the code for better understanding.

const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
    navbarMenu.classList.toggle("show-menu");
});

// Hide mobile menu
hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

Conclusion and Final words

In conclusion, creating a website’s homepage that features forms is a hands-on experience to learn various website components and fundamental web development concepts. I believe that by following the steps outlined in this blog post, you’ve successfully created your own website with login and registration forms using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.

If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create Text Typing Effect in HTML CSS and Vanilla JavaScript

CodingNepal — Thu, 03 Aug 2023 07:10:59 +0000

Have you ever come across that cool text typing effect on different websites where the words appear as if they’re being typed out? If you’re a beginner web developer, you might wonder how to create such an eye-catching animation on your own. Well, it’s a simple yet impressive effect that can be achieved using just HTML, CSS, and JavaScript.

In this blog post, I’ll guide you through the steps of creating this text-typing animation using HTML, CSS, and Vanilla JavaScript. This means we don’t rely on any external JavaScript libraries like typed.js. So you’ll gain a deep understanding of how this type of typing animation is created and how you can apply your skills to real-world web projects.

In this typing animation, each letter of the word appears after the other, creating a typewriter effect. There is also a blinking caret animation at the end of the word to make the effect more attractive. To know more about what our typing text animation looks like, you can watch the given YouTube video.

Video Tutorial of Text Typing Effect HTML & JavaScript

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In the video, I’ve explained each line of code and provided informative comments to make the process of creating your own text-typing animation beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for creating this effect, you can continue reading this post. By the end of this post, you’ll have your own customizable text typing effect that you can easily use on your other projects.

Steps to Create Text Typing Animation in HTML & JavaScript

To create a custom text typing effect using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with

and tags, which we’ll use for the typing effect. Currently, the element is empty, but using JavaScript, we’ll dynamically add the custom typing word.





    
    
    Typing Text Effect | CodingNepal
    
    


    Coding is

Next, add the following CSS codes to your style.css file to apply visual styling to your text like color, font, border, background, etc. Now, if you load the web page in your browser, you will see styled static text with blinking caret animation.

/* Importing Google font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: #1D1E23;
}

h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
}

h1 span {
    color: #BD53ED;
    position: relative;
}

h1 span::before {
    content: "";
    height: 30px;
    width: 2px;
    position: absolute;
    top: 50%;
    right: -8px;
    background: #BD53ED;
    transform: translateY(-45%);
    animation: blink 0.7s infinite;
}

h1 span.stop-blinking::before {
    animation: none;
}

@keyframes blink {
    50% { opacity: 0 }
}

Finally, add the following JavaScript code to your script.js file. These scripts include different JavaScript functions, variables, methods, and others that are responsible for creating the text-typing effect.

const dynamicText = document.querySelector("h1 span");
const words = ["Love", "like Art", "the Future", "Everything"];

// Variables to track the position and deletion status of the word
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;

const typeEffect = () => {
    const currentWord = words[wordIndex];
    const currentChar = currentWord.substring(0, charIndex);
    dynamicText.textContent = currentChar;
    dynamicText.classList.add("stop-blinking");

    if (!isDeleting && charIndex < currentWord.length) {
        // If condition is true, type the next character
        charIndex++;
        setTimeout(typeEffect, 200);
    } else if (isDeleting && charIndex > 0) {
        // If condition is true, remove the previous character
        charIndex--;
        setTimeout(typeEffect, 100);
    } else {
        // If word is deleted then switch to the next word
        isDeleting = !isDeleting;
        dynamicText.classList.remove("stop-blinking");
        wordIndex = !isDeleting ? (wordIndex + 1) % words.length : wordIndex;
        setTimeout(typeEffect, 1200);
    }
}

typeEffect();

In the above code, you can see there is a “words” array that contains a list of phrases used for the typing animation, some global variables used to track typing status, and a function with an if/else condition to initiate the typing and erasing effects. To understand JavaScript code better, I recommend watching the above video tutorial, paying close attention to the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, creating a text typing animation is a valuable and useful web project. I believe that by following the steps outlined in this blog post, you’ve successfully created your own text-typing effect using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating the same text-typing animation using only HTML and CSS. By creating this effect, you’ll gain a better understanding of how CSS properties and animations are used to create cool text typing effects.

If you encounter any problems while creating your text-typing effect, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

How to Create An Amazon Clone in HTML and CSS

CodingNepal — Mon, 17 Jul 2023 16:13:41 +0000

If you’re new to web development and excited to create your own website, why not start by creating an Amazon-inspired homepage? It’s a valuable project that allows you to practice your skills while making a familiar and engaging website.

In this blog post, I’ll guide you through the process of creating a simple yet impressive Amazon clone using only HTML and CSS. By recreating the main elements of the Amazon homepage, such as the navigation bar, search bar, hero section, cards, and footer, you’ll gain a solid understanding of how these components come together to create an attractive website.

Throughout the post, we’ll also explore different HTML tags and CSS properties that will help us efficiently create our Amazon-inspired homepage. To keep it beginner-friendly, we’ll use tags like nav, sections, divs, inputs, links, footer, and other commonly used tags.

Steps To Create an Amazon Clone in HTML and CSS

To create an Amazon-inspired Homepage Clone using only HTML and CSS, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the Images folder in your project directory. This folder includes the Amazon logo, hero background image, and shopping card images.

To start, add the following HTML codes to your index.html file: These codes include navigation (nav), sections, input fields, links, and various other tags necessary for your Amazon clone webpage.





  
  
  Amazon Website Clone | CodingNepal
  
  


    
      
        
          
        
        
          Deliver
          
            location_on
            Nepal
          
        

        
          
          
          
            search
          
        

        
          Hello, sign in
          Account & Lists
        

        
          Returns
            & Orders
        

        
          
            shopping_cart
            
            Cart
        
      
      
      
        
          
            menu
            All
          
  
          
            Today's Deals
            Customer Service
            Registry
            Gift Cards
            Sell
          
          
            Shop deals in Electronics
          
        
      
    

    

    
      
        
          Shop Laptops & Tables
          
          Shop now
        
        
          Shop Smartwatches
          
          Shop now
        
        
          Create with Strip Lights
          
          Shop now
        
        
          Home Refresh Ideas
          
          Shop now
        
      
    

    
      
        Back to top
      
      
        
          Get to Know Us
          About us
          Careers
          Press Release
          Amazon Science
        
        
          Connect with Us
          Facebook
          Twitter
          Instagram
        
        
          Make Money with Us
          Sell on Amazon
          Sell under Amazon Accelerator
          Protect and Build Your Brand
          Amazon Global Selling
          Become an Affiliate
          Fulfillment by Amazon
          Advertise Your Products
          Amazon Pay on Merchants
        
        
          Let Us Help You
          COVID-19 and Amazon
          Your Account
          Return Centre
          100% Purchase Protection
          Amazon App Download
          Help

Next, add the following CSS codes to your style.css file to make your webpage look like Amazon’s homepage. These codes include various styles for elements like color, background, and border, and even the background image for the hero section.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #ddd;
}

/* Header or Navbar */
header {
  width: 100%;
  background-color: #0f1111;
}

.navbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #fff;
  max-width: 1280px;
  margin: 0 auto;
}

.nav-logo img {
  margin-top: 10px;
  width: 128px;
}

.address .deliver {
  margin-left: 20px;
  font-size: 0.75rem;
  color: #ccc;
}

.address .map-icon {
  display: flex;
  align-items: center;
}


.nav-search {
  display: flex;
  justify-content: space-evenly;
  max-width: 620px;
  width: 100%;
  height: 40px;
  border-radius: 4px;
}

.select-search {
  background: #f3f3f3;
  width: 50px;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: none;
}

.search-input {
  max-width: 600px;
  width: 100%;
  font-size: 1rem;
  border: none;
  outline: none;
  padding-left: 10px;
}

.search-icon {
  max-width: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  background: #febd68;
  color: #000;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.sign-in p,
.returns p {
  font-size: 0.75rem;
}

.sign-in,
.returns span {
  font-size: 0.875rem;
  font-weight: 600;
}

.cart {
  display: flex;
}

.cart .cart-icon {
  font-size: 2.5rem
}

.cart p {
  margin-top: 20px;
  font-weight: 500;
}

.banner {
  padding: 10px 20px;
  background: #222f3d;
  color: #fff;
  font-size: 0.875rem;
}

.banner-content {
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel {
  max-width: 1280px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.panel span {
  margin-right: 7px;
}

.links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 15px;
  flex-grow: 1;
  margin-left: 15px;
}

.links a {
  padding: 10px 0;
}

.deals a {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hero Section */
.hero-section {
  height: 400px;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
}

/* Shop Section */
.shop-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #f3f3f3;
  padding: 50px 0;
}

.shop-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1280px;
  width: 100%;
}

.shop-link {
  background-color: #fff;
  padding: 30px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  white-space: nowrap;
}


.shop-link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 10px;
}

.shop-link h3 {
  margin-bottom: 10px;
}

.shop-link a {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: blue;
  font-weight: 500;
  transition: color 0.3s ease;
}

.shop-link:hover a {
  color: #c7511f;
  text-decoration: underline;
}

/* Footer */
.footer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #37475a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  height: 60px;
}

.footer-items {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 0 auto;
  background: #232f3e;
}

.footer-items h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin: 20px 0 10px 0;
}

.footer-items ul {
  list-style: none;
  margin-bottom: 20px;
}

.footer-items li a {
  color: #ddd;
  font-size: 0.875rem;
}

.footer-items li a:hover {
  text-decoration: underline;
}

Conclusion and Final words

In conclusion, building an Amazon-inspired clone using HTML and CSS is a helpful project, especially for those new to web development. By following the steps outlined in this blog post, you have successfully created your own version of an Amazon homepage.

To continue improving your web development skills, I suggest you try recreating the responsive Fiverr homepage in HTML and CSS. This project will teach you how to use media queries to create a responsive layout for the website.

If you encounter any problems while creating your Amazon-inspired Homepage, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

How to Create Facebook Login Page in HTML and CSS

CodingNepal — Fri, 30 Jun 2023 11:19:24 +0000

Creating a Facebook login page can be an exciting and practical project for beginner web developers because Facebook is a widely used social media platform. By recreating its login page, you can learn valuable skills in designing user interfaces that people are already familiar with.

In this blog post, I’ll guide you through how to create a responsive Facebook login page using only HTML and CSS. This project is beginner-friendly, allowing you to gain hands-on experience with these essential languages and styles.

Throughout the process, we’ll explore different HTML tags, such as headers, forms, inputs, and links. We’ll also dive into CSS properties to style our login form, including color, background, and font choice, and make it responsive for all devices.

https://www.codingnepalweb.com/wp-content/uploads/2023/06/How-to-Create-Facebook-Login-Page-in-HTML-and-CSS.mp4

Steps To Create Facebook Login Page HTML & CSS

To create a Facebook login page using HTML and CSS, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file: This code includes various elements such as a header for the login page, paragraphs, a form, input fields, a button, and links. I’ve also included default form validation by using the required attribute.




  
    
    
    Facebook Login Page | CodingNepal
    
  
  
    
      
        
          facebook
          Connect with friends and the world 
           around you on Facebook.
        
        
          
          
          
            
            Forgot password?
          
          
          
            Create new account

Next, add the following CSS codes to your style.css file to make it look like the Facebook login page. This code includes different styles for elements such as color, background, and border. Feel free to customize these styles according to your preferences.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.flex {
  display: flex;
  align-items: center;
}

.container {
  padding: 0 15px;
  min-height: 100vh;
  justify-content: center;
  background: #f0f2f5;
}

.facebook-page {
  justify-content: space-between;
  max-width: 1000px;
  width: 100%;
}

.facebook-page .text {
  margin-bottom: 90px;
}

.facebook-page h1 {
  color: #1877f2;
  font-size: 4rem;
  margin-bottom: 10px;
}

.facebook-page p {
  font-size: 1.75rem;
  white-space: nowrap;
}

form {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
}

form input {
  height: 55px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 1rem;
  padding: 0 14px;
}

form input:focus {
  outline: none;
  border-color: #1877f2;
}

::placeholder {
  color: #777;
  font-size: 1.063rem;
}

.link {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 15px;
}

.link .login {
  border: none;
  outline: none;
  cursor: pointer;
  background: #1877f2;
  padding: 15px 0;
  border-radius: 6px;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  transition: 0.2s ease;
}

.link .login:hover {
  background: #0d65d9;
}

form a {
  text-decoration: none;
}

.link .forgot {
  color: #1877f2;
  font-size: 0.875rem;
}

.link .forgot:hover {
  text-decoration: underline;
}

hr {
  border: none;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 20px;
  margin-top: 20px;
}

.button {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 20px;
}

.button a {
  padding: 15px 20px;
  background: #42b72a;
  border-radius: 6px;
  color: #fff;
  font-size: 1.063rem;
  font-weight: 600;
  transition: 0.2s ease;
}

.button a:hover {
  background: #3ba626;
}

@media (max-width: 900px) {
  .facebook-page {
    flex-direction: column;
    text-align: center;
  }

  .facebook-page .text {
    margin-bottom: 30px;
  }
}

@media (max-width: 460px) {
  .facebook-page h1 {
    font-size: 3.5rem;
  }

  .facebook-page p {
    font-size: 1.3rem;
  }

  form {
    padding: 15px;
  }
}

Conclusion and Final Words

In conclusion, creating a Facebook login page can be a helpful project for those who are new to web development. I hope that by following the steps outlined in this post, you’re able to create a responsive Facebook login page using HTML and CSS.

If you want to further enhance your skills, you can explore other beginner-friendly login form designs available on this website. These forms are great practice opportunities to improve your skills in HTML and CSS.

If you encounter any problems while creating your Facebook login page, you can download the source code files for this Facebook login page project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

How to Build A Weather App in HTML CSS and JavaScript

CodingNepal — Wed, 28 Jun 2023 19:28:38 +0000

Are you new to web development and eager to enhance your skills by working on practical projects? Look no further! Building a weather app is an excellent way to begin your journey. With just HTML, CSS, and JavaScript, you can create an application that not only improves your web development abilities but also makes you familiar with JavaScript API calls.

In this blog post, I’ll guide you through building a weather app project using HTML, CSS, and JavaScript from scratch. If you prefer using Bootstrap, I’ve already covered that in a previous blog post on creating a Weather App in HTML, Bootstrap, and JavaScript. However, this weather project has some extra features that make it more useful.

In this weather app project, users can enter any city name to get the 5-day weather forecast or simply click on the “Use Current Location” button to get their current location’s weather details, including temperature, wind speed, humidity, and more. This project is also mobile-friendly, which means it looks great on all devices.

Video Tutorial of Weather App Project in JavaScript

If you prefer learning through video tutorials, this YouTube video is an excellent resource for understanding the process of creating your own weather app project. In the video, I’ve explained each line of code and provided informative comments to make it beginner-friendly and easy to follow.

However, if you like reading blog posts or want to know the steps involved in creating this weather app project, you can continue reading this post. By the end of this post, you will have your own weather app and a basic understanding of the basics of DOM manipulation, event handling, CSS styling, and APIs.

Steps To Create Weather App in HTML & JavaScript

To create your weather app using HTML, CSS, and JavaScript, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file. This code includes a weather app header, input, button, and unordered list (ul) that are used as a placeholder for weather details. Later, using JavaScript, we’ll replace these placeholders with actual weather details.




  
    
    Weather App Project JavaScript | CodingNepal
    
    
    
  
  
    Weather Dashboard
    
      
        Enter a City Name
        
        
        
        
      
      
        
          
            _______ ( ______ )
            Temperature: __°C
            Wind: __ M/S
            Humidity: __%
          
        
        
          5-Day Forecast
          
            
              ( ______ )
              Temp: __C
              Wind: __ M/S
              Humidity: __%
            
            
              ( ______ )
              Temp: __C
              Wind: __ M/S
              Humidity: __%
            
            
              ( ______ )
              Temp: __C
              Wind: __ M/S
              Humidity: __%
            
            
              ( ______ )
              Temp: __C
              Wind: __ M/S
              Humidity: __%
            
            
              ( ______ )
              Temp: __C
              Wind: __ M/S
              Humidity: __%

Next, add the following CSS codes to your style.css file to apply visual styling to your weather app. Now, if you load the web page in your browser, you will see the header at the top, a sidebar with input and buttons, and weather detail placeholders. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* Import Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body {
  background: #E3F2FD;
}
h1 {
  background: #5372F0;
  font-size: 1.75rem;
  text-align: center;
  padding: 18px 0;
  color: #fff;
}
.container {
  display: flex;
  gap: 35px;
  padding: 30px;
}
.weather-input {
  width: 550px;
}
.weather-input input {
  height: 46px;
  width: 100%;
  outline: none;
  font-size: 1.07rem;
  padding: 0 17px;
  margin: 10px 0 20px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.weather-input input:focus {
  padding: 0 16px;
  border: 2px solid #5372F0;
}
.weather-input .separator {
  height: 1px;
  width: 100%;
  margin: 25px 0;
  background: #BBBBBB;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather-input .separator::before{
  content: "or";
  color: #6C757D;
  font-size: 1.18rem;
  padding: 0 15px;
  margin-top: -4px;
  background: #E3F2FD;
}
.weather-input button {
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  color: #fff;
  background: #5372F0;
  transition: 0.2s ease;
}
.weather-input .search-btn:hover {
  background: #2c52ed;
}
.weather-input .location-btn {
  background: #6C757D;
}
.weather-input .location-btn:hover {
  background: #5c636a;
}
.weather-data {
  width: 100%;
}
.weather-data .current-weather {
  color: #fff;
  background: #5372F0;
  border-radius: 5px;
  padding: 20px 70px 20px 20px;
  display: flex;
  justify-content: space-between;
}
.current-weather h2 {
  font-weight: 700;
  font-size: 1.7rem;
}
.weather-data h6 {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 500;
}
.current-weather .icon {
  text-align: center;
}
.current-weather .icon img {
  max-width: 120px;
  margin-top: -15px;
}
.current-weather .icon h6 {
  margin-top: -10px;
  text-transform: capitalize;
}
.days-forecast h2 {
  margin: 20px 0;
  font-size: 1.5rem;
}
.days-forecast .weather-cards {
  display: flex;
  gap: 20px;
}
.weather-cards .card {
  color: #fff;
  padding: 18px 16px;
  list-style: none;
  width: calc(100% / 5);
  background: #6C757D;
  border-radius: 5px;
}
.weather-cards .card h3 {
  font-size: 1.3rem;
  font-weight: 600;
}
.weather-cards .card img {
  max-width: 70px;
  margin: 5px 0 -12px 0;
}

@media (max-width: 1400px) {
  .weather-data .current-weather {
    padding: 20px;
  }
  .weather-cards {
    flex-wrap: wrap;
  }
  .weather-cards .card {
    width: calc(100% / 4 - 15px);
  }
}
@media (max-width: 1200px) {
  .weather-cards .card {
    width: calc(100% / 3 - 15px);
  }
}
@media (max-width: 950px) {
  .weather-input {
    width: 450px;
  }
  .weather-cards .card {
    width: calc(100% / 2 - 10px);
  }
}
@media (max-width: 750px) {
  h1 {
    font-size: 1.45rem;
    padding: 16px 0;
  }
  .container {
    flex-wrap: wrap;
    padding: 15px;
  }
  .weather-input {
    width: 100%;
  }
  .weather-data h2 {
    font-size: 1.35rem;
  }
}

Finally, add the following JavaScript code to your script.js file. This script code will make your weather app functional, which means now you can get a 5-day weather forecast for any city or your current location.

const cityInput = document.querySelector(".city-input");
const searchButton = document.querySelector(".search-btn");
const locationButton = document.querySelector(".location-btn");
const currentWeatherDiv = document.querySelector(".current-weather");
const weatherCardsDiv = document.querySelector(".weather-cards");

const API_KEY = "YOUR-API-KEY-HERE"; // API key for OpenWeatherMap API

const createWeatherCard = (cityName, weatherItem, index) => {
    if(index === 0) { // HTML for the main weather card
        return `
                    ${cityName} (${weatherItem.dt_txt.split(" ")[0]})
                    Temperature: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C
                    Wind: ${weatherItem.wind.speed} M/S
                    Humidity: ${weatherItem.main.humidity}%
                
                
                    
                    ${weatherItem.weather[0].description}
                `;
    } else { // HTML for the other five day forecast card
        return `
                    (${weatherItem.dt_txt.split(" ")[0]})
                    
                    Temp: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C
                    Wind: ${weatherItem.wind.speed} M/S
                    Humidity: ${weatherItem.main.humidity}%
                `;
    }
}

const getWeatherDetails = (cityName, latitude, longitude) => {
    const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;

    fetch(WEATHER_API_URL).then(response => response.json()).then(data => {
        // Filter the forecasts to get only one forecast per day
        const uniqueForecastDays = [];
        const fiveDaysForecast = data.list.filter(forecast => {
            const forecastDate = new Date(forecast.dt_txt).getDate();
            if (!uniqueForecastDays.includes(forecastDate)) {
                return uniqueForecastDays.push(forecastDate);
            }
        });

        // Clearing previous weather data
        cityInput.value = "";
        currentWeatherDiv.innerHTML = "";
        weatherCardsDiv.innerHTML = "";

        // Creating weather cards and adding them to the DOM
        fiveDaysForecast.forEach((weatherItem, index) => {
            const html = createWeatherCard(cityName, weatherItem, index);
            if (index === 0) {
                currentWeatherDiv.insertAdjacentHTML("beforeend", html);
            } else {
                weatherCardsDiv.insertAdjacentHTML("beforeend", html);
            }
        });        
    }).catch(() => {
        alert("An error occurred while fetching the weather forecast!");
    });
}

const getCityCoordinates = () => {
    const cityName = cityInput.value.trim();
    if (cityName === "") return;
    const API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${API_KEY}`;
    
    // Get entered city coordinates (latitude, longitude, and name) from the API response
    fetch(API_URL).then(response => response.json()).then(data => {
        if (!data.length) return alert(`No coordinates found for ${cityName}`);
        const { lat, lon, name } = data[0];
        getWeatherDetails(name, lat, lon);
    }).catch(() => {
        alert("An error occurred while fetching the coordinates!");
    });
}

const getUserCoordinates = () => {
    navigator.geolocation.getCurrentPosition(
        position => {
            const { latitude, longitude } = position.coords; // Get coordinates of user location
            // Get city name from coordinates using reverse geocoding API
            const API_URL = `https://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${API_KEY}`;
            fetch(API_URL).then(response => response.json()).then(data => {
                const { name } = data[0];
                getWeatherDetails(name, latitude, longitude);
            }).catch(() => {
                alert("An error occurred while fetching the city name!");
            });
        },
        error => { // Show alert if user denied the location permission
            if (error.code === error.PERMISSION_DENIED) {
                alert("Geolocation request denied. Please reset location permission to grant access again.");
            } else {
                alert("Geolocation request error. Please reset location permission.");
            }
        });
}

locationButton.addEventListener("click", getUserCoordinates);
searchButton.addEventListener("click", getCityCoordinates);
cityInput.addEventListener("keyup", e => e.key === "Enter" && getCityCoordinates());

Please note that your weather app is still unable to show the weather forecast for any location because you’ve not provided your OpenWeatherMap API key in the API_KEY variable. To get a free API key, sign up for an account at https://home.openweathermap.org/api_keys. Your API key may take minutes or hours to activate. You’ll get an error like “Invalid API Key” or something similar during this time.

In the code, there are two API calls. The first one fetches the geographic coordinates of the user-entered city. These coordinates are then used in the second API call to retrieve the weather forecast, which is displayed on the page. The code also includes a feature that asks for user location permission and, once granted, makes the second API call to fetch the weather forecast based on the user’s current location.

Conclusion and Final Words

In conclusion, building a weather app project allows you to apply your web development skills to a real-world application. Also, it helps you to better understand DOM manipulation, Event handling, CSS styling, APIs, and more. I hope that by following the steps in this post, you’ve successfully created your weather app using HTML, CSS, and JavaScript.

To understand this project’s code better, I recommend watching the above tutorial video, reading the code comments, and experimenting with the code. If you want to further enhance your web development skills, you should try recreating the Working Chatbot using HTML, CSS, and JavaScript.

If you encounter any difficulties while creating your weather app or your code is not working as expected, you can download the source code files for this weather app project for free by clicking the Download button. Keep in mind that after downloading the file, you’ll have to paste an “OpenWeatherMap API Key into the API_KEY variable in the script.js file.