Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • GfG 160: Daily DSA
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Trending
  • NEWS
  • Blogs
  • Tips & Tricks
  • Website & Apps
  • Tech Tips
  • Tech Blogs
  • ChatGPT Blogs
  • Tech News
  • AI News
  • ChatGPT News
  • ChatGPT Tutorial
Open In App
Next Article:
Web Design Components & Best Practices
Next article icon

Role of Coding in Web Design Process

Last Updated : 14 May, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Coding allows web designers to make websites that can interact with users, databases, and other web resources. Coding also lets web designers add various features and functions, such as navigation, layout, animation, responsiveness, accessibility, and security Today we will look at the significant role of coding in web designing.

Role-of-Coding-in-Web-Design-Process-copy

What's the role of coding in web design?

  • Creating Content Structure: Designing a webpage coding language such as HTML provides a structure to put your content in an understandable manner. It defines elements such as headings, paragraphs, images, links, and lists which we use to create the basic structure of content.
  • Visual Styling: To make our webpage more appealing and engaging to users we need to create an attractive user interface.CSS is made for that purpose it helps us to control the visual presentation of a webpage, including aspects like layout, colors, fonts, and spacing.
  • Interactivity: What will happen if user tries to interact with elements of website, how will the UI react to it? Here comes JavaScript which adds interactivity to websites. It enables features like form validation, sliders, pop-up messages, and dynamic content updates. You can create buttons that will dynamically play video, animation, perform a task, interact with our sever and much more using Javascript.
  • Responsive Design: Responsive Design is used when you try your webpage on different platforms which may be an android, pc, tablet or nowadays tv. It need to fit according to there sizes in order to look appealing on all platforms. By using CSS we can create screen which can adapt all sizes and resolutions and Media queries allow designers to apply different styles based on screen width.
  • Navigation: Navigation is a way to tell users where is content they are are actually looking for. For example in GeeksforGeeks proper navigation is provided above webpage with different categories such as data structures, web development, algorithmn.
  • Database Management: After all things we need server to store our content which can be possible using coding languages such as PHP, JavaScript, and CSS. PHP manages dynamic content on the server, often used for tasks like database interactions and generating dynamic web pages.
  • E-commerce Functionality: If you wish to make an ecommerce website which allows users to purchase and sell things. Coding is essential for implementing features like shopping carts, payment gateways, product listings, and order processing.
  • Security Measures: Coding provides us lot of techniques to make our content or our data secure. It provides us lot of techniques like input validation, encryption, and secure authentication are implemented to protect websites from vulnerabilities and attacks.
  • Coding for Optimization: Coding is used for optimizing your webpage so that it will open faster and users wont leave it to another sites. for example CDNs use coding techniques to optimize the delivery of website assets (images, scripts) for faster loading times

Key Elements of Coding in Web Design

Coding Language

What it do?

Why important in web design?

Html

Shapes webpage structure and content with tags.

Fundamental for creating the basic structure of web pages.

CSS

Styles HTML elements for a visually pleasing look.

Vital for making websites attractive and well-organized.

JavaScript

Makes websites interactive and dynamic.

Essential for client side programming and web applications

SQL

Its task is to made data which is kept in database

Crucial for storing, retrieving, and updating web data.

Benefits of Using Coding for Web Design

  • Complete Customizations- Coding allows web designers to customize the website from beginning to end from small parts such as tags to sever selection. It provides us full control over design of web page there are lot of varities in design is available to creator to give a feel website according to its niche.
  • Analytics- By using coding, people can build or use analytics tools which provides analytics about how user interacted with the side for example how much time he spent, which part of site is more engaging etc.
  • Creative Freedom- complete freedom is provided to users to create your own unique design there is no time limit provided to complete you can start whenever you want. You can choose topic which you like, even there are lot of coding languages available now. You can choose which you want to use according to you convenience.
  • Career Opportunities: Learning web coding languages (HTML, CSS, JavaScript, etc.) opens up career opportunities in web development and design, which are in high demand.
  • Cost Efficiency: Coding language are free to use and learn for web design. You can start by just downloading simple editing and compiling software. While HTML CSS can be used only by using notepad. So in long run coding is best cost efficient option.
  • Data Manage- By using coding data is very secured as coding allows you to delete, edit, copy or transfer data to another server. So its completely in your control.

Practices to Avoid

  • Ignoring Responsive Design: Neglecting the responsiveness of your site according to different screen sizes is big mistake. Because of this your site wont rank on mobile devices, because of bad user expierence So considering responsiveness is must
  • Overloading with Large Images and Media: Large sized unoptimized images will make your website slower to load images, this is also bad for SEO, so its recommanded to change the images to optimized web formats such as Webp
  • Using Pop-Ups Excessively: Excessive pop-ups can be intrusive and annoy users. Use them sparingly and provide a clear way to close them.
  • Security Vulnerabilities: Neglecting website's security will lead to users data theft and your website will be prone to attacks and viruses. Sanitize user inputs, avoid storing sensitive information in cookies, and keep software up to date.
  • Inconsistent Design Elements: Inconsistent fonts, colors, and layouts can make your website look unprofessional. Maintain a consistent design throughout your site for a cohesive user experience.

Conclusion

After knowing the role of coding in web design we can understand that professional web design is only possible though coding and also there are lot of benefits of doing coding using web design. Hence, coding is not just about writing codes and creating webpages its about creating online expierence which would help, empower users in various ways. Coding provides us a lot of modules, libraries which open door of lot of features, designs and functionalities which can be added to websites


Next Article
Web Design Components & Best Practices

D
diveshujz1
Improve
Article Tags :
  • Websites & Apps
  • UI UX Design
  • UI Design
  • Geeks Premier League 2023

Similar Reads

    Web Design

    Web Design Tutorial
    This web design tutorial is a complete guide for beginners who want to learn web design from the basics. Here, we cover everything from web designing fundamentals such as the importance of UI/UX Design and their principles, preloader in websites, web graphics and typography, etc. to advanced web des
    6 min read
    HTML for Web Design
    HTML, or Hypertext Markup Language, is the standard language used to create and design web pages. It provides the structure and layout of a webpage by using a system of tags and attributes to define elements such as headings, paragraphs, images, links, and more. By arranging these elements in a hier
    4 min read
    CSS for Web Design
    CSS stands for Cascading Style Sheets. It's a language used for describing the presentation of a document written in HTML or XML, including colors, layouts, and fonts. It allows web designers to control the appearance of web pages and ensure consistent styling across multiple pages or even entire we
    7 min read
    Role of Coding in Web Design Process
    Coding allows web designers to make websites that can interact with users, databases, and other web resources. Coding also lets web designers add various features and functions, such as navigation, layout, animation, responsiveness, accessibility, and security Today we will look at the significant r
    6 min read
    Web Design Components & Best Practices
    Different designers have different methodologies to create designs, but is there a way to create professional designs with the best results every single time using a set of practices? There are a few best practices that might help you with that. Best practices of web design aim to simplify the web d
    6 min read
    What is Web Design?
    What is Web Design?Web Design is the field of Designing Website interfaces. It deals with the looks part of the website rather than the coding part. Designing how the interface will look is called User Interface(UI) Design and Designing the flow of the user on the website, how the user will navigate
    4 min read
    E-commerce Design | Importance, Principles and Benefits
    E-commerce design is about making online shopping sites easy to use and visually appealing, so people enjoy buying things online. It involves how the website looks, how easy it is to find products, and how simple the buying process is. Shopping for goods from a store can be hectic for customers. Loo
    4 min read
    Accessibility in Web Design
    Accessibility in web design means creating websites that everyone can use, including people with disabilities. It's about making sure that all users, no matter their abilities, can navigate, understand, and interact with your website easily. By focusing on accessibility, you not only help people wit
    7 min read
    Portfolio Design - A Complete Overview
    Portfolio design is not just about showcasing a collection of works; it's a strategic craft that combines aesthetics with functionality, offering a compelling narrative about one's expertise, style, and personality. Whether it's for a graphic designer, photographer, or architect, the design of a por
    3 min read
    Landing Page Design | Types of Landing Pages and Benefits
    Crafting an effective landing page design is paramount in today's digital landscape, where the battle for user attention is relentless. A well-designed landing page can be the difference between a fleeting visitor and a converted customer. It serves as the virtual storefront, the first impression th
    4 min read
    Responsive Web Design
    Responsive web design is all about creating websites that work well on any device, whether it's a phone, tablet, or computer. This approach ensures that your website looks good and is easy to use no matter how people access it. In this article, we will explore what responsive web design is, why it's
    8 min read
    What is Interaction Design?
    Interaction design is about making digital products easy and enjoyable to use. It focuses on how people interact with websites, apps, and other digital tools, ensuring these interactions are smooth and intuitive. In this article, we'll explain what interaction design is, why it matters, and how it h
    6 min read
    Corporate Web Design | Importance, Principles and Benefits
    There are many kinds of website designs, which are made according to their needs. Companies use websites to mark their online presence and expand and promote their business. But how should such websites be designed to attract new customers and retain the older ones? In this article, we will discuss
    3 min read
    SEO-Friendly Web Design
    Websites Designed while keeping the user needs into consideration are good. But this alone doesn't determine their rank on SERPs. Designing websites should also include SEO practices to make an SEO-optimized website. Considering Users' needs and SERP rankings both help websites rank higher on SERPs.
    6 min read
    Illustrative Design | Key Benifits and things to Avoide in Website
    Looking at plain Websites can become boring for users after a certain time, and can also cause them to leave the website. This is why custom-made illustrations and other visual elements are used on many websites. These websites are called Illustrative Websites. Designing part of these websites is ve
    4 min read
    Principles of Design and How to Use Them
    The principles of design are guidelines that help create visually appealing and effective designs. These principles include balance, contrast, emphasis, movement, pattern, rhythm, and unity. By understanding and applying these principles, designers can make their work more engaging and easier to und
    7 min read
    Understanding the Impact of UI/UX on IoT
    The Internet of Things (IoT) has emerged as a game changer in our interconnected world transforming how we lock with devices and data. IoT encompasses a web of smarting devices similar to thermostats that set your home's temperature and sensors that supervise machinery performance in industries. The
    5 min read

    Graphic Design

    What is Graphic Design?
    Graphic design is everywhere—it's the logos we see, the websites we browse, the advertisements we interact with, and even the product packaging we admire. At its core, graphic design is the craft of combining visuals like images, colors, and typography to communicate messages effectively and aesthet
    11 min read
    What is Web Graphics ?
    Graphic means any visual element represented by the computer. Web Graphics are those graphics that are used in a website. These graphics can be photos, videos, logos, banners, etc. Humans are more attracted to visual elements rather than textual elements. So, to make a website more appealing and use
    8 min read
    8 Types of Graphic Design with Examples
    Graphic design is everywhere, shaping how we interact with the world through visuals. From creating eye-catching logos to developing user-friendly websites and apps there are 8 different types of graphic design. This article is perfect for anyone curious about graphic design's role in our daily live
    6 min read
    Role of 3D Graphics in UI/UX Design
    Graphic design is the art of drawing pictures, line, charts, etc. using the computer with the help of programming. Computer graphics image is made up number of pixels. Pixel is the smallest addressable graphical unit represented on the computer screen. Role of 3D Graphics in UI/UX Design What is 3D
    5 min read
    Creative Designer | Skills, Roles and Responsibilities
    In creative design, digital animation and graphics created by computers are used to visualize a product. It seeks to create unique, eye-catching designs that stand out, making it simple for consumers to recognize a brand or product. In the modern world, when a large number of products are introduced
    6 min read
    Poster Designer | Skills, Roles and Responsibilities
    A poster is a visual marketing tool that gives visitors current information about a business's goods or services. It shouldn't be overloaded with unrelated text, colors, or graphics as this would make it hard to read and uninteresting to visitors. Poster DesignerTable of Content What is Poster Desig
    5 min read
    What is an Infographic?
    An infographic is a visual tool that combines images, charts, and text to present information clearly and quickly. It helps make complex data easy to understand by breaking it down into simple, engaging visuals. Infographics are used in various fields, from education to marketing, to convey messages
    5 min read
    Motion Graphics Designer - Responsibilities, Skills and Career Outlook
    Motion graphic designers are the creatives of the animations and visual outcomes you see in videos, movies, advertisements, websites, and a big section of virtual media. They mix the world of photographs and animation to bring static visuals to existence. These skilled professionals play a vital rol
    5 min read
    8 Graphic Design basics you need to know
    Graphic design is all about creating visual content to communicate messages effectively. Whether you're designing a poster, a website, or social media graphics, understanding graphic design basics is essential. These fundamentals help you create designs that are both attractive and functional. In th
    5 min read
    Various Types of Graphic Design You Need to Know
    The modern world would be incomplete without graphic design which is perhaps the strongest visual pillar that holds it together, an artful play between art and communication. The omnipresent force behind the slick logos of our loved brands, captivating ads, and user-friendly interactive digital expe
    6 min read

    UI/UX Design

    What is User Interface (UI) Design?
    User Interface (UI) Design shapes the user's digital experience. From websites to mobile apps, UI design encompasses the visual and interactive elements that users engage with. A well-crafted UI not only enhances usability but also communicates the brand's identity and values. In this article, we de
    7 min read
    What is Color Theory? - For Beginners
    Color theory is the science and art of using color to its fullest potential in various visual and practical applications. It not only enhances aesthetic appeal but also influences mood and psychological responses. This guide starts by exploring the color wheel, the cornerstone of color theory, which
    12 min read
    What is Typography?
    What is typography? It's an art and technique that breathes life into written words. Typography encompasses everything from the design of a logo's typeface to the style of text on a T-shirt. It involves choosing typefaces and fonts, designing text layouts, and modifying font styles to enhance readab
    12 min read
    What is Mobile First Design?
    Mobile-first design is a way of creating websites that focuses on making them work well on smartphones and tablets before designing for computers. This approach is important because most people now use their mobile devices to browse the internet. By starting with mobile-friendly design, you ensure y
    6 min read
    Neuromorphic Design - Blurring the Lines Between UI and Reality
    In the era of UI/UX design, brands want to create a more comfortable and natural user experience. To do so they take inspiration from the environment and how a human interacts with it. Today many big brands and institutions are investing a huge amount of money just to understand the human brain and
    8 min read
    Minimalism in Web Design
    Minimalism in web design focuses on simplicity and clarity, using only essential elements to create clean and effective websites. This approach avoids clutter and distractions, making it easier for users to navigate and find information. In this article, we'll explore the principles of minimalism in
    5 min read
    What is User Experience (UX) Design?
    User Experience (UX) Design is all about creating products that provide meaningful and enjoyable experiences for users. This involves making products easy to use, efficient, and pleasant, which helps meet the users' needs and expectations. UX design covers everything from physical products to digita
    13 min read
    How to Perform UI/UX Testing ?
    UI/UX testing or Usability testing is a research method for assessing how easy it is for participants to complete the important tasks in a design. In this fast and happening world where every business and every team wants to release the next update or the next application as soon as possible, we oft
    5 min read
    Need of Testing in UI/UX
    In this fast-happening world, every business and every team wants to release the next update or the next application as soon as possible, because of this teams or UI/UX designers often miss out on a very important thing - properly testing the design. But why does this even matter? who focuses on tes
    7 min read
    What is the Importance of User Flows in UX ?
    The easiest way to understand UX is by asking this question to yourself as a developer “Is the user able to use the product in an efficient manner, the way the developer has intended to use his artifact.” If you are not a professional UX designer, you can understand the User Flow as a Flowchart alth
    6 min read
    What is Wireframing?
    Wireframing is the skeleton of digital design. It's where ideas start taking shape visually, outlining the structure and functionality of websites, apps, and digital products. In this article, we'll break down what wireframing is, why it's essential, and how it streamlines the design process. Wirefr
    5 min read
    What is Prototyping? Definition, Types, Qualities and more
    Prototyping is all about bringing ideas to life. Whether it's a new product, a piece of software, or even a process, prototyping is the first step in turning concepts into reality. It's like making a rough draft before the final version. This article explores prototyping, and how it's done. What is
    7 min read
    UX Designer Salary in United States (November 2024 Updated)
    The demand for UX designers in the United States continues to grow, offering lucrative salary opportunities for professionals in this field. Whether you're an entry-level designer or a seasoned professional, understanding current salary trends is crucial for negotiating your pay or planning your car
    11 min read
    10 Necessary Skills for UX Designers
    As the demand for user-friendly digital products continues to grow, the role of a UX designer has become more crucial than ever. UX designers are the architects of user experiences, shaping how people interact with websites, apps, and other digital interfaces. To excel in this field, a UX designer n
    8 min read
    Fundamentals of Solid UI/UX Design
    In today's era the success or loser of your site or application a great deal hinges on the quality of its plan. If the user interface (UI) or user experience (UX) is poorly quite dead potential customers may opt for user-friendly alternatives. In this clause, we will delve into the details of UI and
    5 min read
    Importance of UI/UX Design
    UI/UX design is crucial for creating products that are not only visually appealing but also easy to use. Good UI (User Interface) design focuses on the look and layout of a product, while UX (User Experience) design ensures that the product is user-friendly and meets the needs of the users. Together
    8 min read
    Principles of UI/UX Design
    UI/UX plays a vital role for websites or any other digital product as it directly impacts user interaction and engagement. UI and UX are two different but interrelated concepts in the design of a web page or a digital product. In simple words, UI is like a visible part of a product and UX is the con
    5 min read

    Tools

    Figma Interface | A Beginner's Guide
    If you are planning to create UI/UX designs in real time, Figma is the tool you are looking for. Teams can actively build prototypes based on the ideas they have before implementing them into actual ones. It provides a detailed visualization of any projects or models. Figma Interface Table of Conten
    5 min read
    Effects in Figma
    Effects are an integral part of the design. When designing on Figma applying effects is an important part. In this article, we will discuss about different effects of Figma. Where are they used and how to apply them? Table of Content Effects in FigmaShadow Effects in FigmaBlur Effects in FigmaHow to
    3 min read
    Gradients in Figma
    GradientsGradient is a color element used in the Design process in which colors blend into each other forming a continuous faded color palette. Gradients in design are used to give a design a sleek and modern look. Gradients are used by many brands for their logos which gives their logo and brand a
    3 min read
    10 Reasons to use Adobe XD as a UI/UX Design Tool
    Adobe XD is a vector-based UI/UX Design tool. It is used to design anything from smartwatch apps to fully-fledged websites. Abode XD was first introduced by Adobe Inc. in 2015 and since then it has been one of the most used tools for UI/UX designing. Adobe XD was introduced as a breath of fresh air
    5 min read
    Brush Libraries in Illustrator
    Adobe Illustrator has brush libraries which are essentially stored sets of predefined settings for brushes that users can draw upon and use in their artwork. Illustrator brushes are tools for simulating the presence of real-world pointing instruments, pens, or other drawing implements that artists c
    5 min read
    UI vs UX: What's the Difference between UI & UX Design?
    Have you ever wondered what makes an app easy to use or a website feel just right? That’s where UI (User Interface) and UX (User Experience) come into play. Though they sound similar, UI and UX cover different aspects of the app and website creation process. UI is all about the look of an app or web
    6 min read
    Web Design vs. Graphic Design | What's the Difference?
    In Digital Design, the Graphic Designers are those designers that create social media designs, infographics, logos, marketing campaign materials, etc. While Web Designers create website designs, responsive designs, mobile only UIs, etc. There are many things in common between Web Design and Graphic
    3 min read
    Difference Between Graphic Design and UI/UX Design
    Graphic design and UI/UX design are often confused due to their shared emphasis on aesthetics and visuals. However, they serve purposes and require unique skill sets. In this article, we will explore the differences between design and UI/UX design providing a comprehensive overview of each disciplin
    4 min read
    Difference Between UI/UX Designer and UI/UX Engineer
    In the realm of web development roles such as UI/UX Designer and UI/UX Engineer may appear similar at glance. However they serve purposes. Let us briefly explore these roles and highlight the differences between UI/UX Designers and UI/UX Engineers. UI/UX Designer vs UI/UX Engineer Who is UI/UX Desig
    3 min read
    Difference Between Skeuomorphism and Flat Design in UI
    Skeuomorphic designs were used to rule the UI design system in earlier days. Today how outdated it may look but this design has made the user familiar with the ways real-world elements are incorporated in interfaces because of which a paradigm shift from skeuomorphism to flat designs happened easily
    5 min read
    Difference Between User-Centered and Business-Centered Design
    Design is a field that plays a crucial role in developing products, services, and experiences. Over time two main approaches to design have emerged; User Centered Design (UCD) and Business Centered Design (BCD). While both aim to create solutions they differ in their primary focuses and underlying p
    4 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

