Posts

Showing posts from 2018

Play and Learn HTML5

Image
Play and Learn HTML5 Study and Play HTML5 with these fun games and study tools Choose a Study Mode at the bottom of game will allow more game types and options. More Free HTML5 Study Games HTML5 Hangman HTML5 Crossword HTML5 Scramble Game                

Free Travel Website Template

Image
Free Travel Template by w3 "W3.CSS Website Templates We have created some responsive W3.CSS website templates for you to use. You are free to modify, save, share, and use them in all your projects." Source Code <!DOCTYPE html> <html> <title>W3.CSS Template</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif} .myLink {display: none} </style>

Bootstrap Header Video Template

Image
Bootstrap Video Header for your Website Source Code <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/ bootstrap.bundle.min.js"> </script> <style> header { position : relative; background-color : black; height : 75vh ; min-height : 25rem ; width : 100% ; overflow : hidden; } header video { position : absolute; top : 50% ; left : 50% ; min-width : 100% ; min-height : 100% ; width : auto; height : auto; z-index : 0 ; -ms-transform : translateX (-50%) translateY (-50%); -moz-transform : translateX (-50%) translateY (-50%); -webkit-transform : translateX (-50%) translateY (-50%); transform : translateX (-50%) translateY (-50%); } head

Free Flexbox Website Layout 2

Image
Flexbox Website Layout 2 Source Code <!doctype html> <title>Example</title> <style>   * {     box-sizing: border-box;    }   body {     display: flex;     min-height: 100vh;     flex-direction: row;     margin: 0;   }   .col-1 {     background: #D7E8D4;     flex: 1;   }   .col-2 {     display: flex;     flex-direction: column;     flex: 5;   }   .content {     display: flex;     flex-direction: row;   }   .content > article {     flex: 3;     min-height: 60vh;   }   .content > aside {     background: beige;     flex: 1;   }   header, footer {     background: yellowgreen;     height: 20vh;   }   header, footer, article, nav, aside {     padding: 1em;   } </style> <body>   <nav class="col-1">Nav</nav>   <div class="col-2">   <header>Header</header>     <main class="content&qu

Free CSS Responsive Grid Template 2

Image
CSS Responsive Grid Template 2 Source Code <!doctype html> <title>CSS Grid Template 2</title> <style> body {    display: grid;   grid-template-areas:      "header header header"     "nav article ads"     "footer footer footer";   grid-template-rows: 80px 1fr 70px;     grid-template-columns: 20% 1fr 15%;   grid-row-gap: 10px;   grid-column-gap: 10px;   height: 100vh;   margin: 0;   }   header, footer, article, nav, div {   padding: 1.2em;   background: gold;   } #pageHeader {   grid-area: header;   } #pageFooter {   grid-area: footer;   } #mainArticle {    grid-area: article;         } #mainNav {    grid-area: nav;    } #siteAds {    grid-area: ads;    }  /* Stack the layout on small devices/viewports. */ @media all and (max-width: 575px) {   body {      grid-template-areas:        "header"       "article"  

Python Turtle Swirl

Image
Python GUI Turtle Swirl  Adapt, Edit and Create your own Groovy Python Turtle Codes. Source Code import turtle t=turtle.Turtle() wn = turtle.Screen()          wn.bgcolor("lightblue")  t.hideturtle() t.up() t.setpos(0,170) t.down() t.write("Python Swirl",move=True,align="center",font=("Cursive",30,"normal")) t.up() t.setpos(0,0) t.down() t.pensize(7) t.speed(0) colors=["blue","purple","red","yellow","hotpink","green"] for x in range(201):     t.color(colors[x%6])     t.fd(x)     t.left(85) Learn more about Python Turtle with this fun Tutorial Turtle Power Find More Python and Turtle Codes  Python GUI Fun with Turtle Free Code Examples Python Codes

Python GUI Fun with Turtle

Image
Python GUI Visual Python with Turtle You can adapt and edit this fun code to see the beautiful results. Create and run your own visual Python Codes. Source Code import turtle t=turtle.Turtle() wn = turtle.Screen()            wn.bgcolor("lightblue")    t.hideturtle() t.up() t.setpos(0,150) t.down() t.write("Cool Python Codes",move=True,align="center",font=("cursive",30,"normal")) t.up()   t.setpos(0,0) t.down() colors=["blue","purple","red","yellow","orange","green"] for x in range(300):     t.color(colors[x%6])     t.fd(x)     t.left(59) t.screen.exitonclick() t.screen.mainloop()  Learn more about Python Turtle try this awesome Tutorial. coolpythoncodes.com

Featuring Tutorialspoint IDE and Tutorials

Featuring Codingground Free Online IDE Codingground is a free online IDE provided by Tutorialspoint for writing, sharing, and testing codes in 75 of the most popular Programming Languages. Simply scroll to the terminal you want click then run and test your codes. You can also access the Tutorialspoint home page by tapping the codingground logo for access to dozens of written and video Tutorials.   or Click here to go the Tutorialspoint home page Thanks and Happy Coding! 

PHP Character and Word Count

PHP Character and Word Count This program written with PHP will echo the character count for each character as well as the work count for the entered string. PHP <?php     $string = "this php code will tell us the frequency of each letter in this string including spaces";      $words = str_word_count($string);      $chart = count_chars($string, 1);      foreach($chart as $letter=>$frequency) echo "Character ".chr($letter)." appears $frequency times<br />";      echo "Total words in string: $words"; ?> Click here to run this Code More Free Code Examples Free Social Media Template HTML Color Selector Speed Test Try these Fun Games by Bobbie: Ocean Treasures Game Travel Blast Game New York Play and Learn Russian Battlestarship Game Take a look at these Groovy Codes: Fun IQ Test Html Svg Starburst Javasc

Sololearn Advanced Search

Sololearn Advanced Search  This advanced custom search bar powered by Google will return Search results exclusively for related content found only on Sololearn. As a mod we are required to remove duplicate questions this can be a bit frustrating considering we understand the limited abilities of the search bar provided on Sololearn only searching tags. I hope this will help you complete a more inclusive search to find what you are looking for and to avoid having your posts removed by myself or our Mod team for asking duplicate questions. Thanks and Happy Coding!

Free App Launch Website Template

Image
App Launch Website Template from w3 "W3.CSS Website Templates We have created some responsive W3.CSS website templates for you to use. You are free to modify, save, share, and use them in all your projects." Source Code <!DOCTYPE html> <html> <title>W3.CSS Template</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif} body {font-size: 16px;} img {margin-bottom: -8px;} .mySlides {display: