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.
Hashnode·5yHow to make blob menu using HTML, CSS and JavaScript
I wanted to make something simple with a little transition animation to make it look cool, so I created this blob menu. I got a lot of positive feedback when I shared it so here is the step-by-step process on how to create it. First, we got the <link> tag which is used to import font awesome icons. We got our menu items Menu icon from font-awesome icons. A "links" div that wraps all the items in the menu in one element to be shown or hidden. JavaScript code to show and hide the menu items and the blob.
gitconnected·4yCode a cookie-based darkmode switch in CSS and vanilla JavaScript
Code a cookie-based darkmode switch in CSS and vanilla JavaScript. The darkmode button is located inside the <header> element on line 13. In the stylesheet, I define the body in its light and dark state. Also I set the design for dark mode button in lightmode und darkmode (classname active) status.
Hashnode·4yMake your website stand out with a custom scrollbar 🌟
scrollbar is easily one of the most neglected UI components out there that are not leveraged by many websites to enhance their users' experience. By default, on all HTML, when the content of the website exceeds the viewport height, a scrollbar will automatically appear on the right, just like the one you're seeing as you read this article now.
DEV·5yResponsive Side Navigation Bar in HTML CSS and JavaScript
In this article you will learn how to create Responsive Sidebar Menu using HTML CSS JavaScript. Below I have shared a video tutorial for you which will help you to know how to make this Responsives Side Navigation Bar step by step. I created this project with the help of HTML CSS and JavaScript. First I created a top menu bar with a logo and a menu button. I then created a site bar that contains a lot of icons and menu items.
DZone·5yMeta Tag Reference and Bullet Proof HTML Template
For every HTML page you should have a few key elements to ensure fast loading, and good SEO. The template below gives you all of those features, which you can quickly customise for your needs. I've also listed all useful meta tags below if you want to pull them out individually.
DevDojo·5yResources to practice web development
In order to practice tech , you need challenges and ideas for side projects. In this blog post I have compiled a list of sites which provides more challenges and idea for us to practice web development. Let me know if you found the post useful and if I have missed something in the comments section.
Product Hunt·5yHTMLgApp - Convert (HTML, CSS, JS) to an Android App in 8 min for free
HTMLgApp is a tool that converts your HTML, CSS, and JS code into an Android app automagically. It works with any responsive project. Simply, fill out the form, and we'll get it ready in a few minutes. The tool is free to download and use.
Ionic Blog·5yAnnouncing Stencil v2.10
Stencil v2.10 is now available. New features include greater control over the shadow DOM, a fix that results in fewer render cycles, and support for TypeScript 4.3. We’re really excited about all of these new improvements and look forward to seeing what you build with Stencil.
Bits and Pieces·5yJavaScript Sanitizer API: The Modern Way to Safe DOM Manipulation
The HTML Sanitizer API was first announced in a draft specification in early 2021. It gives native browser support for removing malicious code from dynamically updated markup. The main feature of this API is to accept and convert strings into safer ones. Shifting sanitization to the browser makes it more convenient, secure, and faster.