Html
Html posts, videos, courses, and more
5 CSS Best Practices every front-end Developer should know
Writing CSS has always been tough for me😭. But here are some best practices every front-end developer should know.
Without further talks, let's see them.
Using the vendor prefixes
Vendor prefixed is a way for the browser to add support for new CSS features before those features are fully supported in all browsers/ We need to ad...
6
Select One:
15 beginner only HTML and CSS mistakes
I have rounded up some of the HTML and CSS Mistakes I've made and you don't have to. These are some beginner mistakes, don't judge me😂.
HTML MISTAKES
No matter what stack or framework you use, it all compiled to HTML in your browser. Therefore, it's important to make sure it's right! This list highlights top HTML mistake and ho...
9
Select One:
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...
8
Select One:
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...
10
Select One:
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...
7
Select One:
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...
7
Select One:
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...
6
Select One:
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...
4
Select One:
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...
1
Select One:
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...
4
Select One:
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...
3
Select One:
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...
9
Select One:
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...
8
Select One:
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:
8
Select One:
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...
2
Select One:
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:
3
Select One:
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...
1
Select One:
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:...
Select One:
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...
Select One:
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:
Select One:
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:
Select One:
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:
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:
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
