STEP1: Prepare

Setting up all essential tools for constructing the webpage:

STEP 2: Pointers

Visit Github to create a repository; if needed, sign up. Once there, make your repository and set it Public so it's accessible to online users. Remember to add a README file—it's the place for a detailed project description.

Note:In this image repository, the owner is identified as Ashraful756. However, when working within an organization, the organization's name should be displayed instead.

STEP 3: Local Settings

Open GitHub Desktop, clone the repository you've created before, and then proceed to open it in Visual Studio Code.

Access the cloned repository from your local storage system using Visual Studio Code

STEP 4: Live Server Extension

Go to visual studio extention secsion, search live server and click install it. This extesion help to observe new change on your webpage when you change something in your code. You can see the exension installation image below:

How to write the website document

STEP 5: Make folder and file for writing code to build a website

Open VS Code and open clone repository folder. Create a html file, a css file & a JS file. Create a folder for image resources. After that go to the html file which is named index.html and write some basic html documents. You can see all the step in snapshot below:

Here, I've included links to my external CSS file, a few fonts link, and bootstrap. That will assist me in designing and improving the appearance of my webpage.

STEP 6: Store Resources in img folder

To build a website we need some basic resources, such as logo, favicon, bg-picture, banner, etc. I have to gather all the resources in that folder as You can see all the step in snapshot below:

STEP 7: Title and Title logo

An HTML document consists of two primary sections. Head and Body. The title of my website, some meta data, and the title logo—also referred to as a favicon by programmers—can all be written in the Head section. I demonstrate how to write a title and put a title logo underneath this image.

favicon is a format that can help us put logo in title bar as you can see in the photo. Below of this page you can get how to make a Logo free.

STEP 8: Divided and write document for webpage

In a Body of the HTML document consists of three primary sections. Header-Main-Footer. I wrote 3 tag and make workspaces for build my webpage step by step. I demonstrate about this tag underneath this image.

STEP 9: Logo & navbar Design

A logo might represent a company, a group, or anything else. Therefore, the logo is given top priority on any website. Therefore, we construct a navbar in the Heading section and write some code for that when we add a logo to a website. The code and explanation are available in the picture below.

I wrote several lines of code for the button, link, navbar, and logo in the header section. All of the HTML & CSS code is shown in the Code Area below.

HTML Code:

<nav class="navbar">
    <a href="#">
        <img src="img/teamLogo.png" alt="Team LoGo" width="150" height="80" class="logo-light"
            style="border-radius: 25px;">
        <img src="img/teamLogo.png" alt="Team logo" width="150" height="80" class="logo-dark"
            style="border-radius: 25px;">
    </a>

    <div class="btn-group">

        <button class="theme-btn theme-btn-mobile light">
            <ion-icon name="moon" class="moon"></ion-icon>
            <ion-icon name="sunny" class="sun"></ion-icon>
        </button>

        <button class="nav-menu-btn">
            <ion-icon name="menu-outline"></ion-icon>
        </button>

    </div>

    <div class="flex-wrapper">

        <ul class="desktop-nav">

            <li>
                <a href="#home" class="nav-link">Home</a>
            </li>

            <li>
                <a href="#project" class="nav-link">Projects</a>
            </li>

            <li>
                <a href="#contact" class="nav-link">Contact US</a>
            </li>

        </ul>

        <button class="theme-btn theme-btn-desktop light">
            <ion-icon name="moon" class="moon"></ion-icon>
            <ion-icon name="sunny" class="sun"></ion-icon>
        </button>

    </div>

    <div class="mobile-nav">

        <button class="nav-close-btn">
            <ion-icon name="close-outline"></ion-icon>
        </button>

        <div class="wrapper">

            <p class="h3 nav-title">Main Menu</p>

            <ul>
                <li class="nav-item">
                    <a href="#home" class="nav-link">Home</a>
                </li>

                <li class="nav-item">
                    <a href="#project" class="nav-link">Projects</a>
                </li>

                <li class="nav-item">
                    <a href="#contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>

</nav>

CSS Code:

    //Navbar Design

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 15px 0;
}

STEP 10: Switch Day/Night Button

These days, day-night mode is a well-known feature of a web.To alter the website's theme and vibe from day to night, I created a switch button within the navigation bar. I've included proof of the code I built to create this day/night switch below.

Code:

    <div class="btn-group">
    <button class="theme-btn theme-btn-mobile light">
    <ion-icon name="moon" class="moon"></ion-icon>
    <ion-icon name="sunny" class="sun"></ion-icon>
    </button>
    <button class="nav-menu-btn">
    <ion-icon name="menu-outline"></ion-icon>
    </button>
    </div>

STEP 11: How to build HomePage Title and Button

I separated the "Home Page" area into two sections: "Documents" and "Team Image." I left-aligned the documents section and wrote our team's name and motto there. Additionally, I created two buttons that can be used to access both our final project and ordinary project.I have included some HTML and CSS code below to help you grasp the concepts.

HTML Code:

<div class="left">

    <h1 class="h1">
        Hi, We're <b>Team InnoGeniuses</b>.
        <br>at Zju,NB
    </h1>

    <p class="h3">
        Your problems <abbr title="Accessibility">is</abbr> our opportunity
    </p>

    <div class="btn-group">
        <a href="#project" class="btn btn-primary">Project</a>
        <a href="#contact" class="btn btn-secondary">About us</a>
    </div>

