Looking to build your own real-time stock market tracker app? In this hands-on tutorial, we’ll use React, Tailwind CSS, and the Alpha Vantage API to create a sleek and functional live stock price tracker.Whether you’re a frontend dev or a beginner trying to get into finance tech, this is a project-based learning opportunity that teaches practical skills while building something useful.In this project, you'll learn how to:- Fetch live stock prices from an API using React hooks- Manage dynamic lists and user input- Display loading states and error handling- Style your app with Tailwind CSS for a professional lookPerfect for beginners and intermediate developers looking to boost their React skills!🛠️ What We'll Build* 🔍 A stock search bar with live suggestions* 💰 A dashboard showing real-time prices* 📉 Dynamic price color change (green/red)* 📱 Clean Tailwind-powered responsive UI* 🌐 API integration with Alpha Vantage (free key!)🚀 Technologies Used* React + Vite* Tailwind CSS* Alpha Vantage API (Get your key)* React hooks: useState, useEffect, fetch🧱 Project SetupbashCopyEditnpm create vite@latest stock-tracker --template react cd stock-tracker npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -pTailwind Setup (tailwind.config.js):jsCopyEditcontent: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],Tailwind in index.css:cssCopyEdit@tailwind base; @tailwind components; @tailwind utilities;🔗 API Setup with Alpha VantageSign up at AlphaVantage.co and grab your API key.Example fetch call:jsCopyEditconst fetchStockPrice = async (symbol) => { const res = await fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=YOUR_KEY`); const data = await res.json(); return data['Global Quote']; };📊 Displaying Stock DataExample JSX:jsxCopyEdit {stockName} 0 ? 'text-green-500' : 'text-red-500'}`}> ${stockPrice} ({priceChange}%) 🎨 UI Tips with Tailwind CSS* Use grid-cols-2 or flex justify-between for layouts* Add a search input with a dropdown using absolute, bg-white, z-10* Animate loading state with animate-pulse📱 Optional Enhancements* Save recent stock symbols to localStorage* Add a chart using Chart.js or Recharts* Show currency, volume, or market capSource Code:import React, { useState, useEffect } from "react"; // StockPrice component fetches and displays the price for a given ticker function StockPrice({ ticker = "" }) { const [price, setPrice] = useState(null); // Holds the fetched price const [loading, setLoading] = useState(true); // Loading state const [error, setError] = useState(null); // Error state useEffect(() => { // Fetch stock price from Alpha Vantage API const fetchStockPrice = async () => { try { setLoading(true); const apiKey = import.meta.env.VITE_ALPHAVANTAGE_API_KEY; // Uncomment and set your API key const response = await fetch( `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${ticker}&apikey=${apiKey}` ); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); // Check if the API returned a valid price if (data["Global Quote"] && data["Global Quote"]["05. price"]) { setPrice(parseFloat(data["Global Quote"]["05. price"]).toFixed(2)); setError(null); } else { setError("Could not retrieve price for this ticker."); setPrice(null); } } catch (e) { setError(`Error fetching data: ${e.message}`); setPrice(null); } finally { setLoading(false); } }; fetchStockPrice(); // Call the fetch function when ticker changes }, [ticker]); return ( {/* Display the ticker symbol */} {ticker} {/* Show loading spinner while fetching */} {loading && ( Loading price... )} {/* Show error message if there is an error */} {error && {error}} {/* Show the price if loaded successfully */} {!loading && !error && price !== null && ( ${price} )} {/* Show message if no data is available */} {!loading && !error && price === null && ( No data available. )} ); } // Main StockPriceTracker component manages the list of tickers and input export default function StockPriceTracker() { const [tickers, setTickers] = useState(["NVDA", "MSFT", "GOOGL"]); // Initial tickers const [input, setInput] = useState(""); // Input for new ticker // Add a new ticker to the list const addTicker = () => { const val = input.trim().toUpperCase(); if (val && !tickers.includes(val)) { setTickers([...tickers, val]); setInput(""); } }; return ( {/* App title */} My Stock Tracker {/* Input and Add button for new tickers */} setInput(e.target.value)} placeholder="Add ticker (e.g. AAPL)" /> Add {/* Display StockPrice components for each ticker */} {tickers.map((ticker) => ( ))} ); } Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
In this guide, we’ll walk step-by-step through creating a fully functional React app using React Router v7, styled with TailwindCSS, and powered by Vite. This is your go-to tutorial for learning client-side routing in React — from setup to nested routes and 404 pages.📦 Technologies Used* React 19 (via Vite)* React Router v7.6.3* TailwindCSS 4.1+* Vite (for fast build + dev server)🛠️ Project Setup with Vite & TailwindCSSReact Router Crash Course: Step-by-Step GuideReact Router is the standard routing library for React. In this crash course, we’ll build a simple multi-page app using React Router v6+ and Vite. Let’s get started!1. Project SetupFirst, create a new React project using Vite:npm create vite@latest react-router-crash-course -- --template react cd react-router-crash-course npm install Install React Router:npm install react-router-dom 2. Project StructureOrganize your files as follows:src/ App.jsx main.jsx components/ Button.jsx Navigation.jsx pages/ HomePage.jsx AboutPage.jsx ContactPage.jsx ProductsPage.jsx ProductDetailPage.jsx NotFoundPage.jsx Dashboard/ DashboardLayout.jsx DashboardHome.jsx DashboardProfile.jsx DashboardSettings.jsx 3. Setting Up the RouterIn main.jsx, wrap your app with BrowserRouter:import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App.jsx"; import "./App.css"; ReactDOM.createRoot(document.getElementById("root")).render( ); 4. Defining RoutesIn App.jsx, set up your routes:import { Routes, Route } from "react-router-dom"; import Navigation from "./components/Navigation"; import HomePage from "./pages/HomePage"; import AboutPage from "./pages/AboutPage"; import ContactPage from "./pages/ContactPage"; import ProductsPage from "./pages/ProductsPage"; import ProductDetailPage from "./pages/ProductDetailPage"; import NotFoundPage from "./pages/NotFoundPage"; import DashboardLayout from "./pages/Dashboard/DashboardLayout"; import DashboardHome from "./pages/Dashboard/DashboardHome"; import DashboardProfile from "./pages/Dashboard/DashboardProfile"; import DashboardSettings from "./pages/Dashboard/DashboardSettings"; function App() { return ( } /> } /> } /> } /> } /> }> } /> } /> } /> } /> ); } export default App; 5. Creating NavigationIn components/Navigation.jsx, add navigation links:import { NavLink } from "react-router-dom"; function Navigation() { return ( Home About Contact Products Dashboard ); } export default Navigation; 6. Building PagesCreate simple components for each page in the pages/ directory. Example for HomePage.jsx:function HomePage() { return Welcome to the Home Page!; } export default HomePage; Repeat for AboutPage.jsx, ContactPage.jsx, etc.7. Dynamic RoutesIn ProductDetailPage.jsx, use the useParams hook to get the product ID:import { useParams } from "react-router-dom"; function ProductDetailPage() { const { id } = useParams(); return Product Details for ID: {id}; } export default ProductDetailPage; 8. Nested Routes (Dashboard Example)In DashboardLayout.jsx, use the Outlet component:import { Outlet, NavLink } from "react-router-dom"; function DashboardLayout() { return ( Dashboard Home Profile Settings ); } export default DashboardLayout; 9. Handling 404sIn NotFoundPage.jsx:function NotFoundPage() { return 404 - Page Not Found; } export default NotFoundPage; 10. Running the AppStart your development server:npm run dev Visit http://localhost:5173 to see your app in action!ConclusionYou now have a working React app with multiple pages, nested routes, dynamic routes, and a 404 page—all powered by React Router. Experiment by adding more pages or features! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
In this tutorial, you'll get a complete understanding of React components including how to build and structure them using best practices. You'll learn about functional components, props, state, JSX, hooks, composition, and how to break an app into reusable modules.📽️ YouTube Video Title (High CTR)🔧 Step-by-Step Tutorial1. 📦 What is a Component in React?* A component is a reusable and self-contained part of the UI.* It’s either a function or class (function preferred).* Allows splitting the UI into isolated pieces.function MyComponent() { return Hello World; } 2. 🧩 Types of Components✅ Functional Components (modern, preferred)const Welcome = () => Welcome!; ❌ Class Components (legacy)class Welcome extends React.Component { render() { return Welcome!; } } 3. 🛠 Using PropsProps = "properties" → input data passed to a component.They are read-only and passed via JSX attributes.function Greeting({ name }) { return Hello, {name}!; } 4. 🔁 State ManagementState = data that can change.Use useState to manage it in a functional component.const [count, setCount] = useState(0); Updating state triggers a re-render of the component.5. ⏱ Lifecycle with useEffectReact uses useEffect() for side effects like fetching data.useEffect(() => { console.log("Component Mounted"); }, []); // Empty array = run once 6. 💻 JSX SyntaxJSX = HTML + JavaScript hybrid syntax.It compiles to React.createElement() behind the scenes.const App = () => ( Hello JSX! ); 7. 🧱 Component CompositionComponents can include other components → reusable UIs.const Page = () => ( ); 8. 📦 Exporting and Importing ComponentsCreate a component:const Footer = () => © 2025; export default Footer; Use it:import Footer from './components/Footer'; 9. 📁 Project Refactor ExampleWe extracted Footer.jsx, Home.jsx, Page.jsx, RecipePage.jsx, RecipeCard.jsx, and RecipeModal.jsx components into a structured folder system.Folder Structure:src/ ├── components/ │ ├── Footer.jsx │ ├── Page.jsx ├── pages/ │ ├── Home.jsx │ ├── RecipePage.jsx │ ├── Recipes/ │ │ ├── RecipeCard.jsx │ │ ├── RecipeModal.jsx 10. 📚 Best Practices* ✅ Name components with capital letters* ✅ One export default per file* ✅ Keep components small & focused* ✅ Use props to customize components* ✅ Return a single parent element Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
🔍 Implement Search & Category Filtering in React with TailwindCSS (2025 Guide)In this guide, you’ll learn how to implement powerful search and category filtering in a React application using TailwindCSS for styling. This builds on a previous project where we created a responsive recipe website.By the end of this tutorial, you'll be able to:* Filter recipe cards by text input* Filter by category dropdown* Clear search with a single click* Ensure case-insensitive matching✅ Prerequisites* A React app already set up (ideally with TailwindCSS + recipe data)* Basic understanding of React state and hooks🧱 Step 1: Create State for Search and CategoryInside your RecipesPage.jsx (or App.jsx if everything is in one file):const [searchQuery, setSearchQuery] = useState(""); const [category, setCategory] = useState(""); const [filteredRecipes, setFilteredRecipes] = useState(recipes); 🎨 Step 2: Create the UI🔍 Search + Filter Inputs Featured Recipes setSearchQuery(e.target.value)} className="w-full md:w-1/2 px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" /> setCategory(e.target.value)} className="w-full md:w-1/4 px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" > All Categories {[...new Set(recipes.map(recipe => recipe.category))].map((cat, i) => ( {cat} ))} { setSearchQuery(""); setCategory(""); }} className="cursor-pointer bg-gradient-to-r from-amber-500 to-orange-500 hover:from-orange-500 hover:to-amber-500 text-white px-6 py-2 rounded transition duration-300" > Clear Search ⚙️ Step 3: Search Logic with useEffectuseEffect(() => { const query = searchQuery.toLowerCase(); const result = recipes.filter(recipe => recipe.title.toLowerCase().includes(query) || recipe.ingredients.some(ing => ing.toLowerCase().includes(query)) || recipe.category.toLowerCase().includes(query) ); if (category) { setFilteredRecipes(result.filter(recipe => recipe.category === category)); } else { setFilteredRecipes(result); } }, [searchQuery, category]); This runs every time the search query or category changes.📦 Step 4: Display Filtered Recipes {filteredRecipes.length > 0 ? ( filteredRecipes.map((recipe, i) => ( )) ) : ( No recipes found. )} 🧠 Bonus: Tips* Use toLowerCase() to make searching case-insensitive* Use Set to generate unique categories* Add debounce if your search data is large* For UX, make the clear button instantly reset filters📈 SEO Keywords* React search filter tutorial 2025* Tailwind CSS form input search* Recipe search filter React example* Case-insensitive search with useEffect* Responsive dropdown in React + TailwindCSS Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
📝 DescriptionReady to learn React in 2025? This crash course walks you through creating your first real-world React app with hooks, components, and JSX.✅ What you'll learn:* Setting up React with Create React App* JSX, Props, State & Hooks* Styling, Conditional Rendering, Lists* Component architecture & folder structure#ReactJS #CrashCourse #WebDevelopment #JavaScript #FrontendDev #ReactHooks #React2025🚀 React.js Crash Course 2025 – Build Your First App from ScratchWelcome to this beginner-friendly React.js crash course for 2025! Whether you're transitioning from HTML, CSS, and JavaScript or starting fresh, this tutorial will give you a rock-solid foundation in React with best practices, clean structure, and modern JavaScript techniques.📦 Step 1: What Is React.js?React is a JavaScript library for building user interfaces, created and maintained by Meta (Facebook). It allows you to create reusable components, use a virtual DOM for faster rendering, and structure your frontend with clean, component-based architecture.React is not a full-blown framework like Angular—think of it as the view layer of your app. It’s great for building single-page applications (SPAs).🧱 Step 2: Setting Up React✅ Prerequisites:* Node.js & npm (Install from nodejs.org)* A code editor like VS Code🛠 Create a New React Appnpx create-react-app my-app Replace my-app with your project name.Navigate into your app:cd my-app Start the app:npm start Your React app will open at http://localhost:3000📂 Step 3: Project Structure OverviewReact generates this structure:my-app/ ├── node_modules/ ├── public/ │ └── index.html ├── src/ │ ├── App.js │ ├── App.css │ ├── index.js │ └── components/ (your custom folder) ├── package.json * App.js: Main component* App.css: Main stylesheet* index.js: App entry point🧩 Step 4: Understanding JSX & ComponentsCreate a Functional Component// src/components/Welcome.jsx function Welcome({ message = "World" }) { return Hello {message}!; } export default Welcome; Import & Use It// App.js import Welcome from './components/Welcome'; function App() { return ( ); } JSX Notes* Always return a single root element (use ... if needed).* Use className instead of class.⚛️ Step 5: Using State with useStateimport { useState } from 'react'; function App() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment ); } ⏱ Step 6: Using Effects with useEffectimport { useEffect, useState } from 'react'; function App() { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(s => s + 1); }, 1000); return () => clearInterval(interval); // Cleanup }, []); return Time passed: {seconds}s; } 🎨 Step 7: Styling in ReactOption 1: CSS File/* App.css */ .App { background-color: aqua; height: 100vh; } Option 2: Inline Styleconst myStyle = { backgroundColor: 'black', color: 'white', fontSize: '2rem' }; return Styled Heading; 🔁 Step 8: Conditional Renderingconst [isLoggedIn, setIsLoggedIn] = useState(false); return ( {isLoggedIn ? : } setIsLoggedIn(!isLoggedIn)}>Toggle Login ); Or with &&:{hasAccess && } 🧾 Step 9: Lists and Keysconst items = ["A", "B", "C"]; return ( {items.map((item, index) => ( {item} ))} ); ⚠️ Use unique IDs for production (not index as key).🗂 Step 10: Folder Structure Best Practicessrc/ ├── components/ │ ├── Header.jsx │ ├── Button.jsx ├── pages/ │ ├── Home.jsx │ ├── About.jsx ├── hooks/ │ └── useToggle.js ├── App.js ├── index.js Clean up unused files like logo.svg, App.test.js, etc.🚀 Next Steps* Use React Router for navigation* Deploy using Vercel or Netlify* Add form handling and API callsStay tuned for the next part where we build a real React project from scratch!Download the PDF file here: Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
🚀 Live Features: * Sticky navigation * Responsive hero section with call to action * Dynamically generated recipe cards * Recipe search by keyword, category, or ingredient * Modal popups with recipe details * Contact form with Font Awesome icons * Auto-updating copyright🧱 Step 1: Project SetupCreate the folder structure:📁 dynamic-recipe-site/ ├── index.html ├── style.css (optional) ├── script.js 🌐 Step 2: Build the Layout (HTML + Tailwind)🧭 Sticky Navbar Tasty Recipes Home Recipes About Contact 🏠 Hero Section Welcome to Tasty Recipes Discover a world of delicious recipes and culinary inspiration. Explore Recipes 🍝Featured Recipes Section Featured Recipes Search Recipes Search 📜 Step 3: About & Contact Sections🙋 About Us About Us Welcome to Tasty Recipes, your go-to source for delicious and inspiring recipes from around the world. Our mission is to provide you with high-quality, easy-to-follow recipes that will help you create memorable meals. 📞 Contact Form Contact Us Have a question or suggestion? We'd love to hear from you! Email us at: support@tastyrecipes.com Send Message 🔚 Footer © 2025 Tasty Recipes. All rights reserved. ⚙️ Step 5: Load Recipes Dynamically with JavaScriptconst recipes = [ { title: "Spaghetti Carbonara", category: "Pasta", image: "https://www.themealdb.com/images/media/meals/wvqpwt1468339226.jpg", ingredients: [ "200g spaghetti", "100g pancetta", "2 large eggs", "50g Pecorino Romano cheese", "Black pepper", "Salt", ], instructions: [ "Cook the spaghetti in salted boiling water until al dente.", "While the pasta is cooking, cut the pancetta into small cubes and fry until crispy.", "In a bowl, whisk together the eggs, cheese, and a generous amount of black pepper.", "Drain the spaghetti and add it to the pancetta pan. Mix well.", "Remove the pan from the heat and add the egg mixture, stirring quickly to create a creamy sauce.", "Serve immediately with extra cheese and pepper.", ], }, { title: "Classic Margherita Pizza", category: "Pizza", image: "https://www.themealdb.com/images/media/meals/x0lk931587671540.jpg", ingredients: [ "250g strong bread flour", "1 tsp dried yeast", "1 tsp sugar", "1 tsp salt", "150ml warm water", "2 tbsp olive oil", "100g tomato sauce", "150g mozzarella cheese", "Fresh basil leaves", ], instructions: [ "In a large bowl, combine flour, yeast, sugar, and salt.", "Add warm water and olive oil, and mix to form a dough.", "Knead the dough for about 10 minutes until smooth.", "Let the dough rise in a warm place for 1 hour.", "Preheat oven to 220°C (425°F).", "Roll out the dough on a floured surface.", "Spread tomato sauce over the base, add mozzarella cheese, and bake for 15-20 minutes.", "Garnish with fresh basil leaves before serving.", ], }, { title: "Chocolate Brownies", category: "Dessert", image: "https://www.themealdb.com/images/media/meals/yypvst1511386427.jpg", ingredients: [ "150g unsalted butter", "200g dark chocolate", "150g sugar", "2 large eggs", "100g all-purpose flour", "30g cocoa powder", "1 tsp vanilla extract", "Pinch of salt", ], instructions: [ "Preheat oven to 180°C (350°F). Grease and line a square baking tin.", "Melt butter and chocolate together over low heat.", "In a bowl, whisk together sugar and eggs until light and fluffy.", "Stir in the melted chocolate mixture and vanilla extract.", "In a separate bowl, whisk together flour, cocoa powder, and salt.", "Gently fold the dry ingredients into the wet ingredients until just combined.", "Pour the batter into the prepared tin and bake for 20-25 minutes.", "Let it cool completely before cutting into squares.", ], }, { title: "Fresh Garden Salad", category: "Salad", image: "https://www.themealdb.com/images/media/meals/urtwux1486983078.jpg", ingredients: [ "6 cups mixed salad greens", "2 medium tomatoes, diced", "1 cucumber, sliced", "1 red onion, thinly sliced", "1 bell pepper, chopped", "1/2 cup olive oil", "3 tbsp balsamic vinegar", "1 tsp Dijon mustard", "1 clove garlic, minced", "Salt and pepper to taste", ], instructions: [ "Wash and dry all vegetables thoroughly.", "In a large bowl, combine the salad greens, tomatoes, cucumber, red onion, and bell pepper.", "In a small bowl, whisk together olive oil, balsamic vinegar, Dijon mustard, minced garlic, salt, and pepper.", "Drizzle the dressing over the salad and toss gently to combine.", "Serve immediately.", ], }, { title: "Grilled Salmon with Lemon Herbs", category: "Main Course", image: "https://www.themealdb.com/images/media/meals/1548772327.jpg", ingredients: [ "4 salmon fillets", "2 tbsp olive oil", "2 cloves garlic, minced", "1 lemon, sliced", "2 tbsp fresh dill, chopped", "2 tbsp fresh parsley, chopped", "Salt and pepper to taste", ], instructions: [ "Preheat grill to medium-high heat.", "In a small bowl, mix olive oil, minced garlic, dill, and parsley.", "Place salmon fillets on a large piece of aluminum foil. Season with salt and pepper.", "Spread the herb mixture over the salmon fillets and top with lemon slices.", "Fold the foil to create a sealed packet. Grill for 12-15 minutes, or until salmon is cooked through.", "Serve hot with your favorite sides.", ], }, { title: "Vegetable Stir-Fry", category: "Stir-Fry", image: "https://www.themealdb.com/images/media/meals/wuxrtu1483564410.jpg", ingredients: [ "2 cups mixed vegetables (bell peppers, broccoli, carrots)", "1 cup tofu, cubed", "2 tbsp soy sauce", "1 tbsp sesame oil", "2 cloves garlic, minced", "1 tsp ginger, grated", "Salt and pepper to taste", ], instructions: [ "Heat sesame oil in a large pan over medium heat.", "Add garlic and ginger, sauté for 1 minute.", "Add tofu and cook until golden brown.", "Add mixed vegetables and stir-fry for 5-7 minutes.", "Pour in soy sauce and season with salt and pepper.", "Serve hot over rice or noodles.", ], }, ]; // TODO: Create a function to display the recipes in a grid layout function displayRecipes(recipes) { // SEO-friendly: Dynamically generate recipe cards for better user engagement const container = document.getElementById("recipe-container"); container.innerHTML = ""; recipes.forEach((recipe) => { const recipeCard = document.createElement("div"); recipeCard.className = "recipe-card relative overflow-hidden rounded-md shadow-md hover:shadow-lg transition-shadow duration-300"; const image = document.createElement("img"); image.src = recipe.image; image.alt = recipe.title; image.className = "w-full h-48 object-cover rounded-t-md transition-transform duration-300 transform scale-100 hover:scale-105"; const overlay = document.createElement("div"); overlay.className = "recipe-overlay absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black p-4 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end rounded-b-md"; const title = document.createElement("h3"); title.className = "recipe-title text-lg font-semibold mb-1"; title.textContent = recipe.title; const category = document.createElement("p"); category.className = "recipe-category text-gray-300 text-sm"; category.textContent = recipe.category; overlay.appendChild(title); overlay.appendChild(category); recipeCard.appendChild(image); recipeCard.appendChild(overlay); recipeCard.addEventListener("click", () => showRecipeDetails(recipe)); // Added click event container.appendChild(recipeCard); }); } function showRecipeDetails(recipe) { const modal = document.createElement("div"); modal.className = "fixed inset-0 bg-opacity-50 flex justify-center items-center z-50 backdrop-blur-md"; const modalContent = document.createElement("div"); modalContent.className = "bg-white rounded-lg p-6 w-full max-w-2xl shadow-xl transform transition-transform duration-300 scale-95 hover:scale-100"; const title = document.createElement("h2"); title.className = "text-3xl font-semibold mb-4 text-gray-800 border-b border-gray-200 pb-2"; title.textContent = recipe.title; // SEO-friendly: Use descriptive headings const image = document.createElement("img"); image.src = recipe.image;
✅ No frameworks✅ Clean UI with Tailwind✅ Smooth animations & mobile-friendly designWhether you're a beginner or brushing up your skills, this project is the perfect way to practice frontend fundamentals.🔔 Subscribe for more tutorials and real-world projects!📁 Project files & resources: [Insert GitHub or website link]In this web development project you will learn how to create a Portfolio website using Tailwind CSS and JavaScript, complete responsive website, dropdown navigation menu, dark mode theme.🔥 Become a channel member and get full access to all my web development courses: https://www.youtube.com/playlist?list=UUMOx8iaEliW-CFrS0t9KHisTw 📚GET ULTIMATE COURSES BUNDLES: https://norbert-bm-s-school.teachable.com/ ------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- 👉 Full Source Code: https://github.com/NorbertBM/learn-web-development-for-beginners-.git ------------------------------------------------------------------------------------------------- #WebDevelopment #JavaScript #TailwindCSS #BeginnerProjects Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
In this project, we will build a message pop-up modal using JavaScript and Tailwind CSS. This project is part of my "Learn Web Development From the Beginning" series, where we progressively create real-world projects with HTML, CSS, JavaScript, and Tailwind.🔥 Become a channel member and get full access to all my web development courses: https://www.youtube.com/playlist?list=UUMOx8iaEliW-CFrS0t9KHisTw 📚GET ULTIMATE COURSES BUNDLES: https://norbert-bm-s-school.teachable.com/You’ll learn how to:* Create a hidden modal* Toggle modal visibility with JavaScript* Send and validate a message input* Close the modal when clicking outside or on a cancel buttonStep 1: Set Up the Basic Project Structure* Create a new folder for your project.* Inside, create:* index.html* style.css (optional if you want custom styles)* script.js* Link TailwindCSS via CDN in your HTML file. Message Modal Step 2: Build the Modal Structure (HTML)Create the modal structure inside the . Initially, the modal should be hidden. Open Message Modal Send a Message Send Cancel Step 3: Handle the Modal with JavaScriptIn script.js, write the logic to open, close, and send messages.// Select Elements const modal = document.getElementById('modal'); const messageButton = document.getElementById('message-button'); const sendButton = document.getElementById('send-button'); const closeButton = document.getElementById('close-button'); const messageInput = document.getElementById('modal-input'); // Toggle Modal Visibility function toggleModal() { modal.classList.toggle('hidden'); } // Open Modal messageButton.addEventListener('click', toggleModal); // Close Modal on Cancel closeButton.addEventListener('click', toggleModal); // Close Modal When Clicking Outside modal.addEventListener('click', function (event) { if (event.target === modal) { toggleModal(); } }); // Send Message sendButton.addEventListener('click', function () { if (messageInput.value.trim() === '') { alert('Please enter a message.'); return; } alert(`Message sent: ${messageInput.value}`); messageInput.value = ''; // Clear input toggleModal(); // Close modal }); Step 4: (Optional) Enable Dark Mode ToggleAdd a dark mode toggle button if you want to enable Tailwind’s dark mode classes dynamically.Final Result* Click the "Open Message Modal" button ➔ Modal opens.* Type a message and click Send ➔ Shows an alert and closes the modal.* Click Cancel or click outside the modal ➔ Closes the modal.Congratulations! 🎉 You now have a fully functioning, stylish message modal!Complete Source Code: https://github.com/NorbertBM/learn-web-development-for-beginners-.git Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
🔧 Getting Started: Setup Tailwind CSS 4.1 Without a Build ToolTo keep things simple, we’ll use Tailwind via the CDN—no frameworks, no build tools. Tailwind 4.1 Demo You can now use all of Tailwind’s new features right in your HTML.🎨 1. Drop Shadow with ColorStandard shadows often fall flat, especially in dark mode. Tailwind 4.1 adds color drop shadows to give your elements more punch.💡 Example: Colorful Drop Shadow To control intensity, use shade values like drop-shadow-red-500, drop-shadow-blue-300, etc.✨ 2. Text Shadows (with Color!)Text shadows bring another layer of depth, especially on headings and banners.💡 Example: Spooky Red Glow You can go from text-shadow-2xs to text-shadow-lg, and add color variants like text-shadow-blue-400.🖼️ 3. Mask Utilities for ImagesYou can now mask images or elements using directional gradients.💡 Example:This creates a soft fade from bottom to top or vice versa. You can tweak directions with classes like mask-top, mask-left, mask-right.⚠️ Mask gradients might look different in dark mode.⚙️ 4. Seamless Dark ModeTailwind 4.1 improves dark mode handling—just use the dark: prefix, no extra configuration needed.💡 Example: Dark Mode Ready ✅ Other Notable Improvements* Text wrapping control via overflow-wrap* Improved browser compatibility* Less need for configuration files* CSS @import now works for simpler integrations📹 Video Description (for YouTube)Tailwind CSS 4.1 is packed with awesome new features—from colored drop shadows and text shadows to masking utilities and dark mode improvements. In this video, we: ✅ Set up Tailwind 4.1 without build tools ✅ Explore drop shadows with color ✅ Try out text shadows (yes, with color!) ✅ Add image masks using mask-gradient ✅ Tweak dark mode designs easily 🙌 ConclusionTailwind CSS 4.1 brings subtle but powerful tools to elevate your designs. Whether you're building a dark mode dashboard or fine-tuning text styling, there's a feature here for you.👉 Which feature are you most excited about? Let me know in the comments or over on YouTube! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
🔧 What is Tailwind CSS?Tailwind is a utility-first CSS framework. Instead of writing custom CSS, you use predefined classes to build your UI quickly.Promotions👇👨🏫Ultimate CSS Frameworks Course Bundle Promo : https://norbert-bm-s-school.teachable.com/p/landingpage 👨🏫Master Tailwind CSS: A Beginner’s Guide to Modern Web Design Course Promo: https://www.udemy.com/course/master-tailwind-css-a-beginners-guide-to-modern-web-design/?couponCode=DAYONE ✅ Why Tailwind?* Fast to build UIs* Responsive by default* No need to name CSS classes* Easy to customize with config filesDescriptionIn this tutorial, you'll learn how to create a modern and responsive profile card using Tailwind CSS. This card will include a profile picture, name, job title, description, and interactive buttons. Additionally, we'll implement a dark mode toggle to enhance the user experience. Follow this step-by-step guide to create a sleek profile card for your portfolio or project.Here's a short project perfect for teaching a Tailwind CSS crash course: a Responsive Profile Card with Dark Mode Toggle.This shows off:* Tailwind’s utility classes* Responsive design* Flexbox* Dark mode supportCustom styles using @apply (optional)🧪 Mini Project: Responsive Profile Card + Dark Mode🔧 Tools UsedTailwind via CDN (for simplicity)Vanilla HTML/JSResponsive layoutDark mode toggle (uses class="dark")💡 What You’ll Learn* Layout with Flex* Utility classes for spacing, colors, borders, and text* Responsive design with md:, lg:* Dark mode using dark: classes* Simple interactivity with JSStep 1: Setup Your Project* Create a new folder for your project.* Inside the folder, create an index.html file.* Add the Tailwind CSS CDN to your project for quick setup.Step 2: HTML StructureOpen index.html and add the following code: Tailwind Profile Card John Doe Frontend Developer Creating modern UIs and delightful user experiences. Follow Message Toggle Dark Mode Step 3: Key Features of the Code* Dark Mode SupportThe dark class is added to the tag to enable dark mode.A button toggles the dark class dynamically using JavaScript.* Responsive DesignThe card is centered using Tailwind's flex, justify-center, and items-center utilities.The card adjusts to different screen sizes with max-w-sm and w-full.* Profile Card StylingThe card has a modern look with rounded corners (rounded-2xl), shadows (shadow-xl), and padding (p-6).The profile picture is styled with rounded-full and a border.* Interactive ButtonsButtons have hover effects for better interactivity using hover:bg-blue-700 and hover:bg-gray-700.Step 4: Customizing the CardReplace the profile picture URL (https://i.pravatar.cc/150?img=12) with your own image.Update the name, job title, and description to match your profile.Modify the button links (href="#") to point to your social media or contact pages.Step 5: Testing the Dark ModeOpen theindex.html file in your browser.Click the "Toggle Dark Mode" button to switch between light and dark themes.Observe how the colors and styles adapt seamlessly.GitHub Repositoryhttps://github.com/NorbertBM/learn-web-development-for-beginners-.gitConclusionCongratulations! You've successfully created a responsive profile card with Tailwind CSS and implemented dark mode support. This card is perfect for showcasing your profile on a personal website or portfolio. Feel free to experiment with Tailwind's utilities to further customize the design.Happy coding! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
Hey everyone! I have two major surprises for you today—this is an exciting moment for me, and I hope you’re just as thrilled!Ultimate CSS Frameworks Course Bundle Promo : https://norbert-bm-s-school.teachable.com/p/landingpage Master Tailwind CSS: A Beginner’s Guide to Modern Web Design Course Promo: https://www.udemy.com/course/master-tailwind-css-a-beginners-guide-to-modern-web-design/?couponCode=DAYONE🎯 Surprise #1: My Tailwind CSS Course is Out Now!The wait is over—my Tailwind CSS course is finally live! 🎉 If you want to master utility-first CSS, learn responsive design, and build real-world projects with Tailwind CSS, this is the perfect course for you.👉 Get the early bird price now (limited-time offer!) in the link below.🎯 Surprise #2: The Ultimate CSS Frameworks Bundle 💥I've been working hard on creating my own platform where I can bundle multiple courses together into one massive learning package. And today, I’m excited to introduce:🔥 The Ultimate CSS Frameworks Bundle📚 65 hours of video content📌 550 lectures💻 25+ real-world projects📝 Full source code includedThis bundle is your all-in-one solution to mastering CSS, web design, and front-end development. Let’s take a look at what’s inside!📌 Course #1: Mastering Visual Studio CodeBefore diving into CSS frameworks, you need a solid development setup. This course will teach you everything about VS Code, including:✅ Customizing the editor✅ Writing code faster with shortcuts & snippets✅ Using Git & GitHub for source control✅ Working with Python, Node.js, React, Vue, Angular, and more✅ Essential extensions and themesStart with this course to boost your coding efficiency and make your workflow smoother.📌 Course #2: HTML & CSS for Beginners to AdvancedIf you're new to web development, this course will take you from absolute beginner to proficient developer. You’ll learn:✅ HTML & CSS basics✅ Responsive web design using Flexbox & Grid✅ Real-world projects and how to deploy them online✅ GitHub & Netlify deploymentBy the end, you'll be able to build and launch your own websites!📌 Course #3: Tailwind CSS – The Latest & GreatestThis is my newest and proudest course, designed to help you master Tailwind CSS. You’ll learn:✅ Setting up Tailwind CSS in your projects✅ Utility classes for styling✅ Responsive design best practices✅ Dark mode & custom configurations✅ Tailwind CSS with JavaScript & ReactPlus, we’ll build reusable components, so you can quickly develop projects faster than ever before!📌 Course #4: Bootstrap 5 – The Fastest UI FrameworkWant to build websites in record time? Then Bootstrap 5 is for you! This course covers:✅ Bootstrap 5 utilities & components✅ Pre-built themes & UI elements✅ Advanced layout techniques (Flexbox, Grid)✅ Using Bootstrap with SaaS for customization✅ Building real-life websitesThis course is perfect for developers who want to create fast, responsive, and professional-looking websites.📌 Course #5: Advanced SaaS – CSS With SuperpowersIf you love CSS and want more control, then SaaS is a game-changer. This course includes:✅ CSS with variables, mixins, loops, and functions✅ Media query management for responsive design✅ CSS animations & reusable components✅ Building your own mini-frameworkThink of SaaS as TypeScript for CSS—it makes everything easier, cleaner, and more powerful!🎁 Why You Should Get This Bundle✔️ Five complete courses in one package✔️ Over 65 hours of expert-led training✔️ Hands-on projects with real-world applications✔️ Lifetime access to all updates✔️ Early bird pricing available now!🔗 Get the Ultimate CSS Frameworks Bundle Today!If you want to support my work, please:✅ Like this post✅ Share with fellow developers✅ Grab the bundle or Tailwind CSS courseHappy coding! 🚀 See you in the courses! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
Learning is a lifelong process, and there's no single "right" way to do it. However, there are some general strategies that can help you learn more effectively:Key Principles of LearningActive Learning:* Don't just passively absorb information. Engage with it. This means:* Asking questions.* Taking notes in your own words.* Summarizing what you've learned.* Modifying the material on your own.Spaced Repetition:* Review material at increasing intervals. This helps to reinforce learning and move information into long-term memory.Interleaving:* Mix up different subjects or topics while you're studying. This can help you to better understand the relationships between different concepts.Retrieval Practice:* Test yourself on the material you're learning. This helps to strengthen your memory and identify areas where you need to focus more.Growth Mindset:* Believe that your intelligence and abilities can be developed through effort and practice. This will help you to stay motivated and persevere through challenges.Practical Strategies:* Set Clear Goals:What do you want to learn? Why do you want to learn it? Having clear goals will help you to stay focused and motivated.* Create a Learning Environment:Find a quiet and comfortable place to study. Minimize distractions.* Use a Variety of Resources:Don't rely on just one source of information. Use textbooks, articles, videos, podcasts, and other resources to get a well-rounded understanding of the topic.* Connect New Information to Existing Knowledge:Try to relate new concepts to things you already know. This will help you to better understand and remember the information.* Take Breaks:Don't try to cram everything in at once. Take regular breaks to avoid burnout. 10-15 minutes every hour is a good rule of thumb.* Get Enough Sleep:Sleep is essential for learning and memory.* Stay Curious:Cultivate a sense of curiosity and a love of learning. This will make the process more enjoyable and rewarding.* Find your Learning Style:Some people learn best by visual methods, others by auditory, and others by kinesthetic methods. try different methods to see which ones work best for you.* Get criticism:Don't be afraid to ask for feedback. This can help you to identify areas where you need to improve and give you a different perspective on your learning.* Accept Failure:Don't be afraid to make mistakes. Failure is a natural part of the learning process. Learn from your mistakes and keep going. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
Project: Responsive Resume WebsiteA single-page personal resume website showcasing:✅ Name, photo, and a short bio✅ Contact information✅ Skills section with progress bars (pure CSS)✅ Work experience & education in a neat layout✅ Downloadable PDF resume button✅ A responsive design that adapts to mobile & desktop📌 Features Included:✅ Fully responsive (mobile-friendly)✅ Sections: Profile, Skills, Experience, Education, Contact✅ Printable/downloadable as a PDF using CSS✅ No JavaScript requiredWhy This Is a Good Tutorial?* Beginner-friendly: Covers structuring with HTML and styling with CSS.* Real-world use case: Viewers can build their own resume website.* Demonstrates responsive design: Teaches Flexbox/Grid for layout.* No JavaScript required: All functionality is handled with HTML & CSS.IntroductionIn this tutorial, we will create a beautiful and responsive resume using HTML and CSS. This resume will include sections for contact information, skills, experience, and education. Additionally, we will add a button to download the resume as a PDF. Follow this step-by-step guide to enhance your web development skills and create a professional resume.Step 1: Setup Your Project* Create a new folder for your project.* This folder will contain all the files related to your resume project.* Inside the folder, create two files: index.html and style.css.* index.html will contain the HTML structure of your resume.* style.css will contain the CSS styles to make your resume look great.Step 2: HTML StructureOpen index.html and add the following basic HTML structure: My Resume John Doe Web Developer | Frontend Enthusiast Contact Info Email: johndoe@example.com Phone: +123 456 7890 Website: www.johndoe.com Skills HTML CSS Responsive Design Experience Web Developer - XYZ Company (2020 - Present) Developed responsive websites and improved UI/UX for clients. Education Bachelor's in Computer Science - ABC University (2015 - 2019) Download PDF Explanation:* DOCTYPE and HTML structure: This sets up the basic HTML document structure.* Meta tags: These tags ensure proper character encoding and responsive behavior.* Title: Sets the title of the document.* Stylesheets: Links to external CSS files for fonts and icons.* Body: Contains the main content of the resume, divided into sections like header, contact info, skills, experience, and education.Step 3: Styling with CSSOpen style.css and add the following CSS code to style your resume:/* General setup */ body { font-family: "Poppins", sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 20px; } /* Resume Section */ .resume { background: white; padding: 30px; max-width: 600px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-radius: 10px; text-align: center; } header img { width: 120px; border-radius: 50%; border: 4px solid #667eea; } h1 { margin: 10px 0 5px; font-size: 24px; color: #333; } /* Contact Section */ h2 { border-bottom: 2px solid #667eea; display: inline-block; padding-bottom: 5px; margin-bottom: 15px; font-size: 20px; color: #333; } p { color: #555; } /* Skills Section */ .skills .bar { height: 10px; background: #e0e0e0; margin: 5px 0; border-radius: 5px; overflow: hidden; } .bar div { height: 100%; transition: width 0.5s ease-in-out; } .html { width: 90%; background: #ff5733; } .css { width: 85%; background: #33a1ff; } .responsive { width: 80%; background: #33ff57; } button { display: block; width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: 20px; transition: 0.3s; } button:hover { background: #5563c1; } /* Print layout */ @media print { button { display: none; } body { background: white; } .resume { box-shadow: none; } } Explanation:* General setup: Sets up the font, background, and layout for the body.* Resume section: Styles the main resume container with padding, shadow, and border radius.* Header: Styles the profile image and main heading.* Contact section: Styles the contact information.* Skills section: Styles the skill bars with different colors and widths.* Button: Styles the download button with hover effects.* Print layout: Hides the button and removes background and shadow for printing.ConclusionBy following these steps, you have created a stunning and responsive resume using HTML and CSS. You can further customize the styles and content to match your personal preferences. This project not only helps you create a professional resume but also enhances your web development skills. Happy coding! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
DescriptionLearn how to create a beautiful and responsive portfolio landing page with a dark mode toggle feature. Follow this step-by-step guide to enhance your web development skills and showcase your projects in style.Step-by-Step Guide1. Setup Your Project* Create a new folder for your project.* Inside the folder, create two files: index.html and style.css.2. HTML Structure* Open index.html and add the basic HTML structure.* Add a navbar, hero section, projects section, and contact section.* Include a button for toggling dark mode. Portfolio My Portfolio 🌙 Hello, I'm Norbert A Passionate Web Developer View Projects My Projects Project 1 Description of project 1. Project 2 Description of project 2. Project 3 Description of project 3. Project 4 Description of project 4. Project 5 Description of project 5. Project 6 Description of project 6. Contact Me Email: yourname@example.com 3. Styling with CSS* Open style.css and add general styles for the body and container.* Style the navbar, hero section, projects section, and contact section.* Add styles for dark mode./* filepath: c:\Users\Norbert\Desktop\Web Dev\youtube-web-dev-2025-repo\ideas\03\16-03-landingpage\regular\style.css */ /* General Styles */ * { margin: 0; padding: 0; scroll-behavior: smooth; box-sizing: border-box; } body { font-family: "Inter", sans-serif; margin: 0; padding: 0; background-color: #f8fafc; color: #1e293b; transition: background-color 0.3s, color 0.3s; } .container { width: 90%; max-width: 1200px; margin: auto; padding: 20px; } /* Navbar */ .navbar { background: #ffffff; padding: 1rem 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-around; align-items: center; border-radius: 8px; position: sticky; top: 0; /* z-index: 1000; */ } .theme-toggle { background: #e2e8f0; border: none; padding: 0.5rem 1rem; cursor: pointer; border-radius: 8px; transition: 0.3s; &:hover { background: #cbd5e1; } } /* Hero Section */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; .container { display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; background: #1e3a8a; color: white; border-radius: 12px; height: 200px; } .highlight { color: #facc15; font-weight: bold; } .btn { display: inline-block; margin-top: 20px; padding: 12px 24px; background: #facc15; color: #1e3a8a; font-weight: bold; text-decoration: none; border-radius: 8px; transition: 0.3s; &:hover { background: #eab308; } } } /* Projects Section */ .projects { padding: 60px 20px; background: #f1f5f9; text-align: center; border-radius: 12px; .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .project-card { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s; &:hover { transform: translateY(-5px); } } } /* Contact Section */ .contact { text-align: center; padding: 50px 20px; } /* Dark Mode */ .dark-mode { background-color: #1e293b; color: #f8fafc; .navbar { background: #334155; } .theme-toggle { background: #475569; color: white; &:hover { background: #64748b; } } .projects { background: #475569; } .project-card { background: #334155; color: white; } } 4. Dark Mode Toggle* In index.html, add a script to toggle dark mode when the button is clicked. 5. Enhancements* Add transitions for smooth color changes.* Use CSS Grid for a responsive projects section.* Add hover effects for buttons and project cards.By following these steps, you'll create a visually appealing portfolio landing page with a modern dark mode feature. This project will not only enhance your web development skills but also provide a professional platform to showcase your work. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
In this tutorial, we will create a simple image carousel using only HTML and CSS. This carousel will automatically cycle through images with a smooth animation effect.HTML StructureFirst, let's set up the basic HTML structure for our carousel. Image Carousel (CSS Only) CSS StylingNext, we will add the CSS to style our carousel and create the animation. Explanation* HTML Structure: We have a container div with the class carousel that holds another div with the class carousel-slide. Inside the carousel-slide div, we have multiple img elements representing the images in the carousel.* CSS Styling:* The body is styled to center the content and set a background gradient.* The .carousel class styles the carousel container, setting its dimensions and overflow properties.* The .carousel-slide class styles the slide container, setting its width to accommodate all images and applying the animation.* The .carousel-slide img class styles the images, ensuring they fit within the carousel.* The @keyframes carousel-animation defines the animation for the carousel, moving the images horizontally.With this setup, you have a simple, CSS-only image carousel that cycles through images automatically. You can adjust the number of images and the animation duration as needed. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
In this tutorial, we will create a responsive and animated navigation bar using HTML and CSS. This navigation bar will be mobile-friendly and will have a hamburger menu that transforms into a close icon when clicked.HTML StructureFirst, let’s look at the HTML structure of our navigation bar. Animated Nav Bar Home About Services Contact Explanation* : This is the container for our navigation bar.* : This checkbox will be used to toggle the visibility of the menu.* : This label acts as a button for the checkbox.* : These divs inside the label create the hamburger icon.* : This unordered list contains the navigation links.CSS StylingNow, let’s style our navigation bar using CSS.body { font-family: Arial, sans-serif; margin: 0; padding: 0; } nav#mobile-menu { background-color: #333; position: relative; } nav#mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; display: none; } nav#mobile-menu ul li { display: block; } nav#mobile-menu ul li a { color: white; text-decoration: none; padding: 15px 20px; display: block; } nav#mobile-menu ul li a:hover { background-color: #555; } .menu-btn { display: block; cursor: pointer; width: 30px; height: 30px; position: absolute; top: 15px; right: 20px; } .menu-btn div { width: 100%; height: 4px; background-color: black; margin: 6px 0; transition: 0.3s; } /* Alternative */ .menu-btn { display: block; cursor: pointer; width: 30px; height: 30px; position: absolute; top: 15px; right: 20px; & div { width: 100%; height: 4px; background-color: white; margin: 6px 0; transition: 0.3s; } } /* ---------------------------------------- */ #menu-toggle { display: none; } #menu-toggle:checked + .menu-btn div:nth-child(1) { transform: rotate(-45deg) translate(-9px, 5px); background-color: white; } #menu-toggle:checked + .menu-btn div:nth-child(2) { opacity: 0; } #menu-toggle:checked + .menu-btn div:nth-child(3) { transform: rotate(45deg) translate(-9px, -5px); background-color: white; } #menu-toggle:checked ~ ul { display: flex; } /* Alternative */ #menu-toggle { display: none; &:checked + .menu-btn div:nth-child(1) { transform: rotate(-45deg) translate(-9px, 5px); } &:checked + .menu-btn div:nth-child(2) { opacity: 0; } &:checked + .menu-btn div:nth-child(3) { transform: rotate(45deg) translate(-9px, -5px); } &:checked ~ ul { display: flex; } } /* ---------------------------------------- */ @media screen and (min-width: 768px) { nav#mobile-menu ul { display: flex; flex-direction: row; justify-content: center; } nav#mobile-menu ul li { display: inline-block; } nav#mobile-menu ul li a { padding: 15px 20px; } .menu-btn { display: none; } } /* Alternative */ @media screen and (min-width: 768px) { nav#mobile-menu ul { display: flex; flex-direction: row; justify-content: center; & li { display: inline-block; & a { padding: 15px 20px; } } } .menu-btn { display: none; } } Explanation* body: Sets the font family, margin, and padding for the entire page.* nav#mobile-menu: Styles the navigation bar container with a background color and relative positioning.* nav#mobile-menu ul: Styles the unordered list inside the navigation bar. It hides the list by default and aligns the items in a column.* nav#mobile-menu ul li: Styles the list items to be displayed as blocks.* nav#mobile-menu ul li a: Styles the links inside the list items with color, padding, and display properties.* nav#mobile-menu ul li a:hover: Changes the background color of the links when hovered.* .menu-btn: Styles the hamburger menu button with dimensions, cursor, and positioning.* .menu-btn div: Styles the individual bars of the hamburger menu with dimensions, background color, margin, and transition.* #menu-toggle: Hides the checkbox input.* #menu-toggle:checked + .menu-btn div:nth-child(1): Rotates and changes the color of the first bar when the checkbox is checked.* #menu-toggle:checked + .menu-btn div:nth-child(2): Hides the second bar when the checkbox is checked.* #menu-toggle:checked + .menu-btn div:nth-child(3): Rotates and changes the color of the third bar when the checkbox is checked.* #menu-toggle:checked ~ ul: Displays the menu when the checkbox is checked.* @media screen and (min-width: 768px): Media query to style the navigation bar for larger screens. It displays the menu items in a row and hides the hamburger menu button.ConclusionWith this HTML and CSS code, you have created a responsive and animated navigation bar. The hamburger menu transforms into a close icon when clicked, and the menu items are displayed in a column on smaller screens and in a row on larger screens. Feel free to customize the styles to match your website’s design. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
Unlock the secrets of CSS and elevate your web development skills with our Ultimate CSS Crash Course. From basics to advanced techniques, learn how to style your web pages effectively in this comprehensive guide.------------------------------------------------------------------------------------------------- 🕐 Timestamps: 00:00 - Intro & Project overview 01:10 - What will you learn in this crash course 02:03 - What is CSS 02:58 - How to add CSS to HTML 04:01 - How to create a HTML file 04:58 - What is the Style property in HTML 05:42 - How to write CSS in HTML 06:59 - How to create a CSS file 07:26 - How to link CSS files to HTML 08:13 - How to style HTML tags 09:59 - How to create comments in CSS 10:35 - Ho to style Classes in CSS 12:59 - How to style html ID in CSS 14:13 - Most Important properties in CSS 14:34 - How use colors in CSS 16:00 - How to style background colors in CSS 16:17 - How to style the font size in CSS 17:35 - How to style the font family in CSS 18:02 - How to style the Width and Hight in CSS 19:06 - How to style margin in CSS 21:16 - How to style borders in CSS 22:01 - How to style padding in CSS 22:56 - What is the Box model in CSS 25:03 - Excessing with CSS 6:50 - How to style link tags in CSS 28:12 - What are Pseudo classes in CSS 28:46 - What are Pseudo elements in CSS 30:35 - How to select element within element in CSS 31:22 - What is Specificity in CSS 34:03 - What is Flexbox in CSS 34:42 - How to use Flexbox in CSS 36:03 - How to display flex direction column and row in CSS 36:53 - How to add gap in flexbox CSS 37:45 - What is the grid system in CSS 38:16 - How to display grid in CSS 39:06 - What is inheritances in CSS 39:47 - How to use grid template columns in CSSWelcome to the Ultimate CSS Crash Course! In this comprehensive guide, we'll cover everything you need to know to get started with CSS (Cascading Style Sheets). Whether you're a complete beginner or looking to refresh your skills, this guide is for you. Follow along as we dive into the core concepts, syntax, and best practices of CSS to style your web pages effectively.Step 1: Setting Up Your ProjectBefore we begin, ensure you have a project folder set up on your desktop. Within this folder, create two subfolders: html_crash_course and css_crash_course. Open Visual Studio Code (VS Code) and drag your project folder into it. Create an index.html file within the css_crash_course folder.Step 2: Understanding CSS BasicsCSS stands for Cascading Style Sheets. It controls the visual presentation of HTML content. Think of HTML as the structure of a web page, while CSS is the paint and decorations that make it come alive.Step 3: Adding Inline CSSIn your index.html file, add an tag with the content "CSS Crash Course." Use inline CSS to style it. For example:htmlCSS Crash Course This will set the color to red and the font size to 50 pixels.Step 4: External CSS StylesheetInstead of using inline CSS, we recommend using an external stylesheet for better organization. Create a new file called style.css in the css_crash_course folder. Link this CSS file to your HTML file by adding the following line in the section:html Step 5: Writing CSS in the External StylesheetIn your style.css file, you can now define styles for your HTML elements. For example:cssh1 { color: blue; font-size: 50px; } Step 6: CSS Selectors and PropertiesCSS selectors help you target specific HTML elements. You can use element selectors, class selectors, and ID selectors. For example:css/* Element selector */ h1 { color: blue; } /* Class selector */ .highlight { background-color: yellow; border: 2px solid orange; } /* ID selector */ #main-content { width: 80%; } Step 7: The Box ModelUnderstanding the box model is crucial for controlling the layout of your web page. The box model consists of content, padding, border, and margin. For example:css#box { width: 300px; height: 300px; padding: 20px; border: 5px solid gray; margin: 10px; } Step 8: Flexbox and Grid LayoutsFlexbox and Grid are powerful layout systems in CSS. Flexbox helps you create flexible layouts, while Grid allows you to design complex grid-based layouts.Flexbox Example:css.container { display: flex; flex-direction: row; gap: 10px; } Grid Example:css.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } Step 9: Adding Pseudo-classes and Pseudo-elementsPseudo-classes and pseudo-elements allow you to style elements based on their state or position. For example:css/* Pseudo-class */ a:hover { color: #666; text-decoration: underline; } /* Pseudo-element */ a::after { content: " (visited)"; font-size: small; } ConclusionCongratulations! You've completed the Ultimate CSS Crash Course. By following these steps, you now have a solid understanding of CSS and how to style your web pages effectively. Keep practicing and exploring more advanced CSS concepts to become a proficient web developer.Happy coding,Norbert B.M Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
HTML Crash CourseIntroductionHTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using markup. HTML elements are the building blocks of HTML pages.Step 1: Basic Structure of an HTML Document* Open your text editor (e.g., Visual Studio Code).* Create a new file and save it as index.html.* Add the following basic structure to your HTML document: HTML Crash Course Welcome to HTML Crash Course : This declaration defines the document type and version of HTML. It ensures the browser knows to render the page in standards mode.: This is the root element of an HTML document. The lang="en" attribute specifies the language of the document as English.: This element contains meta-information about the HTML document, such as its title and character set.: This meta tag specifies the character encoding for the HTML document, ensuring that it can display a wide range of characters correctly.: This meta tag ensures the webpage is responsive by setting the viewport to match the device's width and initial zoom level.HTML Crash Course: This element sets the title of the HTML document, which is displayed in the browser's title bar or tab.: This element contains the content of the HTML document that is visible to the user.Welcome to HTML Crash Course: This is a heading element that displays a level 1 heading with the text "Welcome to HTML Crash Course".Each of these elements plays a crucial role in structuring and presenting the HTML document correctly.Step 2: Adding Content to the HTML DocumentNow that you have set up the basic structure of the HTML document, you can start adding content to it. Here are some common HTML elements for adding text, images, links, and lists:* Text: Use the element to add paragraphs of text.This is a paragraph of text.* Images: Use the element to add images to your document.* Links: Use the element to create hyperlinks.Visit Example Website* Lists: Use the (unordered list) and (list item) elements to create bulleted lists. Item 1 Item 2 Item 3 * div: Use the element to group and style content. This is a div element with styled content. By combining these elements, you can create rich and interactive web pages with HTML.Step 3: Styling Your HTML DocumentTo style your HTML document, you can use CSS (Cascading Style Sheets) to control the appearance and layout of your content. Here's an example of how you can add CSS to your HTML document:* Create a new file and save it as styles.css.* Add the following CSS code to style your HTML document:* body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; } h1 { color: #007bff; } p { font-size: 16px; } img { max-width: 100%; height: auto; } a { color: #007bff; text-decoration: none; } ul { list-style-type: disc; } div { border: 1px solid #ccc; border-radius: 5px; padding: 10px; }* Link the CSS file to your HTML document by adding the following line inside the element:By linking the CSS file to your HTML document, you can apply styles to elements such as the body, headings, paragraphs, images, links, lists, and divs. This allows you to customize the appearance of your web page to create a visually appealing design.Step 4: id, class and AttributesHTML elements can have attributes that provide additional information about the element. Here are some common attributes you can use:* id: The id attribute uniquely identifies an element on the page.Section 1 #section1 { color: red; } document.getElementById("section1").innerHTML = "Updated Section 1";* class: The class attribute assigns one or more classes to an element, allowing you to style multiple elements with the same class.This paragraph is highlighted. .highlighted { background-color: yellow; } var elements = document.getElementsByClassName("highlighted"); for (var i = 0; i < elements.length; i++) { elements[i].style.color = "blue"; }* style: The style attribute allows you to add inline CSS styles to an element.This paragraph is red.* src: The src attribute specifies the URL of an external resource, such as an image or script. * alt: The alt attribute provides alternative text for images, which is displayed if the image cannot be loaded.By using these attributes, you can enhance the functionality and appearance of your HTML elements, making your web pages more interactive and accessible.Step 5: Additional HTML FeaturesHTML offers a wide range of features and elements to enhance the functionality and interactivity of your web pages. Here are some additional HTML features you can explore:* Forms: Use the element to create interactive forms for user input. Name: Submit * Tables: Use the , , , and elements to create structured data tables. Name Age John Doe 30 Jane Smith 25 * Semantic Elements: Use semantic elements like , , , , , and to provide meaning and structure to your content. Website Header Home About Contact Article Title Article content goes here. © 2025 Website Footer header { background-color: #333; color: white; padding: 10px 0; text-align: center; } nav { background-color: #444; overflow: hidden; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { float: left; } nav ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:hover { background-color: #555; } article { padding: 20px; background-color: #f9f9f9; margin: 20px 0; } footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; }ConclusionCongratulations! You have completed a basic HTML crash course, covering the essential elements and steps to create a simple web page. By mastering HTML, you can build and design websites with structured content and styling. Keep practicing and exploring more advanced HTML features to enhance your web development skills. Happy coding! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
Visual Studio Code, or VS Code, is a powerful and versatile code editor that can revolutionize the way you write and manage your code. Whether you're a beginner diving into web development or an experienced coder, VS Code offers tools and extensions to supercharge your productivity.In this comprehensive guide, we’ll walk you through the basics of setting up VS Code, understanding its interface, and leveraging its key features.👨💻 What You’ll Learn:* How to download and install VS Code* A complete walkthrough of the interface* Setting up your coding environment* Installing and using essential extensions* Using Git and version control------------------------------------------------------------------------------------------------- 🕐 Timestamps: 00:08 - What is Visual Studio Code00:42 - Download and Install Visual Studio Code 01:27 - Interface Overview of Visual Studio Code 01:51 - What is the Activity Bar 02:08 - What is the Sidebar 02:22 - The editing area 02:56 - How to open the command pallet 03:17 - How to open files and folders in Visual Studio Code 03:54 - How to create new files and folders in Visual Studio Code 04:43 - How to install Extensions in Visual Studio Code 06:30 - How to install and run Live Server to Visual Studio Code 09:37 - How to setup Visual Studio Code 10:46 - How to set autosave in visual studio code 11:32 - How to increase editor font size in visual studio code 12:19 - How intalicense works in visual studio code 13:06 - How to use comments in Visual Studio Code 13:55 - How to switch between tabs in Visual Studio Code 14:22 - How to open the terminal in visual studio code 15:19 - How to use search in Visual Studio Code 16:16 - How to use Source control Git and GitHub in VS Code 17:37 - How to change Themes in Visual Studio Code 18:37 - How to use Keyboard shortcuts in Visual Studio Code 19:04 - Productivity tips for Visual Studio Code 20:21 - How to open and arrange multiple tabs in Visual Studio Code 20:54 - Outro🔗 Resources:* Download VS Code: https://code.visualstudio.com* Prettier Extension: Prettier* Live Server Extension: Live ServerHit the Like button if this helped you, and don’t forget to Subscribe for more tutorials!In this comprehensive guide, we’ll walk you through the basics of setting up VS Code. You will understand its interface. We will also show you how to leverage its key features.Step 1: Download and Install Visual Studio Code* Head over to the official VS Code website.* Click the download button for your operating system (Windows, macOS, or Linux).* Follow the straightforward installation process and open VS Code once installed.Step 2: Explore the InterfaceHere’s what you’ll see when you open VS Code:* Activity Bar (Left): Features like Explore, Search, Source Control, Debugging, and Extensions.* Sidebar: Displays project folders and files.* Editor Area (Middle): Where you’ll write and edit your code.* Status Bar (Bottom): Shows key project information like active programming language and servers.* Command Palette: Accessed with Ctrl+Shift+P (or Cmd+Shift+P on macOS), this lets you perform quick actions.Step 3: Setting Up Your Workspace* Create a project folder on your desktop (e.g., "Code").* Open this folder in VS Code using File > Open Folder or drag it into the editor.* Inside this folder, create the files you need:* index.html (HTML file)* style.css (CSS file)* script.js (JavaScript file)Step 4: Install Must-Have ExtensionsVS Code’s real power lies in its extensions. Two essential ones for web development are:* Prettier: Automatically formats your code for better readability.* Live Server: Runs a local development server and refreshes the browser automatically when you save changes.To install these:* Click the Extensions icon in the Activity Bar.* Search for "Prettier" and "Live Server."* Click Install for each.Step 5: Writing Your First CodeOpen index.html and write this basic structure:htmlCopyEdit My First Web Page Hello, World! Right-click on the file and choose Open with Live Server to see your webpage in action. Now, every time you make changes and save the file, the browser will auto-refresh.Step 6: Key Features of VS Code* Command Palette: Use Ctrl+Shift+P (or Cmd+Shift+P) to access commands like changing settings or running tasks.* Integrated Terminal: Open the terminal with Ctrl+ (or Cmd+). Use it for running commands like npm install.* Split Editor: Work on multiple files side-by-side by dragging tabs or using Ctrl+\.Step 7: Customizing Your Setup* Themes: Change the editor’s appearance by going to File > Preferences > Color Theme.* Keyboard Shortcuts: Customize shortcuts under File > Preferences > Keyboard Shortcuts.* Autosave: Enable autosave in File > Preferences > Settings > Autosave.Step 8: Mastering Git IntegrationVS Code has built-in Git support for version control.* Go to the Source Control tab.* Initialize a Git repository for your project.* Connect to GitHub to share or back up your code.If you're unfamiliar with Git or GitHub, check out our GitHub Crash Course.ConclusionBy now, you should have a solid understanding of Visual Studio Code's interface, setup, and essential features. Keep practicing and exploring to make VS Code your ultimate coding companion.Remember: The more you use it, the more you’ll uncover its hidden gems! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
Dive into web development in 2025 with my step-by-step guide. Learn how to set up your tools, master HTML, CSS, JavaScript, and explore essential frameworks like React and Tailwind CSS. Watch it on YouTube------------------------------------------------------------------------------------------------- Read Blog Post: https://menyhartmedia.com/2025/01/13/a-beginners-guide-to-getting-started-with-web-development-in-2025/ ------------------------------------------------------------------------------------------------- ALL Course: https://menyhartmedia.com/web-dev-courses/ 👇 My Website / Courses / 🔗 Source codes/Podcast / Tutorials / Projects / Blog: 👨🏫 : https://menyhartmedia.com/ ------------------------------------------------------------------------------------------------- 🕐 Timestamps: 00:00 - Intro 00:10 - Install Node.js 00:16 - Install Code Editor 00:28 - Setup Code Editor 00:32 - Learn Web Dev Basics 00:43 - Learn Beck-end Development 01:00 - Learn Version Control 01:10 - Learn Responsive design 01:18 - Learn CSS Frameworks 01:23 - Learn JavaScript Frameworks 01:32 - Build Simple Projects 01:54 - Learn AI for Web Development 02:01 - Learn to publish your website 02:11 - Buy a Domain 02:19 - Outro ------------------------------------------------------------------------------------------------- Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe