Final Output

final output

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

1. https://nodejs.org - Node.js

2. https://yarnpkg.com - Yarn or npm (Node Package Manager)

I will be using npm in this article.

Setting Up the Project

Let's start by creating a new React + Vite project and installing the necessary dependencies.

Step 1: Create a new project using Vite.

npm create vite@latest

New react project using vite

Vite Project Structure

Step 2: Install React and other required dependencies.

npm install react-router-dom mapbox-glStep 3: Install Mapbox GL JS and its React wrapper.

installing dependencies

Start the server with : npm run dev

vite server

Step 3 : Create your mapbox access token by creating a free Account <a href="https://account.mapbox.com/">Mapbox</a>

accessing mapbox token

Building Interactive Maps in React + Vite App

1. Create public/index.html file

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MapBox GL</title>
</head>

<body>
  <div id="root"></div>

  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

output :

This code creates the basic structure of the HTML page your users will see. There is a <div> element with the ID "root" in the <body> of the page. This <div> is the container in which the Bite+react app will be rendered on the page.

2. Import mapbox styles in main.jsx

src/main.jsx

main.jsx

3. Add Mapbox GL JS in App.jsx

4. Set up App's initlal states

src/App.jsx

5. Use "UseEffect()" to initialize Map

useEffect to initialize map

1. The style option defines the style that the map will use (mapbox://styles/mapbox/streets-v12)

2. The center and zoom options set the center coordinates and zoom level of the map using the values of lng, lat, and zoom that are stored in state.

3. If you are using hooks, you also created a map useRef to store the initialize the map. The ref will prevent the map from reloading when the user interacts with the map.

6. Render the Map

src/App.jsx

render map

7. Style the map-container

.map-container {

height: 600px;

width: 800px;

margin: 0 auto;

}

Save the changes.

Result :

Result

Displaying the coordinates

1. Store the Co-ordinates

src/App.jsx

Store co-ordinates

getCenter() - this is Mapbox GL JS methodd to get the lattitude and longitude of the center point of page

toFixed() - this is JS method that truncates resukting floating number to certain number of digits

getZoom() - this is Method which is used to get the zoom level of map

save the changes

2. Display the co-ordinates

src/App.jsx : (returen paratmeters along with map)

return (

<div>

<div className="sidebar">

Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}

</div>

<div ref={mapContainer} className="map-container" />

</div>

);

src/App.css : Include (slidebar styles)

.sidebar {

background-color: rgba(35, 55, 75, 0.9);

color: #fff;

padding: 6px 12px;

font-family: monospace;

z-index: 1;

position: absolute;

top: 0;

left: 350px;

margin: 12px;

border-radius: 4px;

}

Save changes.

Final Product

Mapbox: https://www.mapbox.com/

Learn React.js: https://react.dev/learn

I hope this blog helped you !! Stay tuned for more interesting tutorials like this :

Connect with me: https://linktr.ee/Devgrammer

CSS filters have become an indispensable tool for web designers, allowing them to apply various visual effects to elements on a web page. These filters provide the ability to modify the appearance of images, text, and other graphical elements, enhancing the overall aesthetic appeal and user experience. In this article, we'll explore the world of CSS filters, understand their functionalities, and learn how to utilize them effectively in web design.

1. Understanding CSS Filters: CSS filters are a set of image-processing techniques that alter the visual presentation of elements on a webpage. They can be applied to both images and other HTML elements, providing designers with a wide range of creative possibilities. CSS filters work by modifying certain visual properties such as color, brightness, contrast, and blur, resulting in captivating visual effects.

2. Types of CSS Filters: 2.1. Grayscale Filter: The grayscale filter desaturate an element, converting it to shades of gray. It can be used to create a vintage or monochromatic effect, adding a touch of elegance to the design.

2.2. Blur Filter: The blur filter applies a blur effect to an element, giving it a softer and more dreamy appearance. It can be adjusted to achieve varying levels of blurriness, creating depth and focus on specific elements.

