🔧 Getting Started: Setup Tailwind CSS 4.1 Without a Build Tool

To 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 Color

Standard 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 Images

You 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 Mode

Tailwind 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

🙌 Conclusion

Tailwind 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 files

Description

In 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 support

Custom styles using @apply (optional)

🧪 Mini Project: Responsive Profile Card + Dark Mode

🔧 Tools Used

Tailwind via CDN (for simplicity)

Vanilla HTML/JS

Responsive layout

Dark 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 JS

Step 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 Structure

Open 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 Card

Replace 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 Mode

Open 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 Repository

https://github.com/NorbertBM/learn-web-development-for-beginners-.git

Conclusion

Congratulations! 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

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 Code

00: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 1

3: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 Server

Hit 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 Interface

Here’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 Extensions

VS 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 Code

Open 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 Integration

VS 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.

Conclusion

By 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 Results

The 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 Losers

Front-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 Trends

Back-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 Tools

AI 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 Salaries

Education

* 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 Code

In 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 code

node -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 code

npm -v

Step 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 code

npx 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 code

cd my-next-app

Step 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 code

npm 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:3000

Step 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 Up

That’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 - Start
00:13 - CSS Container Queries
00:44 - CSS New Viewport Units
01:34 - CSS Nesting
02:26 - CSS Individual Transform Properties
03:07 - CSS Inset Property
03:57 - Accent-color Property in CSS
04:22 - CSS Gap Property for Flexbox
05:00 - CSS Logical Properties (Inline and Block)
05:39 - CSS nth-of syntax
06:03 - CSS Selector :has()

#webdevelopment #cssnews

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode of the podcast we will discuss some best practices for backend development. These tips will help you write better code and build more efficient applications.

Watch on YouTube:

https://youtu.be/ELt8WLIaaUk

Listen on Spotify:Read Blog Post:00:00 - Start
00:15 - Separations of concenrns in backend development
01:04 - Layered architecture in backend development
01:21 - Microservices in backend dev
01:36 - Middleware
02:02 - Modular programming in backend development
02:21 - Error handling in backend development
03:13 - Exception Handling in Backend Development
03:30 - Error Logging in Backend development
03:48 - HTTP Status Codes
04:22 - Retry policies
04:53 - Error propagation in backend development
05:28 - Testing and Documentation in Backend development
06:12 - Unit Testing in backend development
06:25 - Integration Testing in backend development
06:47 - End-to-End Testing
07:00 - Performance testing
07:14 - Documentation in backend development
08:32 - Recap

#backendwebdevelopment #learnbackenddevelopment

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Devin AI is a new AI created by the company Cognition, and they claim they have created the first AI software engineer. witch can basically write code for you.

Watch on YouTube:

https://youtu.be/uO4yr5osZ2I

Blog Post:
https://volerelife.wordpress.com/2024/04/03/devin-ai-vs-web-developers/

Devin AI Website:
https://www.cognition-labs.com/introducing-devin

00:00 - Start
00:57 - What is Devin AI
05:32 - Will Devin AI replace coding

#devinai #webdevelopment #aicoding

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

First look at React V19 and the react compiler that will bring one of the biggest changes to the React ecosystem and the way we will write react code in the future.

My Courses:
https://volerelife.wordpress.com/web-development/web-dev-courses/

YouTube:

https://youtu.be/WAoDkO9Fcps

Blog:
https://volerelife.wordpress.com/2024/03/17/new-react-v19-update-reactjs-compiler-wcq-41/(opens in a new tab)

00:00 - Start
00:31 - What is React Compiler
01:25 - What dose the react compiler do
02:39 - What are React Actions
03:17 - What is React useFormStatus hook
03:49 - What is React useFormState hook

#ReactUpdate #reactcompilor

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Welcome to the February 2024 release of Visual Studio Code. There are 3 important updates for web developers in this version that we hope you'll like, include:

Voice dictation in editor - Use your voice to dictate directly in the editor.
Multi-cursor inline suggestions - Review and accept inline suggestions for multiple cursors.
Multi-language support for speech - Multiple languages supported for speech recognition.

00:00 - Start
00:35 - Visual Studio Code - Voice dictation in editor
01:47 - Visual Studio Code - Multi-language support for speech
04:20 - Visual Studio Code Multi-cursor inline suggestions

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 included

This 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 Code

Before 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 themes

Start with this course to boost your coding efficiency and make your workflow smoother.

