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.
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.
freeCodeCamp·5yA Free 12-Hour Coding Bootcamp to Help You Decide Whether Coding is For You
A Free 12-Hour Coding Bootcamp to Help You Decide Whether Coding is For You. Ania Kubow will teach you how to code in 12 hours. The bootcamp is free and open to the public. For more information, visit codingbootcamp.org.
DevDojo·5y5 reasons to start using TailwindCSS
Tailwind has a large set of utility classes that add padding, margin, width, height, and other CSS properties to an HTML element. Tailwind also has a beautiful color palette, incluing 8 basic colors with 10 different shades. You can customize colors, spacing, and everything else inside of Tailwind.
JavaScript in Plain English·5yCreate a dark mode theme switch with Gatsby and TailwindCSS
Dark mode support is a recent feature in almost every technology. While working with gatsby to create my portfolio, I couldn’t find an easy guide. After so much research, I was able to come up with this solution. And I believe this solution will also help you to easily get things to build up.
web.dev·5yBuilding a sidenav component
Sidenav is a responsive slide-out navigation system for the web. It has one sidebar and toggles only when at a "mobile" viewport of 540px or less. It is stateful, supports keyboard navigation, works with and without JavaScript, and works across browsers. Here's a video version of this post.
DevDojo·5yA Brief History of Web Development
In 1993, Tim Berners-Lee wrote the first version of HTML. In 1995, a Netscape programmer named Brandan Eich developed a new scripting language called Mocha. In 2005, Ruby became another rising star in the server-side game. In 2009, Ryan Dahl created NodeJS, a way to write that would execute it as a server- side scripting language.
CSS-Tricks·5yAnimXYZ
AnimXYZ is designed to be highly customizable, calling itself “the first composable CSS animation toolkit.” You can use as many of the different composable bits as you need to get the in/out animation you want. Play with their builder and you’ll see output like: xyz="tall-2 stagger-back duration-6 ease-out-back"
keycdn·5yTop Frontend Frameworks
The right frontend framework simplifies, streamlines and speeds up the website design and development process while still giving you the flexibility and features that you need to produce exceptional results. React is a popular JS framework that focuses on user experience. As of December 2020, mobile traffic has surpassed desktop traffic with 55.73% of traffic coming from mobile devices.
The Startup·5y8 Interesting JavaScript UI and CSS Tools You Must Try in 2021
There are a plethora of resources out there talking about the “top so and so’ JavaScript resources. I am here to talk about the real MVPs, the lesser-known gems that don’t get the due attention in the overcrowded JavaScript ecosystem. Most of them are emerging technologies, carrying immense potential, waiting to be tapped by beginner, intermediate, or advanced level developers.
CSS-Tricks·5yThe Holy Grail Layout with CSS Grid
The basic layout in this demo is not really a layout for CSS Flexbox. You could pull it off if you had to, but you’d need some kind of conceit, like grouping the nav and article together in a parent element. CSS Grid was born to describe this kind of layout and will be far easier to work with.
Smashing Magazine·5yFront-End Performance Checklist 2021
An annual front-end performance checklist (available as PDF MS Word ), with everything you need to know to create fast experiences on the web today. Updated since 2016. Back in the day, performance was often a mere afterthought. Now it affects everything from accessibility to usability to search engine optimization.
Product Hunt·5yLuxa CSS — A minimalist CSS framework.
A lightweight solution that can be easily implemented in any development context. Simple and focused, its goal is to provide a lightweight solution. Embed Collect is a free, open source, open-source collection of collectable images. The collection can be downloaded from the GitHub repository. For more information, visit the collection page.
freeCodeCamp·5yHow to Make a Landing Page using HTML, SCSS, and JavaScript
How to Make a Landing Page using HTML, SCSS, and JavaScript. Beau Carnes explains how to make a landing page using HTML and SCSS. Visit Beau Carnes' website for more information on how to create your own landing page in the U.S. and around the world.
JavaScript in Plain English·5yIntro to React Server Side Rendering
How to build a React SSR app without any tooling or framework. We will use React, webpack, and Express to build an app that works as follows: Browser sends HTTP request to server to load a page. Server receives request and turns React JSX into HTML markup. Browser renders the HTML, downloads the client-side JavaScript bundle, and “hydrates” the HTML.
CSS-Tricks·5yFixing Smooth Scrolling with Find-on-Page
When you control+f or command+f and search on CSS-Tricks, it’ll scroll very slowly instead of snapping to the result. As someone who uses this shortcut frequently, this is a usability issue for me. Until the Chromium team fixes it, here is a trick how to solve the problem on your own.
gitconnected·5y5 ways to center a div using CSS.
5 ways to center a div using CSS. Using Flexbox makes it easier to design flexible responsive layout structure without using float or positioning. Using Tables makes elements, such as <div> tags behave like <table> and <td> tags. Using margin: auto on a flex item will not only horizontally center the element, but also center it in the vertical axis.
freeCodeCamp·5yHow to Manipulate the DOM - the Ultimate Beginner's Guide
Chibuike Okere is a Nigerian journalist and author. She is best known for her work on the DOM, a form of the Internet. She has written several books on the subject, including one on DOM manipulation. Her latest book, DOM Manipulation, is available now on Amazon.
gitconnected·5yHow to Create your Own Programming Projects
If you complete a quality project, recycle it: iterate on it and create your own mini projects along the way. The “whole-part method” breaks down and drills down concepts that you’re already familiar with. Drill It and Internalize It is a great way to really understand and internalize core concepts.
Smashing Magazine·5yHow We Improved SmashingMag Performance
In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. We’ve been there at Smashing as well. While performance has been our goal for almost a decade now, we never really had a dedicated performance team.
CSS-Tricks·5yRe-Creating the Porky Pig Animation from Looney Tunes in CSS
Using 3D transforms, you can rotate, transform, and translate elements in 3D space. You need two CSS properties: perspective and transform-style. The larger the perspective, the more pronounced the 3D effect is. For most 3D scenes, a perspective between 500 and 1,000 pixels works best.
freeCodeCamp·5y10 Tech Talks To Watch – Learn New Software Development Concepts in 2021
10 Tech Talks To Watch – Learn New Software Development Concepts in 2021. Quincy Larson will talk about the future of software development. The talk will be held at the University of California, San Francisco. For more information on the talk, visit www.techtalkstowatch.com.
CSS-Tricks·5yuseStateInCustomProperties
React and Vue could automatically map the state they manage over to CSS Custom Properties. The hook returns a component that is the Custom Property “boundary” and any state you pass it is mapped to those custom properties. The idea is that you could flip one custom property and have a whole block of styling change.
Hashnode·5y#100DaysOfCode A New Beginning.
Prit Kalariya is a second year BCA undergraduate student. He is currently learning python and also has experience working with HTML, CSS and JavaScript. He has completed the #100daysofcode challenge on December 31, 2020. He believes that every beginner should attempt this challenge at least once.