Basic cloud9 project - html

I'm new to the cloud IDE setup and can't get my head around deployment and "workspaces". I tried making a basic site with html (to use javascript/css once I can figure out how to call the code into the html) as testing before running it on another website.
At the moment I'm using a basic text editor to tweak the html (for a custom Google Map), but cloud9 and the like highlight code in colour and complete functions etc. so it's easier to use (also I can't use an offline editor due to hardware).
I'm keen to learn more javascript but really only have basic web html/css skills so all the node.js files lose me a bit. Where can I find a really simple introduction to just writing, say, a html page and seeing it previewed? Or does it not work like that?
The tutorials I've found so far are going into scripting (e.g. "Cloud 9 IDE Basics" > http://vimeo.com/16273901)
Thanks, and sorry for asking such a beginner's question!

Does the Cloud9 documentation site (https://docs.c9.io/) help?. It has articles ranging from the basics to more advanced topics, including some video tutorials.

Related

Determine the UI library that a particular website is using

I am starting to build my own website using the Django framework. It has become apparent that in order to make quick progress I will have to use some form of external library to handle most of my HTML/CSS/Javascript, for example, https://materializecss.com
I have begun investigating different websites to see what works and what doesn't and I was wondering if there is a quick way to identify what UI library a particular website is using.
Chrome's 'inspect' tool doesn't really help me because I get lost with so much HTML.
For example, this website https://www.moneyunder30.com/category/banking apparently uses https://materializecss.com, is there a general place hidden deep in the HTML where I could look to find this information?
Thanks
There's a pretty cool Chrome extension called Wappalyzer

How to convert psd file to html template?

I have a psd files of my website design, So can i convert it into html template.
Template should contain html,css code.
Basically i am beginner in photoshop so i don't know, it will possible or not.
Please help.
Well the good part is that you have the static design, what means that there is no interaction with a user, of your website ready.
I would suggest you to start with one or another interactive prototyping tool like Marvel. Then you can prototype the functionalities of the website and start working on code writing part. This step will also help you and people, who are going to help you, to get the idea what you want to achieve as a final result.
There are also Adobe solutions like Dreamweaver what gives you an option to migrate the Photoshop layers to webpage. But this solution is not free.
After you finish working with prototyping you can take a really good free course on Udacity about developing solutions with HTML5 and CSS3. Codecademy also has good set of courses on this topic.
Hope this helps to start your journey in learning PSD to HTML techniques and web development in general.

Practice CSS and HTML without worrying about backend

I'm looking for a way to practice CSS and HTML without worrying about whether the backend works or not, or whether or not I have to make the content. I've played around with javascript and node.js a bit, and although I feel like I have a (very) rudimentary understanding of it, I feel as if I should be learning HTML and CSS correctly before messing more with the backend.
Is there a good place to just write CSS and HTML? How did you learn them?
Is there a code editor I should be using (specifically for HTML layouts and CSS layouts) besides Sublime Text?
Well, first of all, you do not worry about how backend works if what you want is to practice CSS and HTML.
Easy steps to play around with HTML and CSS:
create a new file, say index.html. Then, just double click on that file or open with.. your favorite browsers (Chrome, Safari, Opera, Mozilla, or IE).
If you want CSS, you can attach it to the index.html by using <link rel="stylesheet" href="file.css">.
Note : You would only need Node.js when you are dealing with AJAX method like using XMLHttpRequest or $.ajax() method due to CORS (Cross Domain Policy. Other than that, just play around with HTML and CSS with the browser.
My Personal Journey to the Front End Web Development
About me
I am currently working as a full time Front End Web Developer and I self-studied coding for 2 years now (I started this in June 2012) from almost zero knowledge about coding. When I started this, HTML5 and CSS3 were briefly introduced to the public so I learned HTML4 beforehand.
Web is fairly a big topic if we talk about the full stack integration (from the browser to the server to the database). If you are into the front end (HTML/CSS/Javascript), start off with some online tutorials (link below), then try to create your own web product (it could be a website or a web app). Try to improve a bit by a bit, and if you ever get stuck, you can always google search your problem and try to find the solution online (usually StackOverflow).
About Text Editor
I think the best way to learn is to get your hands dirty with minimal code help as possible. This will force you to remember most of the syntax and in turn increase your productivity. I was using Notepad++ but then switched to Sublime Text (Currently Sublime Text 3), and is my favorite text editor up until now. I know my co-worker is using emacs or vim that has a lot of keyboard shortcuts. Personally, Sublime Text is good enough to write HTML and CSS. Link: http://www.sublimetext.com/3
I started learning HTML and CSS from these links:
Paid
http://www.codeschool.com
Free
http://www.codeacademy.com
http://code.org
Hope it helps,
Yanuar Wibisono
Have you looked at w3schools html and CSS tutorials ?
They have a very handy "Try it yourself" button which allows you to try out your own code and see the results very quickly. The tutorials themselves are also well written with plenty of example code.
For HTML and CSS, I would recommend the text editor Microsoft WebMatrix, which is a standard program for Windows. For learning HTML and CSS, check out http://codeacademy.com. It's one of the best places to learn HTML, CSS and a bunch of other coding languages.

Finding out how a website is coded

I'm trying to figure out how to program a website that looks very similar to http://www.renthop.com/.
I'm new to web coding, so I'm not really sure where to start. For example, is it Java or HTML? Or both? I really like how its setup, the responsiveness and smoothness of it. I just want to make sure I start off in the right direction in terms of choosing the right language etc.
If anyone has any idea of what this is based on it would be greatly appreciated!
Thanks - KC
The server-side code is PHP, the front-end is built off of the jQuery and jQuery-UI javascript libraries and a series of third-party plugins. The final product is a dynamic HTML application.
Do you want to launch your website? If so, creating a website from HTML would only make a website on your local hard drive, not public. You're going to need a domain name and hosting to make it public.
HTML is a markup language for formatting websites, but you can still create a website out of it. Not public, as I said above.
CSS is rulesets for telling the browser how to display the HTML formatted content. It is also not a programming language in the same way HTML is, although it can be a lot more powerful.
Javascript is a programming language. You use it to make the website interactive. Get Firebug or a similar add-on for Firefox, or just right click and 'Inspect Element' in Chrome to see the javascript for more detail on what javascript does.
AJAX is an extension of javascript to get data from the web server and update the page with it, without having to refresh the page.
PHP is code commonly used server side to interact with the filesystem and databases and output HTML. You can also use python, perl, .NET and a handful of other languages/frameworks to do this.
MySQL is a database.

guide on how to kick start template based flash website?

I'm very new to flash and as3 design patterns. But I can read and write as3 quite ok, i've created small widgets with that. I've developed several web sites using php and also python.
Now for a educational cd-rom project i'm working on, i've basically designed all templates (A home page, a generic page with navigation and a sidebar - kind of like a wordpress blog). I have all the data for the cdrom on word files, which i intend to place on xml files.
My question is what is the best way to start a project like this? Can anyone guide me to a template or something that can be used for kickstarting this? kind of like a wordpress (without the admin)? Or am i on this all wrong? Can someone please help
The Gaia Framework may be useful to you for this project.