Need help with checking code for website (New to coding)

[LukaSnow31]

Body

Hello everyone, I am completely new to coding and really am struggling to get my code to work even though I tried to split my code into different HTML pages as well it just not going to plan at all. It only seems to work if it on one page which is not very ideal.

Any help I can get would be highly appericated and please be patient with me, I have never done coding before and I know it wasn't going to be easy considering I only started this project 2 weeks ago.

But if anyone could help me I would be highly greatful as I want to keep learning and improve my skills.

Also not sure why when I did have my navbar working fully that the tags in the html were not popping up like they should do as in my domain name/this page.
!DOCTYPE html.txt

Thank you in advance for any help and advice.

Guidelines

• I have read and understood this category's guidelines before making this post.

[mkmckenna]

Hi @LukaSnow31,

A lot of people struggle with this sort of thing when they're starting out, so I wouldn't get too disheartened. It's all part of the learning process.

I've taken a look at your code and the first steps in tackling this would be to single out areas that make most sense to move into seperate files. After carrying out each small refactor, make sure you test to confirm your webpage is working. This will allow you validate what you are doing in correct and if there is an issue, you will be able to identify what caused the issue much easier.

This is how I'd break this down.

CSS

You have a bunch CSS wrapped inside a style tag from line 9 to 145. You probably want to move this into a stylesheet that you can import. It looks like you are already importing a style sheet on line 7:

<link rel="stylesheet" href="styles.css">

Try moving your styles within your styles tag into that file and confirm if your webpage still renders with the styles as you expect. If this is the case you have successfully broken down a large part of your webpage into a more logical component. If you are experiencing issues importing the style sheet, confirm the path to the stylesheet is correct. Developer tools in most browsers can help you here, although I'll not go into that right now.

HTML Content

To break down HTML into seperate files we'd need to know more about your stack. You can't import HTML files using HTML itself, but if you were using something like PHP or another programming language, you could break down your HTML and import them in logical sections, such as your nav bar being contained in a seperate file.

I hope that helps a little.

[LukaSnow31]

hello mkmckenna,

thank you so much for the information, I highly appericate it :) and well it does seem to work the website https://otakutokyo.co.uk/ can take a look at the link as I purchased a domain name and seem to have to DSN working just not a 100% due to the CNAME bur A records are working.

Do you think it best I seprate the CSS as well into a seprate file? as I been trying to follow some ytube vids but of course some it goes over my head as being new to this all.
How does linking work as I tried several methods but can't seem to get them to link up (hopefully that makes sense)?

Thank you once again for the help so far :)

[mkmckenna]

Your link seem to be working for me!

Generally yes, it is best to seperate out CSS into it's own stylesheet. This allows the browser to cache the stylesheet between page reloads and also breaks down your websites code into more logical components.

Is your entire website just hosted from a single HTML file? Is it possible you are using another lanaguage to do some server side rendering? Are you just using javascript to load different tabs from the navbar?

[LukaSnow31]

Thank you once again mkmckenna. I actually didi some reworking and managed to sort out the htmls and rework things around with the help you provided me and is working much better :D.

originally everything was on a single html file but as can see on my screenshot I have corrected this and it all working fine :)

[ebndev]

Hi @mkmckenna, thanks for taking the time to answer and go through the code 😄

@LukaSnow31 glad you were able to resolve your issue!