Mastering CSS nth-child selectors for clean code

I used to build websites by writing one giant HTML file for every single page. It worked for small projects, but the more I added, the messier it got. Today, I’m documenting a much better way to build: React Components. Instead of seeing a website as one big page, I'm starting to see it as a collection of small, independent "Lego blocks." Here is what I’m practicing to keep my code organized: 1) The Lego Mindset: I build small pieces—like a button or a card—once, and then I can reuse them 1,000 times across my app. 2) JSX Power: It looks like HTML, but it lets me use actual JavaScript logic right inside my UI using curly braces. No more messy DOM manipulation. 3) Props (Communication): I learned how to pass data between these blocks. I can have one button component that changes color or text just by changing its props. The biggest lesson I learned today: "Don't Repeat Yourself" (DRY). If I need to change a design, I only have to fix it in one file, and it updates everywhere instantly. I am still learning the ropes, but building with components makes coding feel much more professional and scalable. Tomorrow, I’ll learn how to make these parts "alive" with useState! Quick question: Do you remember the first time you used React? Did the "Lego Mindset" click for you right away? #CodeWithWajid #ReactJS #WebDevelopment #30DaysOfCode #LearningToCode #BuildingInPublic #Frontend #JSX

When you start learning JavaScript, one of the first concepts you'll come across is the DOM. But what exactly is it? 🤔 Think of a web page like a house 🏠 · The rooms are elements (div, p, h1, button) · The furniture is attributes (class, id, styles) The DOM (Document Object Model) is the map of that house. It gives JavaScript the ability to see, access, and manipulate everything on the page. That's how we get things like: ✅ Button clicks that actually do something ✅ Forms that validate in real time ✅ Content updates without refreshing the page In simple terms: The DOM turns your HTML into objects that JavaScript can control. Once you understand the DOM, you unlock the real power of frontend development. Every heading, paragraph, image, button, and even attributes like class or id become part of the DOM tree. Mastering DOM manipulation is one of the most important steps to becoming a strong frontend developer. Keep learning. Keep building. 😁 Dev Miracle Onyia #javascript #dom #frontenddevelopment #webdevelopment #reactjs #coding #programming #softwaredeveloper #webdev #learncoding #100daysofcode #devcommunity #developers #codinglife #tech

🚀 Leveling up my Frontend skills! 💻 I’ve been diving deep into CSS lately, and I finally found the perfect resource. Some concepts used to feel like a puzzle, but this tutorial makes everything so clear and intuitive. Huge shoutout to the instructor for being one of the best teachers I’ve encountered—the way she breaks down complex styling is a game-changer for anyone learning web development. If you're looking to master CSS, I highly recommend checking this out! #WebDevelopment #CSS #Frontend #LearningToCode #Programming #TechCommunity #DeveloperLife #CSS3 #CodingJourney

JavaScript Mini Project | Colorful Bubble “Hi” Message Turning concepts into practice! Today I built a fun mini project where a “Hi” message appears with colorful bubbles whenever the user clicks on the screen. This project helped me apply the JavaScript concepts from my previous lectures and understand how JavaScript can create interactive visual effects on a webpage. Here are the key concepts I used while building this project: ● Using DOM manipulation to create and control elements dynamically ● Handling click events to trigger actions on the webpage ● Creating elements dynamically using document.createElement() ● Styling elements dynamically using JavaScript and CSS ● Generating random colors and positions for bubble effects ● Using functions to organize JavaScript logic ● Understanding how JavaScript can create interactive UI effects Building projects like this makes learning more practical and exciting, and it helps strengthen my frontend development skills. Excited to keep learning, experimenting, and building more creative JavaScript projects. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #BuildInPublic #TechLearning

🚀 Continuing to sharpen my JavaScript skills with a Number Guessing Game project. Excited to share my beginner project "Number Guessing Game" built using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of: > JavaScript logic and conditional statements > DOM manipulation and user interaction > Basic UI design using CSS > Event handling and game flow control 🔗 My github project link: https://lnkd.in/dC-4d4hG The game generates a random number, and the user tries to guess it with feedback provided after each attempt — making it both fun and interactive. 💡 I’m continuously improving my skills in frontend development, and more projects are on the way! #WebDevelopment #JavaScript #FrontendDevelopment #BeginnerProject #CodingJourney #HTML #CSS #LearningByDoing

Nobody told me being a Developer would feel like this... 🎢 One minute I’m a genius because I centered a div perfectly using Bootstrap. The next minute, I’m questioning my entire career because a single missing semicolon broke the whole layout. The Reality of Frontend Dev: 10:00 AM: "I am the master of JavaScript." 10:15 AM: "Why is this button overlapping the header on mobile?!" 11:00 AM: Fixes one line of CSS. "I am once again a genius." It’s a wild ride, but there’s no better feeling than hitting 'Deploy' and seeing a clean, fast, hand-coded site go live. 🚀 Who else is on the emotional rollercoaster today? 👇 #DevLife #FrontendDeveloper #CodingHumor #WebDevelopment #JavaScript #Bootstrap

💻 Most people think web development is just coding… But if you’ve ever built a real project, you know the truth. Most of the time, you’re not writing code. You’re debugging it. 🐛 Last week I spent almost 4 hours fixing a broken layout on a project. I checked the JavaScript. ⚙️ I checked the API responses. 🔌 I reviewed the component logic again and again. 🧠 Everything looked perfectly fine. But the UI was still broken. After digging through the styles one more time, I finally found the issue. The culprit? One tiny CSS margin quietly overriding the entire layout. 😅 Moments like this remind me of something important: Web development isn’t about knowing every framework or every trick. It’s about patience, curiosity, and the willingness to keep digging until something finally clicks. 🔍 Sometimes the smallest bug ends up teaching the biggest lesson. And honestly, those moments are part of what makes building on the web so interesting. 🚀 Curious to hear from other developers here 👇 What’s the longest time you’ve ever spent debugging a bug? 🐛💻 #WebDevelopment #CodingLife #DebuggingLife #DeveloperStories #ProgrammingTips #WebDevJourney

⚡ Most JavaScript developers only use a few array methods daily. If you know these well, you can handle most data transformations in frontend code. The big ones: 🔹 map() — transform elements 🔹 filter() — keep items that match a condition 🔹 reduce() — accumulate values into one result 🔹 find() / findIndex() — get the first match 🔹 forEach() — run side effects But there are also some important details developers often miss: ⚠️ Some methods mutate the original array ⚠️ Array.sort() sorts values as strings by default ⚠️ Avoid sparse arrays like new Array(n) ⚠️ ES2023 introduced immutable methods like toSorted(), toReversed(), toSpliced() Another powerful pattern used heavily in modern frontend code: Method chaining Filter → Transform → Return the result. Clean. Functional. Readable. Frontscope breaks this down with interactive explanations and examples. Explore the full lesson here 👇 https://lnkd.in/gqcb56Vi #javascript #frontend #webdevelopment #programming #reactjs

Hi everyone.... 💻 Day 18 of #30DaysCodeChallenge Today I built a Random Quote Generator using HTML, CSS, and JavaScript as part of my daily frontend practice. This project helped me strengthen my understanding of DOM manipulation and event handling in JavaScript while also focusing on clean and responsive UI design. ✨ Key Features of the Project: 🔹 Displays a random motivational quote each time the user clicks the "New Quote" button 🔹 Shows the author name along with the quote 🔹 Added a Copy Quote button to copy the quote directly to the clipboard 🔹 Designed a simple and clean UI using CSS with a gradient background 🧠 What I Practiced: ✔️ Working with arrays and objects in JavaScript ✔️ DOM manipulation using getElementById ✔️ Event listeners for button interactions ✔️ Generating random quotes using JavaScript logic ✔️ Using the Clipboard API Consistent practice like this helps improve problem-solving skills and builds confidence in frontend development. Looking forward to continuing this journey and learning something new every day! 🚀 #30DaysCodeChallenge #Day18 #WebDevelopment #HTML #CSS #JavaScript #FrontendDevelopment #CodingJourney

𝗜𝗻𝗹𝗶𝗻𝗲 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗔𝗹𝘄𝗮𝘆𝘀 𝗮 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 You’ve probably heard this before: “Don’t use inline functions in JSX. It causes re-renders.” Example: <button onClick={() => setCount(count + 1)}> Increment </button> Yes — this creates a new function on every render. But here’s the important part: Creating a new function is usually very cheap. In most applications, this is not your performance bottleneck. The real issue happens when: • The function is passed to a memoized child • The child relies on reference equality • The component tree is large For example: <Child onClick={() => setCount(count + 1)} /> If the child is wrapped with React.memo, the changing function reference can trigger re-renders. That’s when useCallback might make sense. But adding useCallback everywhere “just in case” adds complexity. A better rule: 📌 𝙊𝙥𝙩𝙞𝙢𝙞𝙯𝙚 𝙬𝙝𝙚𝙣 𝙞𝙩 𝙖𝙛𝙛𝙚𝙘𝙩𝙨 𝙗𝙚𝙝𝙖𝙫𝙞𝙤𝙧 — 𝙣𝙤𝙩 𝙗𝙚𝙘𝙖𝙪𝙨𝙚 𝙖 𝙧𝙪𝙡𝙚 𝙨𝙖𝙮𝙨 𝙨𝙤. Most performance issues in React are architectural, not about small function allocations. Day 11/100 — sharing practical frontend engineering lessons. Do you avoid inline functions, or only optimize when needed? #ReactJS #FrontendEngineering #JavaScript #WebPerformance #SoftwareArchitecture