2.3. Brightness and Contrast Filters: The brightness and contrast filters allow designers to adjust an element's overall brightness and contrast levels. These filters are helpful in emphasizing certain elements or creating a particular mood in the design.

2.4. Saturation Filter: The saturation filter controls the intensity of colors within an element. It can be used to make colors more vibrant or desaturated, providing a means to create visually striking designs.

2.5. Hue Rotation Filter: The hue rotation filter enables designers to shift the hue of an element along the color wheel. This filter allows for the creation of unique and eye-catching color schemes, adding a dynamic touch to the design.

1. Applying CSS Filters: To apply CSS filters, you can use the filter property in your CSS code. For example:

cssCopy code.my-element {
  filter: grayscale(100%);
}

This code snippet applies the grayscale filter to the element with the class "my-element."

1. Browser Compatibility: CSS filters are supported by modern web browsers, including Chrome, Firefox, Safari, and Edge. However, it's essential to consider cross-browser compatibility and test your designs on different platforms to ensure consistent visual experiences for all users.

Different Types of Filters and Their Examples

Normal Image :

Blur Filter

img{
 filter : blur(8px);
}

Brightness filter

img{
 filter : brightnes(1.5);
}

Contrast Filter

img{
 filter : contrast(250%);
}

Hue Rotate filter

img{
 filter : hue-rotate(60deg);
}

Invert filter

img{
 filter : invert(85%);
}

Conclusion: CSS filters offer web designers a powerful set of tools to enhance their designs with captivating visual effects. By understanding the principles and various types of CSS filters, you can unlock a whole new level of creativity and create visually stunning web experiences. Experiment with different filters and explore their combinations to elevate your web design to the next level.

I hope you have understood the concept of CSS filters!!!

Follow Sanket Jagdale for more !!!

Let's Connect : https://linktr.ee/Devgrammer

we will be discussing different use cases and real-life examples, and in the end, we will see one demo of 'git restore'.

Use cases of git restore :

1. git restore helps us unstage' or even discard 'uncommitted' local changes

2. It can be used to undo the effect of 'git add' and unstage the changes you have previously added in the staging area

3. It can also be used to discard local 'uncommitted' changes in your project, restoring the last committed state.

Real-Life Example :

Let's say your technical club organizes one hackathon, and today is the award ceremony for it. The announcers are just announcing the winners.

So, the announcer, by mistake, calls "Team 30" the winners, and he calls that team on the stage.

But the real winners were "Team 13" so the next task of the announcer would be to apologize to the team which was on stage and unstaged them(Team 30)

The next task here would be to call the correct winners on stage, so the announcer now announces the correct winners (Team 13) and calls all of them on stage, and then all the winners are awarded trophies.

So, this was one example by which you can relate and understand the use of the 'git restore' command.

Let's say there is one file and you make some changes to it, and then you add those changes to the staging area with the help of 'git add' but later you realize that you have added the wrong files on the staging area so, in this case, you can always unstaged the wrong changes you have done and then stage the changes that you want to do.

Example

1. Let's start with an empty HTML file.

2. Let's make some changes to this file and then check the status

3. Let's add this file to the staging area and again check the status of the file

4. Let's unstage this file using git restore

git restore --staged [file_name]

5. Let's check the status again

6. Let's discard the uncommitted change

git restore [file_name]

7. If we see the file now then it will be at its initial stage

8. Finally, let's do some necessary changes and add this file to the staging area and then commit them.

So, this was the practical example of git restore, I hope you have understood the concept of 'git restore'.

YouTube Video Link : https://youtu.be/Nn-Qh-y7wj4

Connect with me : https://linktr.ee/Devgrammer

I will be publishing this article on GeeksforGeeks as well. Check my profile https://auth.geeksforgeeks.org/user/sanketsjagdale999

Codemods are transformations that run on your codebase programmatically. This allows for a large number of changes to be applied without having to manually go through every file. Next.js provides codemod transformations to help upgrade your Next.js codebase when an API is updated or deprecated.

Here is an example of how a codemod works:

