🚀 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 🚀

🚀 Django Day 19 — Adding Static Files Today I learnt how to add styling to my Django project because the page was looking a bit bland 😅 — and of course, for learning purposes too! In Django, CSS files are called static files because they don’t change — they’re fixed resources like images, stylesheets, or scripts 🧱. So, I created a new folder in my challenges app (talked about in Day 4) and named it “static”. Inside that folder, I added my very first CSS file called “challenges.css” 🎉. To make Django recognize and use the CSS in my templates, I first had to create a space for the CSS block inside my parent template — base.html (from Day 16). I did this using Django’s block and endblock tags like this: {% block css_files %} {% endblock %} This basically reserves a special spot where each page can plug in its own CSS. Then, in my index.html, I linked the stylesheet like this: {% block css_files %} <link rel="stylesheet" href="{% static 'challenges/challenges.css' %}"> {% endblock %} The CSS rule I added in challenges.css was a simple one — it removes the bullet points from the list of months, giving it a neater and more professional look. So, if you compare the video from Day 15, where every month had bullet points • • •, you’ll notice that in today’s video those bullets are completely gone 🪄 — all thanks to the CSS I implemented through Django’s static files system. More to come 💻✨ #Django #Python #WebDevelopment #Frontend #CSS #100DaysOfCode #LearningInPublic #PythonJourney #lexisslearns 🚀

🚀 Django Day 16 — Understanding Template Inheritance Today, I explored one of the core features of Django’s template system — Template Inheritance. 💡 Template inheritance allows me to create a base structure that other pages can reuse. Instead of repeating the same HTML layout across multiple files, I can define it once and simply extend it wherever it’s needed. This makes my code cleaner, more organized, and easier to maintain. 🧩✨ To implement this, I created a new folder named “templates”, but this time it’s located inside my main project folder — not inside my app folder. Inside this main templates folder, I created a new file called base.html, which acts as the foundation for all my other pages. Then I made my existing templates — index.html and challenge.html — inherit from this base file using the {% extends %} tag. This tag tells Django that the template should use everything from the base.html file unless it overrides specific sections. 🏗️ Inside the base.html, I used the {% block %} and {% endblock %} tags to define placeholder sections that other templates can fill with their unique content. For example, I wrote something like: {% block content %} Page-specific content goes here {% endblock %} In my index.html and challenge.html, I simply added: {% extends "base.html" %} {% block content %} Page content unique to this template {% endblock %} This setup allows both templates to share the same general layout — like the navigation bar, footer, or styling — while still keeping their unique content. 🌐 I also had to make a small adjustment in the settings.py file to let Django recognize my new templates folder. I did this by adding the path of the folder under the TEMPLATES setting. Once that was done, Django immediately picked up my base structure. ⚙️ It feels amazing to see how much cleaner and scalable my project is becoming and Happy last Sunday of the Month. 💪🔥 #Django #Python #WebDevelopment #CodeJourney #LearningInPublic #TechJourney #lexisslearns 🚀💻

🚀 Django Day 28 — Custom 404 Page & Dynamic Post Details ⚙️📄 Yesterday, I worked on setting up the index page, and today I focused on making sure each post’s page displays exactly what it’s supposed to 🧠✨. I started by updating the views.py file, where I made changes to the post_detail function. This function now handles displaying the correct post content whenever a user clicks on a specific post. Then, I implemented it in the post_details.html file to show the title, image, and content dynamically. After that, I created a custom 404 error page 🚫 — this is the page users see when they try to access a post or link that doesn’t exist. To do this, I made a new HTML file named 404.html and configured it so Django automatically renders it when a page isn’t found. This makes the site feel more polished and user-friendly 😎. Now, whenever someone enters the wrong URL, instead of a boring technical error message, they’ll see a custom-designed 404 page that fits the look and feel of the project, but it cannot be implemented now due to the fact that the website has not yet been deployed🎨💡. There’s a video below showing how everything looks now 🙌 #Django #Python #WebDevelopment #ErrorHandling #Frontend #100DaysOfCode #LearningInPublic #LexissLearns 💻🔥

🚀 Django Day 18 — Wrapping Up Templates & Error Handling Today I wrapped up work on templates by checking my project for any remaining hardcoded HTML and converting those parts into reusable template files 🧩. I also created a custom 404.html template to handle wrong or non-existent URLs, so users see a friendly error page instead of the default debug message ⚠️. To display a custom 404 page I first experimented with render_to_string, which renders a template into an HTML string. For example, I used something like response = HttpResponseNotFound(render_to_string("404.html")) to return the rendered HTML as a 404 response. Then I learned about the Http404 exception. Instead of manually rendering and returning a 404 response, I can raise Http404("Page not found"), and Django will automatically use my 404.html template (if it exists) to show the error page. I found this approach cleaner and more idiomatic because: ✅ Less code — raising Http404 is shorter than building and returning a full response. ✅ Built-in behavior — Django’s error handling pipeline already knows how to find and render 404.html, so I don’t need to duplicate logic. ✅ Better separation — raising an exception keeps view logic focused on business rules; the rendering of error pages stays in Django’s standard flow. After switching to Http404, my error handling looks neater and follows Django best practices — and the custom 404 page now appears automatically when I test an invalid URL. It’s a small improvement, but it makes the app feel more polished. ✨ #Django #Python #WebDevelopment #LearningInPublic #100DaysOfCode #PythonJourney #lexisslearns 🚀