'); // $('.spinner-loading-overlay').show(); let script = document.createElement('script'); script.src = 'https://assets.geeksforgeeks.org/v2/editor-prod/static/js/bundle.min.js'; script.defer = true document.head.appendChild(script); script.onload = function() { suggestionModalEditor() //to add editor in suggestion modal if(loginData && loginData.premiumConsent){ personalNoteEditor() //to load editor in personal note } } script.onerror = function() { if($('.editorError').length){ $('.editorError').remove(); } var messageDiv = $('
').text('Editor not loaded due to some issues'); $('#suggestion-section-textarea').append(messageDiv); $('.suggest-bottom-btn').hide(); $('.suggestion-section').hide(); editorLoaded = false; } }); //suggestion modal editor function suggestionModalEditor(){ // editor params const params = { data: undefined, plugins: ["BOLD", "ITALIC", "UNDERLINE", "PREBLOCK"], } // loading editor try { suggestEditorInstance = new GFGEditorWrapper("suggestion-section-textarea", params, { appNode: true }) suggestEditorInstance._createEditor("") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } //personal note editor function personalNoteEditor(){ // editor params const params = { data: undefined, plugins: ["UNDO", "REDO", "BOLD", "ITALIC", "NUMBERED_LIST", "BULLET_LIST", "TEXTALIGNMENTDROPDOWN"], placeholderText: "Description to be......", } // loading editor try { let notesEditorInstance = new GFGEditorWrapper("pn-editor", params, { appNode: true }) notesEditorInstance._createEditor(loginData&&loginData.user_personal_note?loginData.user_personal_note:"") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } var lockedCasesHtml = `You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.

