Categories
CSS Tutorials

Is it possible to click a button to advance to a particular frame of a … – SitePoint

I’d like to display a video on a web page, but have buttons to advance to certain frames and freeze them. The buttons will let them look at key points along the video. How is this done? I did a search, but the only directions I get is about pausing a video.

Use the currentTime property:

w3schools.com

HTML Audio/Video DOM currentTime Property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

1 Like

Source: https://news.google.com/__i/rss/rd/articles/CBMiigFodHRwczovL3d3dy5zaXRlcG9pbnQuY29tL2NvbW11bml0eS90L2lzLWl0LXBvc3NpYmxlLXRvLWNsaWNrLWEtYnV0dG9uLXRvLWFkdmFuY2UtdG8tYS1wYXJ0aWN1bGFyLWZyYW1lLW9mLWEtdmlkZW8tZW1iZWRkZWQtaW4taHRtbC80MDY2MzHSAQA?oc=5

Categories
CSS Tutorials

Someone recreated the Star Wars theme entirely in Logic Pro and … – Create Digital Music

It’s exactly as you might expect: sample libraries are at the point of being able to convincingly recreate entire symphony orchestras, close to original recordings. Composer Simon Passmore has done that with Star Wars and Apple’s Logic Pro.

It’s pretty stunning, and he promises more soon (plus a walkthrough of how this was made):

Let’s skip right to the main question I think most of us have, which is which sample libraries did he use? (Yeah, that didn’t sound like the default Logic content, did it?)

I think the key ingredient is Infinite Brass, and along with that I use CSW/CinePerc/CineHarp/CSS+Vista and Simple Sam Piano

Translation:

Aaron Venture Infinite Brass ($449)

Cinematic Studio Woodwinds ($399)

Cinesamples CinePerc ($749)

Cinesamples CineHarps ($279)

Cinematic Studio Strings ($399)

Vista Strings ($339)

Simple Sam piano I’m guessing is Simple Sam’s Signature Grand ($49.95)

Sum total: $2713.95 before taxes.

I imagine you could achieve good results with other libraries, though. (If you want to get into the weeds in comparison, YouTube has you. Both of those sound awfully nice to me and… well, Simon used both of them in combination.) What may be most impressive is all that MIDI automation. The Force is strong with this one.

Please Disney, don’t hurt him! Here’s what he’s got to say – I’d love to see this continue.

First of six short Star Wars mock-ups using my favourite bits of music from the first six films. Next one (some time next year) will be from Empire, either The Asteroid Field or Imperial March.

All created with commercial sample libraries, very happy to answer any questions on the libraries & methods used in the comments.

Also please consider subscribing to my channel if you’d like to see short tutorials on how I make these, as well as other mock-ups. I’m not great at social media but it would really help me if you subscribed! Planning to have a look at the music from Pixar’s The Incredibles next along with something from Empire, as well as potentially making a short walkthrough for this Star Wars mock-up.

If there’s enough interest I might also share some of my own general tips and tricks that I find help mock-ups sound more realistic. I’m not the best at mixing/mastering so definitely won’t be giving any advice on that, but I do have some useful ideas about how to play the instruments in to help give a more realistic sound.

I’m going to leave this work to those of y’all who do it and just marvel.

Now, if you’re ready for some uncanny valley – and if you want to make any nearby trumpet players spit out their coffee – listen to Star Wars: A New Hope transposed up to C major.

See, you thought you didn’t have perfect pitch and still this sounds … odd.

“No … no! It’s not true! That’s impossible!” Without fracking, for most orchestras, yeah… dunno, LSO could probably have handled this.

Well, back to plunking out atonal basslines and then applying a bunch of quantization just to produce a one-note techno bass. Good night.

Tags: Apple Logic, Apple Logic Pro, Cinematic Studio Strings, Cinematic Studio Woodwinds, Cinesamples, Infinite Brass, John Williams, Logic Pro, Mac, orchestras, orchestration, sci-fi, Software, soundware, Vista Strings

Source: https://news.google.com/__i/rss/rd/articles/CBMiPWh0dHBzOi8vY2RtLmxpbmsvMjAyMy8wMS9zdGFyLXdhcnMtbG9naWMtcHJvLXNvdW5kLWxpYnJhcmllcy_SAQA?oc=5

Categories
CSS Tutorials

Top 10 Programming Languages for AI Development in 2023 – Analytics Insight

If you are the site owner (or you manage this site), please whitelist your IP or if you think this block is an error please open a support ticket and make sure to include the block details (displayed in the box below), so we can assist you in troubleshooting the issue.

Block details:

Your IP: 65.108.136.253
URL: www.analyticsinsight.net/top-10-programming-languages-for-ai-development-in-2023/
Your Browser:
Block ID: BNP004
Block reason: Bad bot access attempt.
Time: 2023-01-25 07:36:22
Server ID: 15005

Source: https://news.google.com/__i/rss/rd/articles/CBMiWWh0dHBzOi8vd3d3LmFuYWx5dGljc2luc2lnaHQubmV0L3RvcC0xMC1wcm9ncmFtbWluZy1sYW5ndWFnZXMtZm9yLWFpLWRldmVsb3BtZW50LWluLTIwMjMv0gEA?oc=5

Categories
CSS Tutorials

Top 10 Programming Languages for AI Development in 2023 – Analytics Insight

If you are the site owner (or you manage this site), please whitelist your IP or if you think this block is an error please open a support ticket and make sure to include the block details (displayed in the box below), so we can assist you in troubleshooting the issue.

Block details:

Your IP: 65.108.136.253
URL: www.analyticsinsight.net/top-10-programming-languages-for-ai-development-in-2023/
Your Browser:
Block ID: BNP004
Block reason: Bad bot access attempt.
Time: 2023-01-25 07:29:12
Server ID: 15005

