How to run simple HTML & CSS project in WebStorm? (404 localhost) - html

I'm trying to run simple UX project.
I have HTML and CSS files, but I don't know, how to run it with WebStorm. I've tried to click on Chrome icon, but 404
Please, help me

right click on index.html page in webstorm and choose run from menu or press ctrl+shift+f10
also you can run page directly from browser address bar:
file:///D:/Frontend/01-about-cats/index.html

Related

how can i directly open browser to view html file from vs code?

I write HTML and CSS code in VS Code and for previewing it I need to open file explorer then files then double click them to open them in my default browser.
it takes too much time. is there any proper way for this?
I have tried one live extension called live server but the problem with it is we have to click the 'go live' button any time I want to refresh the code.
If the live server extension is the one by Ritwick Dey..
.. then then after clicking Go Live, it will open your page in the default browser and reload it automatically, every time you save your work.
in some cases, it is helpful to save the folder containing your HTML to a Workspace, in VS Code, especially if you are writing an app using the MVC modal and the HTML and CSS are in subfolders.
You can install an extension called open in browser.
After installation complete restart vscode and go to settings Ctrl + ,. Search for Open-in-browser setting and set your default browser as you can see below:
Then whenever you edit a html file, you can use shortcut Alt + B to open this file in browser.

how to avoid errors in vscode when making a wordpress theme?

How to avoid errors due to not having the specific functions of wordpress inside the projet when making a Wordpress Theme on Visual Studio Code ?
Is there a plugin to download ?
Wordpress stubs are included in In VSCode.
You just need to activate it.
If you follow these steps your errors will disapear.
Hit the gear icon.(bottom left)
Select settings.
Search for stubs.
Scroll all the way down an click
on 'Add item'.
Hit the dropdown menu.
Press w(on your keyboard) and
scroll to worpress and select it.
Hit ok.
Now all the error should disapear.
If not, try to restart VSCode.
Open VS Code in the root of the WordPress installation.
You get this error because you are referring to functions that are not in your open files in your editor.
You can try using WordPress Stubs https://github.com/php-stubs/wordpress-stubs. The easy way is download this file https://raw.githubusercontent.com/php-stubs/wordpress-stubs/master/wordpress-stubs.php (Wordpress v5.8.1) and paste in your theme.

Cannot connect to localhost on Chrome when using VSCode

Just written a HTML document using VSCode. When i run via Chrome it opens a window on localhost:8080, but says that the site cannot be reached. 'Refused to connect'
Can anyone tell me where I'm going wrong?
Usually use Notepad++ which i realise is so much more straightforward than VSCode.
Thanks.
You can just click on the file and it will run automatically.
You don't need localhost to view an HTML page, just find the HTML on your desktop or documents or where ever you created it, right click on the file and open it with a browser of your choice
You can then edit the file in VSCode or Notepad++ or any text editor of your liking, then go back to the browser and reload the page to see the changes to your file
You enter your project. And you can run as writing 'ng serve'. VSCode will show your localhost and you should press it to run the project.
[Javascript],[VisualStudioCode],[AngularJS]

Cannot use Chrome Live Edit with Webpack source maps

I have a webpack 4 configuration that generates source maps for my app's JavaScript. While debugging my app in Chrome, the source maps get loaded so I can see my unimified code. I'll set a breakpoint in a function and in the Sources tab I'll make edits to the code. I hit CMD+S to save my edits.
Normally, I would expect Chrome to think for a little bit while it processes my edits and then I can continue debugging my session with my code changes.
But that doesn't happen. I get a little yellow icon next to my file in the Sources tab that says "Changes to this file were not saved to the filesystem". And the debugging session continues without my code changes.
I've tried different options like cheap-module-source-map and cheap-module-eval-source-map for the devtools option in my webpack config.
Any suggestions? Thanks!
I got something working!
I ended up posting my same question on reddit and got some help.
https://www.reddit.com/r/learnjavascript/comments/a98gh1/cannot_use_chrome_live_edit_with_webpack_source/
You need to add your project's directory to save changes in the
source.
Here are the steps:
Open dev tools
Click on the 3 vertical dots on the far-right beside X which brings up
a menu. Click on Settings
Click on Workspace
Add your Project's directory
Refresh the page, and you should be able to save your changes now.
Hope this helps.
Oddly enough, I was able to remove my Project's directory from the Workspace and STILL able to make Live Edits to my source maps!

Css file not loaded on first time, but available in browser when i manually open the css url

I am using gulp task in my project, and when i open the project in browser, sometimes it says app.css is not available, but when i enter the same css url to another tab it opens correctly. cant understand is it a gulp problem or some other.