#4 My Python/Django Journey: Added a Custom Django Template Tag for smooth SVG usage. While working on the Business Directory website, I used one of my WordPress functions. Today I converted a PHP Function( the_svg() ) I use in Custom Theme Development for SVG icons to a custom Django template tag that dynamically loads and renders SVG icons inline straight from static files INSTEAD OF COPYING and PASTING the whole SVG code. In my internship's Teamlead voice(Nick Studenikhin): Dapo, Why do we have this strange code here? 😁 (I can never forget him) This small feature turned out to be a great exercise in working with: ✅ Django’s static file system ✅ XML parsing in Python ✅ Template tag design and safe HTML rendering The tag lets me inject SVGs with custom attributes like class, width, and title, keeping templates clean and accessible with no repetitive markup, no copy-paste headaches. Loving how Django makes it easy to blend clean backend logic with front-end flexibility. One step closer to writing more modular, maintainable code every day.💻 But the thing is, if you can do it in one language, doing it in another will be stressfree. One difference I have seen in Django and Custom WP Development is that, Django gives me more freedom when it comes to the admin area. #django #python #webdevelopment #BackendDevelopment #learninginpublic #softwareengineering #pythondeveloper #djangodeveloper
Converted PHP SVG function to Django template tag for Business Directory website.
More Relevant Posts
-
🎉 Excited to share my latest Django project – “Modern Polls”! 🗳️ Built using Django, HTML, CSS, this web app allows users to create, vote, and view results of polls in real time. It features category filters, voting analytics, and a clean modern UI — all designed for an interactive experience. 💡 Why this project? I wanted to explore how dynamic web applications work — especially how backend logic connects with frontend design. Creating this Poll App helped me understand core Django concepts like models, views, templates, authentication, and database integration. ✨ Unique Features of Modern Polls: ✔️ Category-based Poll Filtering: == Users can browse polls by categories (like Food, Technology, General, etc.), making it easy to find topics of interest. ✔️ Real-time Vote Updates: == Poll results update dynamically, allowing users to instantly see changes after voting. ✔️ Modern and Responsive UI: == The clean, card-based layout with icons and category labels gives a professional look and works smoothly on all devices. ✔️ User Authentication System: == Each user has their own dashboard to create and manage polls securely. ✔️ Data Visualization of Poll Results: (If you added charts or plan to) Results can be viewed in graphical form for better clarity and engagement. ✔️ Search and Sorting Filters: == Users can search polls by question or description and sort them by newest or most popular — enhancing usability. ✔️ Vote Tracking and Analytics: == Keeps count of total votes and views for each poll to analyze user interaction and engagement. 🪢 Tech Stack: Frontend: HTML, CSS Backend: Django (Python) Tools: Django Admin A heartfelt thank you to my mentor, Kamal shah, for guiding me throughout this journey and helping me strengthen my understanding of web development. 🙌 #Django #WebDevelopment #Python #FullStack #Projects #Learning #HTML #CSS #StudentProjects
To view or add a comment, sign in
-
🚀 Django Day 21 — Adding More CSS Styling & Wrapping Up the Challenges Project Today was all about styling and design 🎨 — I spent time improving the look and feel of my Django project, and honestly, it looks completely different now! 💫 I created some new static files to better organize my CSS and keep everything neat and modular: 💠 header.css — used for styling the header across the entire project, including the navigation link that takes me back to the “All Challenges” page. 💠 challenge.css — used for designing the content of each month’s challenge when clicked. 💠 challenges.css — used for styling the unordered list on the index page where all the months are displayed. I also made a few tweaks in my styles.css file to refine the background and give the whole site a smoother and more polished feel ✨. In my challenge.html file, I added: "include {% load static %}" To ensure Django can properly load and connect all my static CSS files to the project 🧩. After tying everything together, the site now looks clean, colorful, and structured — a big step up from when I first started this project! 😎 To wrap it all up, here’s a quick summary of how the styling files work: 🎯 header.css — designs the header throughout the project. 🎯 challenge.css — styles the content for each month’s challenge. 🎯 challenges.css — beautifies the index page list. And with that, this marks the end of the Challenges Project and the beginning of the next big chapter — Crazy Django! 🚀🔥 There’s a video below showing the final result 🎥💻 #Django #Python #WebDevelopment #FrontendDesign #CSS #100DaysOfCode #LearningInPublic #TechJourney #lexisslearns 🚀
To view or add a comment, sign in
-
🧠 Understanding “this” and Constructor Functions in JavaScript. In JavaScript, objects aren’t just data containers — they can also hold behavior. That behavior comes from methods — functions stored as object properties. 🔹 Object Methods and “this” Let’s say we have: let user = { name: "Gautam", greet() { console.log(`Hello, ${this.name}!`); } }; user.greet(); // Hello, Gautam! Here, this refers to the object before the dot (user). So, when user.greet() runs, this equals user. But there’s a catch — this is not fixed. If you assign the same method to another object, this changes accordingly. let admin = { name: "Admin" }; admin.greet = user.greet; admin.greet(); // Hello, Admin! 👉 this depends on how the function is called, not where it’s defined. That’s what makes it so powerful — and sometimes confusing. 🔹 Constructor Functions and the “new” Operator When we want to create multiple similar objects, defining each manually becomes repetitive. That’s where constructor functions come in. function User(name) { this.name = name; this.isAdmin = false; } let user1 = new User("Gautam"); let user2 = new User("Chirag"); The new operator does a few magical things: -> Creates a new empty object. -> Sets this to that new object. -> Executes the function body. -> Returns the newly created object automatically. In short — new + function = object factory 🏭 💬 A Subtle Detail If a constructor explicitly returns an object, that object is returned instead of this. Otherwise, the newly created object is returned automatically. That’s why constructors don’t need return statements in most cases. 🪞 In Summary ->Methods are object properties that store functions. ->The value of this is determined at call time — by the object before the dot. ->Constructor functions (with new) let us create multiple similar objects easily. ->Always start constructor names with a capital letter (by convention). ->If you forget new, this becomes undefined — and the code breaks. ✨ Learning Takeaway Understanding how this and new work gives you deeper control over object creation and method context — the foundation of object-oriented JavaScript. Learn it once, use it everywhere — because “this” is everywhere. 📚 Inspired by javascript.info #JavaScript #WebDevelopment #Learning #CleanCode #FrontendDevelopment #Programming
To view or add a comment, sign in
-
JavaScript Learning Journey – Callbacks in JS Today’s lesson: mastering callbacks — a foundational way that JavaScript handles actions that happen later, like user actions, timeouts, or data fetching! What is a callback? A callback is simply a function passed as an argument to another function. When the first function completes its task, it “calls back” the argument function to do something next. Callbacks are vital for handling asynchronous code and sequencing actions. Example: function greetUser(name, callback) { console.log("Welcome, " + name + "!"); callback(); } function showDone() { console.log("Action complete!"); } greetUser("Aarav", showDone); // Output: // Welcome, Aarav! // Action complete! Here, showDone is passed as a callback to greetUser, and is invoked after greeting. This is the pattern behind much of JS’s async power, like timers, file reading, or API responses. Why does this matter? Callbacks allow you to wait for events, sequence operations, and avoid code that blocks your app. They’re at the heart of JavaScript’s flexibility—understanding them unlocks the path to Promises, async/await, and modern web development. #JavaScript #Callbacks #AsyncJavaScript #WebDevelopment #Coding #Frontend #NodeJS #LearningPath #100DaysOfCode #Programming #JavaScriptTips #Developer #CodeNewbie #SoftwareEngineering #EventDriven #TechLearning #JS #CodingJourney #JSBeginner #WebDev #SoftwareDevelopment #LearnToCode #ModernJS
To view or add a comment, sign in
-
🌟 JavaScript Array Manipulation Made Easy! 🌟 Manipulating arrays is a fundamental part of JavaScript programming. Whether you're sorting, filtering, or transforming data, these array functions provide powerful ways to work with your data. Here’s a quick guide to some essential JavaScript array methods: JavaScript JavaScript Mastery JavaScript Developer W3Schools.com freeCodeCamp ### JavaScript Array Methods 1. .map(🧃): Transforms each element in the array to a new value Example: Turning a list of teacups into water bottles! 2. .filter(🍵): Creates a new array with all elements that pass the test implemented by the provided function. Example: Filtering out only the teacups from the array. 3. .find(🍵): Returns the value of the first element in the array that satisfies the provided testing function. Example: Finding the first teacup in the array. 4. .findIndex(🍵): Returns the index of the first element in the array that satisfies the provided testing function. Example : Finding the index of the first teacup in the array, which is 3. * .lastIndexOf(🍵): Returns the index of the last element with a specified value the array that satisfies the provided testing function. Example : Finding the index of the last teacup in the array, which is 3. 5. .fill(🧃,1): Fills all the elements of an array from a start index to an end index with a static value. Example: Filling part of the array with water bottles. 6. .some(🍵): Checks if at least one element in the array passes the test implemented by the provided function. Example: Checking if there’s at least one teacup – returns `True`. 7. .every(🍵): Checks if all elements in the array pass the test implemented by the provided function. Example: Checking if every item is a teacup – returns `False`. 📌 **Using these functions effectively can significantly improve your code's readability and performance.** For more information or to dive deeper into JavaScript arrays and their usage, feel free to connect with me Gaurang Patel Thomai Christopoulou #JavaScript #ArrayMethods #WebDevelopment #CodingTips #Programming #TechSkills #CareerGrowth #Freshers #EntryLevel
To view or add a comment, sign in
-
-
🚀 Project Title: Django Blog with Comment System 🧩 Description: Developed a full-featured Blog Web Application using Django Framework that allows users to create, edit, and manage posts with a complete comment and reply system. Integrated user authentication, REST APIs, and Bootstrap UI for responsive design and smooth navigation. 🔑 Key Features: 👤 User Registration & Login System 📝 CRUD Operations for Blog Posts 💬 Comment & Reply System ⚙️ REST API for Posts and Comments 🎨 Modern Bootstrap Layout with Pagination 🗂️ SQLite Database Integration 🛠️ Tech Stack Used: Frontend: HTML, CSS, Bootstrap Backend: Django, Django REST Framework Database: SQLite Language: Python 💬 About This Project: This project demonstrates end-to-end Full-Stack Web Development using Django. It focuses on CRUD functionality, RESTful APIs, and database integration while maintaining a professional and responsive UI design 🚀 Just completed my Django Blog Web App project! It includes full CRUD operations, comment/reply system, user authentication, and REST APIs — all styled with Bootstrap. 🔗 Check it out on GitHub: https://lnkd.in/em-QcT7E #Django #Python #WebDevelopment #FullStack #GitHub #PortfolioProject
To view or add a comment, sign in
-
Django Blog Application I built this blog from scratch. It's still under modifications and improvements😊 Let me work you through it's mini documentation. Project Spotlight🤗🤗 Django Blog Application I recently built a fully functional Django blog application designed to deliver a seamless content creation and management experience. This project showcases my ability to handle end-to-end web development, from database design to user interface and advanced features. Key Features: 1. User Management: Login, sign up, user profiles, and role-based access control 2. Blog Management: Create, edit, delete posts with categories, draft/published status 3. Comments and Likes: Dynamic comment system with live counts 4. Admin Dashboard Statistics on posts, likes and messages 5. Contact Form and Messaging Users can send messages directly from the website; all messages are stored and manageable via the admin panel 6. Media Handling Upload images for posts with proper media and static file management 7. Responsive Design: Modern, mobile-friendly layout using HTML, CSS, and JavaScript Tech Stack Used Django, Python, MySQL/SQLite, HTML, CSS, JavaScript and Django REST Framework, This project demonstrates my skills in full-stack development, database design, RESTful APIs, and modern web features. I am eager to bring this expertise to clients looking for robust, interactive, and scalable web applications. Check the comment section to view this blog application🙏 It's still under modifications. #Django #Python #WebDevelopment #AI #FullStackDevelopment #FreelanceDeveloper #PortfolioProject #Linkedin
To view or add a comment, sign in
-
-
🚀 Django Day 20 — Adding Global Static Files Today, I learnt how to add global static files in Django — these are CSS files that apply to the entire project, not just a single app 🌍🎨. Just like how base.html serves as a parent template for all pages, a global static file serves as a universal style sheet that affects everything across the project. It’s a clean way to maintain consistent design and layout. ✨ So, I created a new folder named static in my root project folder (not inside any app). Inside it, I added a CSS file called styles.css 🎉. In that file, I wrote some styling rules — I wanted to change the font across the entire site (which I got from Google Fonts 💅) and also set the margin on all sides to 0 to give it a more aligned and modern look. Before it worked, I had to make a few changes in the settings.py file to make Django recognize static files located in the root folder, similar to how I configured it earlier for base.html 🧩. After saving and refreshing, everything looked neater — the new font gave it a clean, modern vibe, and the removed margins made the layout more balanced. 💻✨ There’s a short video below showcasing how the project now looks with the updated global styles. #Django #Python #WebDevelopment #Frontend #CSS #LearningInPublic #100DaysOfCode #TechJourney #lexisslearns 🚀
To view or add a comment, sign in
-
💛💻 #Day49 – JavaScript Journey Begins 🚀 🔥 Day 1: Introduction to JavaScript 🎯 Today’s Learning Topic: JavaScript Basics 🟡 1️⃣ What is JavaScript? JavaScript is a lightweight, interpreted scripting language used to add behavior, interactivity, and functionality to web pages. Key Features: 🧠 Scripting Language → Browser handles compilation & execution ⚡ Lightweight → Requires less code & memory 🧩 Interpreted → Executes line by line for easy debugging 🟣 2️⃣ History of JavaScript 📅 Introduced in 1995 by Brendan Eich at Netscape 🏷️ Originally named Mocha → LiveScript → JavaScript ⚠️ Note: Java ≠ JavaScript (Both are Object-Oriented, but different languages) 💚 3️⃣ Why JavaScript? ✅ Works on both Front-end & Back-end ✅ No special setup needed ✅ Powers fast, dynamic websites ✅ Used in Mobile, Desktop, and Game Development ✅ High career demand ✅ Supports frameworks like: 🔹 Angular 🔹 React 🔹 Node.js 🔹 Vue.js 🔹 jQuery 🧡 4️⃣ Features of JavaScript Scripting Language – Easy to use in browsers Lightweight – Fast and efficient Dynamically Typed – No need for type declarations Object-Oriented – Uses objects & classes Platform Independent – Write once, run anywhere (WORA) Interpreted Language – Executes line by line Event-Driven – Reacts to user actions 💙 5️⃣ Applications of JavaScript 💡 Client-side validation (forms) 🧩 HTML DOM manipulation 🔔 Pop-ups & alerts ⚙️ Backend communication (AJAX) 🌐 Server-side apps (Node.js) ❤️ 6️⃣ How to Write JavaScript in HTML Ways to include JS in HTML: i. In Head Section <script> // JavaScript code here </script> ii. In Body Section <script> // JavaScript code here </script> iii. External File <script src="external.js"></script> 🌈 📂 GitHub Live Link: 👉 🔗 https://lnkd.in/g6k_NFXM 💬 Starting my JavaScript learning journey from today! I’ll be sharing daily updates on concepts, syntax, and mini projects — from beginner to advanced level. Let’s code the web together! 🌐✨ 🔖special thanks to Harish Harish M, Spandana Chowdary, 10000 Coders #JavaScript #JavaScriptLearning #WebDevelopment #FrontendDevelopment #CodingJourney #LearnToCode #100DaysOfCode #TechCommunity #WebDesign #HTML #CSS #ProgrammerLife #JS #Developers #SoftwareEngineering #FullStackDeveloper #CodingDaily #CodeNewbie #WebDevCommunity #WomenWhoCode #ReactJS #NodeJS #VueJS #Angular #GitHub #ProgrammingLife #WebApps #CodeChallenge #TechLearning #ShanmukhaLearns
To view or add a comment, sign in
-
-
🎓 Welcome to Code With Kamate! This is Part 1 of my Full Stack Web Development with Django series — taught and presented by Kamate Ntuyenabo, founder of Code With Kamate If you’re a student, developer, or anyone looking to start real-world web projects using Python and Django, this video is made for you. 👉 This tutorial builds directly from the previous Django introduction video ( watch it here: https://lnkd.in/dZ-Uxd6V ) and sets the stage for our full-stack web app project. In this video, I’ll walk you through: ✅ How to integrate your front-end (HTML, CSS) with Django ✅ Setting up and configuring templates and static files correctly ✅ Managing folder structures for professional projects ✅ How Django handles template inheritance and file linking logic ✅ Linking templates (home, dashboard, login, etc.) the Django way ✅ Preparing your project for the next phase — user authentication (login, signup, and dashboard creation) By the end of this tutorial, you’ll have a clean, working Django setup ready to expand into a full-stack Python web application. ⚙️ Project Resources All templates and starter files used in this video are uploaded on Google Drive for easy access. 📁 Download them here → https://lnkd.in/d_s87xbK 🧠 About This Series This Django project series is part of my long-term mission to help students and upcoming developers build real, deployable projects using modern tools. The next tutorial (Part 2) will cover: 🔸 Logging in and out 🔸 Creating and managing user accounts 🔸 Redirecting users to their personal dashboard 🔸 Preparing the app for database integration and deployment Stay tuned — subscribe and turn on notifications 🔔 so you don’t miss it! 👨🏽💻 About the Creator This channel is proudly managed by Kamate Ntuyenabo, a Computer Science student, developer, and educator passionate about helping people learn to code smarter — not harder. When you search “Code With Kamate” or “Kamate Ntuyenabo Django”, you’ll find tutorials focused on practical, real-world coding projects that take you from beginner to expert. Follow my journey and let’s grow together in full stack development, Python programming, and software project building. 📬 Connect with Me 📧 Email: kamatentuyenabo184@gmail.com Mobile: +256 787 360 381 🌐 Website: coming soon 🎓 YouTube: https://lnkd.in/dpYf_jex 💬 Let’s connect, learn, and grow in the world of software development.
To view or add a comment, sign in
-
More from this author
Explore related topics
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development