DZone·5y5 HTML and CSS Good Practices
It is quite easy to find good practices for any technology, but unfortunately, the same cannot be said about HTML and CSS. I've made my list of 5 cases when you can create a user-friendly, or clumsy, interface using only HTML andCSS. The alt attribute is quite useful, but many developers don’t use it efficiently.
Hashnode·5yHow I make CSS Art
On the third of June 2021, I created my very first CSS art. I decided to write this blog post to illustrate my thought process from the very beginning up until publishing the art on codepen. Hopefully, this will attract more people into creating CSS art and have fun with it.
Product Hunt·5yTailwind Mobile - Mobile UI components built with Tailwind CSS
Tailwind Mobile - is a free and open source mobile UI components library built with Tailwind CSS. With components for React, Svelte & Vue.js. Embed on your blog or social media accounts to show your support for Tailwind Mobile. Back to the page you came from.
CSS-Tricks·5yWhat I Wish I Knew About CSS When Starting Out As A Frontender
The Box Model (e.g. box-sizing , height , width , margin , padding ) The Document Flow and Positioning (e,g. position , top , left , etc.) There are also some useful concepts to keep in mind when building reusable and composable components.
Product Hunt·5yFlowrift - Beautifully designed Tailwind CSS UI blocks
Flowrift is a library made of beautifully designed Tailwind CSS UI blocks. Go big or go small: Stack blocks on top of each other to build full-page layouts, or selectively copy small code snippets. All blocks work with Tailwind's default configuration. Embed Collect
Hashnode·5yCreating Kirby with CSS art
Today, we'll be recreating Kirby using nothing but CSS. The result will be the amazing Kirby you see below. Let's start by creating the HTML elements we'll need. Then we'll give Kirby its shadow shape with the pseudo :before selector. We'll use the before element to offset it to the background. And we'll use a double border-radius to offset the feet.
JavaScript in Plain English·5yI instructed GitHub Copilot to code an Instagram profile feed in React. Here’s what happened.
GitHub Copilot is a React-based front-end tool that predicts Leetcode problems in seconds. Can it predict the logic for Infinite Scroll? Can it accurately fetch the logic from a paginated API? Let’s find out! I took it for a spin to see what it can do.
Hashnode·5yTrying out Next.js for the first time 🤯
Hashnode Bootcamp's Day 5 task was a perfect moment I could try a new thing and write about it. Here I am writing about using Next.js for two really basic things I needed to work on. Here are the projects: The Birthday Wish Generator and the Home Page.
Smashing Magazine·5yInteractive Learning Tools For Front-End Developers — Smashing Magazine
interactive coding tools and games to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions, Jamstack and pretty much everything in-between. Interactive Learning Tools For Front-End Developers are curated by SmashingMag's John Defterios. The list includes games that teach you about different parts of the flexbox specification.
DEV·5yGlassmorphism Login Form using only HTML & CSS
You can convert any simple design to a Glassmorphism design. For this, you need to change a little bit of code. In this article, I am going to show you how to create Glass Morphism Login Form using HTML and CSS code. Follow the tutorial below to create your own login form.
Bits and Pieces·5yCSS Flexbox vs Grid layout
Flexbox and Grid are two CSS layout models that can be used to create complex web application layouts with just a couple of CSS rules. The Flexbox layout model allows you to distribute unused space between elements that are vertically or horizontally aligned. The Grid layout model is made of rows and columns that is made to create a rigid layout.
Hashnode·5y6 HTML and CSS Projects For Your Portfolio
We've made a list of 6 HTML and CSS Projects you can practice on and include in your portfolio. You'll be facing challenges that will require research to solve, and that ultimately improves your skills. If you want to be updated when we release new challenges, follow us on Twitter.
Hashnode·5ySkills You Need to Become a Front End Developer in 2021
Front End Developer is a person who sets up the UI and tone of a site and translates the designs given by the product team. A front-end developer works on optimizing the performance of the site and components. Frontend development might be easy to learn but it takes time to master, especially on larger products.
SitePoint·5y7 of the Best Code Playgrounds
A variety of front-end code playgrounds have appeared over the years. Most offer a quick and dirty way to experiment with client-side (and sometimes server-side) code then share it with others. Here’s our look at seven of the best, comparing CodePen and a number of CodePen alternatives.
Chrome Developers·5yModernising CSS infrastructure in DevTools
DevTools implemented CSS in two different ways: one for CSS files used in the legacy part of DevTools, and one for modern web components. The CSS implementation in DevTools was defined many years ago and is now outdated. The aim was to remove technical debt caused by the legacy system but also make the migration process to CSS Module Scripts easier.
DEV·5y29 Projects To Help You Practice HTML CSS Javascript 2021
Learn about UI Page projects to increase design ability and how to apply HTML, CSS, Javascript to actual website development. Today we will go into learning aboutUI Page projects. We will also look at how to use HTML and CSS to create a web page. We hope you will find this information helpful.
CSS-Tricks·5yTwitter's div Soup and Uglyfied CSS, Explained
React Native for Web provides cross platform primitives that normalize inconsistencies and allow to build web applications that are touch friendly. To ensure reliable interactions like touch or gestures and to provide a higher degree of compatibility, React Native reimplements some web primitives making sure that semantics and accessibility are preserved if not enhanced.
Hashnode·5y6 Ways to Host Your React JS App For Free
Choosing a hosting provider for your app is very important, as your website performance depends on it. Here are some popular and free hosting services, that you can use to deploy your react app. Deploying an application created with a framework like React, Vue, or Angular differs significantly from deploying a website built with HTML, CSS, and JavaScript.
Chrome Developers·5yWhat's New In DevTools (Chrome 95)
DevTools added an easier yet flexible way to update lengths in CSS. The Command Menu user interface is now enhanced. Lighthouse will now detect if the Largest Containful Paint (LCP) element was a lazy-loaded image. You can now click to read the DevTools release notes in 6 other languages.
Hashnode·5yWhat and Why Next.js and TailwindCSS?
Next.js is a production-ready framework for the javascript library React. Tailwind is a CSS framework that allows us to write CSS directly inside our HTML. The long classes can be opinionated but it is worth a try.Through the great talk given by Sam Sycamore and Francesco Ciulla at Hashnode Bootcamp day 3, I am now much clearer on what I am gonna write in the near future.
