cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Next, go...

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 much...

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' theme-id='8082'...

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?

BootSplat!

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 as...

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.

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

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也能做出頁籤功能

先看看Demo:

Scifi-style Radio-based Tab

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

CSS Puzzle - Episode 1

Preface

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.


Process

Our experience design team (known internally as...

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 Examples...

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 page...

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.

[[[pen slug-hash='XmreZx'...

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 containing...

<meta name="viewport"> for 2015 (and 2016) (so far, also 2017)

  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

Each declaration is important.

Oh boy more iOS Safari undocumented...

Carrom Board

<!DOCTYPE html>

Carrom Board

Carrom Board

<!DOCTYPE html>

Carrom Board

Pure HTML/CSS Slide show

QjxYVy

  <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

Introduction

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!


KdjEQq

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

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

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 answer all these questions, and more.

An...

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}]]>

<!--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...

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....

Reacting

I've always heard how useful and amazing CodePen is. So, I figured it was time to get involved. One to receive great ideas and be part of an awesome community. The other reason is that CodePen...

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 at the Inner Temple,...

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 :)

akyyVb

<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 web...

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. I...

Create a resizable iframe easily using only css

How to create a resizable <iframe>?

Since directly adding resize:both to the <iframe> doesn't work, we have to use a "hack".

Since width:100% and height:100% will take up...

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

Paragraph

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

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
  <style>

.growwrap img { transition: all 2s ease-in-out; transform-origin: center; -webkit-transform-origin: center; padding-top:50px;}...

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

Objective

Structure

Styles

Code

Objective

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 press the...

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 thought...

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...

How to build a Calculator in simple steps

JNPLOY

Here is a simple HTML and css calculator

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

Introduction...

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.

HTML

  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 with CSS/SCSS

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 us...

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 the...