🚀Django Day 26 — Linking Pages & Creating the Post Details View 🔗📰 Today I focused on connecting my blog pages together instead of manually typing the address "localhost:8000/posts" every time to access the “All Posts” page 😅. I wanted to make it interactive — where I could simply click the “All Posts” link on the index page and it would take me directly there 🧭. To make this happen, I set up URL linking in Django by using the {% url %} template tag, which allows me to dynamically generate URLs instead of hardcoding them. Here’s how the syntax looks 👇 <a href="{% url 'all-posts' %}">All Posts</a> This connects the HTML link to the corresponding view function defined in views.py, making the navigation smoother and more professional ⚙️. After setting that up, I also started working on the Post Details page — the page that shows up when I click on an individual post. To do that, I created two new files: 📄 post-details.html — for the page structure (content, title, etc.) 🎨 post-details.css — for the design and layout Then I configured these in the views.py file to make them display properly when a post is clicked and what you see right now in the post details page is hardcoded for now. There’s a video below showing how the website looks now — it’s not fully complete yet, but it’s starting to feel like a real blog with smooth page transitions 🌟. #Django #Python #WebDevelopment #Frontend #BlogApp #100DaysOfCode #LearningInPublic #LexissLearns 💻🔥

🚀 Django Day 11 – The Index Page Today, we focused on building the index page of our Django project — the page that displays all the months as clickable links leading to their respective challenge activity views. To achieve this, we created a new path inside the urls.py file of the challenges app, which handles the logic for our monthly challenges. In order to make the page interactive, we used some basic HTML tags such as <ul>, <li>, and <a href="..">. Here’s how they work together 👇 🧩 <ul> creates an unordered list that serves as the container for all the months. 🔹 <li> represents each month as a list item within that list. 🔗 <a href=".."> makes each month name clickable, linking it directly to that month’s challenge activity page. By combining these, we created a dynamic list of all the months, where clicking on any of them takes the user straight to its respective challenge activity view. After writing the code, we started the development server (as explained back in Day 3) before saving the file. This allowed Django to automatically preview our work and point out any issues. Once everything was set, we navigated to the browser and entered: 🌐 localhost:8000/challenges/ That URL now leads to our index page, displaying all the months neatly listed and fully clickable. This marks an exciting point in the journey — my very first working website with Django. It’s simple, but it represents the foundation of web development with Django. From here, it’s all about consistency, understanding, and steady improvement. 🎥 A short video below shows how everything looks so far. #Django #Python #WebDevelopment #LearningInPublic #CodeJourney #TechJourney #lexisslearns

🚀 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 🚀

🚀 New Tutorial Published! Django Forms Made Easy: A Complete Guide with Examples If you're building forms in Django—whether simple inputs or complex multi-model workflows—this guide walks you through everything: ✅ Forms & ModelForms ✅ Bootstrap 5 styling ✅ File uploads + preview ✅ Validation patterns ✅ Formsets & inline formsets ✅ AJAX & HTMX ✅ Testing & debugging Perfect for beginners and experienced developers looking to sharpen their Django fundamentals. Read the full tutorial 👉 https://lnkd.in/gTBmXgsm #Django #Python #WebDevelopment #Bootstrap #HTMX #Programming #Tutorial

Connect django with tailwind css This guide will help you integrate TailwindCSS into your Django django-tailwind. First, install django-tailwind and its dependencies: pip install django-tailwind pip install django-browser-reload Open your settings.py and add: INSTALLED_APPS = [ ... 'tailwind', 'theme', 'django_browser_reload', ] Also add this middleware: MIDDLEWARE = [ ... "django_browser_reload.middleware.BrowserReloadMiddleware", ] Run this command: python manage.py tailwind init theme This creates a new Django app named theme that contains Tailwind Then navigate to the theme directory: cd theme Inside the theme folder, run: npm install This installs Tailwind and all required frontend dependencies. Open the tailwind.config.js and update the content section: module.exports = { content: [ "../../templates/**/*.{html,js}", "../../**/templates/**/*.{html,js}", ], theme: { extend: {}, }, plugins: [], }; Now run Tailwind in dev mode: python manage.py tailwind start Thi https://lnkd.in/g2TbMHrc