Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tuesday, October 31, 2017

What is Thimble used for?

It is from Mozilla.org. It is free and has many cool features. It's Remix mode allows you easily modify existing Thimble projects to suit your requirements.

Thimble is a one-stop program bundling code editor, web server, web browser and developer tools.

It has an unbelievable number of cool features. Sure, I will test drive it!

  • Make a change and see your changes in real time
  • Has handy code snippets
  • Has a built-in JavaScript console
  • Add your files (drag and drop) and manage them
  • Has both dark and light themes
  • Embedded tutorials-follow or create OK
  • Get code hints
  • Edit CSS right in the HTML file
  • Publish to Web
  • Pick colors in the editor
  • Test project on your mobile device
  • Has a DOM inspector to work with HTML elements
  • Has Image filters
  • Take selfies

You start here.

Here is a video that explains it all:

Wednesday, September 21, 2016

What is jsFiddle?

jsFiddle a nice tool to have, especially for web developers. It is a 'What you see is what you get tool that can do HTML, CSS and JavaScript. It can also access great many script libraries like, jQuery, Dojo, etc.

This is a must have tool if you are working on web pages. If you are a beginner or, one trying to learn web page authoring this is a great tool.

This is an online tool and therefore you do not need to install anything on your computer. You should have internet connection, though. .

You access this site https://jsfiddle.net/ and you get this displayed. All set and ready to go.


jsFiddle_00

You can test your HTML, CSS and JavaScript online with this tool

Test HTML:
In the HTML pane, just type this:

Welcome to jsFiddle

and click Run at the top.
Immediately you will see the result in the Result pane as shown.



jsFiddle_01



Add CSS and Test again:

Now I will style the text we  just wrote by adding the style rule in the CSS pane (right of HTML). This is the rule I am going to add:

h1{color: Magenta;
   text-align: center;
  font-family: verdana;}


After typing in click Run and you will immediately see the change as shown:


js_fiidle_02

Add HTML fragment to place a button with the text 'Click me' as shown.
You should see the button on the document.




 Write script for the button click:
Write the javascript code as shown which does the following:
When you click the button, the function test is run which should bring up the alert message.
The jsFiddle with button and JavaScript is as shown.


jsFiddle_03

When you click the button, you should see this:








Saturday, December 12, 2015

What is Cardova?

Web apps are apps built using HTML5, CSS and JavaScript. This is no different than building a web site with HTML and JavaScript. Your web app is just the web view that will render the HTML/CSS/JavaScript files. Unfortunately this by itself is not enough except for some simple applications. However if you need access to native hardware like camera, accelerometer etc then Cardova plugins can provide access to those native capabilities.

Cardova plugins consist of a JavaScript file and a code files for a given platform. Cardova maps the native code to JavaScript specific for the platform (iOS, Android, Windows) to care of implementing the native devices.

Here is a list of many Cardova Plugins.

Wednesday, September 18, 2013

What languages can I use to build Windows Store Apps?

There are a couple of options. The language you use will depend on your familiarity with the language. Here is the list.

1.Javascript/HTML(CSS)
2. C#/XAML
3. Visual Basic/XAML
4. C++/XAML
5. C++/DirectX