📌 Course #2: HTML & CSS for Beginners to Advanced

If 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 deployment

By the end, you'll be able to build and launch your own websites!

📌 Course #3: Tailwind CSS – The Latest & Greatest

This 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 & React

Plus, we’ll build reusable components, so you can quickly develop projects faster than ever before!

📌 Course #4: Bootstrap 5 – The Fastest UI Framework

Want 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 websites

This course is perfect for developers who want to create fast, responsive, and professional-looking websites.

📌 Course #5: Advanced SaaS – CSS With Superpowers

If 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-framework

Think 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 course

Happy coding! 🚀 See you in the courses!

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this video we are going to go though the laster update or the visual studio code February 2024 code editor.

Blog Post: https://volerelife.wordpress.com/?p=6775

YouTube: https://youtu.be/rjz6J3jdZHU

Courses: https://volerelife.wordpress.com/web-development/web-dev-courses/

00:00 - Start
00:21 - Overview
00:51 - Per-window zoom levels
02:48 - Hey Code voice command
04:53 - Multi-file diff editor
07:23 - Triggered breakpoints
08:14 - Expanded Sticky Scroll support
10:07 - Markdown paste options
11:23 - Flexible Auto Save options
12:19 - Source Control input
12:54 - Extension notifications
14:41 - GitHub Copilot updates

#vscodeupdates #codeeditor

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Explore the latest JavaScript array methods for 2024! In this video, we dive into 4 powerful array methods introduced in the current year. Stay updated with WCQ 38 as we unravel these cutting-edge techniques to enhance your JavaScript programming skills.

Source CODE:https://volerelife.wordpress.com/?p=6775
Courses: https://volerelife.wordpress.com/web-development/web-dev-courses/

00:00 - Start
00:59 - 4 New JavaScript Array Method
03:18 - Olde JavaScript Sort Array Method
04:04 - JavaScript toSorted array method
04:39 - JavaScript toRevesed array method
05:19 - JavaScript toRSpliced array method
05:41 - JavaScript with array method#learnjavascript #jsarraymethods

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Explore the intricate differences between CSS frameworks and custom CSS in web development.


00:00 - Start
00:48 - CSS Frameworks are Pre-built Styles
04:14 - CSS Frameworks are Consistency
05:31 - CSS Frameworks have responsive desing build in
06:33 - Complete Bootstrap Course for Beginners
07:05 - Custom CSS
08:18 - Custom CSS Tailored to Your Needs
08:48 - CSS Flexibility
09:31 - CSS Optimization
09:42 - CSS Learning Experience
10:37 - Complete CSS and SASS Course
12:08 - Coool board game design using custom CSS

Courses:
Complete Bootstrap Course for Beginners:
https://www.udemy.com/course/complete-bootstrap-5-for-beginners-with-real-world-projects/?referralCode=2B064D68400C6AAA1989

Master Responsive Web Design CSS Grid, Flexbox & Animations:
https://www.udemy.com/course/master-responsive-web-design-css-grind-flexbox-animations/?referralCode=C9376D9C317CA2A61693

Advanced CSS & SASS: Framework, Flexbox, Grid, Animations:
https://www.udemy.com/course/advanced-css-sass-framework-flexbox-grid-animations/?referralCode=B19166E470E54882DE44
Blog and Websitehttps://volerelife.wordpress.com/2024/02/19/css-frameworks-vs-custom-css/

#webdevelopment #css3

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Learn the top 10 GitHub best practices for effective repository management! Whether you're a beginner or an experienced developer, implementing these practices can streamline your workflow, enhance collaboration, and optimize your projects on GitHub. From organizing your repositories to leveraging branching strategies, this video covers essential tips to help you maintain clean, efficient, and well-managed repositories on GitHub. Watch now and take your GitHub skills to the next level!
Complet Git and GitHub Course: https://www.udemy.com/course/essential-git-github-project-management-version-control/?referralCode=5683CEA64296F0A95290
All Courses:https://volerelife.wordpress.com/web-development/web-dev-courses/
00:00 - Start
00:43 - Clear GitHub Repository structure
01:29 - Create Meaningful GitHub Repository README.md files
02:34 - Consistent coding style in GitHub Repositories
03:31 - GitHub repository version control best practices
04:24 - Issue and pull request management
04:53 - Continuous integration and deployment
05:32 - GitHub Repository Documentation
06:59 - License management for GitHub Repositories
07:26 - Security best practices for GitHub Repositories
08:10 - Community engagement

#github #tips

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Welcome to our latest video where we're diving deep into the world of web development productivity! In this fast-paced industry, staying efficient is key to success. Whether you're a seasoned developer or just starting out, these 10 productivity tips will help you streamline your workflow, maximize your output, and stay ahead in 2024 and beyond.

In this video, we'll cover essential strategies and tools that every web developer should know to boost productivity and effectiveness. From time management techniques to optimizing your development environment, we've got you covered.

🕐 Timestamps:
00:00 - Intro & Project overview
00:19 - Set clear goals
00:47 - Use version control
01:20 - learn keyboard shortcuts
02:00 - Automate repetitive task
02:39 - Embrace modular coding
03:31 - Keeo code DRY
04:28 - Utilize integrated development env IDE
05:19 - Stay updated on tools and libraries
05:43 - Practice regular breaks
06:39 - Utilize online resources and communities

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode, we explore the question of whether CSS is making Sass obsolete in front-end web development. We examine the advantages and disadvantages of both CSS and Sass and provide insights on which option may be best for your project.

👇 My Website / Courses / Podcast / Tutorials / Projects / Blog: 👨‍🏫 :
https://norbertbm.com/web-development/web-dev-courses/

Complete Article:

https://norbertbm.com/is-css-making-sass-obsolete-a-look-at-the-pros-and-cons/

-------------------------------------------------------------------------------------------------
Timestamps:
00:00 - Intro & Project overview
00:41 - Variable in CSS vs Sass / Scss
01:37 - Nesting in CSS vs Sass / Scss
02:49 - Mixins, Extends, functions in CSS vs Sass / Scss
03:38 - Importing in CSS vs Sass / Scss
04:40 - Is CSS better then SASS ?

-------------------------------------------------------------------------------------------------
Sponsors:
-------------------------------------------------------------------------------------------------

#CSSvsSass #LearnCSS #norbertbmwebdevelopment

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode of the podcast I will analyze the new Amazon CodeWhisperer and GitHub Copilot X
What are the pros and cos, how to install it, price, and more.


👇 My Website / Courses / Podcast / Tutorials / Projects / Blog: 👨‍🏫 :
https://norbertbm.com/web-development/web-dev-courses/
-------------------------------------------------------------------------------------------------

Useful Links:

https://aws.amazon.com/codewhisperer/https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscodehttps://plugins.jetbrains.com/plugin/11349-aws-toolkit
-------------------------------------------------------------------------------------------------

Timestamps:
00:00 - Intro & Project overview
01:00 - How to install and Use Amazon CodeWhisperer
03:00 - What is GitHub Copilot X

-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------

#GitHubCopilot #AmazonCodeWhisperer #AI

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Learn how to earn money with OpenAI's ChatGPT analysis with these top 10 tips and strategies. ChatGPT is a cutting-edge AI technology that can be used for various applications, including business and finance. In this video, we will explore the most effective ways to leverage ChatGPT to generate income and grow your business.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this video, we'll be exploring the top 10 skills that web developers will need to stay ahead of the game in 2023. As technology continues to evolve at an unprecedented pace, it's essential for web developers to remain up-to-date with the latest trends and technologies to build robust, scalable, and user-friendly web applications.

We'll be covering a range of topics, including front-end and back-end development, cloud computing, artificial intelligence, and more. Whether you're a seasoned developer or just getting started, this video is sure to provide valuable insights and practical tips to help you succeed in the fast-paced world of web development.

So if you're ready to take your web development skills to the next level and stay ahead of the curve, be sure to tune in to our Top 10 Skills Web Developers Will Need in 2023 video!

Time Stemps :

00:40  - Proficiency in JavaScript

01:14  - Responsive Design

02:17 - Cybersecurity

03:01 - UI/UX Design

04:00 - Cloud Computing

04:41 - Version Control

05:30 - AI and Machine Learning

06:31 - Server-Side Programming

07:14 - Agile Methodology

08:16 - Communication

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

GitHub Copilot the good the bad, and the ugly, Windows on Mac BING on the down fall, Top countrie in europe for Junoior devs and students

Welcome to WCQ, in this episode:

• GitHub's Copilot improving its AI model and capabilities but old problems still frustrate DEV's.


• Microsoft Windows now Officially suportetd on Mac's with Apple silicon, but also takes a huge hit in the stock market after BING looses controle.


