CSS issue in vs code - html

I'm new in VS Code and I'm trying to figure out what went wrong here because css won't work for me. The link is good because it opens with click + ctrl. Both files are in the same folder. So why isn't it working?
Edit saved:

Seems like you didn't save index.html. See the round dot? It means it's not saved.
Your code seems fine. Also, it's always better to use a browser than using built in preview.

Use an browser and save your files changes for see your proyect.

Save file and try opening it with a browser. I always prefer browser to test a file. Sometimes 2 browsers if it has a problem. I suggest you to use sublime text 3 or notepad ++ with vs code because it can save you from a lot of headaches. :)

Related

How can I add HTML code with notepad without installing an IDE

I am a starter in programming. One of my friends told me that I can start programing without installing any app and that I need only notepad to start learning HTML. The thing I can't find out is how I actually make it work. I inputted the code he gave me and I also made sure there where no typos, but then after I saved it I can not open it as a local file. I have only been able to open it as a text document so I can only see the code.
For this you have to save the file you are working on with the extension: .html. Then you have to open it with a browser, and you will see there the content of it
you can create a notepad and save it as name.html (not as .txt)
write the code inside it.
You can start with the notepad software. Unfortunately, this is not the best option. In fact, specialized software is recommended. Thanks to them, you will be able to write code faster thanks to the suggestions made by the software or to the very useful shortcuts! If you want to use this software, I recommend you one of the best on the market: Visual Studio Code.
If however you want to stay with notepad, you just have to click on "File" > "Save as" and to choose the type of file you want. In your case, it will be .html (Hypertext Markup Language)
You can create a file called [filename].html, and right click on it to open it in notepad. After Editing the file and adding your code to it, you can double click on it and it will open in your browser.
If you start enjoying to code, getting an IDE will make it much better. Visual Studio Code is recommended for this as it is user friendly and won't take up much storage space :)
code.visualstudio.com - Visual Studio Code
After saving the HTML code save it as filename.html, make sure that file extension is .html otherwise the filesystem will not recognized it.
Then right click on the file and open it with chrome or whatever browser you have and it will work, else open browser and drag it to browser and drop it, your html page will open in browser.

is there a place online to upload a json file and export it in html?

I have bookmarks downloaded from firefox and they are a json file.
I'm searching for a site where I can upload the json file and then download it in html format.
Does such a site exist?
THANK YOU for your kind assistance.
(Every time I do a search for this question, your site comes up.)
I don't know of a site that will do this online, but I do know of a few other ways:
You could restore them back into a Firefox profile and then export them as HTML from there, like this:
You could download and run a program like https://github.com/andreax79/json2html-bookmarks to convert them locally
You could use JavaScript to convert them in-browser, though not with an actual site, like this: Quick and dirty way to parse a mozilla firefox json file
If you need to display JSON, try with the firefox extension named jsonview.
Check out CodeBeautify, just paste and hit the Beautify button https://codebeautify.org/json-to-html-converter
There’s a lot of plugins and add ons for almost every browser out there; Firefox and especially chrome have great ones as others have mentioned, it’s worth checking out.
You are making it harder than it is. There is no JASON to HTML conversion required. Go to C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default and find bookmark.file. Save it to your desktop. Uninstall the browser but also check the box that asks whether you want to keep history, etc.
Reinstall the browser, then add the bookmark.file to C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default
It will overwrite the file and you have your bookmarks back. It takes about 10 minutes. No coding. No JASON to HTML conversion. Nothing.

Same HTML source files but display differently

I'm new to bootstrap. I want to use the bootstrap on my previous project. But once I included the bootstrap.min.css it failed, while it can work fine if I create a new html from scratch.
I've uploaded the sample files in GitHub: https://github.com/kid551/toolbox/tree/master/bootstrapSameFiles . You can check that the test.htm and test2.htm are the same files but they will display differently like this:
test.htm:
=============================
=============================
test2.htm:
=============================
=============================
I think you can rebuild this issue by directly downloading from GitHub.
I don't know why it happens and how I fixed this.
Thanks.
You're running into some encoding issues. Even though your code base seems to be the same - it isn't. Let me show you visually.
The moment I switch from UTF-8 to UTF-16 BE, your working versions (test.htm) code gets cryptic, while the other one seems to be pretty well working.
test.htm (UTF-16 BE)
test2.htm (UTF-16 BE)
So eventually you might have copied your code from somewhere else or even used a wrong encoding.
EDIT
You can test that with any editor which is able to show you some code. Just try to delete a linebreak by hitting backspace at the first index of a row. You'll notice on almost every row that you're not deleting the linebreak but an 'invisible character' instead. So that again means, you're just not able to see those charecters your editor is not able to encode properly.
I have downloaded your source from the GIT. You are right both are similar but there is something wrong with the test2.htm file. I have NetBeans installed on my local. When I open test2 file its showing source as empty in NetBeans.But if I open the same file using notepad++ it's showing the source. So maybe file is corrupted. What I suggest is try to create the new file or use NetBeans. After saving using NetBeans its displaying same as test.html

My CSS file is not saving

I'm working on a web page project, with an HTML file and a CSS file only. I use Sublime Text 3 for a better programming environment, I also use XAMPP to debug my code and test it on Chrome.
When I'm saving my programming files, the HTML one is saving, but CSS one is not saving; I checked it in the directory and opened it to view if my editions are saved or no, they are, but they don't show up in the debug using XAMPP and Chrome.
Why aren't my changes showing up in debug?
Try deleting the Chrome Browser's Cache. It might be creating that problem
It doesn't let me comment, but this is adding onto the users answer of clearing the browser cache.
Clear browser cache in chrome: https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
If the issue resolves after clearing your browsing cache, what I usually do when working with stylesheets is use the Chrome browser in incognito mode, it usually doesn't store cache in that mode, so after closing the tab and revisiting, it should show all of the changes.
fisrt try to clear/delete your browsers cache and if that didnt work try the steps below.
Lets say all your css code is in a file called style.css, what you need to do is:
you can just change the name of your file to something else for example style2.css (dont forget to also change the name in html file)
or
create a new file for example new-style.css.
copy and paste all the css code that you have from style.css to
new-style.css.
and lastly just delete style.css.
after that you can rename new-style.css back to style.css Or you can
keep it like that. doesnt really matter as long as you remember to
change the link name in html as well.
It might not be the best way to solve this problem but it works.

Is it possible to save changes in Firebug locally?

What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.