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> <body class="w3-light-grey">
<!-- Navigation Bar --> <di…

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; } headervideo { 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%); } header

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">     <article>Article</article>     <aside>Aside</aside>     </main> <footer&g…

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"       "ads"       "nav"       "footer";     grid-template-rows: 80px 1fr 70px…

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
Javascript Particles Fishes

Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News






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: none;} </style> <body class="w3-content w3-blac…