I'm very new to coding and web development. I'm working with HTML and CSS at the moment. The trouble is, I can't see what I'm coding.
How do you load a HTML and CSS file onto a local host so that you can see what you are doing?
Really appreciate it if you could give your input. :)
I've had this question as well, haha. But you'll learn.
So there are two solutions here; one using a localhost and one just simply viewing the file.
I'm not sure what device you're on, but to view your file, just simply double click it as you would do to open any other file. Then you will be able to see your code and what you're programming.
The second solution is the use of a localhost; it's basically a test environment for your website to view it during development.
To set up a localhost on a Macintosh device, you simply go to the Finder and search for Terminal, later open it and write; python -m SimpleHTTPServer.
If you have a folder for your files as well (which is recommended for future reference), just use cd and type where it is. The easiest method would be placing it on the Desktop, and then write in the Terminal; cd Desktop -> cd the-folder-you-have-your-code-in and then write python -m SimpleHTTPServer.
To access this server, just type localhost in the search bar where you'd search for items on the web.
Hope this helps you, and welcome to the developing society!
For future reference, when you become a full-fledged developer, don't use Homestead/Laravel, it's a pain in the ass when you don't understand it. Use WAMP, MAMP, or XAMPP based on what device you're on.
Just open the html file with your browser. On Windows, in Windows Explorer right click on the file and choose open with, then choose your browser.
file:///[complete path to your file] does the trick in Chrome, Firefox and IE, but as #Atrix said, right click + open in [your favourite browser] works too.
You might want to install a full-fledged webserver one day or another though, like Apache or nginx. You also have full stacks servers available (usually coming with a PHP interpreter and a database server), like WAMP (on Windows), or XAMPP (on Windows, Linux and MacOS)
You can do the following:
On a Window machine at the prompt type start the-HTML-file-name
Here is an efficient alternative:
Go to W3Schools Tryit Editor. Wait for the page to fully load. Then enter the following line in the browser's console and press Enter:
document.getElementById('textareawrapper').setAttribute("onkeup","submitTryit(1)")
Now start typing your code in the text area. This is far better than working with a text editor as it shows the output directly as you type.
Related
Good evening!
I am on a linux machine using the Hyper terminal as my day-to-day terminal emulator. I have found a color scheme I really like, but unfortunately, it seems there isn't a hyper theme available that's close enough to my likings. I thought it would be simple to just use a custom theme, but I'm struggling to see whether or not it's possible.
For now, i have an index.js file I copied from another theme, replacing the colors with the ones i want, and a package.json, in a local directory, but since I'm not running a dev version of hyper, i don't see how i can use them on my machine, without publishing them. Is there a solution to this?
Thanks in advance!!
I’m a beginner and I’m using VS Code for coding. I’m learning HTML and CSS. When I debug the code on Chrome I see the following:
This site can’t be reached. localhost refused to connect.
Please, I need help to solve this problem, hope I get the help soon. Thank you!
Try Live Server Extension AND check for Firewall Settings
This problem is either because you didn't run anything to serve up the files or a firewall issue. If it's a firewall problem then check your firewall settings for anything that would block it, but most likely you need something to serve up your files. There are a number of ways you can serve the files
Option 1
Use the Live Server extension. In VS Code you can search for it and install it, then with a click of the "Go Live" button on the toolbar, it will serve your files on localhost and open the browser for you.
Option 2
Use http-server, which will serve up your files with a simple command line command.
Option 3
Use Node.JS to serve up your files. It's a very popular technology, but is more complicated compared to the first 2 options if you just want to fiddle with beginner JavaScript, you may need to add a start script.
-- OR -- just open the file with your web browser. You can double click on file you want to open from File Explorer or right-click >open with browser of your choice, in which case you don't need to run a background software to serve your files and you can use the browser UI and console for testing. In this case you just wouldn't have VS Code available to use with it's debugging tools.
Alternatively, you can try using Python's SimpleHTTPServer if you have Python on your system.
1- from xampp window select httpd.config and search about Listen make it Listen 80 , search about localhost make it ServerName localhost:80
2- from xampp window select httpd-ssl.config search about Listen make it Listen 443 , search about VirtualHost _default .. make it VirtualHost default:443 , i did that and localhost worked normally
I set up apache2 for training myself to write php and javascript files.
It functioned fine for a while.
Then the browser (Firefox) started asking me whether I wanted to open or download the files I was working on.
Even if I say "open", it first saves a copy of the file in
file:///tmp/mozilla_name0/index.html
and then it renders it in a new window.
I open the file with
http://localhost/index.html
I tried replacing localhost with 127.0.0.1
-> no effect
I tried "sudo chmod 000 mozilla_name0
-> it started using mozilla_name1 instead
I looked in about:preferences / Application but there is no option to tell Firefox what to do with html files. Probably because it should know!
I looked in about:config but I didn't see what I should change in there.
I looked online but I couldn't find this issue. I even searched in bugzilla.org
I don't know if this an apache issue, or what.
I don't think this is a browser issue because I installed opera, tried to make it execute my html file and it downloaded it instead.
Please help.
I have been learning web development for some time and I have noticed on tutorials on youtube that when someone change source file (html, css, js) the webpage opened in browser is automatically refreshing. I have read something about live-reload but it's too complicated for me and there is no step by step tutorial.
I have found some similar questions, but the case is that refreshing happens by side of local server not the code editor or browser as is mentioned in questions that I found.
I'm using Apache as my local server. Sublime Text for writing a code and Ubuntu operating system.
Here is the video that shows what I am exactly trying to say.
https://www.youtube.com/watch?v=q78u9lBXvj0
Npm and live-server doesn't work on my computer at all.
Sorry for my english, but I'm not a native speaker. I'm looking forward for your help.
Anyone knows anything?
Install sublime web server using package manager ( or in your case continue to use Apache )
Use http://livejs.com/
I was using a Chrome shortcut with allow-file-access-from-files in the target to work on my three.js student project files. But sometime this morning this stopped working and it appeared Chrome had been updated. I redid the shortcut but no joy.
Part of the project I'm doing is building three.js animation that works in a common browser (for which I chose Chrome).
Is there any way to get Chrome to allow file access again?
Thanks.
The answer I came up with was to use Firefox instead of Chrome changing the security policy as detailed in https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Not a perfect answer but with a deadline looming it's the best workable answer for me right now as trying different variations of Chrome, trying Wamp and also Mongoose didn't work. If I had more time I would work out how to use Python or probably node.js as I've seen it mentioned a number of times as being the faster option.
What gman stated is true, using the Chrome flag (and changing Firefox's security policy) does create a big security risk. But only if you use that shortcut (and it's tabs etc.) for anything other than accessing your own local files. I've been scrupulous about not using it for the internet but don't use this method if you can't be strict with yourself.
Ideally I'd recommend beginning any project with node.js.
Gman's answer is good. If you're in windows environment, and use npm for package management the easiest is to install http-server globally:
npm install -g http-server
Then simply run http-server in any of your project directories:
Eg. d:\my_project> http-server
Starting up http-server, serving ./
Available on:
http:169.254.116.232:8080
http:192.168.88.1:8080
http:192.168.0.7:8080
http:127.0.0.1:8080
Hit CTRL-C to stop the server
Easy, and no security risk of accidentally leaving your browser open vulnerable.
DON'T USE THAT FLAG! You're opening yourself to having your online accounts being hacked and your local data stolen. Here are 2 proof of concept examples
Run a simple server.
It's super simple.
Here's one
Here's one.
Here's another.
And another.
They won't take more than a couple of minutes to download and require no configuration