Let's say that the Next.js team deprecates the next/image component and introduces a new next/image-experimental component. You can use the next-image-to-legacy-image codemod to automatically migrate your codebase to use the new component.

The codemod will first scan your codebase for all imports of the next/image component. Then, it will replace each import with the next/image-experimental component. Finally, it will save the changes to your files.

Codemods are a great way to save time and effort when upgrading your Next.js codebase. They can also help you avoid making mistakes.

Here are some of the benefits of using Next.js codemods:

• Save time and effort: Codemods can automate the process of upgrading your codebase, which can save you a lot of time and effort.

• Avoid mistakes: Codemods can help you avoid making mistakes when upgrading your codebase. This is because codemods are programmatically applied, which means that there is less chance of human error.

• Stay up-to-date: Codemods can help you stay up-to-date with the latest Next.js features. This is because codemods can be used to apply changes to your codebase when new features are released.

If you are looking for a way to save time and effort when upgrading your Next.js codebase, then codemods are a great option. They can also help you avoid making mistakes and stay up-to-date with the latest Next.js features.

Most commonly used Next.js codemods:

• next-image-to-legacy-image: This codemod renames imports of the next/image component to the deprecated next-image component.

• next-image-experimental: This codemod migrates your codebase to use the new next/image component.

• new-link: This codemod removes the <a> tags from Link components and replaces them with the href prop.

• cra-to-next: This codemod migrates your codebase from Create React App to Next.js.

• add-missing-react-import: This codemod adds import React from 'react' to files that do not already have it.

• name-default-component: This codemod transforms anonymous components into named components.

• withamp-to-config: This codemod transforms the withAMP HOC into a page config.

• url-to-withrouter: This codemod replaces uses of the url prop with the withRouter component.

To use a codemod, you can run the following command in your terminal:

npx @next/codemode <transform> <path>

Eg) npx @next/codemod next-image-to-legacy-image ./
This would run the codemod on all files in the current directory.

You can also use the --dry flag to run the codemod in a dry run mode, which will print the changes that would be made without actually making any changes to your code.

The --print flag can be used to print the changed output for comparison.

Safely renames next/image imports in existing Next.js 10, 11, or 12 applications to next/legacy/image in Next.js 13. Also renames next/future/image to next/image.

pages/index.js

import Image1 from 'next/image'
import Image2 from 'next/future/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/demo1.jpg" width="300" height="400" />
      <Image2 src="/demo1.png" width="600" height="500" />
    </div>
  )
}

pages/index.js

// 'next/image' becomes 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' becomes 'next/image'
import Image2 from 'next/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/demo1.jpg" width="300" height="400" />
      <Image2 src="/demo1.png" width="600" height="500" />
    </div>
  )
}

Conclusion

Codemods are a powerful tool that can help you upgrade your Next.js codebase. If you are looking for a way to save time and effort, then codemods are a great option.

I hope this article has helped you understand Next.js codemods. If you have any further questions, please feel free to ask me.

Follow Sanket Jagdale for more !!

My LinkTree : https://linktr.ee/Devgrammer

Frontend development, also known as client-side development, is the practice of creating the visual and interactive components of a website or application that users see and interact with.

In the web development process, front-end development comes after the design stage and before the back-end development stage. The frontend developer takes the design files (typically created in tools like Adobe Photoshop or Sketch) into functional, interactive web pages using programming languages such as HTML, CSS, and JavaScript.

Frontend developers also use various tools and frameworks to streamline their workflow and make the development process more efficient. Some popular front-end frameworks include React, Angular, and Vue.js.

Importance of Frontend :

1. User experience: The frontend is the user’s first point of contact with a website or application, and it determines how the user interacts with the site. A well-designed frontend that is easy to use and aesthetically pleasing can greatly enhance the user experience and keep users engaged.

2. Responsiveness: With the increasing use of mobile devices, it is essential that websites and applications are designed to be responsive to different screen sizes. Frontend development plays a crucial role in ensuring that websites and applications are optimized for mobile devices and provide a seamless user experience across all devices.

