Html

Html posts, videos, courses, and more

Rahul

3 days ago

View Post

A brief guide to ::before and ::after in CSS | Tutorial

In this post, we'll discuss about the **::before and ::after use cases. Intro The ::before and ::after are CSS pseudo elements, and they allow you to add content to the page without having any additional HTML. While they are not technically part of the DOM they will appear as if they are. These pseudo elements are mostly used to...
A brief guide to ::before and ::after in CSS | Tutorial
3
Select One:

gaganjot singh

2 weeks ago

View Post

GREAT 20+ CSS TOGGLE EXAMPLE

If You Like This Article then check Out more Examples 50+ CSS Toggle Switches 1. Title:- Pure CSS Toggles Author:- Rafael GonzΓ‘lez Made With:- HTML CSS JAVASCRIPT {% codepen https://codepen.io/rgg/pen/waEYye %} 2. Title:- CSS Theme Switcher Author:- Michelle Barker Made With:- HTML CSS {% codepen https://code...
GREAT 20+ CSS TOGGLE EXAMPLE
9
Select One:

Tony Lea

2 weeks ago

View Post

Extracting TailwindCSS from HTML

I've recently run into a scenario where I want to design a one-off page using TailwindCSS with the CDN link; however, including the CDN link would mean that my page load is a heavy 3MB πŸ™. Instead of installing Tailwind with one of the recommended installation steps, I decided to use the PurgeCSS CLI to extract only the classes I...
Extracting TailwindCSS from HTML
7
Select One:

Savio Martin

1 month ago

View Post

111 amazing resources you're gonna love πŸ’–

Hello Devs πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm gonna share 100+ super amazing resources every developer are gonna love for sure πŸ’– I hope you'll enjoy this article. 3...
111 amazing resources you're gonna love πŸ’–
7
Select One:

Tony Lea

1 month ago

View Post

How to drag an element using javascript

While building out a new image generator, I needed a way to drag and move HTML elements inside of another element. Take a look at what I was building below: This is actually the new Post Image Generator that you can use here on the DevDojo to generate some nice looking cover images πŸ˜‰. Let's cover how we can easily add this func...
How to drag an element using javascript
5
Select One:

prasanth8893.p

1 month ago

View Post

Everything about HTML Tags

HTML tags are like keywords that define that how web browsers will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed tags e.g. br and hr tag. If...
Everything about HTML Tags
3
Select One:

Vlad Pasca

2 months ago

View Post

Web developer roadmap in 2021 and beyond

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on Twitter for more information about web development and how to improve as a developer. 1. Learn how the internet works Zero to mastery playlist MDN Introduction 2. Learn HTML HTML Crash Course For Absolute Beginners Basic HTML...
Web developer roadmap in 2021 and beyond
1
Select One:

Isaac Janobest

2 months ago

View Post

HTML5 Basics for Absolute Beginners

Hello and welcome again to my little corner. I am appreciative of the response I got to my previous post and if anything, that has motivated me to continue to make this a date. So without further ado, let’s begin to get our hands dirty. I promise to keep it simple for my absolute beginners. WHAT IS HTML? The full meaning of HTM...
HTML5 Basics for Absolute Beginners
4
Select One:

Gemma Black

5 months ago

View Post

Avatars: Design and Build an Admin Dashboard with Preons

This is part of a series to build an admin dashboard with Preons. Disclaimer! I am the author of the toolkit, but the principles can be applied to other functional css libraries. End goal Create a user profile avatar using HTML and CSS classes Avoid writing custom CSS Before we start You'll need: An IDE, a code playground...
Avatars: Design and Build an Admin Dashboard with Preons
3
Select One:

Bobby Iliev

6 months ago

View Post

How to generate title slugs in Laravel?

Introduction If you are not sure what a slug exactly is, you should go through this post here first: https://devdojo.com/devdojo/what-is-a-slug There are many reasons why you would want to have a nice slug for your posts rather than accessing them via their ID, for example. In this tutorial, you will learn how to use the title o...
How to generate title slugs in Laravel?
9
Select One:

Bobby Iliev

9 months ago

View Post

How to Create Custom Laravel Maintenance Page?

Introduction More often than not you would need to perform some maintenance for your Laravel website. Luckily Laravel makes it super easy to put your application in maintenance mode! In this tutorial, I will show you how to do that, and also how to change the default Laravel maintenance page with a custom maintenance page that m...
How to Create Custom Laravel Maintenance Page?
8
Select One:

Tony Lea

1 year ago

View Post

How to Append HTML to Another Element

Appending HTML to the end of another element is very simple. Most people shy away from jQuery nowadays so it's important to know how to append HTML to another element in Vanilla Javascript.Let's say that you want to append a string of HTML to the end of another element with an id of app, here's how you can accomplish this:
How to Append HTML to Another Element
8
Select One:

Tony Lea

2 years ago

View Course

HTML5 Platform Game

In this course we'll be showing you how to create an HTML5 Platform Game. In this course we'll be walking through step-by-step on how to draw an intro screen, draw the character to the screen, capture user input, collision detection, and so much more.Let's get started in the next video where we'll show you how to add a canvas an...
HTML5 Platform Game
2
Select One:

Tony Lea

2 years ago

View Course

HTML Basics

In this course you are going to learn the basics of HTML. This course contains 10 easy to consume videos which you can complete in under 40 minutes. At the end of this course you will be able to code HTML websites. You can find the course breakdown below:
HTML Basics
3
Select One:

Wael Manai

2 years ago

View Post

Create your first HTML5 game with Phaser.js

Everybody loves classic games. How many of you remember the retro snake game from old Nokia phones? We sure do. This is why for this lesson we decided to recreate it using HTML5. There is a great open source game development framework called Phaser that we will use.You will learn about sprites, game states and how to use the pre...
Create your first HTML5 game with Phaser.js
1
Select One:

Wael Manai

2 years ago

View Post

Get a Preloader on Your Site with jQuery

Preloaders (a.k.a. loading animations) are animations that run between page-loads or as your site gathers information. The two most common types of preloaders are the β€˜spinner’ or β€˜status bar’. You’ve likely encountered thousands of these while surfing the web.Check out loading.io to generate your own custom preloader.STEP ONE:...
Get a Preloader on Your Site with jQuery
Select One:

Tony Lea

3 years ago

View Episode

Creating a Sticky HTML Element

In this video I want to show you how to create a basic Sticky HTML element using the CSS fixed position property. You will also learn how to make the element stick when a user scrolls to a specific position.You can check out the demo below of the sticky element that we are going to create in this video here: https://codepen...
Creating a Sticky HTML Element
Select One:

Tony Lea

3 years ago

View Episode

HTML 5 Storage

In this video you'll learn how easy it is to use HTML 5 storage. HTML 5 storage makes it super easy to store key/values in your website or your web application. In many cases you may want to use HTML 5 storage instead of cookies or sessions.We'll teach you how to:
HTML 5 Storage
Select One:

Tony Lea

5 years ago

View Episode

HTML & CSS Intro

In this beginner video we'll show you how to create a simple HTML & CSS page. Using any plain text editor, you can easily create an HTML page in minutes. Open up your plain text editor and drop in the following text:
HTML & CSS Intro
Select One:

Tony Lea

10 years ago

View Post

HTML5 video 101

HTML 5 is the new HTML standard for constructing and building pages to be viewable in web browsers. HTML5 adds a lot of new features that HTML 4 never had a few of these features include local web-app storage, canvas drawing, and the video element. The feature that we are going to briefly discuss in the post is the video element...
Select One:

Tony Lea

10 years ago

View Post

The best way to add rounded corners using CSS and HTML

There are many ways out there to create simple rounded corners in CSS and HTML; however, some of them are combersome and they either take up a lot of code or they require you to use images. The easiest and best way that I have found for adding rounded corners to boxes in CSS (compatible with latest browsers) is the following: Ad...
Select One:

Tony Lea

11 years ago

View Post

HTML Clear Default Text in input text box

After several times of searching for a solution for clearing the default text from an HTML input text box several times and coming up with good results; however, some incompatible with some browsers. I had found some that worked well with all browsers; however, they had some cumbersome javascript files that I had to include. Ins...
Select One:

Loading More Content

Back to DevDojo