Source: https://news.google.com/__i/rss/rd/articles/CBMiWWh0dHBzOi8vd3d3LmFuYWx5dGljc2luc2lnaHQubmV0L3RvcC0xMC1wcm9ncmFtbWluZy1sYW5ndWFnZXMtZm9yLWFpLWRldmVsb3BtZW50LWluLTIwMjMv0gEA?oc=5

Categories
CSS Tutorials

Top 10 Programming Languages for AI Development in 2023 – Analytics Insight

If you are the site owner (or you manage this site), please whitelist your IP or if you think this block is an error please open a support ticket and make sure to include the block details (displayed in the box below), so we can assist you in troubleshooting the issue.

Block details:

Your IP: 65.108.136.253
URL: www.analyticsinsight.net/top-10-programming-languages-for-ai-development-in-2023/
Your Browser:
Block ID: BNP004
Block reason: Bad bot access attempt.
Time: 2023-01-25 07:24:28
Server ID: 15005

Source: https://news.google.com/__i/rss/rd/articles/CBMiWWh0dHBzOi8vd3d3LmFuYWx5dGljc2luc2lnaHQubmV0L3RvcC0xMC1wcm9ncmFtbWluZy1sYW5ndWFnZXMtZm9yLWFpLWRldmVsb3BtZW50LWluLTIwMjMv0gEA?oc=5

Categories
CSS Tutorials

Streamlit Tutorial For SEOs: How To Create A UI For Your Python App – Search Engine Journal

Python is one of the common programming languages for automating SEO processes.

One of the greatest libraries for creating a front-end for our apps without any HTML, CSS knowledge, or coding with a JavaScript-powered framework is Streamlit package.

In this Streamlit tutorial, we will dive into how you can create a beautiful app with Python and the Dockerfile for deploying your Streamlit app.

What Is Streamlit?

Streamlit is an open-source app framework (a Python package) that gives us the power for creating nice-looking apps without any front-end development knowledge.

This makes us free from involvement in any front-end framework or coding in HTML, CSS, and JavaScript.

You use pure Python to develop your front-end.

When Will The Streamlit Library Become Useful?

First of all, if you are coding Python scripts that run regularly on a machine with a job scheduler like cron, Streamlit isn’t useful for you.

But if you are developing a tool that you want to share with your team members, for example, a keyword research app, you can use Streamlit.

Also, if you need a user authentication method, the Streamlit community developed a package that can handle it for you.

Create A Streamlit App: Getting Started

Let’s create a simple app that gets autocomplete queries for a seed keyword from the Google public API.

Before beginning, create a folder on your machine, and name it what you want.

Also, I will assume you have installed Python before and know the basics of Python programming.

For the whole process, we need to use these Python libraries:

  • Requests.
  • Streamlit.
  • Streamlit-Authenticator.
  • PyYAML.

Also, we will import a Python standard library:

The tutorial code can be found in my Streamlit starter template repository on Github.

Installing The Streamlit Package

First of all, I prefer to create a virtual environment by running python3 -m venv .env, and then installing the Streamlit package by running pip3 install streamlit.

Now create a Python script. Let’s call it streamlit_app.py.

In complex projects that have too many functions, I prefer to have separate Python script files for my different functions and then import those into the streamlit_app.py or create a separate app with Flask or FastAPI.

For example, in a keyword research app, I have a Python script for different functions that get data from Semrush, a script for getting the top 10 or 20 results from Google, a script to get the Google autocomplete and Google-related searches, etc.

Get The Google Autocomplete Queries

For making requests, we need to use the Requests package. To get this package, you need to run pip3 install requests.

Also, to parse the autocomplete API response, we need to import the Python standard JSON library.

First of all, we import the JSON standard library, the Requests package for making requests, and Streamlit for creating our app.

Then, I defined a function for getting the Google autocomplete queries as a list of strings.

I used replace function twice to keep everything simple, but you can use re library for using regex.

"""A Streamlit app for getting the Google autocomplete queries
"""
import json

import requests
import streamlit as st

def google_autocomplete(keyword: str) -> list[str]:
    """Get Google autocomplete queries for a seed keyword

    Args:
        keyword (str): The seed keyword

    Returns:
        list[str]: A list of the autocomplete queries
    """
    google_autocomplete_api: str = "https://www.google.com/complete/search"
    google_autocomplete_params: dict = {
        "q": keyword,
        "cp": 8,
        "client": "gws-wiz",
        "xssi": "t",
        "hl": "en-US"
    }

    response = requests.get(google_autocomplete_api, params=google_autocomplete_params)

    list_google_autocomplete_uncleaned: list[list] = json.loads((response.content).decode("UTF-8")[5:])[0]
    list_google_autocomplete_cleaned: list[str] = [
        element[0].replace('<b>', '').replace('</b>', '')
        for element in list_google_autocomplete_uncleaned
        ]

    return list_google_autocomplete_cleaned

The Streamlit App

Up until now, we have installed the Streamlit package and defined our function to get the Google autocomplete queries. Now, let’s create the actual app.

To view the Streamlit app, we need to run the Streamlit with the run streamlit_app.py command in the terminal for running our app locally. After you run this command, by going to the http://localhost:8501/ URL, you can view the app.

Yes, it’s blank because we didn’t add any heading, etc., to it.

Screenshot from author, October 2022

Add A Heading To The Streamlit App

Let’s add a heading to our app. As you see above, I imported the Streamlit as st.

Now by calling the st.title() function, we can add a heading to the page with a title style. Let’s say st.title(“This is a next level SEO app”).

Remember that after editing your streamlit_app.py file and saving it, an icon appears in the top right corner of the page, and you must press Always return to view the app changes without any page refresh.

