Build a Website with HTML, CSS, and Javascript
Github is pretty awesome, but somehow, they just keep doing more and more for us. One really awesome thing they do is called Github pages, where they will build and host a website for us if we put all the code into the correct Github repo. The way that actually works is pretty complicated, but from our perspective, it's just a magic personal website, for free!
As a matter of fact, https://hoppersroppers.org is run off Github pages and is actually https://hoppersroppers.github.io! Pretty cool eh?
Using the demoHtml repo you forked off in the first git assignment, convert it to a Github pages site using this guide.
Notably you will have to change the name of the repo to your username on Github for this to work properly, but there are a few other little things I am confident that you will be able to figure out.
On that same note, you'll be able to figure this out. I'm not going to give you an HTML tutorial. Think of it like the Regex section, this is for appreciation, not understanding. I want you to trial and error it, google things, find code snippets, and just make something that makes you happy. Make that site your own!
My favorite student made site so far was this one by Mr. Ashley Ball. I think it does a better job teaching than most tutorials.
Your requirements for this site are:
- Have a solid color background
- Have at least one image
- Have at least one hyperlink
- Have at least one snippet of Javascript that adds an OnClick event.
- Use CSS to make your font look pretty!
Feel free to make it as complicated or basic as you would like, and have fun playing around with it. I recommend this site: https://www.w3schools.com/html/default.asp
Web development is an incredibly massive field and I don't plan to teach you here. This is just meant to be enough for you to slightly understand how it works and get an appreciation for the hard work that goes into beautiful websites.
Plus, now you have a way to show your work to friends and family!
- Submit a link to your github.io site.
- Explain what the OnClick event does and how it works.