Creating a CSS-Only Image Carousel

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. body { display: flex; justify-content: center; align-items: center; margin: auto; height: 100vh; background: rgb(2, 8, 91); background: radial-gradient( circle, rgb(6, 14, 124) 0%, rgba(0, 0, 0, 1) 100% ); } .carousel { width: 100%; height: 50vh; overflow: hidden; position: relative; border-radius: 5px; } .carousel-slide { display: flex; width: 300%; /* Adjust based on the number of images */ animation: carousel-animation 15s infinite alternate; /* Adjust duration as needed */ } .carousel-slide img { width: calc(100% / 3); /* Adjust based on the number of images */ height: 100%; object-fit: cover; } @keyframes carousel-animation { /* Adjust based on the number of images */ /* 3 image animation */ 0% { transform: translateX(0); } 33.33% { transform: translateX(0); } 66.66% { transform: translateX(-33.33%); } 100% { transform: translateX(-66.66%); } } 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 * 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

State of JavaScript 2024: Comprehensive Survey ResultsThe State of JavaScript 2024 Survey offers valuable insights into the JavaScript ecosystem, from developer demographics to salary trends, framework preferences, and emerging technologies. In this post, we’ll analyze the key takeaways, helping you stay ahead in this dynamic field.1. Demographics and Salaries: Who Took the Survey?Participation by Region* United States: 1,596 respondents.* Germany: 875 respondents.* France, Spain, UK, Poland: Significant representation.* India’s participation (257 respondents) remains surprisingly low, given its large developer community.Average Salaries by Country* United States: $125,000–$200,000.* Germany and Poland: Both average around $70,000, though Poland offers lower living costs.* Australia, Sweden, and Ireland: Competitive salaries at $125,000.Diagram Idea: A bar chart comparing average salaries by country.Experience vs. Income* 50-59 Age Bracket: Highest median salary at $119,000.* Developers aged 20-29 typically earn $38,000, reflecting entry-level roles.2. Years of Experience: Impact on Careers* Most respondents have 5-9 years of experience (31%).* Interestingly, those with 25-29 years earn more than those with 30+ years, likely reflecting evolving skills demand.Insight: Staying updated with modern frameworks and tools is crucial for career longevity.3. Framework Preferences: Winners and LosersFront-End Frameworks* React: Dominates with the highest positive sentiment and adoption rate.* Vue.js: Strong runner-up with growing appeal.* Angular: Declining popularity, though it remains significant in specific regions like Germany.* Svelte: Emerging as a promising alternative.Diagram Idea: A pie chart of framework popularity percentages.Meta Frameworks* Next.js: The preferred choice for full-stack applications.* Vite: Gains traction as a fast and flexible bundler, often paired with frameworks like React and Vue.4. Back-End and Serverless TrendsBack-End Frameworks* Express: Leading for Node.js applications.* NestJS: Rising for structured, scalable apps.Serverless Runtimes* AWS Lambda: The clear leader at 28%, followed by Vercel and Cloudflare.5. AI and Development ToolsAI Tools* ChatGPT: The most used AI assistant for coding and debugging.* GitHub Copilot: Close second, integrated into popular IDEs like Visual Studio Code.Future Prediction:* Google Gemini is expected to surpass current leaders by the end of 2025, given its advanced capabilities.Diagram Idea: A timeline predicting AI tools’ market share shifts by 2025.6. Hosting and Bundling* AWS and Vercel: Top hosting platforms.* GitHub Pages and Netlify: Ideal for small-to-medium projects.Bundlers and Libraries* Vite and Webpack: Popular choices for faster development cycles.* Lodash and Day.js: Leading utility libraries for code optimization.7. Career Paths: Education, Job Titles, and SalariesEducation* 24% of respondents had no formal degree, earning comparable salaries to those with degrees over time.* Takeaway: Practical skills and experience outweigh formal education in many cases.Job Titles and Salaries* Top Earners: Directors of Engineering and Senior Software Engineers, earning $125,000+.* Front-End Developers: Entry-level salaries around $50,000 but can reach $125,000+ with experience.8. Resources and Learning Platforms* Top Learning Platforms:* Udemy: Popular for beginner courses.* Frontend Masters and Wes Bos Courses: Ideal for advanced learners.* Podcasts: Syntax.fm remains a favorite among developers.Tip: For beginners, focus on foundational courses before diving into advanced topics like TypeScript.Conclusion: What Lies Ahead for JavaScript?JavaScript continues to evolve as a versatile, developer-friendly language. The 2024 survey highlights:* The growing importance of React, Vite, and serverless technologies.* Competitive salaries across regions, with career growth tied to staying updated with tools and frameworks.* AI tools are becoming integral to the developer workflow, with promising advancements on the horizon.Key Takeaway:Invest in foundational JavaScript knowledge, stay adaptable, and leverage the latest tools to excel in your career.What are your thoughts on these trends?Share your opinions in the comments below, and subscribe to stay updated with the latest insights in web development.Norbert B.M. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Dive into the latest front-end development trends for 2024, including popular frameworks, tools, and technologies shaping the future. Explore key developer preferences, accessibility insights, and the role of AI in front-end workflows. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Step-by-Step Guide to Installing Next.js and Setting Up Tailwind CSS in Visual Studio CodeIn this guide, I'll walk you through the process of setting up a Next.js project and integrating Tailwind CSS for styling, all within Visual Studio Code. By the end, you’ll have a fully functional Next.js app styled with Tailwind CSS!Prerequisites* Node.js: Make sure Node.js is installed on your computer. Next.js requires version 18 or higher.* Visual Studio Code: Open your project here, as it provides a consistent terminal experience across Windows and Mac.Step 1: Check Node.js Installation* Open Terminal in Visual Studio Code:* Go to the top menu and select Terminal > New Terminal.* Or use the shortcut Ctrl + ~ (tilde) to open the terminal.* Verify Node.js Installation:* Run the following command to check your Node.js version:node -v* Copy codenode -v* If you don’t have Node.js installed, download it from Node.js, choosing the LTS version. Follow the installation prompts.* Verify NPM Installation:* Node.js installation automatically includes npm. Confirm its version with:npm -v* Copy codenpm -vStep 2: Create a Project Folder* On your desktop or a location of your choice, create a folder named projects (or any preferred name).* Inside, create another folder for your Next.js app. For this example, we’ll name it my-next-app.* Drag and drop this folder into Visual Studio Code to open it.Step 3: Install Next.js* Run the Next.js Installation Command:* In the terminal, use npx to install Next.js:npx create-next-app@latest my-next-app* Copy codenpx create-next-app@latest my-next-app* Here’s a breakdown of the installation prompts:* Project Name: Enter my-next-app or another name. Avoid uppercase letters or starting with a number.* TypeScript: Choose No (or Yes if you want TypeScript).* ESLint: Choose No (or Yes if you need linting).* Tailwind CSS: Select Yes to automatically install and configure Tailwind.* Source Directory: Select Yes to store your code in a src directory.* App Router: Choose Yes to enable routing (like React Router).* Turbo Pack: Choose No.* Custom Imports: Select No.* Navigate to Your Project Directory:* Once the setup completes, move into the newly created project directory:cd my-next-app* Copy codecd my-next-appStep 4: Start the Development Server* In the terminal, run the following command to start your Next.js app in development mode:npm run dev* Copy codenpm run dev* After a few seconds, your app will be live at http://localhost:3000* .* Hold Ctrl and click the link in the terminal to open it.* Alternatively, open a browser and go to http://localhost:3000Step 5: Verify Tailwind CSS Setup* Open any page file, like src/pages/index.js.* In the classes, you’ll notice Tailwind’s utility classes ready for styling. With Tailwind installed, you can now apply utility-first CSS classes directly in your JSX.Wrap UpThat’s it! You now have a Next.js app with Tailwind CSS configured. Tailwind’s powerful styling makes it easy to quickly build and customize UIs.Thank you for following along. Happy coding! Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode of the podcast, we discussed some of the new CSS features that you need to know about. These features can help you create more powerful and flexible designs for your web pages. By using container queries, new viewport units, CSS nesting, individual transform properties, and other new features, you can take your CSS skills to the next level. So, start experimenting with these new features and see how they can enhance your web designs.Course and Projects:https://volerelife.wordpress.com/web-development/web-dev-courses/YouTube Video: https://youtu.be/bEMwn0Pu4lw/Blog Post:https://volerelife.wordpress.com/2024/04/17/top-10-css-features-you-need-to-know/00:00 - Start00:13 - CSS Container Queries00:44 - CSS New Viewport Units01:34 - CSS Nesting02:26 - CSS Individual Transform Properties03:07 - CSS Inset Property03:57 - Accent-color Property in CSS04:22 - CSS Gap Property for Flexbox05:00 - CSS Logical Properties (Inline and Block)05:39 - CSS nth-of syntax06:03 - CSS Selector :has()#webdevelopment #cssnews Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe