Learn Css, Hapi and Npm

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

A Monorepo is where you have multiple projects inside a singular repository.

monorepo

Introduction to Monorepos with NPM Workspaces

The CSS Grid Layout introduces a two-dimensional grid system allowing both fixed and flexible track sizes to be defined. This allows for easy management of an app's layout.

You'll start with an empty HTML file with minimal global styles applied in your CSS file. You will then iteratively add sections and items to your HTML page to structure through a CSS grid. You'll learn how to control a grid's columns and rows and define the size of each respectively. 

By the end of the course, you'll have a fully responsive landing page that behaves how you expect it to on any device.

Build Modern Layouts with CSS Grid

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

Forms are one of the most common features of a web application. They are also a common cause of headaches. The controls you use, the markup for the structural layout, and the styling all have to be considered.

What you build can look and behave differently depending on the browser being used, and how you build it can impact the accessibility of your application.

Stephanie Eckles has prepared several lessons that work through the creation of a complete form demo featuring the most common controls with a variety of attributes.

You'll create semantic fieldsets, add responsive styles without media queries, and prepare styles for accessible validation.

The demo is built with Sass and Eleventy. Don't worry if you don't have prior experience with these tools— Stephanie's code and explanations make it easy to follow along, and additional resources are available if you need them.

Accessible Cross-Browser CSS Form Styling

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

Learn how to:
- Generate markup with loops and template literals
- Leverage native HTML behavior
- Create SVG
- Use CSS variables and scope
- Implement game logic with HTML forms
- Animate SVG with CSS
- Use CSS Animation to provide motion
- Use Pug Mixins
- Disable motion when users don't want it
- Apply visual effects using CSS filter and backdrop-filter
- Generate random animations using Pug and CSS variables

Tic Tac Toe with CSS and SVG

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts.

Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image. Let’s walk through specificity, fonts, the box model, margins, padding, positioning, and much more!

CSS Fundamentals 

Whether you enjoy CSS animations or not, learning how to work with CSS transforms and transitions can help the overall user experience on your websites.

In this collection we will look at the various CSS properties that help create the kind of experience user have come to expect from websites. 

We will explore:
- The transform property
- The transition property


Learn CSS Animations for a Better User Experience 

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts.

Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image. Let’s walk through:

- specificity
- fonts
- the box model
- margins
- padding
- positioning
- and much more!

CSS Fundamentals

Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance. 

In this course, we will start with basic selectors and work our way through more complex classification of selectors, explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.

CSS Selectors in Depth

Practical, repeatable CSS for application development.

Styling

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.

In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.

By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Build User Interfaces by Composing CSS Utility Classes with Tailwind

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Convert SCSS (Sass) to CSS-in-JS

Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating nice-looking, adorable and successful user interfaces. In this course we will take a deep dive into the various possibilities Angular offers for styling components. We learn about the different APIs, how they allow us to conditionally apply one or multiple styles in the form of style attributes and CSS classes. We also explore the concept of style encapsulation and how it helps prevent our styles from leaking into other components.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Understand How to Style Angular Components

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

Having your CSS co-located with your UI code provides the same sort of advantages in refactor ability and maintainability that React provides for the DOM using JSX. TypeStyle allows you to do that with the additional safety of TypeScript.

In this course we will cover core CSS concepts like CSS Properties, media queries, keyframes, pseduo-states and show how they can be represented in your JavaScript code using TypeStyle. 

Maintainable CSS using TypeStyle

In this course, we are going to learn about the CSS Grid Layout. The Grid Layout is a feature in CSS available in modern browsers.

CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

We’ll discuss all the features CSS Grid has to offer us, and how we can apply these features to real world layout-based obstacles. We’ll start with placing items on a grid by using grid-column and grid-row and progress to more complex topics such as nesting grids within grids.

Build Complex Layouts with CSS Grid Layout

Looking at snippets of CSS is a great way to learn how to use it, but some details can fall through the cracks. This course demonstrates the process of styling an application from start to finish.

We will take a basic un-styled todo-list application written in React and use CSS to get the application to look like how we want. The first steps will be to apply static styles to the app based on a mock up, then we will incrementally add user interactivity as well as make the app responsive.

Style an Application from Start to Finish

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results

Create Professional Responsive Websites using Bootstrap

Introduction to Monorepos with NPM Workspaces

Build Modern Layouts with CSS Grid

Create a Landing Page with CSS Grid and Flexbox

Accessible Cross-Browser CSS Form Styling

Tic Tac Toe with CSS and SVG

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

CSS Fundamentals

Learn CSS Animations for a Better User Experience

Execute npm Package Binaries with the npx Package Runner

CSS Fundamentals

CSS Selectors in Depth

Styling

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Convert SCSS (Sass) to CSS-in-JS

Understand How to Style Angular Components

Get Started with Flexbox CSS Layouts

Maintainable CSS using TypeStyle

Build Complex Layouts with CSS Grid Layout

Style an Application from Start to Finish

How to Use npm Scripts as Your Build Tool