</div>

CSS Code:

CSS part
//Design for Home page button and text

.hero {
background: var(--background-primary);
padding-top: 2rem;
padding-bottom: var(--py);
text-align: center;
}
.hero .h1 {
margin-bottom: 1rem;
line-height: 1.6;
}
 .hero b {
 color: var(--accent);
font-weight: inherit;
}
.hero .h3 {
color: var(--foreground-secondary);
margin-bottom: 2rem;
}
.hero .btn-group {
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
 }
.hero .right {
display: none;
}

STEP 12: How to design team photo

As I've already indicated, the team title and button are on the left side of my home page. In a similar manner, I have space for a team photo on the right side. In essence, a div is divided into two parts, and the display is flexed row-wise.

Code:

    <div class="right">
        <div class="img-box">
        <img src="img/teamPhoto.jpg" alt="Group Photo" class="hero-img">
        </div>

STEP 13: How to build Project Board & Team list

I created a second section of my page after building the hero area of my homepage. I arranged this section into two halves, much like a hero section. A separate panel with a list of team members' homepages is located on the right side, while the team project list is located on the left.

Project List

If you look at the code below, you will see that I sorted the project list using a list tag.

HTML Code:

    <div class="sidebar">
        <ul>
        <li>
        <h2>Weekly task</h2>
        </li>
        <!-- target="_blank" -->
        <li><a href="build web/page1.html">Project management</a>
        <ul>
        <li><a href="build web/page1.html">How to build webpage</a></li>
        <li><a href="build web/page1.html">How to write the first document</a></li>
        <li><a href="#teamMembers">Team Members</a></li>
        </ul>
        </li>
        <li><a href="Computer aided design/page1.html">Computer aided design</a></li>
        <li><a href="arduino/page1.html">Arduino</a></li>
        
        <li><a href="#">3D printing</a></li>
        <li><a href="#">Computer-controlled cutting</a></li>
        <li><a href="#">Interface application programming</a></li>
        </ul>
        </div>

Team List

To make the team members list look nice and ordered like an asdie bar, I took some links, arranged them, and added some CSS code.

HTML Code:

    <div class="topics">

        <h2 class="h2">Team Members</h2>
        
        <a href="https://ashraful756.github.io/Ashraful_Profile/" target="_blank" class="topic-btn">
        <p>Alam MD Ashraful</p>
        </a>
        <a href="https://ramizraaz.github.io/ZjuProtfolio/" target="_blank" class="topic-btn">
        <p>Islam Ramadul</p>
        </a>
        <a href="https://aminal333.github.io/alamin.filmart/" target="_blank" class="topic-btn">
        <p>Amin Al</p>
        </a>
        <a href="https://abdulhaq2.github.io/DIGITAL-INDUSTRIAL-DESIGN-REVOLUTION/" target="_blank" class="topic-btn">
        <p>Abdul Huq</p>
        </a>
        <a href="https://zainashiq467.github.io/MyProfile/" class="topic-btn">
        <p>Zain</p>
        </a>
        <a href="https://arshoikot1.github.io/arshoikotProtfolio/" target="_blank" class="topic-btn">
        <p>A.R. Shoikot</p>
        </a>
        </div>

CSS Code:

    //In main section project details and team members link design css

    .blog .h2 {
    line-height: 1.3;
    margin-bottom: 3rem;
    text-align: center;
    }
    .sidebar {
    height: 40%;
    width: 100%;
    border-radius: 5%;
    padding: 3%;
    position: sticky;
    top: 0;
    background-color: #676464ca;
    overflow-y: auto;
    transition: 0.3s;
    }
    .sidebar a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: block;
    padding: 0px 10px;
    }
    .sidebar a:hover {
    width: max-content;
    background-color: #00000093;
    border-radius: 5px;
    font-size: 20px;
    }

STEP 14: Footer

The final and most crucial section of every website is this one. Because this section allows us to add a site map, copyright restrictions, or important notes and contracts. Let's examine the HTML and CSS code to understand its functionality.

HTML Code:

    <footer>
        <p class="copyright">
        © Copyright 2023 <a href="https://github.com/NexMaker-Fab/2023zjudem-INNOGENIUSES" target="_blank">Team
        InnoGeniuses</a>
        </p>
        </footer>

Code:

    //Footer secsion design CSS

footer {
background: var(--background-primary);
}
footer .container {
padding: var(--py) 15px;
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
footer .wrapper {
text-align: center;
}
.footer-text {
color: var(--foreground-secondary);
max-width: 300px;
margin-inline: auto;
margin: auto;
/* fallback for margin-inline */
}
.footer-title {
color: var(--foreground-primary);
font-weight: 700;
margin-bottom: 0.4rem;
}
.footer-link {
color: var(--foreground-secondary);
}
.footer-link:hover {
color: var(--accent);
}
.copyright {
color: var(--foreground-secondary);
font-size: var(--fs-4);
text-align: center;
padding: 1rem;
border-top: 1px solid var(--action-primary);
}
.copyright a {
color: var(--accent);
font-weight: 500;
}
.copyright a:hover {
text-decoration: underline;
}

Final Step: All the source code of our Homepage

I'm hoping you already see why I use these codes. Everything above was already explained. All of the HTML, CSS, and JS source code for my primary homepage is provided here. All of the resources, including image gifs, are available for download from our main page or git repository. I'm hoping it may assist you with copying and editing a homepage similar to ours.

HTML Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="img/favicon.ico" type="image/x-icon">
        <title>Team InnoGeniuses</title>
    
    
        <!--custom css link -->
        <link rel="stylesheet" href="main.css">
    
        <!-- google font link -->
        <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=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    </head>
    
    <body class="light-theme">
    
        <!--#HEADER -->
        <header>
    
            <div class="container">
    
                <nav class="navbar">
    
                    <a href="#">
                        <img src="img/teamLogo.png" alt="Team LoGo" width="150" height="80" class="logo-light"
                            style="border-radius: 25px;">
                        <img src="img/teamLogo.png" alt="Team logo" width="150" height="80" class="logo-dark"
                            style="border-radius: 25px;">
                    </a>
    
                    <div class="btn-group">
    
                        <button class="theme-btn theme-btn-mobile light">
                            <ion-icon name="moon" class="moon"></ion-icon>
                            <ion-icon name="sunny" class="sun"></ion-icon>
                        </button>
    
                        <button class="nav-menu-btn">
                            <ion-icon name="menu-outline"></ion-icon>
                        </button>
    
                    </div>
    
                    <div class="flex-wrapper">
    
                        <ul class="desktop-nav">
    
                            <li>
                                <a href="#home" class="nav-link">Home</a>
                            </li>
    
                            <li>
                                <a href="#project" class="nav-link">Projects</a>
                            </li>
    
                            <li>
                                <a href="team-member/member.html" class="nav-link">Contact US</a>
                            </li>
                        </ul>
                        <button class="theme-btn theme-btn-desktop light">
                            <ion-icon name="moon" class="moon"></ion-icon>
                            <ion-icon name="sunny" class="sun"></ion-icon>
                        </button>
                    </div>
                    <div class="mobile-nav">
                        <button class="nav-close-btn">
                            <ion-icon name="close-outline"></ion-icon>
                        </button>
    
                        <div class="wrapper">
    
                            <p class="h3 nav-title">Main Menu</p>
    
                            <ul>
                                <li class="nav-item">
                                    <a href="#home" class="nav-link">Home</a>
                                </li>
    
                                <li class="nav-item">
                                    <a href="#project" class="nav-link">Projects</a>
                                </li>
    
                                <li class="nav-item">
                                    <a href="team-member/member.html">Contact Us</a>
                                </li>
                            </ul>
                        </div>
                    </div>
    
                </nav>
    
            </div>
    
        </header>
    
        <main>
    
            <!--
              - #HERO SECTION
            -->
    
            <div class="hero" id="home">
    
                <div class="container">
    
                    <div class="left">
    
                        <h1 class="h1">
                            Hi, We're <b>Team InnoGeniuses</b>.
                            <br>at Zju,NB
                        </h1>
    
                        <p class="h3">
                            Your problems <abbr title="Accessibility">is</abbr> our opportunity
                        </p>
    
                        <div class="btn-group">
                            <a href="#project" class="btn btn-primary">Project</a>
                            <a href="final-project/final.html" class="btn btn-secondary">Final Project</a>
                        </div>
    
                    </div>
    
                    <div class="right">
                        <div class="img-box">
                            <img src="img/group1.jpg" alt="Group Photo" class="hero-img">
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
            <div class="main" id="project">
                <div class="container">
    
                    <!-- BLOG SECTION -->
                    <div class="blog">
    
                        <h2 class="h2">Our Project Blogs</h2>
                        <div class="sidebar">
                            <ul>
                                <li>
                                    <h2>Weekly task</h2>
                                </li>
                                <!-- target="_blank" -->
                                <li><a href="build-web/page1.html">Project management</a>
                                    <ul>
                                        <li><a href="build-web/page1.html">How to build webpage</a></li>
                                    </ul>
                                </li>
                                <li><a href="Computer-aided-design/Caddesign.html">Computer aided design</a></li>
                                <li><a href="arduino/arduino.html">Arduino</a></li>
    
                                <li><a href="#">3D printing</a></li>
                                <li><a href="#">Computer-controlled cutting</a></li>
                                <li><a href="#">Interface application programming</a></li>
                            </ul>
                        </div>
    
                    </div>
    
                    <!--- ASIDE -->
                    <div class="aside" id="teamMembers">
    
                        <div class="topics">
    
                            <h2 class="h2">Team Members</h2>
    
                            <a href="https://ashraful756.github.io/Ashraful_Profile/" target="_blank" class="topic-btn">
                                <p>Alam MD Ashraful</p>
                            </a>
                            <a href="https://ramizraaz.github.io/ZjuProtfolio/" target="_blank" class="topic-btn">
                                <p>Islam Ramadul</p>
                            </a>
                            <a href="https://aminal333.github.io/alamin.filmart/" target="_blank" class="topic-btn">
                                <p>Amin Al</p>
                            </a>
                            <a href="https://abdulhaq2.github.io/DIGITAL-INDUSTRIAL-DESIGN-REVOLUTION/" target="_blank"
                                class="topic-btn">
                                <p>Abdul Huq</p>
                            </a>
                            <a href="https://zainashiq467.github.io/MyProfile/" class="topic-btn">
                                <p>Zain</p>
                            </a>
                            <a href="https://arshoikot1.github.io/shoikot/" target="_blank" class="topic-btn">
                                <p>A.R. Shoikot</p>
                            </a>
                        </div>
                        <div class="contact" id="contact">
    
                            <h2 class="h2">Let's Talk</h2>
    
                            <div class="wrapper">
    
                                <p>
                                    Do you want to know more about our team? Let us have a conversation.
                                </p>
    
                                <!-- <ul class="social-link">
    
                                    <li>
                                        <a href="https://github.com/NexMaker-Fab/2023zjudem-INNOGENIUSES" target="_blank" class="icon-box github">
                                            <ion-icon name="logo-github"></ion-icon>
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="https://twitter.com/" target="_blank" class="icon-box twitter">
                                            <ion-icon name="logo-twitter"></ion-icon>
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="https://linkedin.com/" target="_blank" class="icon-box linkedin">
                                            <ion-icon name="logo-linkedin"></ion-icon>
                                        </a>
                                    </li>
    
                                </ul> -->
    
                            </div>
    
                        </div>
                    </div>
    
                </div>
    
            </div>
    
        </main>
    
        <!--
        - #FOOTER
      -->
    
        <footer>
            <p class="copyright">
                © Copyright 2023 <a href="https://github.com/NexMaker-Fab/2023zjudem-INNOGENIUSES" target="_blank">Team
                    InnoGeniuses</a>
            </p>
        </footer>
    
    
        <!--
        - custom js link
      -->
        <script src="js/script.min.js"></script>
    
        <!--
        - ionicon link
      -->
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    </body>
    
    </html>

CSS Code:

    .light-theme {
    --background-primary: hsl(0, 0%, 100%);
    --background-secondary: hsl(0, 0%, 97%);
    --action-primary: hsl(0, 87%, 69%);
    --action-secondary: hsl(0, 0%, 100%);
    --foreground-primary: hsl(77, 82%, 58%);
    --foreground-secondary: hsl(216, 15%, 52%);
    --foreground-tertiary: hsl(214, 20%, 69%);
    --accent: hsl(119, 92%, 60%);
    }
    
    .dark-theme {
    /**
    * dark theme colors
    */
    --background-primary: hsl(218, 23%, 23%);
    --background-secondary: hsl(220, 26%, 14%);
    --action-primary: hsl(216, 15%, 52%);
    --action-secondary: hsl(218, 23%, 23%);
    --foreground-primary: hsl(210, 38%, 95%);
    --foreground-secondary: hsl(211, 25%, 84%);
    --foreground-tertiary: hsl(214, 20%, 69%);
    --accent: hsl(229, 76%, 66%);
    }
    
    .dark-theme .right img {}
    
    :root {
    /**
    * color
    */
    --white: hsl(0, 0%, 100%);
    /**
    * typography
    */
    --fs-base: 0.85rem;
    --fs-1: 1.875rem;
    --fs-2: 1.5rem;
    --fs-3: 1.25rem;
    --fs-4: 0.875rem;
    --fs-5: 0.75rem;
    /**
    * spacing
    */
    --py: 5rem;
    }
    
    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    a {
    text-decoration: none;
    }
    
    li {
    list-style: none;
    }
    
    img,
    button {
    display: block;
    }
    
    a,
    span {
    display: inline-block;
    }
    
    button {
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
    }
    
    html {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-base);
    /* base font-size (0.85rem = 13.6px) */
    line-height: 1.8;
    }
    
    :focus {
    outline-offset: 4px;
    }
    
    
    /* scrollbar style*/
    
    ::-webkit-scrollbar {
    width: 16px;
    }
    
    ::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 20px;
    border: 4px solid;
    }
    
    .light-theme::-webkit-scrollbar-thumb {
    border-color: hsl(0, 0%, 90%);
    }
    
    .dark-theme::-webkit-scrollbar-thumb {
    border-color: hsl(219, 27%, 20%);
    }
    
    .light-theme::-webkit-scrollbar-track {
    background: hsl(0, 0%, 90%);
    }
    
    .dark-theme::-webkit-scrollbar-track {
    background: hsl(219, 27%, 20%);
    }
    
    .h1,
    .h2,
    .h3,
    .h4 {
    display: block;
    color: var(--foreground-primary);
    }
    
    .h1 {
    font-size: var(--fs-1);
    font-weight: 900;
    }
    
    .h2 {
    font-size: var(--fs-2);
    font-weight: 700;
    }
    
    .h3 {
    font-size: var(--fs-3);
    font-weight: 700;
    }
    
    .h4 {
    font-size: var(--fs-4);
    font-weight: 700;
    }
    
    .text-sm {
    font-size: var(--fs-4);
    }
    
    .text-tiny {
    font-size: var(--fs-5);
    }
    
    .container {
    margin-inline: auto;
    margin: auto;
    /* fallback for margin-inline */
    padding: 0 15px;
    }
    
    .btn {
    min-width: 10rem;
    border-radius: 100px;
    }
    
    .btn-primary {
    background: var(--accent);
    color: var(--white);
    padding: 0.6875rem 1.1875rem;
    }
    
    .btn-primary:hover {
    background: var(--foreground-secondary);
    color: var(--action-primary);
    }
    
    .btn-secondary {
    background: var(--action-secondary);
    color: var(--foreground-secondary);
    padding: 0.5rem 1rem;
    border: 6px solid var(--foreground-tertiary);
    }
    
    .btn-secondary:hover {
    border-color: var(--accent);
    }
    
    .dark-theme .btn-primary:hover {
    color: var(--background-primary);
    }
    
    .dark-theme .blog-topic {
    background: var(--action-primary);
    color: var(--foreground-secondary);
    }
    
    .dark-theme .blog-topic:hover {
    background: var(--foreground-primary);
    color: var(--action-primary);
    }
    
    .dark-theme .load-more:hover {
    color: var(--white);
    }
    
    .dark-theme .aside .h2 {
    color: var(--foreground-primary);
    }
    
    header {
    background: var(--background-primary);
    }
    
    header .flex-wrapper {
    display: none;
    }
    
    .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    }
    
    .logo-light,
    .logo-dark {
    display: none;
    }
    
    .light-theme .logo-light,
    .dark-theme .logo-dark {
    display: block;
    }
    
    header .btn-group {
    display: flex;
    align-items: center;
    gap: 15px;
    }
    
    .theme-btn-mobile,
    .nav-menu-btn,
    .nav-close-btn {
    background: var(--action-secondary);
    color: var(--foreground-tertiary);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 25px;
    }
    
    :is(.theme-btn-mobile, .nav-menu-btn, .nav-close-btn):hover {
    background: var(--accent);
    color: var(--white);
    }
    
    .theme-btn-mobile ion-icon {
    display: none;
    }
    
    .theme-btn-mobile.light .sun,
    .theme-btn-mobile.dark .moon {
    display: block;
    }
    
    .mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--background-primary);
    padding: 70px 20px;
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: 0.5s cubic-bezier(1, 0, 0.30, 0.70);
    z-index: 10;
    }
    
    .mobile-nav.active {
    transform: translateX(0);
    visibility: visible;
    }
    
    .nav-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    }
    
    .mobile-nav .wrapper {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--action-primary);
    }
    
    .mobile-nav .nav-title {
    margin-bottom: 1rem;
    }
    
    .mobile-nav .nav-item {
    margin-bottom: 0.5rem;
    }
    
    .mobile-nav .nav-link {
    font-size: var(--fs-3);
    color: var(--foreground-secondary);
    }
    
    .mobile-nav .nav-link:hover {
    color: var(--accent);
    }
    
    
    /* #HERO SECTION */
    
    .hero {
    background: var(--background-primary);
    padding-top: 2rem;
    padding-bottom: var(--py);
    text-align: center;
    }
    
    .hero .h1 {
    margin-bottom: 1rem;
    line-height: 1.6;
    }
    
    .hero b {
    color: var(--accent);
    font-weight: inherit;
    }
    
    .hero .h3 {
    color: var(--foreground-secondary);
    margin-bottom: 2rem;
    }
    
    .hero .btn-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
    }
    
    .hero .right {
    display: none;
    }
    
    
    /* -----------------------------------
    #BLOG SECTION
    ----------------------------------- */
    
    .main {
    background: var(--background-secondary);
    padding: var(--py) 0;
    }
    
    .blog .h2 {
    line-height: 1.3;
    margin-bottom: 3rem;
    text-align: center;
    }
    
    .sidebar {
    height: 40%;
    width: 100%;
    border-radius: 5%;
    padding: 3%;
    position: sticky;
    top: 0;
    background-color: #676464ca;
    overflow-y: auto;
    transition: 0.3s;
    }
    
    .sidebar a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: block;
    padding: 0px 10px;
    }
    
    .sidebar a:hover {
    width: max-content;
    background-color: #00000093;
    border-radius: 5px;
    font-size: 20px;
    }
    
    
    /* -----------------------------------
    #ASIDE
    ----------------------------------- */
    
    .aside {
    display: none;
    }
    
    
    /* -----------------------------------
    #FOOTER
    ----------------------------------- */
    
    footer {
    background: var(--background-primary);
    }
    
    footer .container {
    padding: var(--py) 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    }
    
    footer .wrapper {
    text-align: center;
    }
    
    .footer-text {
    color: var(--foreground-secondary);
    max-width: 300px;
    margin-inline: auto;
    margin: auto;
    /* fallback for margin-inline */
    }
    
    .footer-title {
    color: var(--foreground-primary);
    font-weight: 700;
    margin-bottom: 0.4rem;
    }
    
    .footer-link {
    color: var(--foreground-secondary);
    }
    
    .footer-link:hover {
    color: var(--accent);
    }
    
    .copyright {
    color: var(--foreground-secondary);
    font-size: var(--fs-4);
    text-align: center;
    padding: 1rem;
    border-top: 1px solid var(--action-primary);
    }
    
    .copyright a {
    color: var(--accent);
    font-weight: 500;
    }
    
    .copyright a:hover {
    text-decoration: underline;
    }
    
    
    /* -----------------------------------
    #MEDIA QUERIES
    ----------------------------------- */
    
    
    /*
    responsive for larger than 550px screen
    */
    
    @media (min-width: 550px) {
    :root {
    /**
    * typography
    */
    --fs-base: 0.90rem;
    }
    /**
    * BLOG
    */
    .blog-card {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 20px;
    }
    .blog-card-banner {
    display: block;
    overflow: hidden;
    border-radius: 5px;
    }
    .blog-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    }
    
    
    /*
    responsive for larger than 650px screen
    */
    
    @media (min-width: 650px) {
    :root {
    /**
    * typography
    */
    --fs-1: 2.25rem;
    }
    /**
    * REUSED STYLE
    */
    .container {
    padding: 0 30px;
    }
    /**
    * HEADER
    */
    .navbar {
    padding: 30px 0;
    }
    /**
    * BLOG
    */
    .blog .h2 {
    position: relative;
    text-align: left;
    padding-left: 2rem;
    }
    .blog .h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--action-primary);
    width: 5px;
    height: 100%;
    border-radius: 5px;
    }
    .blog-text,
    .profile-wrapper {
    display: block;
    }
    .blog-text {
    color: var(--foreground-secondary);
    font-size: var(--fs-4);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
    }
    .blog .wrapper-flex {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    }
    .profile-wrapper {
    width: 56px;
    height: 56px;
    background: var(--action-primary);
    padding: 3px;
    border-radius: 50%;
    }
    .profile-wrapper img {
    border-radius: 50%;
    }
    .blog .wrapper {
    flex-direction: column;
    align-items: start;
    gap: 0;
    }
    .blog .sidebar ul ul {
    padding-left: 20px;
    }
    /**
    * FOOTER
    */
    footer .container {
    padding: var(--py) 30px;
    grid-template-columns: 2fr 1fr 1fr;
    }
    footer .wrapper {
    text-align: left;
    }
    .footer-text {
    margin: 0;
    }
    }
    
    
    /*
    responsive for larger than 768px screen
    */
    
    @media (min-width: 768px) {
    /**
    * REUSED STYLE
    */
    .container {
    max-width: 800px;
    }
    }
    
    
    /*
    responsive for larger than 1024px screen
    */
    
    @media (min-width: 1024px) {
    :root {
    /*
    typography
    */
    --fs-base: 1rem;
    --fs-1: 3rem;
    }
    /*
    REUSED STYLE
    */
    .container {
    max-width: 1150px;
    }
    /*
    HEADER
    */
    header .btn-group {
    display: none;
    }
    header .flex-wrapper {
    display: flex;
    gap: 30px;
    }
    .desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    }
    .desktop-nav .nav-link {
    color: var(--foreground-secondary);
    font-weight: 700;
    }
    .desktop-nav .nav-link:hover {
    color: var(--accent);
    }
    .theme-btn-desktop {
    position: relative;
    background: var(--background-secondary);
    color: var(--white);
    width: 52px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    }
    .theme-btn-desktop.light {
    background: linear-gradient(45deg, hsl(7, 100%, 71%), hsl(46, 100%, 65%));
    }
    .theme-btn-desktop.dark {
    background: linear-gradient(45deg, hsl(225, 100%, 60%), hsl(296, 80%, 40%));
    }
    .theme-btn-desktop::before {
    content: '';
    position: absolute;
    background: var(--white);
    width: 21px;
    height: 21px;
    border-radius: 30px;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05);
    z-index: 2;
    }
    .theme-btn-desktop.dark::before {
    left: calc(100% - 24px);
    }
    /**
    * HERO
    */
    .hero {
    text-align: left;
    }
    .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    }
    .hero .btn-group {
    justify-content: start;
    gap: 30px;
    }
    .hero .right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .hero .img-box {
    position: initial;
    }
    .hero-img {
    width: 100%;
    object-fit: cover;
    border-radius: 0 0 250px 250px;
    transform: translate(10px, -10px);
    }
    /**
    * MAIN
    */
    .main .container {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 60px;
    }
    /**
    * ASIDE
    */
    .aside {
    display: block;
    align-self: stretch;
    }
    .aside .h2 {
    color: var(--foreground-secondary);
    margin-bottom: 3rem;
    text-align: center;
    line-height: 1.3;
    }
    .aside .wrapper {
    background: var(--background-primary);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
    }
    .topics {
    margin-bottom: 3rem;
    }
    .topic-btn {
    display: flex;
    align-items: stretch;
    background: var(--background-primary);
    border-radius: 10px;
    box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
    overflow: hidden;
    }
    .topic-btn:not(:last-child) {
    margin-bottom: 1rem;
    }
    .topic-btn .icon-box {
    font-size: 22px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--action-primary);
    color: var(--foreground-secondary);
    }
    .topic-btn:hover .icon-box {
    background: var(--accent);
    color: var(--white);
    }
    .topic-btn ion-icon {
    --ionicon-stroke-width: 40px;
    }
    .topic-btn p {
    padding: 15px;
    color: var(--foreground-secondary);
    font-weight: 700;
    }
    .tags {
    margin-bottom: 3rem;
    }
    .tags .wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    }
    .tags .hashtag {
    background: var(--action-primary);
    color: var(--foreground-secondary);
    padding: 5px 10px;
    font-size: var(--fs-5);
    font-weight: 700;
    border-radius: 5px;
    }
    .tags .hashtag:hover {
    background: var(--foreground-secondary);
    color: var(--action-primary);
    }
    .contact {
    margin-bottom: 3rem;
    }
    .contact p {
    color: var(--foreground-secondary);
    margin-bottom: 1rem;
    }
    .social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    }
    .social-link .icon-box {
    width: 45px;
    height: 45px;
    background: var(--action-secondary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    }
    .social-link .discord {
    color: hsl(235, 86%, 65%);
    }
    .social-link .twitter {
    color: hsl(203, 89%, 53%);
    }
    .social-link .facebook {
    color: hsl(220, 46%, 48%);
    }
    .social-link .icon-box:hover {
    background: var(--accent);
    color: var(--white);
    }
    .newsletter {
    position: sticky;
    top: 3rem;
    margin-bottom: 98px;
    }
    .newsletter p {
    color: var(--foreground-secondary);
    margin-bottom: 1rem;
    }
    .newsletter input {
    border: none;
    background: var(--action-primary);
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font: inherit;
    color: var(--foreground-secondary);
    border-radius: 5px;
    margin-bottom: 1rem;
    }
    .newsletter input::placeholder {
    color: inherit;
    }
    .newsletter input:focus {
    outline: 2px solid;
    outline-offset: 0;
    }
    .newsletter .btn-primary {
    margin-inline: auto;
    margin: auto;
    /* fallback for margin-inline */
    }
    /**
    * FOOTER
    */
    .footer-title {
    font-size: 1.125rem;
    }
    .footer-link {
    margin-bottom: 0.3rem;
    }
    }

JS Code [script.js]:

    <!-- start code 

    'use strict';
    
    // navbar variables
    const nav = document.querySelector('.mobile-nav');
    const navMenuBtn = document.querySelector('.nav-menu-btn');
    const navCloseBtn = document.querySelector('.nav-close-btn');
    
    
    // navToggle function
    const navToggleFunc = function () { nav.classList.toggle('active'); }
    
    navMenuBtn.addEventListener('click', navToggleFunc);
    navCloseBtn.addEventListener('click', navToggleFunc);
    
    
    
    // theme toggle variables
    const themeBtn = document.querySelectorAll('.theme-btn');
    
    
    for (let i = 0; i < themeBtn.length; i++) { themeBtn[i].addEventListener('click', function () { // toggle `light-theme`
        & `dark-theme` class from `body` // when clicked `theme-btn` document.body.classList.toggle('light-theme');
        document.body.classList.toggle('dark-theme'); for (let i=0; i < themeBtn.length; i++) { // When the `theme-btn` is
        clicked, // it toggles classes between `light` & `dark` for all `theme-btn`. themeBtn[i].classList.toggle('light');
        themeBtn[i].classList.toggle('dark'); } }) }

        end code -->

JS Code [script.min.js]:

    <!-- start code

    "use strict";const nav=document.querySelector(".mobile-nav"),navMenuBtn=document.querySelector(".nav-menu-btn"),navCloseBtn=document.querySelector(".nav-close-btn"),navToggleFunc=function(){nav.classList.toggle("active")};navMenuBtn.addEventListener("click",navToggleFunc),navCloseBtn.addEventListener("click",navToggleFunc);const themeBtn=document.querySelectorAll(".theme-btn");for(let i=0;i<themeBtn.length;i++)themeBtn[i].addEventListener("click",(function(){document.body.classList.toggle("light-theme"),document.body.classList.toggle("dark-theme");for(let i=0;i<themeBtn.length;i++)themeBtn[i].classList.toggle("light"),themeBtn[i].classList.toggle("dark")}));

    end code-->

Tips: How to make a free logo

In most cases, we are not skilled in Photoshop or design; this also applies to me. I thus used some online assistance to create a fantastic and free logo for my website. I'll list every resource below, along with a case study:

Step 1: Logo Design-1
Logo Design-2
Step 2:Remove Background
Step 3:Control Image resulation
Step 4: Go to photoshop and resize image as you like.Online Photoshop

STEP 16:how to make the taskbar

The elements are structured to create a header section that includes a title, a responsive menu icon, and a navigation menu with links to different web page sections. The 'div' acts as a container to hold these elements and manage their layout or styling.'' ul id=" top nav": This is an unordered list (ul) with an ID "top nav" used to create a navigation menu. List Items 'li' These are individual list items within the navigation menu, each containing an anchor element 'a' representing a link to different website sections.

HTML code for taskber:

<div id="banner">
  <h1>HOW TO BUILD <em>WEB</em> </h1>
                        
                        
  <label for="show-menu" class="responsive">☰</label>
   <input type="checkbox" id="show-menu" role="button">
   <ul id="topnav">
        <li><a class="active">Tools Prepare</a></li>
        <li><a href="#settings" class="nav-link">Local settings</a></li>
        <li><a href="#howtodo" class="nav-link">How to write the Frist document</a></li>
        <li><a href="#banner1" class="nav-link">How to Make Taskbar</a></li>
        <li><a href="#directory" class="nav-link">Project Directory Structure</a></li>
        <li><a href="#collaborate" class="nav-link">Team collaborate</a></li>
                        
   </ul>
                        
</div>

CSS code for taskber:

#banner {
position: fixed;
width: 100%;
z-index: 9999;
top: 0;
height: 100px;
border: 0px;
color: #fff;
background: #abab83;
background: -moz-linear-gradient(top, #abab83 0%, #abab83 0%, #abab83 50%, #a1a172 51%, #a1a172 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #abab83), color-stop(0%, #abab83), color-stop(50%, #abab83), color-stop(51%, #a1a172), color-stop(100%, #a1a172));
background: -webkit-linear-gradient(top, #abab83 0%, #abab83 0%, #abab83 50%, #a1a172 51%, #a1a172 100%);
background: -o-linear-gradient(top, #abab83 0%, #abab83 0%, #abab83 50%, #a1a172 51%, #a1a172 100%);
background: -ms-linear-gradient(top, #abab83 0%, #abab83 0%, #abab83 50%, #a1a172 51%, #a1a172 100%);
background: linear-gradient(to bottom, #abab83 0%, #abab83 0%, #abab83 50%, #a1a172 51%, #a1a172 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#abab83', endColorstr='#a1a172', GradientType=0);
}
                                    
#banner h1 {
    font-size: 32px;
 }
                                    
#banner h1 em {
    font-style: normal;
     text-decoration: none;
    color: #111;
 }
                                    
#show-menu {
    display: none;
}
                                    
.responsive {
    background-color: inherit;
    color: #fff;
    text-align: left;
    font-weight: normal;
    font-size: 1.5em;
    padding: 0;
    position: absolute;
    top: 80%;
    display: none;
}
                                    
ul#topnav {
    list-style-type: none;
    margin: 0 0 0 1%;
    display: table;
    padding: 0;
    overflow: hidden;
     width: 60%;
    position: absolute;
    bottom: 0;
}
                                    
ul#topnav li {
    display: table-cell;
    text-align: center;
}
                                    
ul#topnav li a {
    background: #333;
    color: #999;
    border: none;
    display: block;
    margin-right: 5px;
    padding: 5px 0px;
    text-decoration: none;
    font-size: 12px;
}
                                    
ul#topnav li a.active,
ul#topnav li a.active:hover {
    background: #fff;
    color: #333;
}
                                    
ul#topnav li a:hover {
      background: #cc9;
color: #111;
}

STEP 17:Project Directory Structure

This is a directory structure for the "2023zjudem-INNOGENIUSES" project, organizing files into folders such as "js" for JavaScript files, "img" for images, and specific folders for different project aspects like "arduino," "Build-web," and "Computer-aided-design," each containing relevant files for their respective purposes. The project includes HTML, CSS, and JavaScript files along with image assets, facilitating various components of the project development

Note:NexMaker-Fab/2023zjudem-INNOGENIUSES: Under this GitHub repository, we upload our full website, and We use a simple link tag to connect all HTML files.

Root Files:
index.html: Presumably the main entry point or landing page for the project.
main.css: A stylesheet likely used for styling the HTML content.
JavaScript Files:
Located within the js directory, comprising script.js and script.min.js, possibly handling interactive elements or functionalities on the website.
Image Assets:
Stored in the img directory, containing various images such as group1.jpg, teamLogo.png, teamLogoDark.png, teamPhoto.jpg, and teamPhotoNight.jpg, likely used for visuals across the project.
Subdirectories:
Three main subdirectories (arduino, Build-web, Computer-aided-design) seem to hold similar structures:
Each subdirectory contains an HTML file named arduino.html, along with respective CSS (styles1.css) and JavaScript (a.js, b.js, c.js) files, possibly indicating different sections or aspects of the project.
These directories also have nested img folders holding image assets (1.png and others), potentially specific to each section's content or functionalities.
Documentation:
README.md likely serves as documentation or a guide for the project.

STEP 18: How to collaborate with team

1.Inviting a team or person

Phase 1: Request the username of the individual you're inviting to collaborate.

Under your repository name, click Settings, If you cannot see the "Settings" tab, select the dropdown menu, then click Settings.
In the "Access" section of the sidebar, click Collaborators and teams as displayed

To the right of "Manage access", click Add people or Add teams and In the search field, start typing the name of the team or person to invite, then click a name in the list of matches.

In the search field, start typing the name of the team or person to invite, then click a name in the list of matches.

Under "Choose a role", select the repository role to grant to the team or person

Under "Manage access", next to the team or person whose access you'd like to remove, click Remove

Using this search box, you can easily find your team member

Team members

STEP 18:Teammember's template

We followed some videos and free templates to design our team member template. Each team member makes their template for themself.

Throughout this journey, we've seamlessly uploaded our website to GitHub, employing the same method for our members' web pages. Here's a glimpse of one of our team member's splendidly crafted web pages.

Crafted this template with a blend of HTML, CSS, and a touch of straightforward JavaScript coding.

Note: The reference video to make this template is in the reference section

Reference

NexMaker-Fab

HOW TO BUILD WEB

STEP1: Prepare

STEP 2: Pointers

STEP 3: Local Settings

STEP 4: Live Server Extension

How to write the website document

STEP 5: Make folder and file for writing code to build a website

STEP 6: Store Resources in img folder

STEP 7: Title and Title logo

STEP 8: Divided and write document for webpage

STEP 9: Logo & navbar Design

STEP 10: Switch Day/Night Button

STEP 11: How to build HomePage Title and Button

STEP 12: How to design team photo

STEP 13: How to build Project Board & Team list

Project List

Team List

STEP 14: Footer

Final Step: All the source code of our Homepage

Tips: How to make a free logo

STEP 16:how to make the taskbar

STEP 17:Project Directory Structure

Root Files:

JavaScript Files:

Image Assets:

Subdirectories:

Documentation:

STEP 18: How to collaborate with team

1.Inviting a team or person

STEP 18:Teammember's template

Reference