Josh W Comeau·4yMy Custom CSS Reset
This tutorial explains how to use your own custom CSS reset. It includes all of the little tricks I've discovered to improve both the user experience and the CSS authoring experience. We'll dig into each rule, and you'll learn what it does and why you might want to use it.
Hacker News·4yTailwind CSS v3.0 – Tailwind CSS
Tailwind CSS v3.0 is here, bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. Every color out of the box, including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray. Colored box shadows for fun glow and reflection effects, and more natural shadows on colored backgrounds.
gitconnected·5yHow I Structure HTML for Better SEO Results
Stephan Romhart explains how to use semantic HTML 5 tags for better machine readability. He also explains how he organize his CSS for websites without a framework. In his 20 years of web development experience, he’s developed a standard CSS approach for myself. He says that most websites can be built with the following boilerplate.
JavaScript in Plain English·5y10 Best Websites for Practising and Perfecting Front-End Development
10 Best Websites for Practising and Perfecting Front-End Development. Muthu Annamalai Venkatachalam has compiled a list of the 10 best sites to practice your front-end skills. You will reinforce everything you have learned through tutorials and become a more competent front- end developer by using these websites.
freeCodeCamp·4yLearn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update
The Responsive Web Design Certification is the first of freeCodeCamp's 10 currently-live certifications. Instead of coding lessons, you'll learn concepts and syntax through a series of 15 practice projects + 5 certification projects. The full certification will take most web development beginners around 300 hours to complete.
Hacker News·4yDefensive CSS
Defensive CSS is a collection of snippets that can help you in writing CSS that is protected. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. This is built upon an article I wrote a while back called “The just in case mindset”
DEV·5yFlexBox Cheat Sheets in 2021 || CSS 2021
Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's refresh Our CSS Flexbox Memory. The Flexbox architecture work? The flex-items are distributed along the Main Axis and Cross Axis. And, depending on the flex-direction property, the layout position changes between rows and columns.
Hashnode·5y🔥 6 Awesome CSS Layout Generators
6 awesome CSS layout generators/tools that will help you in rapid prototyping and front-end development of CSS layouts for your projects. Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with this interactive CSS Grid Generator.
DEV·5yResponsive Design CSS tips
Using em/percentage/rem instead of px, so that the text, images size adjust with respect to the device width. Flex-wrap - Using flexbox to align your HTML elements such as <div> etc. Media query - Media query should be used to set width and height according to the breakpoints.
DEV·5y10 Google Chrome Extensions you should use as a developer
Here are some of the best Google Chrome extensions for developers. Extensions that make life easier, make you more productive, or perform an essential task better than a dedicated tool. As the vast majority of us use Chrome, it makes sense to consider Chrome extensions. Other browsers are available but Chrome is used by 62.6% of internet users.
gitconnected·5yBuilding a Video Chat App with Node.js + Socket.io + WebRTC
Building a Video Chat App with Node.js + Socket.io + WebRTC Taran Arora shares his tips on how to build a video chat app using JavaScript and NodeJS. It will also show you how to use PeerJS,WebRTC, and Nodemon to build the app.
DEV·5ySkills required to be a full stack developer: a checklist
The skills list required to be a full stack developer is long and it can be hard to know exactly what skills you need. The often shared online resource for this kind of thing is roadmap.sh but, while it is extensive, I think the amount covered here is too much to be helpful to new developers. I have my own list, it’s a bare minimum required skills list and it looks like this:
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.
DEV·4yif/else in CSS
There are no conditional statements in CSS, but this may soon change with new @when and @else operator. Currently, the only way to perform a conditional statement was to use media queries. The new proposal looks much cleaner and very similar to many programming languages. It's not supported by any browser at this moment, it's not even listed on caniuse.com .
Hashnode·4yMy honest opinion on Tailwind CSS
Tailwind is a utility framework that can be used to optimize and speed up your development. Tailwind should not be used if you don't have medium experience with CSS in general. Even though Tailwind has uniform classes, every website built with it is so different.
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.
Red Stapler·5yCSS 3D Card Design with RGB Effect Tutorial
In this tutorial, we’re going to show you how to design and create CSS card with animating RGB and 3D tilt effect in just a few minutes. The first tutorial is how to setup the card layout from scratch using CSS. The second tutorial isHow to add 3d tilt effect using tilt.js. You can download the code of this project here.
Open Source Way·5yA simple CSS trick for dark mode | Opensource.com
The prefers-color-scheme media query works the same way. The user can configure their operating system to use a light or dark theme. I specify different values of CSS variables for both modes and let the user's OS decide. This is the real power of the media query: Providing a consistent user experience from OS to web page.
freeCodeCamp·5yLearn CSS Grid by Building 5 Layouts in 17 minutes
Learn CSS Grid by Building 5 Layouts in 17 minutes. Learn how to use CSS Grid to build your own website. Learn more about CSS Grid at the CSS Grid website. For more information on how CSS Grid works, visit www.cssgrid.com. To learn more about the Grid, visit the Grid website at www.cssgrid.org.
Chrome Developers·5yNew in Chrome 93
Chrome 93 will ship on September 21. New PWA features include CSS Module Scripts and Multi-Screen Window Placement API. Installed PWAs can register as URL handlers, making it possible for users to jump straight into your PWA. The PWA Summit is coming up October 6-7.
Hacker News·4yPico.css • Minimal CSS Framework for semantic HTML
Large and complex CSS file increase memory usage and cause longer style calculations. A great design should be minimal, fast and maintainable. Most popular CSS frameworks are bulky, overkill and hard to customize. Huge stackings of wrappers and CSS classes are unnecessary for semantics elements.
CSS-Tricks·5yYou want enabling CSS selectors, not disabling ones
An enabling selector is what I call a selector that does a job without disabling the particular rule. Let's say we have list items and we want to add the margin to every one except the last one. First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element.
