DEV·6y10 Inspiring Ideas for Your Next Front-End Project
CodePen is an outstanding platform that has been co-created by Chris Coyier (founder of css-tricks.com) CodePen is a social development environment where developers and engineers can collaborate on projects, showcase their work, share things with the community, and prototype new ideas. I have chosen 10 great examples that have been published on CodePenio and are publicly accessible.
Hashnode·6yImprove your CSS with these 5 principles
Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We're going to look at the five simple and very effective principles that will take your CSS to the next level. Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS?
Product Hunt·6yTailwind CSS v2.0 — Rapidly build modern websites without ever leaving your HTML
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90. Can be composed to build any design, directly in your markup. Embed this code into your website and use it to create your own designs. Share this post with your friends.
The Startup·6yFrontend Web Development: A Complete Guide.
Front-end web development is responsible for the structure, beauty, and brain of the website. It is the part of the site that interacts with the user; ensuring that when the users open the website, the information is visible to them in a format that is easy to read and understand. Front-End Web Development: A Quick Overview.
DEV·5yThe Perfect Dark Mode
The dreaded flicker of light mode is a problem that is not limited to static/hybrid websites but extends to pretty much any website that uses JavaScript to "hydrate" its components. We need to find a way to be able to run some code and apply the appropriate background-color (and by extension, the theme) before the entire page has loaded.
Hashnode·6yNext.js Starter With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint
Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily. In this article, I will show you how to use the starter template and deploy it with Vercel. I will also be connecting a Postgres database which I will create on Heroku.
DEV·6yMake Your CSS Dynamic 🕺 With Styled Components
The point of dynamic styling is saving time and writing less CSS. styled-components helps you write better CSS in React. It does so by allowing you to wrap all your component's styles into a neat, style-only component. Dynamic styling allows us to focus on important stuff like adding borders to buttons and stuff like that.
Hashnode·6yResponsive Snakes! And what they can teach you about CSS 🐍
"If a snake was responsive..." is my favorite webdev meme. I love it, it is so silly, but at the same time makes us think a little deeper about responsive design and CSS techniques. Let's talk about four responsive snake implementations and see how they were made. There's a CodeSandbox for you to play with at the end.
Hashnode·6y10 Developers You NEED to Follow on Twitter
I've compiled an unordered list of essential developers I think you should be following on Twitter. Each has their own speciality and topics, but all of them provide content that will benefit you. If you're a seasoned developer or someone just starting your journey, surrounding yourself with a community helps you learn.
Hashnode·6yBootstrap or TailwindCSS: How to decide a framework for your next project?
There is no right or wrong way here. If you are already using Bootstrap, you know the importance and how much time it can save as a developer. Developers with little or no CSS knowledge is loving TailwindCSS because by just remembering few utility classes, they can do many awesome things without even touching CSS file (which is their worst nightmare)
Hashnode·6yHow to easily understand Flexbox CSS - (Part 1)
Flexbox CSS is a one dimensional layout model/method used for laying out items in a row or column fashion. Utilising flexbox allows you to create fully responsive, mobile first layouts. In the next part we'll look at some more specific properties we can use to justify-content to space out flex items inside our flex containers.
DEV·5yWhat Can You Do with Tailwind 2?
Tailwind CSS is a productivity-boosting CSS framework used by millions. The new 2.0 version will be released on November 18th, 2020. Tailwind is composed of small single-purpose utility classes which pull from a standard set of values. The breadth of utility classes allows us to write 95-100% of our CSS using just utilities.
CSS-Tricks·6yAdditive Animations in CSS
The Web Animations API allows us to mix up this behavior through the introduction of the composite option. If we change the second animation to add a composite: 'add' option, we tell it to add the value of this animation to whatever the current state of that property is. Properties that accept any number-based valu (such as lengths, percentages, or raw numbers) will add the numbers together.
Hashnode·6yA quick introduction to SASS/SCSS
Sass stands for Syntantically Awesome Stylesheets. It’s a CSS preprocessor. It allows us to create variables, nested rules, mixins, functions, and do mathematical calculations. Every CSS file is a Sass file so you can take your .css file contents and put it in Sass.
CSS-Tricks·6yA Complete Guide to CSS Gradients
There are three types of gradients: linear, radial, and conic. The syntax is is declared on either the background (shorthand) or background-image property. To make the gradient go from left-to-right, we pass an additional parameter at the beginning of the linear- gradient() function.
Product Hunt·6yCirrus v0.6 — A component centric CSS framework for fast prototyping. 💎
Cirrus is a modular, responsive, and component centric SCSS framework. It is aimed at bringing beautiful, hassle-free styling. Cirrus works right away with minimal styling. From there, add components and tweak using utility classes to make it truly your own.
Product Hunt·5yCSS Scan Pro 2.0 — ✨ A re-imagined Devtools for web design
Hover over any element, and get its CSS, colors, assets, animations, font, and dimensions, instantly. Copy, export, or refine it with an intuitive CSS editor, without writing code. Embed in your site to get the looks of your favorite websites.
Hashnode·6yBecome a Full Stack Developer by building these amazing applications
There are very few job opportunities for Just HTML or Just CSS or Just JavaScript developers. Most of the companies are looking for developers who know how to design front-end, backend, and also HTML and CSS. If you're a React/Angular Developer, that's not enough nowadays. You need to learn Node.js also. In this article, I have listed out some of the articles which will help you to become a full-stack developer.
