Changelog·4yFree Open Source Tailwind CSS Components
HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more. HyperUI is an open source collection of Tailwind components.
Hashnode·4yBuild 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.
This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build.
Hashnode·4y18 GitHub Repositories to Become a CSS Master 🎨🧙♂️
A while ago I wrote an article about the repositories you need to master JavaScript. It got some great feedback, so I decided to make a sequel about CSS as well. I have further sorted all the resources into categories from learning the basics to style guides, best practices, useful tricks, and additional resources you can study.
Pointer·4yCSS Tips
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility.
Hashnode·4yWhy you should use Chakra UI in React
Chakra UI is a component library for React. It is designed to be atomic and you can build elements quickly and easily. The code samples in this article are made with NextJS but you can use it with any React-based library/framework such as Gatsby or Create React App.
gitconnected·4y8 Free Cheat Sheets That Every Developer Should Bookmark
The CSS Reference is one of the best references for CSS that is available for free. It features the most popular properties and explains them with illustrated and animated examples. The JS CheatSheet has been one of. the simplest yet most detailed cheat sheets for JavaScript that I have. come across.
Telerik·4yTop Frontend Developer Tools for Beginners in 2022
Frontend development is the process of designing and building applications that run on the web using web technologies such as HTML, CSS and JavaScript. In this post, we will take a look at a few tools that frontend developers cannot do without in 2022 and what I love about them. If you are a developer or looking to become one, this is a good piece to get started.
freeCodeCamp·4yThe Beginner's Guide to Sass
Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that gives your CSS superpowers. It allows us to write stylesheets in two different syntaxes, indented and SCSS. Sass helps keep your code organized by using partials. It helps reduce the repetition of CSS, because of its powerful features.
Medium·4yStack & Tools You Should Learn to Become a Full-Stack Developer Faster
Single Page Applications (SPAs) are the way to go. Vue.Js is one of the most popular SPA-building libraries. Node.js is a JavaScript runtime environment that is open-source and cross-platform. MongoDB is the “M” in the famous MEAN and MERN stacks.
gitconnected·4yI cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes !
I cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes. Combining Tailwind with Nuxt 3, I was able to achieve the ridiculous speed of web development I have ever seen in my life. I used 3 techniques to significantly boost the speed at this step: Copy prebuilt icons from Youtube TailwindCSS color picker CSS. Polish Detail.
Chrome Developers·4yWhat's New In DevTools (Chrome 101)
Recorder panel now supports importing and exporting user flow recordings as a JSON file. View cascade layers in the Styles pane to prevent style-specificity conflicts. New timespan and snapshot mode in the Lighthouse panel. Fixed autocompletion support for array-like objects, CSS class names, map.get and HTML tags.
asayer·4yMastering CSS Transitions with React 18
Animations have always been a part of the web experience. The smooth transitions of a web page’s elements have always brought aesthetic appeal to websites. The easiest way to implement animations with CSS is using the transition property. We will be taking an in-depth look at CSS transitions and how to use them to create animations with React 18.
Laravel News·4yStyle Guide Generator for Tailwind CSS
BeyondCode launched a Style Guide Generator for Tailwind CSS. It automatically generates style guides from a tailwind configuration file. You can either paste the content of your tailwind.config.js file or load the file from a URL. Once you've generated a style guide based on your config, you can share it with others.
gitconnected·4yHow I manage my SCSS properties
In SCSS, we can define variables and mixins that can be used anywhere in the project, including @media queries. I store them in an SCSS folder, separated into files whose variables serve different purposes. For example, mixins, breakpoints, and colors are stored in the _colors.scss folder.
Hashnode·4yWhat I learned from building websites after a 10-year freelancing hiatus
Ten years ago I worked as a freelancer building websites with WordPress. I created custom Designs/Templates with Photoshop, HTML, PHP, and CSS. CSS got so much easier yet so much complicated! Back then we could only dream about that. Back then it was a “nice to have” but “we don't want to pay a lot for it”
freeCodeCamp·4ySkeleton Loader Example – How to Build a Skeleton Screen with CSS for Better UX
A skeleton screen is an animated placeholder that simulates the layout of a website while data is being loaded. Skeleton screens draw the user's attention to progress rather than waiting time. They appear to be faster and are more user friendly. Improved perceived performance provides both good UX and helps in increasing conversion rate.
LogRocket·4yBuilding modern sliders with HTML, CSS, and Swiper
Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions. It is available for vanilla JavaScript, Angular, React, Vue.js, and Svelte. Swiper is currently on v.8; however, check for the respective migration guide to upgrade from Swiper 6 to Swiper 7.
Hashnode·4yCreate a Wavy Text Effect with Pure CSS
This is the first tutorial of my upcoming Pure CSS Text Effects series. I'll show you how easy it can be to add a nice touch to your text with plain ol' CSS. In this one, I'll walk you through adding a wave-like animation using a pretty cool property: clip-path.
