Posts tagged html

Top 10 Reasons To Learn Web Development

Today I want to get into some very good reasons why I chose to teach myself front end web development. If you're looking for a way out of that job you don't like, or are looking for the perfect...

How I Learned HTML/CSS And Bootstrap With Confidence

After deciding to teach myself how to code websites I bought a book on the subject, quickly read through it and dove into the codecademy tuturials. Soon after finishing that I bought another book,...

MailChimp Templates

templates' class="post-image

So things are moving right along, and have the signup eBook download process working the way I'd like. Works fine with my testing anyway, hopefully when/if people...

An introduction

Hi and welcome! First an explanation of what this is. A blog yes, sort of, not really. It's a codepen blog. which means it is geared specifically towards code and code snippets often of the web...

Block and Inline Level Tag Examples

Go to codepen.io and log into your account.

Next, go to the button icon at the far right top corner and select the "New pen" option.

Next, in the HTML pane, add three block-level tags of...

Selector Weight

This is a quick exercise that demonstrates the different weight values of the three main CSS selector types, tag, class, and id, by targeting the same html tag with each of them.

Go to codepen.io...

Clearing Floats

This exercise that demonstrates the use of the clear property to prevent a containing HTML element from collapsing due to nested floated elements.

Go to codepen.io and log into your account.


Popup windows without JavaScript

The other day I had this crazy idea. Popup/modal windows used in modern web design require JavaScript to be enabled in order to function. I wondered if you could get it working without JavaScript....

Popup windows without JavaScript, mark II

Some time ago, I wrote about how to make a popup window without JavaScript. Someone left this comment:

Keep in mind that this seriously **** up your history (and therefore your back button) – a...

Eye Ball Popping HTML

Feels like my eyes are going to pop out of my head. I don't mean that in a good way.

I'm working on converting a 9 page form, currently in a Word doc, to HTML and it's popping my eyes...

South American Ghosts

South America Earthquakes Spring 2014

South American Ghosts

Where our lives changed forever, like we never made it home...

