Still a total noob here, I have watched a few videos on github, read documentation, and read other post but I keep getting errors when trying to host a project on get hub to test it with there instead of subscribing for a monthly fee to codepen. Don’t have much of a problem with that but I’ll have to learn github eventually so I am trying to give it a go.
I know this has to be a simple fix that I am just rattling my brain with, I don’t really know what information I am missing, if it has something to do with my files or what but I desperately need some help.
My method so far has been creating one file with everything in it to test on chrome or firefox. Everything I have found about how to load files on github uses bootstrap or something else to build the website. I am just using sublime and coding everything from scratch. I feel like it should be as easy as
make repo
upload html
upload css
go to setting, then pages, then change it to master branch.
Forgive my ignorance but can someone please point me in the right direction? https://github.com/williycole/tributepage
I literally just re did this and it gave me an error like 5 times and now it worked…wuut. lmao. But no CSS, does the css need to be in the html file as well?
In your code, there are a lot of mistakes, because you used CodePen. You are supposed to have a <head> tag after the <html> tag ALWAYS. Then its the <body>. That’s the basic Boilerplate of HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Title </title>
<link rel="stylesheet" href="your-css.css">
</head>
<body>
<!-- EVERY content goes in here -->
<!-- The end of the document is usually where you put JavaScript -->
</body>
</html>
This is the basic ground boilerplate for HTML and usually is forgiven by HTML, but it is necessary to know the basic thing. What you can also do is go to the W3C Validator and Copy Paste your code there. That tool will help you a lot:
You got it right, but for one thing though. <title> in the head, is not supposed to be used as a title inside the page, the <title>tag is for the top of the page like this
You still have to use the <h1> for titles in your page. But other than that, You’re good. Great Job figuring this out. It took me almost a full day, trying to figure this out the first time. You took a little over an hour or 2. I’m impressed.
Thanks again, I’ll take care of that. This form has some solid folks on it. Thanks, although I have to admit that the hilarious part is I figured it out in 2 hours, but didn’t realize that
that I had figured it out until like 3 or maybe closer to 4 hour in.
You can make sure you’re always adding proper “boilerplate” in codepen (and many other places) simply by typing “!” and pressing tab. It’ll automatically fill the proper structure in for you and you only have to edit it where there are changes. Some of the Emmet bindings like this work there, but not all of them – it seems like they are using an older version. These work in VSCode and Sublime Text as well, so you’ll be using those a lot.
You don’t have to pay any subscription fee to do the FCC projects on codepen. Each of the “projects” can be done in a codepen pen.
The free version of codepen allows only one project, but an unlimited number of pens. For this reason freeCodeCamp suggests the use of pens to do the projects for the first certification (note that the examples are in pens, and the test suite is also in a pen you can fork)
Gotcha I’ll look into that more, I did some github tutorials and have that working now so I may stick with that. Although getting a background for the survey form project has proven to be a nightmare but I’ll post that question later. Is it acceptable to basically just post a block of code and kinda ask for some help understanding line by line?
Yea I was unfamiliar with the boilerplate until yesterday, got any more basic stuff I should be aware of that might have been missed in the tutorials, good articles anything? I am a sponge so I’ll take all I can get!
Honestly, the tutorials here are pretty comprehensive. But, what you’re missing is:
Emmet use. You really need to master this thing… It saves so much time. VSCode, Sublime Text and many other editors include this (Sublime needs a plugin)… Codepen uses an abbreviated version. You will probably never code web pages on a non-emmet using ide/editor professionally. It reduces errors and allows you to write huge blocks of boilerplate code with simple expressions.
JS ES6 Code snippets. Another thing you’re probably going to use all day. VSCode only, but I consider it mandatory for speed and the reduction of errors it provides. Other editors and IDE have similar plugins/functions, but these are generally mandatory to learn. You effectively become able to code at least 10-20% faster.
Build a bookmark list of dev tools like things to help you make icons, select color pallets, and import js from CDNs. You’re going to need to do that stuff all day… Start finding some good stock photo places too… You need them to prototype all sorts of websites. I use https://www.w3schools.com a lot as well as a reference to what tags can do… No tutorial really gets past the most basic uses of the tag/element.
Just as a side note, <html> <head> <body> are not required. It’s recommended by programmers to add them for intention and for explicitly; but, know that it is not required by the HTML spec.
