freeCodeCamp·4yLearn Game Development with JavaScript
You will learn to make 2D games with HTML, CSS & plain vanilla JavaScript, using no frameworks and no libraries. Frank Dvorak has created many popular JavaScript courses on a variety of platforms. He will teach you to use everything you learned to make a single final game.
Hashnode·4yThe Pros and Cons of TailwindCSS
Tailwind is a front-end CSS framework that has taken off more than any other recently. Instead of creating a set of selectors and bespoke classes to style your code, you use a large set of single-purpose utility classes. In essence, you add nearly all your style right into your frontend HTML, React, or Vue code.
Vercel·4yBuild Your Own Web Framework – Vercel
ReactDOM Server exposes a method called renderToString, which takes a React component and returns the corresponding HTML output. To support static pages, we first have to implement a transpilation step that turns React-based pages into static HTML. To hydrate dynamic components, we can export a string literal that our bundler eventually uses to create a custom hydration script for individual pages.
Hacker News·4ytabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Tabler is a premium and open source dashboard template with a responsive and high-quality UI. Preview Tabler is fully responsive and compatible with all modern browsers. The only requirement is basic HTML and CSS (and some Liquid) knowledge.
Community Picks·4yCoding an extension that blocks Social Media Websites with HTML, CSS and JS.
Social Media Blocks is a Google Chrome extension that will block social media websites like Twitter: Facebook, Instagram, LinkedIn, WhatsApp, Reddit etc. Add this extension into your browser and achieve better productivity. Create the project using the CodePen playground or setup your own project on Visual Studio Code with the following file structure.
Product Hunt·4yLocofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+
Locofy.ai helps builders launch 3-4x faster by converting designs to production ready code. Try Figma to React, React Native, HTML-CSS, Next.js, Gatsby in FREE BETA! Tag responsive designs, make components, get a live-prototype & export code or direct deploy.
Flavio Copes·4yHTML, avoid displaying a broken image if the image is not found
The technique I used is this: this inside an inline event handler in HTML refers to “this element” That’s a workaround that uses the platform features because I know I might not pay attention to that as I’m a solo developer and I might have a broken image visible for weeks before I realize.
codeguru·4yIntroduction to Web Components API
Web components are HTML elements that leverage the power to create new HTML tags and extend existing tags. They can be easily created using the browser’s API and do not have a dependency on any third-party library or framework. Web components are non-intrusive and have their styling and structure. The power of web components lies in their API.
DEV·4yTailwind CSS: My experience in 2022
Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It's been 5 years since Tailwind's launch, and it's officially been five years since it was launched. Tailwind has been an interesting experience for me, and I'm here for every bit of it.
LogRocket·4yUsing em vs. rem in CSS
Within CSS, em and rem are both scalable units that also specify values of properties. Em and rem meet web accessibility standards, and, unlike px , scale better. Consequently, they are more suited for responsive design. We’ll also go over code examples to demonstrate how they work and their difference.
The New Stack·4yTypeScript Tutorial: Go beyond ‘Hello, World!’
The entire first section defines our function that will add the values of x and y that we’ll define in the next line that looks like this. The results of running the app will print out 13.14 (because we added 3.14 to 10) This is great. What about taking input from a user? That’s possible as well as using the parseInt function. You’re on fire!
Community Picks·4yStop Using IDs and Classes in Every HTML Element!
CSS :pseudo-classes helps you single out an HTML element by its particular state. :first-child and :last-child apply the style to a children element with a particular position in a group of sibling elements, e.g., the third 'p' in every div. The difference is ONLY the occurrence of the element in the container/parent element.