[[[pen slug-hash='sqCac' height='300'...

window.onload() vs $(document).ready()

$(document).ready(): will run your code when the HTML is all ready, but before images and other resources have finished. This is the earliest possible time that you can change the DOM with...

WTF is a BootSplat vs a Bootstrap?


A Visual Reference

So WTF is a BootSplat?

We all know there's a difference between a "Splash Page" and well, a "Splat" page it comes down to laziness often, but...

A New Beginning

I have never wrote a blog post before so this will be the first! I recently read a post by Rachel Smith called “Last Year I Joined CodePen. What Happened Next Will Blow You Away.” (great name by...

First coding project!

This is the very first thing I ever coded. It's still my favorite!

Centering of elements in HTML

The last days I was busy with writing an article on the vertical centering of HTML elements. This issue which seems simple at first, in fact is very complicated in cases a lot of problems for the...

Dr.Pot V1.0 beta

Hey guys we hope you like Dr.Pot we have some problems but it is still beta and we will come out with some more updates my partner is Austin Lancaster we are working together to make a game that...

Sup and Sub

 Sup :  Superscript

X 2 + Y 2 = Z 2

 Sub :  Subscript 

X 2 + Y 2 = Z 2

처음배우는 HTML, CSS - PART.3

처음배우는 HTML, CSS 마지막 수업에 사용된 첫번째 샘플

Sample Page 01


hello everyone. my name is ishh, and i want to show you my skills and how i got introduced to css and html and javascript coding. how i was introduced to it is by my best friend. we're talking...

JavaScript HTML-Finding Addition,Subtration,Multiplication and Division of Two Numbers

To Find the value of Addition, Subtraction, Multiplication & Division of Two Numbers <![CDATA[ function p1() { var a,b,c; a=document.myform1.n1.value; a=parseInt(a) b=document.myform1.n2.value;...</head></html>]]>

How do you mark up a comic?

Say I want to provide transcriptions of a comic to my site visitors, or maybe I'm making a comic with SVG. How best should I mark things up to make the meaning clear to assistive technology,...

善用CSS偽類別與Radio button,不用JS也能做出頁籤功能


Scifi-style Radio-based Tab

講到頁籤(Tabs)功能時,大多會想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery實作的(其實網路上有很多用jQuery開發的Tab UI);但其實不用jQuery或JavaScript技術,...

CSS Puzzle - Episode 1


I've been working for Vodori for almost two years now, and I've come across some crazy CSS puzzles. This one is no exception.


Our experience design team (known internally...

Vodori Retrospective

My departure

I've had a great run here at Vodori. I've been here for a year and change. My role evolved from "markup producer" to nearly full-fledged "front-end...

Jquery Examples

Jquery Example

In this post there are really cool JQuery examples that you'll certainly find interesting and useful.

Below is the list of very cool JQuery example:

Magic Header

JavaScript Tutorials

JavaScript Tutorial

In this post, I'll put Mr. Adam Khoury's JavaScript tutorial videos. From start to end.

Below is the list of very cool JQuery example:

01 - Fullscreen API JavaScript Code...

how to make a HTML Web Browser not working

first copy and past this code into a html editor and save it as .html

click here for html code

copy and past this code into a css editor and save it as .css

click here for css code

and the finale...

Responsive Squircle

After spending a few hours looking for a responsive squircle code I decided to give it a try. Here's what came out of it.

It will looks good from 30px to 200px.


Web Design as an Intro. to Programming

Last year I was re-introduced to web design and development while a few friends and I decided to run our own Minecraft server out of boredom. At the start I had no idea what I was doing as the...

Divs and spans

Go to codepen.io and log into your account.

Next, go to the button icon at the far right top corner and select the "New pen" option.

Next, in the HTML pane, add an unordered list...

<meta name="viewport"> for 2019

  <meta name="viewport" content="width=device-width,initial-scale=1"> 

shrink-to-fit is dead

If your users don’t run iOS 9.0–9.2, then you can omit shrink-to-fit=no...

Carrom Board

<!DOCTYPE html>

Carrom Board

Carrom Board

<!DOCTYPE html>

Carrom Board

Pure HTML/CSS Slide show


  <ul id=banner> <li class=slide-1></li> <li class=slide-2></li> <li...

r8a's e-portfolio Duke U HTML/CSS/JS 101

1st Exercise - CG generated image using JS

Duke e-portfolio exercise 1

2nd Exercise - CG modification to existing image using JS [[[pen slug-hash='bVxPWG'...

Como deixar altura 100% com CSS

Como vocês já devem ter percebido posicionar um elemento com width: 100% é fácil e simples, tudo as mil maravilhas, mas quando se quer uma altura 100% ou seja o height, começa a dor de cabeça para...

Is <div> obsolete?

With Custom Elements, we get an official way to name our own elements that are guaranteed not to clash with future HTML:


Tutorial: Create ruler using Flexbox layout


Flexbox coming with CCS3 is an useful, handy way to do layouts in CSS. Learning using flexbox is pretty simple and you can find out a bunch of resource to learn this. In this post, I...

Don't misuse the calc() CSS function!

Lately I've been using calc() more and more, but here's the thing: using calc() excessively is wrong, and using calc() for things that it is not supposed to is also wrong. Wrong as in using...

Challenging the Web Gods and the Status-Quo

Welcome to our website! We hope you enjoy the slick image covering the entire screen. See the brightly colored call-to-action button? Yeah, that’s right, the Sunbaked Terracotta one. Go ahead and...

Зважені та щасливі

Знаменита вага з передачі "Зважені та щасливі"

Зважені та щасливі

CSS Background-Image Hover Effects

Getting the CSS Hover to Work was Fun!


It works by using a combination of rgba and opacity, which gives us access to two different layers...

Naming HTML data attributes

Originally posted on CodeHive

I did not know this about how HTML data attributes should be named. That capitalization shouldn't be used. I discovered this when I named a data attribute with a...

6 Atom Packages every front end dev should have

Atom from Github is rapidly becoming the text editor of choice with front end developers nowadays possibly because it's been developed with technologies we are familiar with such as HTML, CSS...

JS in forms

<form> <label <input>

  <form> <label for="name">Name</label> <input type="text" id="name" name="name"><br/>...

#4 React drops

Let's create some composed components and pass data between them.

Create a single component is easy, compose components is even easier. Each React component returns one component on render,...

An Overview of HTML5 Semantics

This was originally published Jan 5, 2016.

An Overview of HTML5 Semantics

What are HTML5 semantics and why should we use them? What is divitis and why shouldn’t we use it? This post is meant to...

HTML Email that updates itself

You know what sucks? Developing emails. This is one email project done for Garmin that I tried having some fun on, and made a bit more interesting by adding dynamic images too.

The idea

We wanted...

A Growing Appreciation for the Frustration with <table>

Admittedly this is my attempt at getting some exposure to the dev community and sharing my experiences with tables.

And with a begrudging smile I say I've found someone who summed up my...

#6 React drops

Let's create some selects, React make things very easy for us!

Starting with a fixed select, we can do something like this:

  var Valor = React.createClass({ render: function() { return (...

#7 React drops

Create an element with a conditional attribute is very useful sometimes.

In React, do this is very simple:

  <input type="text" {...condition ? {disabled: 'disabled'} : {}}...

An Introduction to HTML

Web pages are written in three languages: HTML, CSS, and JavaScript. Today we are going to talk about HTML, the foundation of the web.

HTML isn't difficult to learn, it's not even hard. In...

head in html

<!DOCTYPE html>

hello <![CDATA[p{color:red}]]>

<![CDATA[ alert (&quot;hello in my world&quot;); ]]> <!--comment -->

this is p

On using Jade

I spent the day working off of a template I found here - you can see my work in the pen called Sliding Panels Template - Jaded.

I knew I wasn't going to reinvent the wheel by following along...

Counter issue for Poison

I am having an issue getting the Poison counter to say "Dead" when it reaches '10'. I have gotten it to stop at '10' but does not change to "Dead". I want it to...

Simple SVG Animation

The simplest way to animate SVG with just CSS!

SVG File

First off, prepare the SVG file you would like to use. In this case I'm going to use SAYS logo. You can get the SVG code from opening the...

What's up with <Q>?

The inline quotation element is rarely used, probably because typing "" is a lot easier than <q></q>. It’s even rarer that anybody styles it, and if translators/assistive...

The current state of web forms

Or: ‘Why UI libraries exist’

In working with web forms, the same sorts of edge cases seem to appear repeatedly, and (at least) I find myself waffling on how to approach them with JavaScript.

I feel...

How to choose the right framework for the job

Welp, no one has ever talked about this, right? Just kidding...

A quick Google search on 'choosing web framework'

That being said, I want to talk about the "how to choose" rather...

Dribbble 30 days UI Challenge

by Kalpesh in UI at 23/05/2016

Hello developers,

Few months ago, I have decided to wake up at 6:00 in the morning. The main goal was to learn and code. I have followed this routine quite regularly....

Learning How To React

Came To A Conclusion

I ran into a little problem. I understood enough HTML to markup any page. I may not be a JavaScript master but simple interactions or behaviors aren’t a difficult task for me...

Mahatma Gandhi

The father of the Nation

Here is the timeline of his life:

1869- He was born and raised in a Hindu merchant caste family in coastal Gujarat, western India, and trained in law...

Parsing the JSON object array and build an HTML List

One of my friend is learning jQuery and JavaScript and asked me How to create a Dynamic HTML un-orderd list where the list template is provided and has to be build up using the data from the json...

the hidden tiger magical lion club

My own design of this project and hope you'll like it :)


<abbr> Is Broken. Let’s Fix It!

There are many problems with <abbr>.

It’s a point-and-click relic. Touchscreens can’t access it, not even Android or iOS with mice plugged in. Keyboards and assistive switch controls have...

Son do you know Emmet ?

Quick explanation :

let's say you need to write down the following HTML code:

  <div class="row"> <div class="col-md-6"></div> <div...

Minecraft in SCSS

I love Minecraft. Almost as much as I love web development. The other day I saw a beautiful low-poly CodePen someone made in SASS, and naturally I looked at the code and saw that it was made in...

I think I found my frontend Niche' or what they call it :D

So basically, I am pretty bad at writing so I apologize in advance.

I am not "professionally" a frontend designer but I hope to be someday. In this journey to a frontend developer job, I...

Hello World

hellow world

Death to the 'for' attribute

We've got a problem.

HTML forms are the life blood of data on the web. They've allowed us to post custom data around our fantastic online world since day one of the mainstream world wide...

Isometric Pure-CSS Server

Isometric Server

Credit for server design goes to Csaba Gyulai, check out the original artwork, Thought it would be fun to re-make...

I'm learning how to code, again.

Hello World!

So I'm learning how to code, again. Why again?

Well, I started at univesity, while I was studying Physics in Italy. I remember a big desktop computer, Red Hat as operating system....

Integrate Google Prettify in Your Website

Google prettify if one the best syntax highlighter ever. Its very light weight and easy to integrate with your website. Google Prettify also provides set of skins that you can use for code...

How to use image-map in html

A <map> element define the client side image-map. Image-map is a image with different-different clickable area. <map> element have a required attribute name. <map>'s name...

First post!

Hello World!

Here is my first codePen post and a Kurt Cobain tribute page, please enjoy the code.

Edmunds Api Sample 1

Sample for consume the EDMUNDS.com API

Learn Pug.js with Pugs

Now Entering Pugspace

a super entranced pug

You've entered a world unlike your own. A world where pugs roam free and HTML can be written like the snip snappy sharp human you are. That extremely...

Simple and Basic Html Tags

Heading Sizes

Heading 6

Heading 5

Heading 4

Heading 3

Heading 2

Heading 1


Pellentesque habitant morbi tristique senectus et netu s et malesuada fames ac turpis egestas. Vestibulum tortor...

Como alinhar elementos verticalmente sem gambiarras e compatível com os navegadores?

Olá jovens programadores, alinhar elementos na pagina pode ser um pouco complicado para quem não tem muita experiência com css, quando eu comecei meu grande problema era alinhar elementos...

Basic CSS for HTML Beginners

We can use some Basic (Global) CSS for our website, which help us to handle many element automatically. For eg:- If you are using Bootstrap for your project then for all the Images you have to use...

Html - Simple Sentence Statement

Simple sentence statement

This is a simple sentence created using HTML!

Como criar um wireframe ?

Antes de começar a decidir cores e tipografia para o projeto é bem mais aconselhável que você desenhe e rabisque o seu primeiro wireframe, você pode usar papel e caneta ou algum software de desenho...

HTML5 <footer> element

<footer> element:As per the HTML5 rule the footer of any website should only contain some links,author inforamtion and the copyright and it must not contain any important information like the...

War Z 2?

You gotta be kidding me. A sequel to Last Empire War Z? Well, let's see how we gonna extend it.

Grow Image On Hover Code

<!doctype html>

Zero Vectors | Grow Image On Hover

.growwrap img { transition: all 2s ease-in-out; transform-origin: center; -webkit-transform-origin: center;...

Social Media Sidebars

Disclaimer: The hover mechanic MIGHT not work on certain browsers because of the 'opacity' CSS tag. I have only tested this on Firefox. Sorry for the inconvenience.

Click Here for the fill...

Tutorial: Edit in Place

Table of Contents






Make an editable label. When the label is clicked, a textbox shows up allowing the user to edit the label. To edit, the user has to...

Passion is Initiative

Delving into the Computer Science major has made it easy to become sidetracked from what originally brought me into the field -- my love for technologic visuals. With mandatory courses...

Coder? Developer? We're all the same!!

I love coding. Its fun and creative and you can do as much or as little with the tools it gives you. But theres something about it that I don’t like. Egos. The overbearing egotistical twats who...

Курс HTML-вёрстка: с нуля до первого макета

Как быстро найти работу и застраховать себя от кризиса?

Займитесь HTML-вёрсткой! Средняя зарплата верстальщика колеблется от 50 до 70 тысяч рублей. Помимо этого, знания вёрстки пригодятся сетевым...

Some Thoughts

I've been busy lately so I'd forgotten to post here. My apologies!! But I'd like to briefly tough on something. Namely jobs. Now when I started to learn to code over a year ago I...

Rainbow Egg Loader

This is a simple loader that moves rainbow colors across an egg shape.

Rainbow Egg Loader

Learn Twig with Trees

Galloping for Justice

Cute little monkeys on riding off into the distance

From atop our magnificent trees we can see beyond the horizon. This new sight, found through the mastery of twig, opens our...

Simple Contact Form in Symfony

This post was originally published at Cloudways: Create A Contact Form In Symfony With SwiftMailer

I will start with the development of the contact form. For the purpose of this article, I have...

Reverse Engineering Project Compass

My personal reflection answer to my Udacity Intro to Programming Course Stage 5 (Discover your Path).

  <!DOCTYPE html> <html lang="en"> <head> <meta...

Onclick in pure HTML/ CSS


You've probably tried the :active pseudo selector and found that the styling is only given when the user is holding the mouse down. And so it is that it's not a very great...

Code Valentines

I made a bunch of goofy code joke Valentines for 2017, and figured I might as well post them here.


  You’re such &acute; that I can’t escape you 
  <link rel="canonical attachment...

Flip Card Name

<!DOCTYPE html>

Dwiki Ikhwan's Card Name
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> <link...

Store and Retrieve Cookies

This is how to use cookies. The CodePen link is here. First you want to make a function that retrieves the text from a input field and stores it in a cookie. You can call it whatever you want, but...


BEM (Block Element Modifier) is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more...

Anime #CSS Rilis

.rilis { overflow: hidden; } .rilis h1 { font-size: 20px; border-bottom: 4px solid #DDD; padding-bottom: 5px; text-align: center; color: #555; text-transform: uppercase; } .schlist { float: left;...

A Tiny, Full-Stack Feature (Part 1)

A Tiny, Full-Stack Feature (Part 1)

A Tiny, Full-Stack Feature (Part 2)

A Tiny, Full-Stack Feature (Part 3)

Many web developers are likely familiar with the general concept of CRUD. Yet, many of...

Collapse Button not working

Hey guys im trying to get this menu up and running for my portfolio page but the button to allow you to view the menu in small screen is not dropping down. I have looked over my code and cant...

Responsive HTML Tables

If you have ever built a webpage that includes a wide HTML table, you have likely ran into the problem of how to make it display in a usable way on various common view port sizes. I have researched...

Udacity Front end web dev - Mockup to HTML Article

<!DOCTYPE html>

Humans vs Machines Blog <!-- This was adapted from: http://blog.udacity.com/2016/03/humans-vs-machines-an-ai-odyssey-2.html --> <!-- Format this text to match...

Why I use <fieldset>s

Why I use <fieldset>s

The <fieldset> element confused me when I first found out about it, so I shied away from using it. I have since learnt how to fully utilize this element, and I...

Starting FreeCodeCamp

Just started going through the FrontEnd Developers Certificat at FreeCodeCamp.org

My aim is to learn some new skills that I can use in my job responsibilities at Ride with GPS but also in my...

GridBox Animation

See the Pen GridBox Animation by K.C.Ashish Kumar (@kcak11) on CodePen.

Semantic, single-element loading spinners with HTML & CSS



That’s it.

If there’s no value attribute on the <progress> element, it’s defined as:

[…]indeterminate, indicating that progress is being made but...

PopUp simple, sólo HTML y CSS, sin JavaScript

PopUp simple, sólo HTML y CSS, sin JavaScript

PopUp 1

Title 1

Text 1

PopUp 2

Title 2

Text 2

Tecnologias Para Internet II

Aula1 - Evento "onClick"

Usamos o evento onClick em uma tag(HTML) para que seja possível capturar o evento de "click" criado pela função fuiClicado(). Por fim, adicionamos um ...

Sweating the Details: Telephone Links

I code my telephone number links like this:

  <!-- for the number 1-555-123-4567 --> <a href="tel:+1(555)123-4567"> 1&numsp;(555)&numsp;123&#8210;4567 </a> 


Hi, I'm Ethan

I'm new to CodePen, somebody introduced it to me when I complained that everything on my school assigned Chromebook is blocked. I'm an aspiring web developer and I'll most likely be...

Overlapping divs with browser resizing

"With CSS, if you remove the redundant height setting on the div then the divs won't overlap. If you don't want the divs to reposition on smaller windows, then set a minimum width on...

water shape css wave

  <div class="waveWrapper waveAnimation"> 

Waffle-grid in plain HTML

We have great documentation written for Waffle-grid library. Even so, from the documentation we cannot really see what it capable of at very first glance at the docs.

Here I added a example as a...

1st month of learning to code

Ok, I decided to try web-dev on 21st of March, so I have like 4 days left until my first month of self-learning is over.

What did I do so far:

I installed Sololearn app,

I attended one online...

Semantics Schemantics

Warning this is a bit of a rant!

So, check out the Pen below.

Two Red Boxes

There's some boxes. They mainly look the same....

Hacking mikrotik routers with: dëmi


Mikrotik Auto Exploiter using BigNerd95 Chimay-Red (Working POC of Mikrotik exploit from Vault 7 CIA Leaks)


Clone repository: git clone https://github.com/adalenv/demi.git

cd to demi: ...

CSS Only Tabs

Tab 1

Tab 2

Tab 3

Tab 1 content
Tab 2 content
Tab 3 content

Semantic HTML for Colors

One thing that design systems, style guides, and, uh I guess the content of your website if you sell paint all do at some point is display the colors available in a palette.

Usually with <div...

A Drag & Drop example with React and HTML5 API


Recently, in one of my React project, I needed to add a Drag and Drop (D&D) feature to allow my users to manually sort a default list of data boxes (Stock Exchange data) in order...

06/08/2018 Ironman Tribute Page

Hi, It's Ben here. I am just starting out again with Web Developing. It's cliche but I will be using Codepen for the HTML/CSS/Javascript projects that I do with Free Code Camp. It's...

Animated Social Icons using CSS

In this article you will get source code of animating social icons designed using CSS and HTML. I you want to watch video on YouTube then scroll down and click on link given.

Source code :


Separators Inside <select>

So the design calls for a separator between options in a <select> menu.

How hard could that be?

The fake <option> approach

This is what you usually see on StackOverflow:

  <!-- This...

How to: flux, parent, enfant, frère


Document Object Model. Structure logique d’un document.


En HTML, les éléments (balises) sont placés les uns après les autres. C’est le flux que l’on pourrait qualifier de naturel. Par...

How to: sémantique


Les div servent notamment à délimiter des zones de pages. Les div sont utilisés pour grouper de éléments block et les formater avec du CSS. Le div regroupe du contenu sans aucune signification...

How to: Position


Comme son nom l’indique, la propriété position permet de gérer les positions des éléments. Lorsque le flux naturel ne suffit plus, il est possible d’utiliser position pour gérer la mise en...

How to: Sélecteurs

Les différents types de sélecteurs

En CSS, il est possible de sélectionner des éléments html via différents types de sélecteurs:

Les sélecteurs de type

Permettent de sélectionner des éléments en...

Laazy cartoon spanner

hey checkout my cartoony spanner ,

Lazy cartoon spanner



simple way to do an Accordian

In a rut and don't feel confident

I'm in a coding rut. I can't think of any ideas for coding projects that seem interesting.

Probably what is contributing to this is my frustrations with JavaScript. Basically I can't...

Think BEM is too ugly? Intoducing BEM-lite

Most CSS developers are probably aware of BEM (Block, Element, Modifier) syntax and its benefit of producing maintainable, object-oriented styles. But many of those CSS developers don't like...

Web Sockets

Web Sockets


What are web sockets?

From MDN:

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's...

Check out these sites!

A list of useful sites i use and i suggest you check them out. Will be updated over time

Font Awesome: Thousands of high-quality icons for HTML

Canva: Free online graphic deisgn

CSS3 Transitions:...

Let's Build: With JavaScript - HTML5 Video Player


Welcome to the next installment to my Let's Build: With JavaScript series. This tutorial teaches you how to create, customize, and manipulate an HTML5 video...

Grid,Flex and Css_Pattern 组合学习

Grid, Flex, and background patterns(第一弹模仿代码)




利用css 的border属性 设置边框的粗细和颜色来制作三角形

把边框内的大小设置为0, 计算块的大小,设置边框 其余使用transparent属性, 可以制作任意形状的三角形 详情见style-2,...

My journey into coding

Well, I would say that it's been quite a journey. I have learned so much in terms of how to put a website together from scratch

The main thing here is perseverance and motivation. There are...

Js Canvas

Canvas's are just what it says it is a canvas for Js. Here is a link where I learned about canvas's:



list are organization tools of your code. you can make them with


CSS Animation Tutorial: A Cute Sleepy Ghost

Hey all! I wanted to share a ghost animation I made earlier this month for the CodePen Ghost Challenge. It’s a simple animation but here are the steps with some explanation. (Yay Web Tutorial...

Code That You Just Never Ever Need to Write

The aim of this blog post is to point out some of the often overlooked syntax features already present in HTML and CSS that can make writing code easier. People sometimes reach for things like...

Pseudoelements don't really work with inline elements... or do they?

The title sounds like an obvious and well-known CSS fact, but I have seen experienced developers struggling with this topic, advising me to create overlays on images with pseudoelements. I was...

UI Constructor - change design into HTML and CSS code !

UI Constructor is a tool that allows you to easily change the visual version of a website or other project to clean and semantic html and css code.

The idea of creating UI Constructor was created...

The Basic Lazy Load (ft. Images & IFrames)

bLazy, Echo.js, Yet Another Lazy Loader, jQuery / Wordpress plugins are some of the many libraries designed to speed up initial load, reduce data usage, lighten server load as well as provide a...

Using MicroXML in JavaScript

reference: dvcs.w3.org/hg/microxml/raw-file/tip/spec/microxml.html

Here's a brief description of the parts we'll be talking about:

  element := a list containing <tag>...


<!DOCTYPE html>

   <title>ABIMBOLA FALODUN VENTURES AND COMMUNICATION AGENCY</title> <link rel="stylesheet" href="style.css"> <meta...

A Case for Web Accessibility

One would think that by 2019, the argument about the necessity of implementing Web Accessibility would be over, that everyone would agree that Web Accessibility is fundamental, that it would be the...

Override inline !important

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content...

All of the HTML codes



SVG Head

<!DOCTYPE html>

  <meta charset="UTF-8"> <title>Welcome to SVG</title> 

 <g class="beard-group"> <path class="beard"...

Fix 85% of your Web Accessibility issues in 5 easy steps

In a previous post, we saw the importance of Web Accessibility and mentioned The WebAIM Million, an analysis by WebAIM on the current state of Web Accessibility of 1 million popular pages.


Angular Count

!DOCTYPE html>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6. <div ng-init="quantity=1;price=5"> 

Quantity: Costs:

Total in dollar: {{ quantity *...

Feedback on first project (tribute page)

Hello everyone!

I'm just starting out on HTML and CSS (less than a week ago).

I would love constructive feedback on my code too see how I could improve, what I missed, or what I over...


<!DOCTYPE html>

<title>Omnifood</title> </head> <body> <header> <nav> <div class="row"> <img...

Animated nav - Widget of the Week 1

Last week I got an email from medium about someone recreating gif widgets weekly. He uses all these fancy libraries like vue.js and tweenmax that I have no intent in putting in my sites just for...

Pause youtube video when clicking on another youtube video

   <script src="https://code.jquery.com/jquery-1.8.3.js"></script> <div class="video_wrapper video_wrapper_full js-videoWrapper"> <iframe...

Recreating the iPad Commercial Animation with CSS

Browsing the Internet, I saw the commercial for the new iPad Pro, and I really liked the animated words at the beginning:

I tried to recreate a similar animation just using HTML and CSS, and it...

CSS games are fun!

CSS games (small games developed exclusively with CSS and HTML, without any JavaScript) are often dismissed by developers as a waste of time. And they may have a point if you consider performance...

jquery if .hasClass not working

Hi, this seems really simple and have used this many times, but for the life of me cannot figure out what im doing wrong in this simple situation. https://codepen.io/jeremydricard/pen/NVBOdw


Spiceworks Meet the Team

Within spiceworks you are not allowed to post HTML/CSS side by side so i made an HTML with the style sheet within it. It looks really nice on the page. Unfortunately the background is white so i...

First freeCodeCamp Project - Tribute Page

I recently completed my first freeCodeCamp project and would love some feedback.

I knew some basic HTML and CSS before but then started learning and working with Python. I took a few courses on...

Notes App

Nice example of the usage of local storage API.


Angular 8

Angular 8 released with it greate feature set such as.

TypeScript 3.4.

Preview of Ivy.

CLI workflow improvements.

Web workers.

Dynamic imports for lazy routes.

Differential loading.

Improvement of...

Get started with headless web

Get started with headless web

Chances are you have or will hear a lot about headless web during this year. To put it simply smart things or content provided to you in the cloud. Typically you...

Create a carousel without Javascript

Create a carousel / slideshow without Javascript

There are many installable slideshows out there like owl, glide.js, bootstrap js and a bunch of others but all these needs some kind of...

Creating Lined Paper


My goal of this tutorial is to keep things as plain as possible so that it might be easier for beginning developers, and developers who may not have worked with my specific stack, to...

The Deepest Secret of CSS

This is my first Blog Post.I'm excited to share with you.


<!DOCTYPE html>

<!-- meta --> <!-- title --> The Code Review <!--css--> <!--fonts-->


The Code Review

<!-- Newsletter Form -->...

Flashlight Effect on Mousemove

How Do Flashlight Effect on Mousemove

1.use any image

2. make div foucs

3. use css background:radial-gradient

4. use javascript mousemove event

you can see pen

Emulate JS onclick with CSS

Since JavaScript became popular, we started to use it more and more as a solution for most of our problems. However, it's good practice to try to use CSS as first solution also because...