Day-70 📘 Python Full Stack Journey – CSS Pseudo Elements & Selectors Today I explored more powerful CSS pseudo elements and pseudo classes that help target specific parts of elements and enhance styling with precision. 🎯 What I learned today: ✨ Pseudo Elements Used to style specific parts of content: ::after — insert content after an element ::before — insert content before an element ::selection — style selected text (highlighting) 🎯 Pseudo Classes Used to target element states and positions: :first-child — targets the first child of a parent :last-child — targets the last child of a parent :focus — targets focused elements (like active input fields) :disabled — targets disabled form elements :enabled — targets active/usable form elements :nth-child() — targets specific elements based on index/pattern Understanding these selectors showed me how much control CSS gives over UI behavior, styling, and user interactions. Small details make a big difference in user experience! 🚀 #PythonFullStack #CSS #WebDevelopment #Frontend #Selectors #PseudoElements #UIUX #CodingJourney #LearningToCode #Upskilling #ContinuousLearning
CSS Pseudo Elements & Selectors for Precision Styling
More Relevant Posts
-
Day-85 📘 Python Full Stack Journey – JavaScript DOM Manipulation Today I went deeper into the DOM (Document Object Model) and learned how JavaScript can dynamically access and update HTML elements on a webpage. 🎯 What I learned today: 🌐 getElementsByClassName() Accesses elements by class name Requires index to target a specific element Used = to replace content and += to append content Applied the same data to multiple elements using a for loop 🌐 getElementsByTagName() Accesses elements by tag name Requires index for element selection Used replace (=) and append (+=) operations 🎯 querySelector() Targets the first matching element Accepts: Element selector ('p') Class selector ('.demo') ID selector ('#demo') 🎯 querySelectorAll() Targets all matching elements Accessed elements using index Supports element, class, and ID selectors Learning DOM manipulation really highlighted how JavaScript brings interactivity and dynamic behavior to web pages. Every step makes frontend development more exciting! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #DOM #CodingJourney #LearningToCode #Upskilling #TechSkills #ContinuousLearning
-
-
Day-80 📘 Python Full Stack Journey – JavaScript Logic & Conditions Today I focused on decision-making and logic in JavaScript — essential concepts for building interactive and dynamic applications. 🎯 What I learned today: 🔍 Comparison Operators ==, === !=, !== >, <, >=, <= Understanding the difference between loose and strict comparison was especially important. 🔗 Logical Operators && (AND) || (OR) ! (NOT) Used for combining and controlling conditions. ❓ Conditional (Ternary) Operator A concise way to write simple if-else conditions. 🧭 Conditional Statements Making decisions in code using if, else if, and else. 🧑💻 User Interaction prompt() — taking input from the user alert() — displaying messages to the user These concepts showed me how JavaScript brings logic and interactivity together on the web. Excited to keep building smarter, user-driven applications! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #CodingJourney #LearningToCode #Upskilling #TechSkills #ContinuousLearning
-
-
BUILD A TEXT-QUERY PRODUCT WEBSITE(hosted using Live-server) WITH PYTHON, JAVASCRIPT, CSS, and HTML Create an interactive product query simulator that lets users input queries and displays relevant info like price, location, and more. How it works: - Users input product queries - Program checks database for matches - Displays product info: price, location, and other details Tech Stack: - Python (backend logic) - JavaScript (dynamic interactions) - CSS (styling) - HTML (UI) Features: - Simulate user queries - Display product information - Interactive UI Perfect project for learning and showcasing skills. #OasisInfobyte #ProdigyInfotech #Python #JavaScript #CSS #HTML #WebDev #CodingProject
-
Day-74 📘 Python Full Stack Journey – JavaScript Basics Today I took my first step into JavaScript, the language that brings interactivity to websites. 🚀 🎯 What I learned today: ⚙️ Introduction to JavaScript JavaScript is a programming language used to create interactive websites It can hide/show elements, perform form validation, and create animations 🔗 Connecting JavaScript with HTML Internal JavaScript using the <script> tag Can be placed inside the <head> (below the <title> tag) or at the end of the <body> Best practice: place scripts at the end of the body so HTML loads first External JavaScript Create a .js file and link it using the <script> tag at the end of the body 🖨️ Output in JavaScript document.writeln() — used to print output on the webpage 🧠 Variables in JavaScript var — globally scoped, allows re-declaration and re-assignment let — block scoped, re-assignment allowed, re-declaration not allowed const — block scoped, neither re-assignment nor re-declaration allowed 🔢 Primitive Data Types Number String Boolean Undefined Null BigInt Symbol (each symbol is unique, even with the same description) Learning JavaScript fundamentals made it clear how logic, interaction, and UI come together on the web. Excited to go deeper into scripting and dynamic web behavior! 💻✨ #JavaScript #PythonFullStack #WebDevelopment #Frontend #LearningJourney #CodingJourney #Upskilling #TechSkills #ContinuousLearning
-
-
Day-87 📘 Python Full Stack Journey – JavaScript Practice & Math Functions Today’s learning was very hands-on, focusing on JavaScript interactivity, validation, and built-in utilities. 🎯 What I worked on today: 🎨 Interactive Program Wrote a program to change the color of an SVG on click, toggling between red ↔ black continuously using event handling. 🧪 User Input & Validation Received user input using: Copy code Js document.getElementById('ab').value Applied conditions such as: isNaN() Value checks (< 10, etc.) Displayed validation results dynamically inside an HTML tag. Implemented form validation using alert() for user feedback. 🧮 JavaScript Math Module Explored several useful Math methods: pow() floor() ceil() sign() round() max() / min() sqrt() PI sin() / cos() / tan() trunc() random() These exercises really helped connect logic, user interaction, and calculations in real-world scenarios. JavaScript is getting more powerful and fun every day! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #CodingJourney #LearningToCode #Upskilling #TechSkills #ContinuousLearning
-
-
🚀 Full Stack Journey Day 65: Entering the Frontend World with JavaScript! 💻✨ Day 65 of my #FullStackDevelopment series marks the beginning of a new chapter! After mastering the backend with Python, I’m now diving into the language of the browser: JavaScript. 🌍 If HTML is the skeleton and CSS is the skin, JavaScript is the brain that makes a website interactive. Here is why it’s a game-changer: Why JavaScript? It’s the only language that runs natively in every browser. It allows us to create dynamic content, handle user events (like clicks and scrolls), and build modern web apps that feel fast and responsive. Without JS, the web would be static and boring! 🧠💡 The 3 Ways to Implement JS: Inside the <body> tag: Using <script> at the bottom of the body. This is great for performance as it allows the HTML to load first! 📂 Inside the <head> tag: Useful for scripts that need to load before the page renders, though it can sometimes slow down the initial view. 🏗️ External JS (.js files): The professional way! Keeping your logic in a separate file makes your code clean, reusable, and easy to maintain. Just like we modularize in Python! 🛠️ I’m excited to see how my backend logic translates into frontend interactivity. The Full Stack picture is finally coming together! 🧩 📂 Access my detailed notes here: 👉 GitHub: https://lnkd.in/g4GZi2kV #JavaScript #WebDevelopment #Frontend #FullStackDeveloper #CodingJourney #SoftwareEngineering #HTML5 #Programming #TechLearning #Day65 LinkedIn Samruddhi Patil
-
-
Day-89 📘 Python Full Stack Journey – JavaScript DOM Manipulation Today I learned how to dynamically create and manage HTML elements using JavaScript — a big step toward building truly interactive web applications. 🎯 What I learned today: 🔹 addEventListener() — attaching events in a clean and scalable way 🔹 createElement() — creating new HTML elements using JavaScript 🔹 createTextNode() — adding text content dynamically 🔹 appendChild() — inserting elements into the DOM 🔹 setAttribute() — setting or updating element attributes programmatically These concepts showed me how JavaScript can control and update the DOM on the fly, without writing static HTML. Really exciting to see pages being built dynamically through code! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #DOM #CodingJourney #LearningToCode #Upskilling #TechSkills #ContinuousLearning
-
-
📘 Day 74: JavaScript Math Module 🔹 What is the Math Module? • Built-in JavaScript object • Used to perform mathematical calculations • Provides powerful methods for numbers, rounding, powers, trigonometry, and random generation • No need to create an object — directly accessed using Math. 🔸 Power & Roots 🔹 Math.pow() • Used for exponentiation • Calculates power of a number 🔹 Math.sqrt() • Returns the square root of a number 🔹 Math.PI • Returns the value of π (3.14159…) • Used in circle and trigonometry calculations 🔸 Rounding Methods 🔹 Math.floor() • Removes decimal part • Always rounds down 🔹 Math.ceil() • Always rounds up to the next integer • Even if decimal is less than .5 🔹 Math.round() • Rounds based on decimal value • Less than .5 → rounds down • .5 or more → rounds up 🔹 Math.trunc() • Removes decimal part • Similar to floor for positive numbers 🔸 Sign Checking 🔹 Math.sign() • Checks whether number is positive or negative • Returns: 1 → Positive number -1 → Negative number 0 → Zero 🔸 Maximum & Minimum 🔹 Math.max() • Returns the largest number from given values 🔹 Math.min() • Returns the smallest number from given values 🔸 Trigonometric Functions 🔹 Math.sin() 🔹 Math.cos() 🔹 Math.tan() • Used in angle-based calculations • Important in graphics, animations, and advanced math 🔸 Random Number Generation 🔹 Math.random() • Generates a number between 0 and 1 • Value changes every time 💡 Creating Random Integers: • Multiply random by a number (example ×10) • Use floor() to remove decimal • Add +1 if needed to avoid 0 This technique is widely used for: • Dice games • OTP generators • Random colors • Game development ✨ Today you learned how to use the JavaScript Math module for powers, rounding, trigonometry, maximum/minimum values, and random number generation. These functions are essential for calculations, gaming logic, animations, and real-world application development. #JavaScript #MathModule #Day74 #FrontendDevelopment #WebDevelopment #RandomNumbers #JSDeveloper #CodingJourney #LearningJavaScript
-
🚀 My Full-Stack Project (Python + React JS) Dealing with Python 🐍 and JavaScript ⚛️, I decided to start small—and that’s when this idea came up: an SGPA Calculator. 📌 What it does: The application takes subject marks and credits as input and calculates the SGPA, presenting the result in a clean and visually appealing way. 🛠 Tech Stack Used: Frontend: React JS Tailwind CSS for styling Framer Motion for animations, charts, and loaders (better UX 🙌) Backend: Flask (Python) SGPA logic implemented using Python and basic mathematical operations ✨ This project helped me understand frontend–backend integration, API handling, and building a complete application from scratch. This is how the final result looks 👇 (attach your screenshots / demo video here) #Python #Flask #ReactJS #TailwindCSS #FramerMotion #FullStackDevelopment #WebDevelopment #LearningByBuilding
-
Day-79 📘 Python Full Stack Journey – JavaScript Objects, Maps & Operators Today I went deeper into JavaScript fundamentals, focusing on how data is structured, manipulated, and operated on within programs. 🎯 What I learned today: 🧱 JavaScript Objects How to change values in an object How to add new key–value pairs How to delete existing key–value pairs How to extract keys and values, which are stored as arrays 🗺️ JavaScript Map Defined using the new keyword with the Map() constructor Maps are ordered and mutable 🔧 Map Methods set() — add or update values get() — retrieve values has() — check existence delete() — remove entries ➕ JavaScript Operators Arithmetic Operators: +, -, *, /, **, %, ++, -- Assignment Operators: +=, -=, *=, /=, **=, %= These concepts are helping me better understand how JavaScript handles data and logic behind the scenes. Step by step, building a strong foundation for dynamic web development! 🚀 #JavaScript #PythonFullStack #WebDevelopment #Frontend #CodingJourney #LearningToCode #Upskilling #TechSkills #ContinuousLearning
-
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