HTML

How to Dynamically Import JavaScript with Import Maps — step-by-step Javascript tutorial on Progressive Robot

How to Dynamically Import JavaScript with Import Maps

Build tools are an important part of the development experience, but a spec called import maps will allow you to both import external code into your project without a build tool. In this tutorial, you will create and use import maps in JavaScript to import code without build tools, import external code, and use the code without extra build steps.

Read more
How To Use Opacity and Transparency to Create a Modal in CSS — step-by-step DevOps tutorial on Progressive Robot

How To Use Opacity and Transparency to Create a Modal in CSS

When styling HTML with CSS, opacity can help soften a shadow, de-emphasize non-essential content during a specific task, or fade content in or out of view. Throughout this tutorial, you will use various ways to apply opacity and extra properties to create a modal that appears with a no-JavaScript approach using the :target pseudo class and the opacity, pointer-events, and transition properties.

Read more
Introduction to CSS Counters — step-by-step DevOps tutorial on Progressive Robot

Introduction to CSS Counters

In programming, counters are variables that hold a value that increments according to customizable rules. Modern Cascading Style Sheets (CSS) have a well-supported counter property that can track increments without JavaScript. In this tutorial, you will run through the basics of CSS counters by using them to number section elements in an Hypertext Markup Language (HTML) document and tally up the number of rows in a table element.

Read more
How To Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML — step-by-step DevOps tutorial on Progressive Robot

How To Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML

When you share links on social media platforms, they’ll often be presented with rich imagery and a nicely formatted title, summary, and link, instead of plain text. You can add these rich media social sharing capabilities to your site by including certain meta tags in the head of your HTML document. This tutorial will show you how to implement both Twitter Card and Open Graph social metadata.

Read more
How To Use Python-Markdown to Convert Markdown Text to HTML — step-by-step Python tutorial on Progressive Robot

How To Use Python-Markdown to Convert Markdown Text to HTML

Markdown is a markup language commonly used to simplify the process of writing content in an easy-to-read text format, which a software tool or programming library can convert into HTML to display in a browser or another writing program. In this tutorial, you will install the Python-Markdown library, use it to convert Markdown strings to HTML, convert Markdown files to HTML files, and use the Python-Markdown command line interface to convert Markdown to HTML.

Read more
How To Make a URL Shortener with Flask and SQLite — step-by-step Databases tutorial on Progressive Robot

How To Make a URL Shortener with Flask and SQLite

In this tutorial, you will build a URL shortener, which is a service that takes any URL and generates a shorter, more readable version like bit.ly. You will use Flask, SQLite, and the Hashids library to build your URL shortener. Your application will allow users to enter a URL and generate a shorter version, in addition to a statistics page where users can view the number of times a URL has been clicked. You’ll use the Bootstrap toolkit to sty

Read more
How To Use Python-Markdown with Flask and SQLite — step-by-step Databases tutorial on Progressive Robot

How To Use Python-Markdown with Flask and SQLite

Python-Markdown is a Python library that allows you to convert Markdown text to HTML; it mostly follows the Markdown standard with a few minor differences to the standard Markdown syntax. In this tutorial, you’ll use Flask, SQLite, and Python-Markdown to build a small note-taking web application that supports formatting text using Markdown. The app will allow users to display, create, and format notes with h

Read more
CHAT