3. Accessibility: Frontend development can also improve the accessibility of websites and applications for users with disabilities. Using accessible design practices, such as semantic HTML and ARIA (Accessible Rich Internet Applications) attributes, frontend developers can ensure that their websites and applications are usable by a wider audience.

4. SEO: A well-designed frontend can also improve the search engine optimization (SEO) of a website or application. By using proper HTML tags, structured data, and semantic markup, frontend developers can help search engines better understand the website's content and improve its visibility in search engine results pages.

5. Performance: The frontend can also affect the performance of a website or application. By optimizing the code, minimizing the number of requests, and using efficient design practices, frontend developers can improve the performance of the website and provide a faster and smoother user experience.

6. Brand identity: The frontend design is also important for establishing and maintaining a brand’s identity. A consistent design language and visual style across a website or application can help to reinforce a brand’s identity and make it more memorable to users.

Timeline of the evolution

This timeline shows how the initial technologies of HTML, CSS, and the DOM were followed by the addition of JavaScript for interactivity and AJAX for faster loading. Then came the rise of responsive design and CSS frameworks, followed by the shift towards component-based architecture and the emergence of newer CSS technologies like grid/flexbox and CSS variables. More recent additions to the frontend ecosystem include Web Components, PWA, and WebGPU.

Frontend development has come a long way since the early days of the World Wide Web. From basic HTML and CSS to complex component-based frameworks, the evolution of frontend development has been driven by a desire to create more engaging, interactive, and user-friendly web applications. Here’s a closer look at the different stages of frontend development:

A. 1990s: HTML and CSS

In the early days of the web, frontend development consisted primarily of creating simple static pages using HTML and CSS. HTML provided the structure of the page, while CSS was used for styling and layout. These basic tools were sufficient for creating basic websites, but they were limited in terms of interactivity and dynamic content.

B. 2000s: JavaScript

With the advent of JavaScript in the early 2000s, frontend development took a major leap forward. JavaScript made it possible to create more interactive and dynamic web applications, with features like animations, pop-ups, and form validation. JavaScript frameworks like jQuery made it easier to write complex code, and libraries like React and Vue allowed developers to build complex web applications with ease.

C. 2010s: Responsive Design

The rise of mobile devices in the 2010s led to a renewed focus on responsive design. Responsive design is a design approach that ensures that web applications look and function well on any device, regardless of its screen size or orientation. This was accomplished through the use of fluid layouts, flexible images, and CSS media queries.

D. 2020s: Component-based Frameworks

In recent years, frontend development has moved towards component-based frameworks. These frameworks provide a modular approach to building web applications, with reusable components that can be combined to create complex interfaces. Examples of component-based frameworks include Angular, React, and Vue.

The Future of Frontend:

The future of frontend web development is expected to be driven by a combination of emerging technologies, user demands, and developer efficiency. It will continue to evolve rapidly, providing exciting opportunities and challenges for frontend developers to create innovative and user-friendly web applications. Staying updated with the latest trends and technologies and continuously improving skills will be crucial for frontend developers to thrive in the ever-evolving web development landscape.

WebAssembly

WebAssembly (often abbreviated as wasm) is a binary instruction format for a stack-based virtual machine. It is designed as a low-level virtual machine that runs code at near-native speed, making it a powerful technology for frontend web development. Here are some potential future developments for WebAssembly in frontend web development:

1. Increased Adoption: WebAssembly has gained significant momentum since its introduction, and it is expected to continue to grow in adoption.

2. Broader Language Support: Currently, WebAssembly supports several programming languages, including C/C++, Rust, and Go.

AI and ML

The intersection of frontend web development with Artificial Intelligence (AI) and Machine Learning (ML) is an exciting area with significant potential for the future. Here are some key areas where AI and ML may impact frontend web development:

1. Personalized User Experiences: AI and ML technologies can analyze user behavior, preferences, and data to create personalized user experiences on the frontend.

2. Chatbots and Virtual Assistants: AI-powered chatbots and virtual assistants can be integrated into frontend web applications to provide interactive and dynamic interactions with users.

Progressive Web Apps (PWAs):

PWAs are web applications that function like native apps, providing a rich user experience with offline capabilities, push notifications, and seamless updates. PWAs are becoming increasingly popular due to their ability to offer a fast, engaging, and app-like experience on the web, and are likely to play a significant role in the future of frontend web development.

1. Enhanced Offline Capabilities: PWAs are known for their offline capabilities, allowing users to access content and features even without an internet connection.

2. Improved Performance: Performance is a critical factor for web applications, including PWAs.

Challenges and Opportunities

In today’s digital age, front-end development has become an essential component of building any successful web application or website. Frontend development involves designing and developing the visual elements of a web application or website that users interact with. It is the bridge between the user interface and the backend functionality of the application. However, front-end development comes with its own set of challenges and opportunities.

Challenges:

Limited technology: In the early days of frontend development, the technology was limited, which made it difficult to create dynamic and responsive web pages. Developers had to work with basic HTML, CSS, and JavaScript, which made it difficult to create complex layouts and interactions.

Limited tools: There were very few tools available to developers for testing and debugging, which made it difficult to identify and fix errors in code. Developers had to rely on manual testing, which was time-consuming and error-prone.

Browser compatibility: Different browsers had different ways of rendering web pages, which made it challenging to ensure that a website looked and functioned correctly across different browsers. Developers had to create browser-specific hacks and workarounds, which made the codebase more complex.

Lack of standards: In the early days, there were no industry standards for web development, which made it difficult to create consistent and reliable web pages. Developers had to rely on best practices and trial-and-error to figure out what worked and what didn’t.

Performance optimization: Performance optimization is a critical aspect of frontend development. Slow-loading web applications and websites can lead to poor user experience and lost revenue. Ensuring fast load times requires frontend developers to consider various factors such as file size, caching, and rendering time.

Opportunities:

Innovation: Early frontend development was a time of innovation, as developers were experimenting with new ways of creating web pages. This led to the creation of new techniques and tools that are still in use today.

Learning: With limited technology and tools, developers had to be creative and resourceful in solving problems. This led to a deep understanding of the underlying technologies and a strong foundation in the fundamentals of web development.

Flexibility: With no industry standards, developers had the flexibility to create web pages in their own way, which allowed for a lot of creativity and experimentation.

Impact: With the internet still in its early days, early frontend developers had the opportunity to create websites and web applications that had a significant impact on people’s lives. This inspired a generation of developers to continue pushing the boundaries of what was possible with web development.

Overall, early frontend development was a challenging but exciting time for developers. The limitations and challenges of the time pushed developers to be more innovative and creative, which laid the foundation for the modern web development industry.

Conclusion

In conclusion, the evolution of frontend development has been a gradual and continuous process, starting from the foundational technologies of HTML, CSS, and the DOM, and progressing towards more advanced and complex technologies like Web Components, PWA, and WebGPU. As technology has advanced, so has the frontend ecosystem, with each new technology building on the foundations of the previous ones. This evolution has led to the creation of more dynamic, responsive, and interactive web applications, which have become an integral part of our daily lives. The frontend development landscape is constantly evolving, and as new technologies continue to emerge, it will be interesting to see how they shape the future of web development.

Before going to resources, let’s understand what is HTML?

1. HTML is the hypertext markup language that decides how your web page will look like.

2. HTML defines the structure of the web page and it is used for creating different web pages.

3. HTML particularly discusses the structure of any web page.

next up let’s talk about some important Concepts that you should be focusing on while learning HTML starting with the

1. Different types of semantic tags: So on any web page there are different types of tags so you should be aware of different semantic tags which define the structure of a web page.

2. HTML forms: On the webpage, there is one important part of taking input from the user and working accordingly so you should be aware of HTML forms.

3. HTML tables: you should be aware of HTML tables so that you can create different tables of different sizes.

4. HTML media: In HTML media you should be aware of three tags which are image video and audio tags.

So up until this point in time, we have talked about what is HTML and what are the different important topics that you should be focusing on while learning HTML.