Screenshot from author, October 2022

Now our app looks like the image below. If your system theme is dark, your app is with a dark theme.

Screenshot from author, October 2022

Add Text To The Streamlit App

For adding a text paragraph to the app, you need to use the st.write() function. For example, st.write(“Make your ideas real”).

Screenshot from author, October 2022

Add A Text Input To The Streamlit App

As you saw in the Google autocomplete function, there was an argument called “keyword”.

This argument must come from the user input.

To get the user input, we can use a text input field in Streamlit. With st.text_input() we can add a text input. For example, st.text_input(“What is your seed keyword?”).

Also, in order to use the input keyword later to pass to our function, we must assign it to a variable.

input_google_autocomplete_keyword: str = st.text_input(
    "What is your seed keyword?")

Now we want to run our app when there is an input keyword. Here, we use an if statement to check if the variable is empty or not.

if input_google_autocomplete_keyword:
    output_list_google_autocomplete: list[str] = google_autocomplete(
        input_google_autocomplete_keyword)

Screenshot from author, October 2022

Download From The Streamlit App

So, we have added a heading, a line of text, and an input text field to get the user seed keyword.

Now we must execute our written function and make a download button for the user to get the results in a text file.

if output_list_google_autocomplete:
        st.download_button("Download the output",
                           ("n").join(output_list_google_autocomplete))

Screenshot from author, October 2022

We built our simple app! Let’s change the app title and favicon.

Before that, let’s see the Streamlit app section code up until now.

Screenshot from author, October 2022

Change The App Title And Favicon

The default title of the app is streamlit_app · Streamlit, and the favicon of the app is the Streamlit icon.

To change the title and favicon, we must use the st.set_page_config().

Also, I prefer the app layout to be wide (you can test it).

st.set_page_config(
    page_title="Oh My App!",
    page_icon="😎",
    layout="wide"
)

Screenshot from author, October 2022

Set The App’s Default Theme

The app theme is based on the user’s system settings, but personally, most times, I find out the light theme has better contrast – and I don’t want my team to put their time into finding out how to change the app theme.

To set a default theme for the Streamlit app, first, you must create a folder, and name it .streamlit. Inside this folder create a file, and name it config.toml.

Inside the config.toml you must insert the below lines to set your app’s default theme.

[theme]
base = "light"

Screenshot from author, October 2022

Authenticating Users In Streamlit

Imagine that after you deploy your app, someone finds out the app URL and accesses it.

To protect your app, you must authorize the users before they can use the app – like most SASSs we use every day.

For a Streamlit app, we can use the Streamlit-Authenticator package. To install it, in the terminal located in your app folder, type the pip3 install streamlit-authenticator command, and import the package into your app.

I recommend you read the Streamlit authenticator package documentation to get a better understanding of what is going on.

import streamlit_authenticator as stauth

Now create a config.yaml file for inserting our users’ credentials.

credentials:
  usernames:
    firstUser:
      email: [email protected]
      name: The first username
      password: 12345 # Must be replaced with the hashed password
    secondUser:
      email: [email protected]
      name: The second username
      password: 111213 # Must be replaced with the hashed password
cookie:
  expiry_days: 30
  key: some_signature_key
  name: some_cookie_name
preauthorized:
  emails:
    - [email protected]

As in the package document you can see, now we must hash the passwords with the Hasher modules. I prefer to open an IPython and run the below code line.

hashed_passwords = stauth.Hasher([‘12345’, ‘111213’]).generate()

Creating A Login Widget

Now we must create a login widget where users can input their username, password, and then login into the app.

First, you need to install the PyYAML package with the pip3 install pyyaml command and import it with the import yaml.

Then create an authenticator object, and render the login module.

with open("./config.yaml") as file:
    config = yaml.load(file, Loader=yaml.SafeLoader)

authenticator = stauth.Authenticate(
    config["credentials"],
    config["cookie"]["name"],
    config["cookie"]["key"],
    config["cookie"]["expiry_days"],
    config["preauthorized"]
)

name, authentication_status, username = authenticator.login("Login", "main")

Screenshot from author, October 2022

Show The App To Successfully Logged In Users

Now we can use the authentication_status variable to see the app for our successfully logged-in users.

if authentication_status:
    authenticator.logout('Logout', 'main')
    # OUR APP CODE COMES HERE
elif authentication_status == False:
    st.error('Username/password is incorrect')
elif authentication_status == None:
    st.warning('Please enter your username and password')

Deploy The Streamlit App With Docker

Now we are in the final step of developing our app.

You can use different services for deploying your app, like AWS, Google Cloud, Azure, Heroku, DigitalOcean, etc.

Before the Dockerfile, let’s create the requirements.txt file. To do so, we can use the pip3 freeze > requirements.txt command.

Streamlit Dockerfile

For deploying our app, I use Python 3.9.10.

FROM python:3.9.10
WORKDIR /app
COPY . .
RUN pip3 install -r requirements.txt
CMD ["streamlit", "run", "streamlit_app.py"]
EXPOSE 8501

Wrap Up

In this tutorial, we saw how we can create a stunning UI with pure Python, and deploy it with Docker.

To learn more about different Streamlit widgets, see their well-documented API reference.

More resources: 


Featured Image: Yaran/Shutterstock

Source: https://news.google.com/__i/rss/rd/articles/CBMiZmh0dHBzOi8vd3d3LnNlYXJjaGVuZ2luZWpvdXJuYWwuY29tL3N0cmVhbWxpdC10dXRvcmlhbC13aXRoLXVzZXItYXV0aGVudGljYXRpb24tYW5kLWRvY2tlcmZpbGUvNDY5MjA1L9IBAA?oc=5

Categories
CSS Tutorials

Header (Not Background) Image Repeats in Body only on Smart … – SitePoint