• Junior devs and students are favoring this European country for study and starting their careers.

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 Learning

Active 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

Compare Microsoft's ChatGPT with Google's AI Bard and stay updated on the latest tech news with our coverage of the 10% layoffs at GitHub. Discover the strengths and weaknesses of each AI technology and how they stack up against each other. Stay informed and make informed decisions with our in-depth analysis.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Join the ChatGPT revolution with the latest ChatGPT Subscription! This powerful language model is trained by OpenAI, making it easier than ever to automate and streamline your work. Don't miss out on this opportunity to enhance your workflow - subscribe today!

CSS pseudo-class rise in popularity: has(), is(), not() gaining more and more Global browser support. 

Plus, learn about the recent collaboration with Activision Blizzard and Microsoft for WCQ27 2023. Watch now!

YouTube Video : https://youtu.be/jGS27WehIjs

Show notes: 

• 00:00 - Introduction  


• 00:31- What is Open AI ChatGPT subscription  


• 01:03 - What do you get for subscribing to ChatGPT Plus 


• 02:59 - Visual Studio Code Insiders VS Regular 


• 04:32 - CSS :has(), is() , :not() Selectors 


• 05:03 - What is the CSS has() pseudo-class browser support  


• 05:34 - What is the CSS is() pseudo-class browser support  


• 06:05 - What is the CSS not() pseudo-class browser support  


• 07:19 - Microsoft under pressure from EU for Activision Blizzard deal 


• 09:35 - WoW lead fired by Blizzard

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

The State of JavaScript 2022 report is an annual survey that aims to understand the current state of the JavaScript ecosystem. This report provides an overview of the most popular JavaScript frameworks, libraries, and tools, as well as the latest trends and future predictions.  One of the biggest takeaways from the State of JavaScript 2022 report is the continued dominance of React. 

My Udemy Courses: 

- 30+ React Projects, Learn React JS by Building 30+ Web Apps: https://www.udemy.com/course/30-react... 

- Advanced HTML CSS & SASS - Build and Deploy Modern Websites: https://www.udemy.com/course/advanced... 

- Git & GitHub -Essentials for Version Control & Management Complete: https://www.udemy.com/course/essentia... 

- Bootstrap 5 for Beginners with real world Projects: https://www.udemy.com/course/complete... 

- 30 HTML CSS & JavaScript projects in 30 Days for Beginners: https://www.udemy.com/course/30-html-... 

- Visual Studio Code - Master the Complete VS Code environment: https://www.udemy.com/course/visual-s... 

- Master Responsive Web Design CSS Grid, Flexbox & Animations: https://www.udemy.com/course/master-r... 

- Modern JavaScript from Beginner to Advanced: https://www.udemy.com/course/modern-j... 

- Advanced CSS & SASS: Framework, Flexbox, Grid, Animations: https://www.udemy.com/course/advanced... 

- Web Development HTML CSS & JS a Beginner to Advance guide: https://www.udemy.com/course/advanced...  

 -----------------------------------------------------------------------------  

👇 Website / Tutorials / Projects /Blog 👨‍🏫  

 https://norbertbm.com/web-development...

Show notes: 

• 00:00 - Introduction 


• 01:55 - “Yearly Salary” vs “Years of Experience” for JavaScript developers 


• 07:12 - Demographics Country and Language of JavaScript developers 


• 09:39 - Top used JavaScript Features going in to 2023 1


• 2:00 - Top JavaScript Libraries going in to 2023 


• 12:32 - Top Front-end Frameworks going in to 2023 


• 13:25 - Top Rendering Frameworks going in to 2023 


• 15:38 - Top JS Mobile and Desktop going in to 2023 


• 17:10 - Usage of JavaScript vs TypeScript going in to 2023 


• 17:56 - Where to learn JavaScript in 2023 

Check out the State of JS 2022 here: 

#stateofjs2022 #javascript2023 #WCQ

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this video, we're going to discuss what it takes to become a professional programmer. We'll cover the basics of what it takes to become a professional programmer, as well as some of the benefits that come with this career.  

If you're interested in becoming a professional programmer, then this video is for you! We'll discuss what it takes to become a professional programmer, cover the basics  mistakes  and give you some tips on how to avoid them. Whether you're a beginner or a professional programmer, this video is a great way to learn more about this career!    

🎱Blog Post for this Video:https://norbertbm.com/

----------------------------------------------------------------------------- 

👇 Website & Courses: 👨‍🏫   :https://norbertbm.com/web-development/web-dev-courses/Podcast:https://anchor.fm/menyhart-b-norbert9

------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro  01:00 - Beginner VS Intermediate Programmer 03:00 - Intermediate VS Advanced Programmer 07:40 - About My upcoming React Course  ----------------------------------------------------------------------------------------------------------------------------------------------------------------- #programmingforbeginners #howtolearntocode #norbertbmwebdevelopment

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Learn how to create a website with scroll animation using HTML CSS and JavaScript with its Intersection Observer API  

🎱Source Code for this Video: 

https://norbertbm.com/scroll-animated-website/

-----------------------------------------------------------------------------  

👇 Website & Courses: 

👨‍🏫  : https://norbertbm.com/web-development/web-dev-courses/ 

Podcast: https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w

------------------------------------------------------------------------------------------------- 

Timestamps: 

00:00 - Intro & Project overview 

02:00 - Basic Setup HTML and CSS 

05:25 - using Intersection Observer API 

08:42 - delay transition effect with css     

------------------------------------------------------------------------------------------------- 

 -------------------------------------------------------------------------------------------------

  #SrollAnimation #javascriptproject #WebsiteAnimation

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Learn what the Astra Framework is and how to run Astro and create your first Astro blog website.

# What is Astro and How to use it

Your assignment, build a Blog website, ok , let me do a `npx create-react-app my-blog` and do a total overkill of your assignment.

Or just use Astro, with is similar to a static site generator and make you life much easear.

## What is Astro?

Astro is an all-in-one web framework for building fast, content-focused websites.

For example Blogs, Landing pages ,Portfolio, Showcase, etc...

## Key Features:

Some of the Key Features of the Astro framework are :

- **Component Islands**: A new web architecture for building faster websites, that considers your website as the ocean and the components as islands.

- **Server-first API design**: opposite to next.js, expensive hydration is removed of your users’ devices increasing site speed.

- **Zero JS, by default**: No JavaScript runtime overhead to slow you down. JavaScript is loaded only when required.

- **Edge-ready**: can run on global edge runtime like Deno or Cloudflare.

- **Customizable**: Tailwind, MDX, and 100+ other integrations to choose from.

- **UI-agnostic**: Supports React, Preact, Svelte, Vue, Solid, Lit and more as integrable components.

There main selling point is that you ship les JavaScript!

🎱Source Code for this Video: https://norbertbm.com/

  👇 

Website & Courses: 👨‍🏫  : https://norbertbm.com/web-development/web-dev-courses/ 

Podcast: https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this web development tips and tricks I will share my thought on how to write better code.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Learn what react is and how to create your first react app in this web development tutorial. React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript Framework, or kind of.

Actually React is a JavaScript library that is declarative, efficient, and flexible for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.

React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js.

Watch the full video Tutorial:

https://youtu.be/il34iLY6o2s

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Is Apple viable for Web Development in 2022 with ist new M2 silicon Chip. iOS 16 and MacOS Ventura, also new MacBook Air and MacBook Pro for Web Developers and coding.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this React tutorial you are going to learn how to install update and run react version 18  

💖  Support The Channel by becoming a part of this community!  

🎱 Code for this Video: https://norbertbm.com/ 

-----------------------------------------------------------------------------  

👇 Website & Courses: 👨‍🏫  : 

https://norbertbm.com/web-development/web-dev-courses/  

------------------------------------------------------------------------------------------------- 

Timestamps: 

00:00 - Intro  

00:40 - What is new in React 18 

01:22 - React create root method 

02:10 - React 18 new Hooks 

02:42 - React useId hook 

03:03 - React startStransition and useTransition Hooks 

03:34 - React useDeferredValue hook 

4:04 - React useSyncExternalStore 

04:35 - React useInsertionEffect 

05:06 - How to Update React from v17 to v18 

05:40 - How to instal react v18 

06:07 - How to implement react createRoot method 

07:55 - How to instal and Run React V18

#ReactV18 #ReactNews #norbertbmwebdevelopment

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Project: Responsive Resume Website

A 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 required

Why 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.

Introduction

In 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 Structure

Open 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 CSS

Open 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.

Conclusion

By 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

Here is what you should know in JavaScript before starting to  learn the React JS Framework.   💖  Support The Channel by becoming a part of this community!  🎱 Outlet for this Video and PDF: https://norbertbm.com/top-10-skills-you-must-know-2022-before-you-learn-reactjs/-----------------------------------------------------------------------------  👨‍🏫 Check out my Website for more tutorials and  Udemy Course👨‍🏫  : https://volere.life/web-development/web-dev-courses/ ------------------------------------------------------------------------------------------------- Timestamps: 00:00 - Intro & Project overview 00:47 - What are javascript template literals , template strings 01:36 - JavaScript Shorthand property names 02:08 - JavaScript Arrow functions 02:53 - What is JavaScript Destructuring 03:23 - JavaScript Parameter defaults 03:54 - JavaScript  Rest/Spread 04:50 - JavaScript ESModules 06:19 - JavaScript  Ternaries 06:51 - JavaScript Array Methods 07:28 - JavaScript Promises and async/await

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode we will explain what blockchain is, how it works, what proof of work in a blockchain is and if Blockchain is secure.

Watch it on youtube: https://youtu.be/Pby0lta2cN0

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode we are going to explain Ethereum

• When was Ethereum invented


• What is Ethereum


• How dose Ethereum Work


• What is Ether


• What is Gas in the Ethereum blockchain


• Conclusion

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In todays episode you will learn about Bitcoin, what bitcoin is, who created it, how bitcoin works , haw to own bitcoin, how to mine bitcoin and where to store bitcoin. Also as a conclusion at the end, the ups and down or the pros and cons of Bitcoin.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In todays episode we will take a look at the benefits of Micro Frontend! Throughout this episode I will cover :

What are Micro Frontends?

How Micro Frontend Works?

What are the Best Practices of Micro-Frontend?

How to Adopt Micro Frontend Architecture?

Why Micro Frontend Matters?

What are the Benefits of Micro Frontend Architecture?

Concluding Micro Frontend Architecture

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode of the Weekly Code Quickies Podcast we will take a look at the latest trends for 2022  for web development like: No-code, Data base, JavaScript, WEB 3.0, Metaverse. 

 Support the channel by subscribing! 

 ---------------------------------------------------------------------------------------------------------------------

  Listen to the podcast on: Apple Podcasts: https://podcasts.apple.com/de/podcast/weekly-code-quickies-with-norbert-b-m/id1455776215Spotify: https://open.spotify.com/show/1bpbmoaP44RGq9rDqaat4R?si=76134374af6d495dStitcher: https://listen.stitcher.com/yvap/?af_dp=stitcher://show/380154&af_web_dp=https://www.stitcher.com/show/380154---------------------------------------------------------------------------------------------------------------------  

Show notes: 

00:00 - Introduction  

00:42 - NO CODE web development 

01:47 - Database 

04:35 - AI in web development 

05:32 - JavaScript the foundation of all Frameworks 

06:17 - Web 3.0 

08:08 - Metaverse     

#2022 #webdevelopmen #WCQ

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode of Weekly code quickies we will take a look at Remix the New, Free and Open source JavaScript Framework, and React Router V6 

 --------------------------------------------------------------------------------------------------------------------- 

Watch it on YouTube:

https://youtu.be/ruSwu1VLoEg

--------------------------------------------------------------------------------------------------------------------- 

 Show notes: 

00:00 - Introduction  

01:04 - What is remix? 

01:40 - Remix is Server-side rendered 

02:10 - Remix is not part of the  JAM Stack 

02:40 - What are the Benefits of Remix 

03:10 - What are the use case of Remix 

03:40 - How to get Started with Remix 

04:10 - React Router V6 What is React Router ? 

05:16 - How to set up React Router 6 

06:12 - What is New to React Router 6 ?    

#RemixFramework #ReactRouter6 #WCQ

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode of Weekly code quickies I will analyze  Gary Veynerchuck AKA GaryVee interview withMark Zuckerberg the CEO of Meta about his future plans for the Metaverse and the Web 3.0  Here are the topics todays episode - Web3 / Metaverse - The Metaverse ETF - Hydrogen Framework
 ---------------------------------------------------------------------------------------------------------------------  