Let’s talk about the resources. So in this particular blog, I will be sharing two types of resources. The first one is documentation. Documentation will help you to learn any technology, as well as it will serve you as a reference if you need help in the future. The next type of resource is video tutorials.

Starting with the resources

1. w3schools

2. MDN Docs

3. html.com

4. Tutorial by freecodecamp

5. Crash course by traverse media

6. Crash course by Programming with Mosh

7. Tutorial by CodeWithHarry

Resources Link (Notion Page) 🧑🏼‍💻: https://wobbly-jade 693.notion.site/HTML-83767e7c2a34486abac51510f94c3ffc

You can watch this particular video from my channel for a better understanding:

Get in Touch with me: https://linktr.ee/Devgrammer

Follow Sanket Jagdale for more !!!

As a Web Developer, I have been building numerous side projects, learning new technologies, and doing internships. However, I recently decided to explore a new dimension and started freelancing. I was excited to try something new and expand my skillset in many aspects.

Looking back on the experience, I realized that there were many valuable lessons I learned along the way. In this blog post, I’ll share my experience and the main lessons I learned from my first freelance project.

Contents :

1. Finding the Freelancing Project

2. Project Scope and Requirements

3. Client Communication

4. Timeline and Deliverables

5. Challenges faced

6. Lessons Learned

7. Conclusion

1. Finding the Freelance Project

I landed my first client through a mutual network. The client was initially in contact with my friend, who told me about the client’s project requirements. I decided to seize this opportunity and called the client to discuss the project further.

The client then provided me with the contact information of the technical guy at their company and suggested that we should discuss the technical aspects of the project first. If everything went well, we could then discuss the financials.

I was excited to move forward, so the very next day, I contacted the technical expert to discuss the project. After a call where we discussed an overview of the project and his requirements, I was confident that I could complete the job. I called the client back to talk about the financials, and we discussed different phases, such as the advance payment, payment after design, and payment after hand-off. After negotiations from both sides, we agreed on a total amount of 40,000rs.

2. Project Scope and Requirements

My task was to design and develop a full-stack website for the company. This involved creating the website’s front-end and back-end components, as well as implementing user authentication, such as login and signup. Additionally, I was responsible for creating dynamic reports and fetching data from the database. The website needed to be user-friendly and visually appealing while also being efficient and responsive. Although there were no limitations or requirements for the tech stack, the database specified for the project was MS SQL.

3. Client Communication

For communication, the client created a WhatsApp group and added 3–4 members from their company. This allowed for seamless modifications and updates to be shared between the team and myself. Throughout the project, we communicated exclusively on this group and through calls, where I provided daily updates on the website’s design, new features, and functionality, complete with screenshots and demos. The client provided valuable feedback and made modifications as necessary, ranging from minor design changes to the addition of new features and functionality. This collaborative communication approach was key to ensuring that the website met the client’s expectations and was delivered on time and within budget.

4. Timeline and Deliverables

Phase 1: Design Hand-off

The day after our call, I began designing the website, and within 3 to 4 days, I shared the first draft and a presentation on the WhatsApp group. The client provided valuable feedback, ranging from minor changes such as color and shape modifications to major changes such as altering the navbar’s functionality. I incorporated the feedback and made the necessary changes, providing updated drafts for review on an ongoing basis. and after a week or so we finalized the design.

Phase 2 : Research and Learning

Since I was unfamiliar with MS SQL and how to integrate it with Node.js, I turned to the internet for help. Unfortunately, I found very few resources related to MS SQL integration. However, I eventually stumbled upon a great blog post that outlined the integration process step by step.

Phase 3 : Development

After conducting the necessary research, I began the development phase and integrated Node.js with a demo MS SQL server. From there, I began creating various frontend components and pushed them to GitHub, allowing the client to review and provide feedback on each iteration. This collaborative approach helped ensure that the client was satisfied with the website’s design and functionality.

Backend work for the website proved to be quite challenging, particularly due to the company’s strong focus on data analysis. In total, there were 12 large databases, each containing upwards of 100 tables, which made the backend work quite complex and time-consuming.

To handle this, I broke the backend work down into smaller, more manageable components and developed a clear plan of action. I also utilized various tools and technologies to streamline the development process.

Phase 4 : Handoff

After many sleepless nights and putting in a lot of hard work, I was finally able to hand off the completed project to the client. The feeling of relief and satisfaction was immense, as I had worked tirelessly to ensure that the website met all of the client’s requirements and was functioning perfectly. The handoff process went quite smoothly, and I was able to provide the client with all the necessary documentation and support for the website’s maintenance and upkeep.

5. Overcoming the Challenges Faced

1. It’s not uncommon for clients to prioritize functionality over demos or screenshots, especially when it comes to backend work. However, it can be challenging when you’re in the design phase and not yet ready to implement certain features.

2. Integrating MS SQL with your Nodejs server was a particularly challenging task. It’s perfectly normal to feel impatient or frustrated when working on something new and unfamiliar, but it’s important to remember that every new skill takes time to master.

3. On top of that, balancing schoolwork and client demands can be tough. It’s important to manage your time effectively and communicate clearly with your client to ensure that their needs are being met while also prioritizing your own responsibilities.

4. Overall, working on a complex project can be challenging, but with patience, persistence, and effective time management, you can successfully deliver a high-quality product that meets your client’s needs.

6. Lessons Learned

1. When embarking on a new freelance project, creating/asking for detailed documentation of all the requirements and project details can be incredibly beneficial. This documentation acts as a reference point for both you and your client, ensuring that everyone is on the same page and there is no ambiguity regarding the project’s scope. Additionally, having clear and detailed documentation can also be useful for negotiation purposes in the later stages of the project.

2. Learning something new can be a challenging and time-consuming process, but it’s essential for growth and development. Whether you’re learning a new programming language or a new skill, it’s important to be patient throughout the process. Don’t fall into the trap of tutorial hell, where you spend all your time watching tutorials and never actually putting what you’ve learned into practice. Instead, take the time to learn a new concept or skill, then use it to build something. This will help you solidify your understanding of the topic and give you a chance to apply what you’ve learned in a practical way.

7. Conclusion

In conclusion, working on this project was a great experience for me, and I learned a lot from it. From managing client expectations to working with new technologies, it was a perfect roller coaster ride. I gained a lot of confidence in my abilities as a full-stack developer and learned to work more efficiently and effectively under tight deadlines. This experience has also taught me the importance of clear communication, the value of timely updates, and the value of collaborating with the client throughout the project. I am proud of the work I accomplished on this project and am excited to apply these learnings to my future projects.

In the end, Thank you for reading this blog, I will be coming up with more useful experiences in the future, so follow Sanket Jagdale and stay tuned !!!

Written by — Sanket Jagdale (https://linktr.ee/sanket00900)

Also, in a field that is constantly evolving, you'll always have the chance to learn new technologies and stay up-to-date with the latest trends. Also with demand for web developers on the rise, you'll have plenty of job opportunities to choose from.

In this video, I am going to share a complete roadmap as well as the ultimate resources that you need to become full-stack web developer in 2023 🔥

YouTube Video Link: https://youtu.be/Dett4dw_IpI

𝐆𝐞𝐭 𝐢𝐧 𝐭𝐨𝐮𝐜𝐡 𝐰𝐢𝐭𝐡 𝐦𝐞 😊
https://linktr.ee/sanket00900

This is the perfect tutorial if you want to get started with git and GitHub. This Video Covers all the important terminologies Related to Git and GitHub.

Video Contents :

1. What is git?

2. git init

3. git config

4. git status

5. git add

6. git commit

7. git branch

8. git reset

9. What is GitHub?

10. git remote add origin

11. git push

12. How to fork a Repository?

13. How to clone a Repository?

HTML 👉🏼 Bricks, Pillars

CSS 👉🏼 Painting

JavaScript 👉🏼 Electricity Connection

DOM 👉🏼 Reconstruction

API 👉🏼 Menu

Server 👉🏼 Waiter

Database 👉🏼 Kitchen

Thank You 🖤 Follow for more !