You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!`; var badgesRequiredHtml = `It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so.

However, you can still create improvements through the Pick for Improvement section.`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); jQuery('#suggestion-modal-alert').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('.ContentEditable__root').text(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.thank-you-message').css("display","none"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); $('#suggestion-section-textarea').show(); jQuery('#suggestion-modal-alert').hide(); if(suggestEditorInstance !== null){ suggestEditorInstance.setEditorValue(""); } $('.suggestion-section').css('display', 'block'); jQuery('.suggest-bottom-btn').css("display","block"); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function suggestionCall() { var editorValue = suggestEditorInstance.getValue(); var suggest_val = $(".ContentEditable__root").find("[data-lexical-text='true']").map(function() { return $(this).text().trim(); }).get().join(' '); suggest_val = suggest_val.replace(/\s+/g, ' ').trim(); var array_String= suggest_val.split(" ") //array of words var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(editorValue.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `${editorValue}`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { if(!loginData || !loginData.isLoggedIn) { grecaptcha.reset(); } jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('.suggest-bottom-btn').css("display","none"); $('#suggestion-section-textarea').hide() $('.thank-you-message').css('display', 'flex'); $('.suggestion-section').css('display', 'none'); jQuery('#suggestion-modal-alert').hide(); }, error:function(data) { if(!loginData || !loginData.isLoggedIn) { grecaptcha.reset(); } jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 4 Words and Maximum Words limit is 1000."); jQuery('#suggestion-modal-alert').show(); jQuery('.ContentEditable__root').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('.ContentEditable__root').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('.ContentEditable__root').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('
'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // script for grecaptcha loaded in loginmodal.html and call function to set the token setGoogleRecaptcha(); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('
'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); });
"For an ad-free experience and exclusive features, subscribe to our Premium Plan!"
Continue without supporting
`; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; }

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences