Nav links broken and <s showing as errors in VS Code - html

I'm building my website directly in HTML, CSS, and JS for the first time. Everything was working perfectly until I signed up for an iOS app called Clone, which I synced with my GitHub account. Inside my faq.html file, I added one space between a link and a word in a paragraph, just as a test.
Afterward, the nav menu on the FAQ page broke and all the <s turned red in VS Code. At the suggestion of #Samirovic, I changed the page icon img src to include _s instead of spaces, which fixed the < errors.
But the URL problem is still happening. The nav menu works on every page except for the FAQ page, which I updated in Clone. On that page, I still get a 404 error page and the URL is doubled within quotes for some reason (which is what causes the error).
URL Example: https://studiooriley.github.io/“https://studiooriley.github.io/contact”
I can't figure out why using the Clone app to add a single space to an FAQ question would cause these issues. I have triple-checked my nav links and can confirm that they're correct. I've been researching for the last six hours and can't find any way to fix this or even anyone else with the same issue.
I would love any help you can provide! I will admit, I'm very new to coding and GitHub, and I didn't understand branches until now, so this all happened in my main branch. I have since made a couple of adjustments in a new branch and in the main branch. I hope you can help. Thank you!
Here's a picture of my HTML in VS Code.

Because of the spaces in the image name inside the src , you must use _ between words

Related

Favicons in HTML Templates

I used a HTML free template from Colorlib.com. I gave them recognition and put copyright at the bottom of my site. However, I want to change the favicon to my own (they made their own, but I want to use mine). I got rid of the favicon image and replaced it with mine but even after committing changes and deploying, it shows the previous favicon. How is this possible? It's not even in the folder... How can I fix this?
Github: https://github.com/Ispeeta/Connect-to-Change/tree/master/img/core-img (this is where I kept my favicon, the previous one on my site was a "K" but I want to have a maple leaf)
Site: https://connect2change.netlify.app/stories
Clear your cache to fix the problem.

GitHub page displays correctly locally, partially in HTML once pushed

I'm having trouble with my GitHub site. It builds just fine locally, but I'm encountering lots of issues with functionality online. My repository is here and the site is http://www.williamcapecchi.com.
The images are not being displayed in the post list and clicking any post or project leads to the page being displayed in HTML and losing the stylesheet. The link should also take you to this homescreen (or by clicking my name or profile pic on the left of the screen the link actually takes you to) but this home screen is not working either. I've made sure my version of Jekyll is up to date, but I haven't changed anything recently and can't figure out where the problem is. I'm new to site building so I feel like it might be an obvious answer, but any help or advice would be much appreciated!
Thanks,
Bill
Instead of using hrefs to your main.css, etc. with just css/main.css, just use a fullly qualified url using jeykl's site.url tag, such as '{{ site.url }}/css/main.css'

XCart page showing random code at the top of the page

I'm building a website using x-cart and all of a sudden I'm getting this line of code appearing at the top of the page.
class="area-c skin-customer skin-XC_ColorSchemes-customer skin-theme_tweaker-customer authorized target-main no-sidebars">
While navigating through the webmaster mode theme tweaker, it appears this line shows up outside what I would expect in the content (that is, when I click on regular page content the relevant file in theme tweaker is highlighted yet nothing happens when I click the code).
Any advice on clearing this away would be greatly appreciated, thanks!
So it turns out in one of my template files there was an if condition followed by a class without an opening bracket.
I think the reason I hadn't spotted this is that rather than matched the text above, the code read along the lines of
case="{function.doThis()}>

Failing anchor in Firefox (html)

In run in to some trouble with referring to an anchor at another page.
In Chrome it works in the way I expect it to work, however it won't work in Firefox.
The problem occurs on the page from the following link and then the link in the last line, called 'Artikel 8'.
https://toernooi.skeuvel.nl/programma/
The idea is that it goes to 'https://toernooi.skeuvel.nl/reglementen/' and scrolls down to 'Artikel 8'. Someone who can tell me how to fix this problem?
I'm not having much experience with html...
The page is in dutch, but that won't be a problem the understand the question I think...
In your anchor you are referring to a URL with an appended .html suffix. Remove that so the link is like so:
Artikel 8
Be aware that when a page scrolls down to a fragment identifier, it can only go so far as the height of the page allows. In its current form, the page you are linking to is not heigh enough for the fragment identifier to position itself optimally.

How I do edit the css for just the home page on Magento?

When using a template purchased from another site, by default the home page looked nice and the other pages had headers that were slightly 'off.' When I asked about repairing the pages, I was given some .css code that fixed the other pages, but now the home page is off (seems pretty obvious).
Here's the site: http://nyctodesign.com/gulfsales/index.php/
As you can see, the header is correct for every page but the home page. I looked up how to edit the .css for just one page, and got a tutorial that suggested a new file, say 'home-page.css' with my correct code, and this snippet of code below in the custom design xml:
<reference name="head"><action method="addCss">
<stylesheet>../theme300/css/home-page.css</stylesheet>
<params>media="screen"</params></action></reference>
I tried this code, and there is no change in the webpage. Can somebody point me in the right direction?
Okay, I ended up fixing it by coding opposite CSS as the other file - it gave a margin of 31 pixels on the header, so when I included the new home-page.css file, I changed this line to 0 pixels instead.
The code used above worked, I just had the relative URL in there incorrectly - now it uses the code I provided ONLY on the home page, and overwrites the regular 31 pixel margin.