I am working on a Github pages site, a web game of sorts. It's called World, and it's on "worldfantasy.github.io". The game is being developed, and I'm using CSS to style the page. But Github won't recongize the file as CSS. The file is called 'main.css', and here's the code I use to link it to the 'index.html' file:
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<script type="text/javascript" href="main.js" language="Javascript></script>
<title>World</title>
</head>
But when I visit the site, the CSS backgrounds and styling don't work. It's a plain html website. So my question is...How do I get this to work?
Related
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>
I have been trying to code a website, however, my CSS link is not working as my website only displays my HTML. I was wondering if I had linked it incorrectly or if there was a specific way I have to link for Github.
Thank you!
index.html
<link rel="stylesheet" type="text/css" href="assets/css/style copy.css/">
HTML Code
Total beginner here looking for plain English answers :)
I managed to successfully link my HTML and CSS sheets when using Atom and viewing the files in my browser, but now I'm trying to get this into my GitHub pages website and I can't make it work at all!
Here's the HTML: https://github.com/isbonnici/isabellabonnici.github.io/blob/master/index.html
Here's the CSS: https://github.com/isbonnici/isabellabonnici.github.io/blob/master/CAstylesheet.css
What am I doing wrong? Really would appreciate the help here.
There is no css folder in your github account. Remove css/ from the css path. It should start working. Change
<link rel="stylesheet" type="text/css" href="./css/CAstylesheet.css">
to
<link rel="stylesheet" type="text/css" href="./CAstylesheet.css">
I am learning front-end development and currently try to understand how to use automatisation systems such as gulp, grunt or webpack. I currently picked webpack and the question is targeted to that system.
I understand its general use and built configurations to automate operations such as the compilation of .less files or minification CSS files.
The point which escapes me is that the development version of (as an example) an HTML file should differ from the production version. Specifically, my development file looks like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="onestyle.css">
<link rel="stylesheet" type="text/css" href="anotherstyle.css">
<link rel="stylesheet" type="text/css" href="bootstrapmaybe.css">
</head>
<body>
Hello World
<script src="somelibrary.js" type="text/javascript"></script>
<script src="myown.js" type="text/javascript"></script>
</body>
</html>
while the production version is rather
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="allcssminified.min.css">
</head>
<body>
Hello World
<script src="alljsminified.min.js" type="text/javascript"></script>
</body>
</html>
where allcssminified.min.css and alljsminified.min.js are generated from the the various components of the development file, transformed though the relevant webpack mechanism into a compressed version.
There should however be one HTML file, common to development and production contexts, adapted depending on the context (dev or prod).
How should this be approached with webpack?
Through some kind of HTML templating where an if-then-else condition would include the right section?
Or should the whole <link> or <script> includes sections be somehow generated and included by webpack (which to me looks like a templating approach as well, though the decision is made by webpack?
Or should there just be one include, and the components of this include would be defined in the webpack configuration file (in that case I always get the minified version, which is possibly not optimal for debugging)
Note: there was a similar question for grunt back in 2012-2014 but the solutions listed there are not relevant to webpack and, subjectively, not very aesthetical.
CSS: I would use one main. css file (styles.css) in your application. Then #import all of the other .less or .scss files into styles.css. These will be compiled by WebPack assuming you are using the proper CSS loaders (style-loader, css-loader, less-loader).
JS: Define them in your entry config like so:
entry: ['./path/to/somelibrary.js', './path/to/myown.js']
They will get combined as well into one file.
I read many articles about optimization and after many efforts I minified all my CSS files and gathered all of them in one file. When I check again with PageSpeed Insights I still get low points and google still suggests me to remove the only left CSS file. here is the link of my site . Simply I have only this minified CSS in the head section.
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>| sirtcantalilar.com </title>
<link href="/assets2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
How can I optimize delivery of my website ?
The only solution that I know is to minify the CSS file and include it inline in the head tag of your html file
<head>
<style>
..minified CSS here
</style>
</head>
Make sure you are not using too much background images.And the CDN you are using is loading your site very slow.And also that twitter widget you are using is causing your page to load slow.Remove twitter widget to test if your site loads fast enough or not.