Telegram Group Join Now
Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Coding Art With HTML ,CSS And Java script.The Coding art is created with shapes that is done by CSS along with JS. So Here we create the same project by adding required source codes.
Coding Art Using HTML , CSS and JAVASCRIPT
So Now We are going to create this project and for that we were adding the HTML code first.
HTML CODE For Coding Art
<html> <head> <meta charset="utf-8"> </head> <body> <p>This uses html symbol encoding: <span class="big">▦</span></p> <p>Let's make a symbol of one color: <span class="big color1">▶</span></p> <p>And another of another color: <span class="big color2">◆</span></p> <span class="big">▦</span> <sup><sup><span class="med color1">▶</span></sup></sup><span class="big color2">◆</span> </body> </html>
ADVERTISEMENT
First We are creating an paragraph tag and inside paragraph we are adding an span tag with class name big and the shape is represented by this code(▦).
Likewise we are creating three contents with three different shapes but the class name were differ.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Again we are adding this shapes separately by using the span tags.
Now the paragraph and shapes were added using the HTML code. So we add some CSS properties to the shapes presented.
CSS CODE For Coding Art
.big {font-size: 78px;}
.med{font-size: 48px;}
.small{font-size: 30px;}
.color1 {
color: #f00;
}
.color2 {
color: #00f;
}
The CSS presented here consists of smaller lines of code. Simply calling out the class names and adding font-sizes to it. and lastly calling out paragraph class and adding some colors to it.
So that’s of for CSS , Now We lastly adding some JS to return the shapes with contents.
JAVASCRIPT CODE For Coding Art
function main() {
return;
}
Now We have Added our Source codes for our project So The project is now ended but you can preview the project given in the below Output Section.
FINAL OUTPUT Of Coding Art
Now We have Successfully created our Coding Art using HTML ,CSS and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
Weather App Using Html,Css And Javascript (Weather App Source Code )
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
REFER CODE – Steven H Cullinane
WRITTEN BY – Ragunathan S