Watch on YouTube: 
https://youtu.be/fmMU6ICqVwY
Listen to the podcast on: 
Apple Podcasts: https://podcasts.apple.com/de/podcast/weekly-code-quickies-with-norbert-b-m/id1455776215 
Spotify: https://open.spotify.com/show/1bpbmoaP44RGq9rDqaat4R?si=76134374af6d495d 
Stitcher: https://listen.stitcher.com/yvap/?af_dp=stitcher://show/380154&af_web_dp=https://www.stitcher.com/show/380154 
Follow the Blog:
https://norbertbm.com/garyvee-and-mark-zuckerberg-on-web3-metaverse-new-framework-hydrogen-for-dynamic-e-commerce-wcq11/
---------------------------------------------------------------------------------------------------------------------  
Show notes: 
00:00 - Introduction and topics 
00:49 - Mark Zuckerberg  about Web3 / Metaverse 
01:55 - Is the Metavers similar to the early days of Facebook 
03:14  - Why did Mark Zuckerberg acquire Oculus so early on? 
05:07 - Are contact lenses the future of augmented reality ? 
07:51 - Will the Metaverse core focus be the attention grab 
10:23 - What is Mark Zuckerberg stand on NFTs 
11:00 - What is the real problem with the Metaverse ? 
12:34 - How to invest in the Metaverse ETF 
13:10 - What is a ETF? 
17:58 - What is Hydrogen Framework 
18:30 - Why build a custom storefront?  
#metaverse #nft #WCQ

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In this episode we will talk about the potential future of web development, witch could take place in the browser instead of traditional IDE app. 

---------------------------------------------------------------------------------------------------------------------

Watch it on YouTube: https://youtu.be/PPJQSZJyvCg

---------------------------------------------------------------------------------------------------------------------

Show notes: 

00:00 - Introduction  

01:31 - Topics 

01:51 - What are web containers 

02:56 - Node.js in the browser 

03:53 - What is a IDE 

04:23 - What is StackBlitz 

05:05 - Properties of StackBlitz 

06:10 - FRONT-END FRAMEWORKS & LIBRARIES in StackBlitz 

06:47 - BACK-END in StackBlitz  

#webcontainers #stackblitz #WCQ

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Web 3.0, You may have heard of it, but what is it? Should you even care about it and do we really need another version of the internet? What's wrong with Web 2.0, witch is the current version of the internet and its predecessor Web 1.0? Are there any benefits to Web 3.0?

In this episode of the podcast I will try to answer all of this questions. And if wish to learn about the current fastest growing then Technology then stick around to the end!

Whatch it on YouTube: https://youtu.be/zN_fpvp_EVk

Summery

Is Web 3.0 the future of the internet, should you even care?Summery

What is the Web 1.0



What is Web 2.0What is the problem with Web 2.0?



What is Web 3.0The concept of Web 3.0

Web 3.0 Will Use AI

Web 3.0 will return to the Original Concept

Why Web 3.0 Matters



What is Blockchain, the fastest growing web technology.Enter the blockchain

Blockchain VS typical database

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Description

Learn 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 Guide

1. 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

The company that owns Instagram, WhatsApp and Facebook called facebook, is as of Oct 28 known as Meta.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

New apple Macbook pro m1 max release and Microsoft visual studio code web application in the browser  

------------------------------------------------------------------------------------------------- 

Check out the video on my youtube : https://youtu.be/kQ5ionTNzbo

Timestamps: 

00:00 - Intro & overview 

00:18 - New VS Code Web app in the browser 

01:08 - Limitations of VS Code web app 

02:14 - Advantages of VS Code web app 

03:23 - First look at vs code web app 

08:37 - New Macbook pro 16'' M1 Max

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

In todays episode we are going to take a look at the new Visual Studio Code Aka VS Code Version 1.61 September 2021 updates and at Font Awesome V6 BETA.

Watch the full episode on YouTube: https://youtu.be/HGhLHGDFeck

Timestamps: 

00:00 - Introduction

00:38 - What is Visual studio code?

00:49 - VS Code September 2021 version 1.61 updates overview

01:37 - Vs Code Split editors within the same group

01:59 - VS Code-Locked editor groups

02:06 - VS Code-Better display of deleted and readonly files

02:23 - VS Code Bracket pair guides

02:43 - VS Code-Fixed terminal dimensions

03:00 - VS Code - Jupyter Notebook improvements

03:30 - VS Code-Platform-specific extensions

03:47 - VS Code - Virtual Workspaces extension guide

04:11 - VS Code - Advanced container configuration

04:36 - Font Awesome V6 Beta

04:44 - What is Font Awesome

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

This one is for all you beginner web developers. In this episode I will give you my personal top 10 tips for you if you wish to start your career as a web developer.

Watch the full episode on YouTube: https://youtu.be/o3IFf-9DQL8

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe