My Journey in Web Design: Building Five Diverse Projects

My Journey in Web Design: Building Five Diverse Projects - Blogs

about-projects

As a budding web designer, my journey through a web designing course has been both challenging and immensely rewarding. It's been an exciting opportunity to put my newly acquired skills into practice and turn my creative ideas into functioning websites. In this blog, I want to share my experiences and insights from completing five distinct projects during my web design course.

1. E-commerce :

My first project was building an e-commerce website. It was an exhilarating experience crafting an online store from scratch. I had to focus on creating an intuitive user interface, ensuring seamless navigation, and implementing secure payment gateways. The project taught me the importance of user experience and the intricacies of online transactions.

2. Cooperative :

The second project revolved around designing a website for a cooperative organization. This project had a strong community-driven focus. It required me to incorporate interactive features, member profiles, and discussion forums to encourage collaboration. The project highlighted the significance of user engagement and community building.

3. News Portal :

Creating a news portal was my third venture. It was a different ballgame altogether. I had to design a platform that could deliver news updates efficiently, categorize articles, and maintain an appealing layout. This project deepened my understanding of content management and the need for dynamic, up-to-date websites.

4. Tour & Travels :

For the fourth project, I delved into the world of travel and tourism. Designing a website for a tour and travel agency was a thrilling endeavor. I had to focus on showcasing stunning destinations, offering travel itineraries, and providing a smooth booking experience. It highlighted the significance of visual appeal and marketing in the travel industry.

5. NGO's Noble :

Lastly, my fifth project was building a website for an NGO. This project was close to my heart as it involved supporting a noble cause. I needed to create a platform that could effectively convey the organization's mission, showcase their work, and encourage donations. It was a reminder of the importance of empathy in web design.

Throughout these projects, I learned not only about the technical aspects of web design but also about the importance of understanding the unique requirements and goals of each project. It was a journey of creativity, problem-solving, and continuous learning. I faced challenges, sought solutions, and celebrated small victories with each project completed.

As I reflect on these diverse experiences, I'm excited about the endless possibilities that web design offers. Each project has shaped me as a designer and has given me a deeper appreciation for the impact of effective web design on businesses, organizations, and users. I look forward to applying these lessons in my future endeavors and continuing to explore the ever-evolving world of web design.

Prerequisites

Before we begin, make sure you have the following:

A code editor (e.g., Visual Studio Code, Sublime Text).
Basic knowledge of HTML, CSS or SCSS, and JavaScript.
A browser for testing (e.g., Chrome, Firefox).

Setting Up the Project

Let's start by setting up our project directory. Create the following files:

index.html - The main HTML file.
styles.scss - The SCSS file for styling our buttons.
script.js - The JavaScript file for adding interactivity.

button1

<a href='' class='button1' to='/cart'>button1</a>

.button1 {
            background-color: #051242;
            padding: 10px 60px 10px 25px;
            display: inline-block;
            font-weight: 500;
            font-size: 18px;
            color: white;
            position: relative;
            text-transform: uppercase;
            text-decoration: none;
            transition: 0.3s;
        }
        
        .button1::after {
            content: '';
            position: absolute;
            top: 48%;
            right: 10px;
            border-top: 1px solid white;
            height: 0.5px;
            width: 23px;
            transition: 0.3s;
        }
        
        .button1::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 128%;
            border: 2px solid #051242;
            top: -14%;
            right: -7px;
            transition: 0.3s;
        }
        
        .button1:hover {
            background-color: green;
        }
        
        .button1:hover::after {
            width: 35px;
        }
        
        .button1:hover::before {
            border-color: green;
            width: 30px;
        }

 .button1 {
            background-color: #051242;
            padding: 10px 60px 10px 25px;
            display: inline-block;
            font-weight: 500;
            font-size: 18px;
            color: white ;
            position: relative;
            text-transform: uppercase;
            text-decoration: noneI;
            transition: 0.3s;
    
            &::after {
                content: '';
                position: absolute;
                top: 48%;
                right: 10px;
                border-top: 1px solid white;
                height: 0.5px;
                width: 23px;
                transition: 0.3s;
            }
    
            &::before {
                content: '';
                position: absolute;
                width: 20px;
                height: 128%;
                border: 2px solid #051242;
                top: -14%;
                right: -7px;
                transition: 0.3s;
            }
    
            &:hover {
                background-color: green;
    
                &::after {
                    width: 35px;
                }
    
                &::before {
                    border-color: green;
                    width: 30px;
                }
            }
    
        }

JavaScript is not needed.

button2

<a href="" class="button2">button2</a>

.button2 {
            background-color: #051242;
            position: relative;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
            padding: 10px 25px;
            text-transform: uppercase;
        }
        
        .button2::before {
            content: '';
            position: absolute;
            width: 0%;
            height: 100%;
            top: 0px;
            right: 0px;
            background-color: #00BFF6;
            transition: 0.5s ease;
            border-radius: 5px;
            z-index: 1;
        }
        
        .button2 span {
            color: #00BFF6;
            position: relative;
            z-index: 2;
        }
        
        .button2:hover::before {
            width: 100%;
            left: 0px;
        }
        
        .button2:hover span {
            color: #051242;
        }


        .button2 {
            background-color: #051242;
            position: relative;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
            padding: 10px 25px;
            text-transform: uppercase;
    
    
            &::before {
                content: '';
                position: absolute;
                width: 0%;
                height: 100%;
                top: 0px;
                right: 0px;
                background-color: #00BFF6;
                transition: 0.5s ease;
                border-radius: 5px;
                z-index: 1;
            }
    
            span {
                color: #00BFF6;
                position: relative;
                z-index: 2;
            }
    
            &:hover {
                &::before {
                    width: 100%;
                    left: 0px;
                }
    
                span {
                    color: #051242;
                }
            }
    
        }

JavaScript is not needed

button3

<a href="" class="button3">button3</a>

.button3 {
            font-family: 'Arial', sans-serif;
            text-transform: uppercase;
            text-decoration: none;
            background-color: #0c007a;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
            transition: background-color 0.3s, transform 0.3s;
            z-index: 1;
            display: inline-block;
        }
        
        .button3::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-color: #00bcd4;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
        }
        
        .button3 span {
            color: #fff;
            position: relative;
            z-index: 2;
        }
        
        .button3:hover {
            background-color: #00bcd4;
            transform: scale(1.1);
        }
        
        .button3:hover::before {
            width: 100px;
            height: 100px;
        }

.button3 {
            font-family: 'Arial', sans-serif;
            text-transform: uppercase;
            text-decoration: none;
            background-color: #0c007a;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
            transition: background-color 0.3s, transform 0.3s;
            z-index: 1;
            display: inline-block;
    
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background-color: #00bcd4;
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: width 0.3s, height 0.3s;
            }
    
            span {
                color: #fff;
                position: relative;
                z-index: 2;
            }
    
            &:hover {
                background-color: #00bcd4;
                transform: scale(1.1);
    
                &::before {
                    width: 100px;
                    height: 100px;
                }
            }
        }

JavaScript is not needed

button4

<a href="" class="button4">button4</a>

.button4 {
            color: white;
            background-color: #051242;
            padding: 10px 25px;
            display: inline-block;
            text-transform: uppercase;
            font-size: 15px;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            text-decoration: none;
        }
        .button4 span {
            z-index: 2;
            position: relative;
        }
        .button4::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #084a96;
            border-radius: 50%;
            top: 100%;
            left: 20%;
            transition: all 0.5s;
        }
        .button4:hover::after {
            transform: scale(4);
        }

.button4 {
            color: white;
            background-color: #051242;
            padding: 10px 25px;
            display: inline-block;
            text-transform: uppercase;
            font-size: 15px;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            text-decoration: none;
            span {
                z-index: 2;
                position: relative;
            }
            &::after {
                content: '';
                position: absolute;
                width: 50px;
                height: 50px;
                background-color: #084a96;
                border-radius: 50%;
                top: 100%;
                left: 20%;
                transition: all 0.5s;
            }
            &:hover::after {
                transform: scale(4);
            }
        }

JavaScript is not needed.

about-projects

1. E-commerce :

2. Cooperative :

3. News Portal :

4. Tour & Travels :

5. NGO's Noble :

Prerequisites

Setting Up the Project

View Code

View Code

View Code

View Code