Hello, I’m hoping some of you good folks can help me out. I have worked on this for hours, read help replies, watched videos, I have tried–to no avail.

On Smartphones my Header Image is repeating down in the body (see example). Of note, on my and friends PCs and Laptops (Windows 10 and 11 with different Browser it works as it should)

My site is hosted on a server (at godaddy) having issues right now with bad redirects, so I attached a picture of what it looks like.

Since I’m a new member, this system (or I can’t figure it won’t let me put the html and css code below).

Please help! Guide me! Thank you. Monty_W


PaulOB

December 22, 2022, 4:31pm
#2

mivintagesled:

On Smartphones my Header Image is repeating down in the body (see example).

I assume you have used background-repeat:no-repeat on the background image?

I’m guessing you have tried that so we’ll really have to wait until you post a link or code that exhibits the problem.

Thanks Paul for replying. I’ve tried all the normal no repeated things I can think of. The background image isn’t the issue. It’s the Header image. The website, assuming godaddy has the issues resolved is www.teshio.com I be home in a half hour. What files do you want me to post? Again, thank you for reaching out. Monty


PaulOB

December 22, 2022, 5:33pm
#4

The site is still down i’n afraid. I’ll take a look later this evening as I have to go out now.

We probably can’t resolve this until we see the real page anyway.

I’m trying to put the code in. Keep getting this message: Multiple errors occurred: 1) Sorry, new users can only put one embedded media item in a post. 2) Sorry, new users can only put 2 links in a post. I’ll take a screenshot of the site.dwt and index.htm files and reply twice.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="https://teshio.com/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css' />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- #BeginEditable "doctitle" -->
<title>Two Equal Height Columns - Liquid Layout</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta content="insert DESCRIPTION here" name="description" />
<!-- #EndEditable -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright 2013, Pat Geary http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<!-- main css -->
<link href="../styles/site.css" rel="stylesheet" type="text/css" />
<!-- media queries css -->
<link href="../styles/media-queries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css">
.auto-style1 {
	text-decoration: underline;
	background-color: #FFFF00;
}
</style>
</head>

<body>

<!-- Page Container begins here -->
<div id="outerWrapper">
	<!-- Masthead begins here -->
	<div id="header">
		<p class="sitename">Snowmobile Michigan<br />
		<span class="tagline">Vintage | Late Model</span></p>
	</div>
	<!-- Masthead ends here -->
	<!-- Top Navigation begins here -->
	<!-- Top Navigation ends here -->
	<!-- Columns Container begins here -->
	<div id="contentWrapper">
		<!-- Left Sidebar Begins Here	-->
		<div id="leftColumn1">
			<!--	Sectional Menu Begins Here	-->
			<ul>
				<li><a href="../index.html" title="Home">Home</a></li>
				<li><a href="../vsn/events.htm" title="Events">Events</a></li>
				<li><a href="../vsn/michigan.htm" title="History">History</a></li>
				<li><a href="../msch/msch.htm" title="Links">Clubs/Races</a></li>
				<li><a href="../twister.htm" title="Search">Twister</a></li>
			</ul>
<!--	Social Media Icons begin here		-->
<div class="socialmedia">
	<a href="https://www.facebook.com/VintageSnowmobileMichigan"><img alt="Visit us on Facebook." src="../images/facebook_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://www.instagram.com/vintagesnowmobilemichigan/">
	<img alt="instagram" longdesc="instagram" src="../images/instagram_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://twitter.com/SnowmobileEvent"><img alt="Follow us on Twitter." src="../images/twitter_hover_32.png" style="width: 32px; height: 32px" /></a></div>
<!--	Social Media Icons begin here		-->

			<!--	Sectional Menu ends Here	-->
			<p class="heading">Latest Update(s)</p>
			<p><span class="auto-style1"><strong>22 Dec 22</strong></span><strong><br class="auto-style1" />
			ALPHA SITE TEST<br />
			9:30 AM EST</strong></p>
		</div>
		<!-- Left Sidebar ends Here	-->
		<!--Main Content Area Begins Here-->
		<div id="content">
			<!-- #BeginEditable "content" -->
			<h1>H1 Main Content </h1>
			<p>&nbsp;</p>
			<!-- #EndEditable -->
			<!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" />
			<br />
		</div>
		<!--Main Content Area Ends Here--></div>
	<!-- Columns Container begins here -->
	<!-- Footer begins here -->
	<div id="footer">
		<p>Copyright © 2023 MCW. All Rights Reserved.</p>
		<p>
		<a href="mailto:[email protected]?subject=Teshio Website Submission">
		[email protected]</a> <a href="../privacy-policy.html" title="Privacy Policy.">Privacy Policy</a> </p>
	</div>
	<!-- Footer ends here -->
	<!-- Page Container ends here --></div>

</body>

</html>

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "dwt/site.dwt" -->

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="https://teshio.com/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css' />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- #BeginEditable "doctitle" -->
<title>Snowmobile Michigan</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta content="insert DESCRIPTION here" name="description" />
<!-- #EndEditable -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright 2013, Pat Geary http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<!-- main css -->
<link href="styles/site.css" rel="stylesheet" type="text/css" />
<!-- media queries css -->
<link href="styles/media-queries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css">
.auto-style1 {
	text-decoration: underline;
	background-color: #FFFF00;
}
</style>
</head>

<body>

<!-- Page Container begins here -->
<div id="outerWrapper">
	<!-- Masthead begins here -->
	<div id="header">
		<p class="sitename">Snowmobile Michigan<br />
		<span class="tagline">Vintage | Late Model</span></p>
	</div>
	<!-- Masthead ends here -->
	<!-- Top Navigation begins here -->
	<!-- Top Navigation ends here -->
	<!-- Columns Container begins here -->
	<div id="contentWrapper">
		<!-- Left Sidebar Begins Here	-->
		<div id="leftColumn1">
			<!--	Sectional Menu Begins Here	-->
			<ul>
				<li><a href="index.html" title="Home">Home</a></li>
				<li><a href="vsn/events.htm" title="Events">Events</a></li>
				<li><a href="vsn/michigan.htm" title="History">History</a></li>
				<li><a href="msch/msch.htm" title="Links">Clubs/Races</a></li>
				<li><a href="twister.htm" title="Search">Twister</a></li>
			</ul>
<!--	Social Media Icons begin here		-->
<div class="socialmedia">
	<a href="https://www.facebook.com/VintageSnowmobileMichigan">
	<img alt="Visit us on Facebook." src="images/facebook_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://www.instagram.com/vintagesnowmobilemichigan/">
	<img alt="instagram" longdesc="dwt/instagram" src="images/instagram_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://twitter.com/SnowmobileEvent">
	<img alt="Follow us on Twitter." src="images/twitter_hover_32.png" style="width: 32px; height: 32px" /></a></div>
<!--	Social Media Icons begin here		-->

			<!--	Sectional Menu ends Here	-->
			<p class="heading">Latest Update(s)</p>
			<p><span class="auto-style1"><strong>22 Dec 22</strong></span><strong><br class="auto-style1" />
			ALPHA SITE TEST<br />
			9:30 AM EST</strong></p>
		</div>
		<!-- Left Sidebar ends Here	-->
		<!--Main Content Area Begins Here-->
		<div id="content">
			<!-- #BeginEditable "content" -->
			<h1>Snowmobile Michigan</h1>
			<p>
			<img alt="Daisy With Raindrops." class="imglft" src="images/patio_1_bg_061304.jpg" style="height: 224px" width="256" />Test 
			22 Dec 22</p>
			<h2>History of www.teshio.com</h2>
			<p>Test 22 Dec 22</p>
			<!-- #EndEditable -->
			<!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" />
			<br />
		</div>
		<!--Main Content Area Ends Here--></div>
	<!-- Columns Container begins here -->
	<!-- Footer begins here -->
	<div id="footer">
		<p>Copyright © 2023 MCW. All Rights Reserved.</p>
		<p>
		<a href="mailto:[email protected]?subject=Teshio Website Submission">
		[email protected]</a> 
		<a href="privacy-policy.html" title="Privacy Policy.">Privacy Policy</a> </p>
	</div>
	<!-- Footer ends here -->
	<!-- Page Container ends here --></div>

</body>

<!-- #EndTemplate -->

</html>

media-queries.css

@media screen and (max-width: 980px) {
#outerWrapper {
	width: 95%;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}

#content {
	width: 60%;
	padding: 3% 4%;
}
#leftColumn1 {
	width: 30%;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (orientation : portrait) {
#outerWrapper {
	width: 95%;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
	width: 63%;
	padding: 3% 4%;
}
#leftColumn1 {
	width: 27%;
}
}
@media screen and (max-width: 650px) {
#header {
	height: auto;
}
#topNavigation {
	position: static;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
	width: auto;
	float: none;
	margin: 20px 0;
}
#leftColumn1 {
	width: auto;
	float: none;
	margin: 0;
	height: 100%;
}
}
@media screen and (max-width: 480px) {
html {
	-webkit-text-size-adjust: none;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#header {
	height: 100px;
}
#outerWrapper #topNavigation {
	height: 50px;
}
#topNavigation a {
	font-size: 90%;
	padding: 10px 8px;
}
#leftColumn1 {
	width: auto;
	float: none;
	margin: 0;
	height: 100%;
}
form fieldset {
	width: 240px;
}
}

1 Like


PaulOB

December 22, 2022, 11:48pm
#12

mivintagesled:

has the issues resolved is www.teshio.com

I can see the site now and just checked on my iphone and it doesn’t look like your image. It looks exactly like its shown in devtools device toolbar. have you cleared your cache?

Why are you repeating a white image down the page?

Paul, I cleared my cache like 10 times before I wrote this. I called my neighbor (iPhone) he screen shot it and sent it to me. Same image. I’m at a loss over this. Still shows my issue. Galaxy S21. I’m going to call others with ‘droids. Why (the background) image? I figure no matter what device it should be white everywhere. I guess I could make the background white (FFFFFF). Any recommendations I would appreciate. Thanks for helping. I’ll update. Monty

Paul, he had the same image as yours, no issues.

Paul, I reloaded google. It looks like, it should be, I wrote it. Sorry I wasted your time. I have no clue why after clearing cache so many times it keep showing up like that. Thank you. Monty

1 Like


PaulOB

December 23, 2022, 8:33am
#16

mivintagesled:

t. Sorry I wasted your time.

No worries. Glad it’s sorted.

Source: https://news.google.com/__i/rss/rd/articles/CBMibWh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5L3QvaGVhZGVyLW5vdC1iYWNrZ3JvdW5kLWltYWdlLXJlcGVhdHMtaW4tYm9keS1vbmx5LW9uLXNtYXJ0LXBob25lcy80MDQxMTPSAQA?oc=5

Categories
CSS Tutorials

Header (Not Background) Image Repeats in Body only on Smart … – SitePoint

Hello, I’m hoping some of you good folks can help me out. I have worked on this for hours, read help replies, watched videos, I have tried–to no avail.

On Smartphones my Header Image is repeating down in the body (see example). Of note, on my and friends PCs and Laptops (Windows 10 and 11 with different Browser it works as it should)

My site is hosted on a server (at godaddy) having issues right now with bad redirects, so I attached a picture of what it looks like.

Since I’m a new member, this system (or I can’t figure it won’t let me put the html and css code below).

Please help! Guide me! Thank you. Monty_W


PaulOB

December 22, 2022, 4:31pm
#2

mivintagesled:

On Smartphones my Header Image is repeating down in the body (see example).

I assume you have used background-repeat:no-repeat on the background image?

I’m guessing you have tried that so we’ll really have to wait until you post a link or code that exhibits the problem.

Thanks Paul for replying. I’ve tried all the normal no repeated things I can think of. The background image isn’t the issue. It’s the Header image. The website, assuming godaddy has the issues resolved is www.teshio.com I be home in a half hour. What files do you want me to post? Again, thank you for reaching out. Monty


PaulOB

December 22, 2022, 5:33pm
#4

The site is still down i’n afraid. I’ll take a look later this evening as I have to go out now.

We probably can’t resolve this until we see the real page anyway.

I’m trying to put the code in. Keep getting this message: Multiple errors occurred: 1) Sorry, new users can only put one embedded media item in a post. 2) Sorry, new users can only put 2 links in a post. I’ll take a screenshot of the site.dwt and index.htm files and reply twice.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="https://teshio.com/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css' />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- #BeginEditable "doctitle" -->
<title>Two Equal Height Columns - Liquid Layout</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta content="insert DESCRIPTION here" name="description" />
<!-- #EndEditable -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright 2013, Pat Geary http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<!-- main css -->
<link href="../styles/site.css" rel="stylesheet" type="text/css" />
<!-- media queries css -->
<link href="../styles/media-queries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css">
.auto-style1 {
	text-decoration: underline;
	background-color: #FFFF00;
}
</style>
</head>

<body>

<!-- Page Container begins here -->
<div id="outerWrapper">
	<!-- Masthead begins here -->
	<div id="header">
		<p class="sitename">Snowmobile Michigan<br />
		<span class="tagline">Vintage | Late Model</span></p>
	</div>
	<!-- Masthead ends here -->
	<!-- Top Navigation begins here -->
	<!-- Top Navigation ends here -->
	<!-- Columns Container begins here -->
	<div id="contentWrapper">
		<!-- Left Sidebar Begins Here	-->
		<div id="leftColumn1">
			<!--	Sectional Menu Begins Here	-->
			<ul>
				<li><a href="../index.html" title="Home">Home</a></li>
				<li><a href="../vsn/events.htm" title="Events">Events</a></li>
				<li><a href="../vsn/michigan.htm" title="History">History</a></li>
				<li><a href="../msch/msch.htm" title="Links">Clubs/Races</a></li>
				<li><a href="../twister.htm" title="Search">Twister</a></li>
			</ul>
<!--	Social Media Icons begin here		-->
<div class="socialmedia">
	<a href="https://www.facebook.com/VintageSnowmobileMichigan"><img alt="Visit us on Facebook." src="../images/facebook_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://www.instagram.com/vintagesnowmobilemichigan/">
	<img alt="instagram" longdesc="instagram" src="../images/instagram_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://twitter.com/SnowmobileEvent"><img alt="Follow us on Twitter." src="../images/twitter_hover_32.png" style="width: 32px; height: 32px" /></a></div>
<!--	Social Media Icons begin here		-->

			<!--	Sectional Menu ends Here	-->
			<p class="heading">Latest Update(s)</p>
			<p><span class="auto-style1"><strong>22 Dec 22</strong></span><strong><br class="auto-style1" />
			ALPHA SITE TEST<br />
			9:30 AM EST</strong></p>
		</div>
		<!-- Left Sidebar ends Here	-->
		<!--Main Content Area Begins Here-->
		<div id="content">
			<!-- #BeginEditable "content" -->
			<h1>H1 Main Content </h1>
			<p>&nbsp;</p>
			<!-- #EndEditable -->
			<!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" />
			<br />
		</div>
		<!--Main Content Area Ends Here--></div>
	<!-- Columns Container begins here -->
	<!-- Footer begins here -->
	<div id="footer">
		<p>Copyright © 2023 MCW. All Rights Reserved.</p>
		<p>
		<a href="mailto:[email protected]?subject=Teshio Website Submission">
		[email protected]</a> <a href="../privacy-policy.html" title="Privacy Policy.">Privacy Policy</a> </p>
	</div>
	<!-- Footer ends here -->
	<!-- Page Container ends here --></div>

</body>

</html>

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "dwt/site.dwt" -->

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="https://teshio.com/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css' />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- #BeginEditable "doctitle" -->
<title>Snowmobile Michigan</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta content="insert DESCRIPTION here" name="description" />
<!-- #EndEditable -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright 2013, Pat Geary http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<!-- main css -->
<link href="styles/site.css" rel="stylesheet" type="text/css" />
<!-- media queries css -->
<link href="styles/media-queries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css">
.auto-style1 {
	text-decoration: underline;
	background-color: #FFFF00;
}
</style>
</head>

<body>

<!-- Page Container begins here -->
<div id="outerWrapper">
	<!-- Masthead begins here -->
	<div id="header">
		<p class="sitename">Snowmobile Michigan<br />
		<span class="tagline">Vintage | Late Model</span></p>
	</div>
	<!-- Masthead ends here -->
	<!-- Top Navigation begins here -->
	<!-- Top Navigation ends here -->
	<!-- Columns Container begins here -->
	<div id="contentWrapper">
		<!-- Left Sidebar Begins Here	-->
		<div id="leftColumn1">
			<!--	Sectional Menu Begins Here	-->
			<ul>
				<li><a href="index.html" title="Home">Home</a></li>
				<li><a href="vsn/events.htm" title="Events">Events</a></li>
				<li><a href="vsn/michigan.htm" title="History">History</a></li>
				<li><a href="msch/msch.htm" title="Links">Clubs/Races</a></li>
				<li><a href="twister.htm" title="Search">Twister</a></li>
			</ul>
<!--	Social Media Icons begin here		-->
<div class="socialmedia">
	<a href="https://www.facebook.com/VintageSnowmobileMichigan">
	<img alt="Visit us on Facebook." src="images/facebook_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://www.instagram.com/vintagesnowmobilemichigan/">
	<img alt="instagram" longdesc="dwt/instagram" src="images/instagram_hover_32.png" style="width: 32px; height: 32px" /></a>
	<a href="https://twitter.com/SnowmobileEvent">
	<img alt="Follow us on Twitter." src="images/twitter_hover_32.png" style="width: 32px; height: 32px" /></a></div>
<!--	Social Media Icons begin here		-->

			<!--	Sectional Menu ends Here	-->
			<p class="heading">Latest Update(s)</p>
			<p><span class="auto-style1"><strong>22 Dec 22</strong></span><strong><br class="auto-style1" />
			ALPHA SITE TEST<br />
			9:30 AM EST</strong></p>
		</div>
		<!-- Left Sidebar ends Here	-->
		<!--Main Content Area Begins Here-->
		<div id="content">
			<!-- #BeginEditable "content" -->
			<h1>Snowmobile Michigan</h1>
			<p>
			<img alt="Daisy With Raindrops." class="imglft" src="images/patio_1_bg_061304.jpg" style="height: 224px" width="256" />Test 
			22 Dec 22</p>
			<h2>History of www.teshio.com</h2>
			<p>Test 22 Dec 22</p>
			<!-- #EndEditable -->
			<!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" />
			<br />
		</div>
		<!--Main Content Area Ends Here--></div>
	<!-- Columns Container begins here -->
	<!-- Footer begins here -->
	<div id="footer">
		<p>Copyright © 2023 MCW. All Rights Reserved.</p>
		<p>
		<a href="mailto:[email protected]?subject=Teshio Website Submission">
		[email protected]</a> 
		<a href="privacy-policy.html" title="Privacy Policy.">Privacy Policy</a> </p>
	</div>
	<!-- Footer ends here -->
	<!-- Page Container ends here --></div>

</body>

<!-- #EndTemplate -->

</html>

media-queries.css

@media screen and (max-width: 980px) {
#outerWrapper {
	width: 95%;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}

#content {
	width: 60%;
	padding: 3% 4%;
}
#leftColumn1 {
	width: 30%;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (orientation : portrait) {
#outerWrapper {
	width: 95%;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
	width: 63%;
	padding: 3% 4%;
}
#leftColumn1 {
	width: 27%;
}
}
@media screen and (max-width: 650px) {
#header {
	height: auto;
}
#topNavigation {
	position: static;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
	width: auto;
	float: none;
	margin: 20px 0;
}
#leftColumn1 {
	width: auto;
	float: none;
	margin: 0;
	height: 100%;
}
}
@media screen and (max-width: 480px) {
html {
	-webkit-text-size-adjust: none;
}
#contentWrapper {
	clear: both;
	background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#header {
	height: 100px;
}
#outerWrapper #topNavigation {
	height: 50px;
}
#topNavigation a {
	font-size: 90%;
	padding: 10px 8px;
}
#leftColumn1 {
	width: auto;
	float: none;
	margin: 0;
	height: 100%;
}
form fieldset {
	width: 240px;
}
}

1 Like


PaulOB

December 22, 2022, 11:48pm
#12

mivintagesled:

has the issues resolved is www.teshio.com

I can see the site now and just checked on my iphone and it doesn’t look like your image. It looks exactly like its shown in devtools device toolbar. have you cleared your cache?

Why are you repeating a white image down the page?

Paul, I cleared my cache like 10 times before I wrote this. I called my neighbor (iPhone) he screen shot it and sent it to me. Same image. I’m at a loss over this. Still shows my issue. Galaxy S21. I’m going to call others with ‘droids. Why (the background) image? I figure no matter what device it should be white everywhere. I guess I could make the background white (FFFFFF). Any recommendations I would appreciate. Thanks for helping. I’ll update. Monty

Paul, he had the same image as yours, no issues.

Paul, I reloaded google. It looks like, it should be, I wrote it. Sorry I wasted your time. I have no clue why after clearing cache so many times it keep showing up like that. Thank you. Monty

1 Like


PaulOB

December 23, 2022, 8:33am
#16

mivintagesled:

t. Sorry I wasted your time.

No worries. Glad it’s sorted.

Source: https://news.google.com/__i/rss/rd/articles/CBMibWh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5L3QvaGVhZGVyLW5vdC1iYWNrZ3JvdW5kLWltYWdlLXJlcGVhdHMtaW4tYm9keS1vbmx5LW9uLXNtYXJ0LXBob25lcy80MDQxMTPSAQA?oc=5

Categories
CSS Tutorials

Play these 5 free programming games to code like a pro – Study International News

The best free programming games are not only fun, but can help us overcome our fear of coding.

Coding is the technical form of communication that computers understand. In other words, it’s computer language — popular ones you’ve heard include JavaScript and Python.

As more companies go digital, skills like coding are popping up in STEM courses to meet this demand.

Learning to code from scratch may seem impossible at the start. Online courses or books can help but there are free programming games that make things more fun.

Check out these five free programming games that’ll teach you to code like a pro:

1. Flexbox Zombies

Flexbox Zombies is one of the most comprehensive programming games to explore if you’re looking to be proficient in CSS Flexbox.

CSS Flexbox makes it easier to design flexible responsive layout structures without using float or positioning.

Launched in 2017, the game acts as a training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.

The brain behind this is David Geddes who is also the creator behind Mastery Games, the platform on which Flexbox Zombies is launched on.

It has the whole package of an addictive game: awesome visuals, a great storyline and a soundtrack. Not to mention it’s also completely free!

Just create an account and you can start playing. You have to work through all the levels in the game but once completed, you’re guaranteed to be familiar with coding,

2. Code Combat

Another on the list of free programming games is Code Combat. Perfect for all ages, the game supports two programming languages: JavaScript and Python.

While JavaScript is used across every website, the creators understand it may be difficult for beginners to learn hence it offers the option to choose between both languages.

The developers also spent time consulting with specialists to craft classroom materials specifically for teachers who may not have any prior computer science experience.

In fact, many schools have implemented Code Combat as the main computer science curriculum.

In Code Combat, you’ll learn programming core concepts by battling through hundreds of levels in the programming language of your choice.

3. CodinGame

Aude Barral is a French entrepreneur and founder of CodinGame. Source: Pascal Guyot/AFP

For those looking to dive into the world of coding, CodinGame is among the best free programming games to start with.

The browser-based game supports more than 25 different languages (including JavaScript, PHP, and Ruby).

The courses were created by top developers and allow you to learn new languages, tricks, and algorithms quickly.

It also helps you work on problem-solving skills and programming basics through a turn-based game.

What’s more, it allows you to practise, learn, and eventually compete in international contests to show off your coding skills.

As you play and strengthen your profile, you can opt in and enable companies to see your profile.

The best part is that it’s collaborative! Get your friends or colleagues in on this game and have fun learning how to code together.

4. JS Robot

If you played Mario, you’d notice how JS Robot is similar in terms of the game interface and game mechanics.

All you have to do is control a robot to collect coins, avoid obstacles and reach the flag at the end of the level.

It’s a super simple game concept with the challenge of learning JavaScript to play.

5. SQL Murder Mystery

SQL is an abbreviation for Structured Query Language which refers to domain-specific language used in programming and designed for storing, manipulating and retrieving data in databases.

SQL Murder Mystery is a great game regardless of how experienced you are with the language. There are also different tutorials depending on your learning goals.

You will notice that you are given the option to start the game as either a beginner or an experienced individual.

Source: https://news.google.com/__i/rss/rd/articles/CBMiRmh0dHBzOi8vd3d3LnN0dWR5aW50ZXJuYXRpb25hbC5jb20vbmV3cy9mcmVlLXByb2dyYW1taW5nLWdhbWVzLWNvZGluZy_SAQA?oc=5

Categories
CSS Tutorials

Play these 5 free programming games to code like a pro – Study International News

The best free programming games are not only fun, but can help us overcome our fear of coding.

Coding is the technical form of communication that computers understand. In other words, it’s computer language — popular ones you’ve heard include JavaScript and Python.

As more companies go digital, skills like coding are popping up in STEM courses to meet this demand.

Learning to code from scratch may seem impossible at the start. Online courses or books can help but there are free programming games that make things more fun.

Check out these five free programming games that’ll teach you to code like a pro:

1. Flexbox Zombies

Flexbox Zombies is one of the most comprehensive programming games to explore if you’re looking to be proficient in CSS Flexbox.

CSS Flexbox makes it easier to design flexible responsive layout structures without using float or positioning.

Launched in 2017, the game acts as a training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.

The brain behind this is David Geddes who is also the creator behind Mastery Games, the platform on which Flexbox Zombies is launched on.

It has the whole package of an addictive game: awesome visuals, a great storyline and a soundtrack. Not to mention it’s also completely free!

Just create an account and you can start playing. You have to work through all the levels in the game but once completed, you’re guaranteed to be familiar with coding,

2. Code Combat

Another on the list of free programming games is Code Combat. Perfect for all ages, the game supports two programming languages: JavaScript and Python.

While JavaScript is used across every website, the creators understand it may be difficult for beginners to learn hence it offers the option to choose between both languages.

The developers also spent time consulting with specialists to craft classroom materials specifically for teachers who may not have any prior computer science experience.

In fact, many schools have implemented Code Combat as the main computer science curriculum.

In Code Combat, you’ll learn programming core concepts by battling through hundreds of levels in the programming language of your choice.

3. CodinGame

Aude Barral is a French entrepreneur and founder of CodinGame. Source: Pascal Guyot/AFP

For those looking to dive into the world of coding, CodinGame is among the best free programming games to start with.

The browser-based game supports more than 25 different languages (including JavaScript, PHP, and Ruby).

The courses were created by top developers and allow you to learn new languages, tricks, and algorithms quickly.

It also helps you work on problem-solving skills and programming basics through a turn-based game.

What’s more, it allows you to practise, learn, and eventually compete in international contests to show off your coding skills.

As you play and strengthen your profile, you can opt in and enable companies to see your profile.

The best part is that it’s collaborative! Get your friends or colleagues in on this game and have fun learning how to code together.

4. JS Robot

If you played Mario, you’d notice how JS Robot is similar in terms of the game interface and game mechanics.

All you have to do is control a robot to collect coins, avoid obstacles and reach the flag at the end of the level.

It’s a super simple game concept with the challenge of learning JavaScript to play.

5. SQL Murder Mystery

SQL is an abbreviation for Structured Query Language which refers to domain-specific language used in programming and designed for storing, manipulating and retrieving data in databases.

SQL Murder Mystery is a great game regardless of how experienced you are with the language. There are also different tutorials depending on your learning goals.

You will notice that you are given the option to start the game as either a beginner or an experienced individual.

Source: https://news.google.com/__i/rss/rd/articles/CBMiRmh0dHBzOi8vd3d3LnN0dWR5aW50ZXJuYXRpb25hbC5jb20vbmV3cy9mcmVlLXByb2dyYW1taW5nLWdhbWVzLWNvZGluZy_SAQA?oc=5