LearnHow: Make a CYOA Game using HTML & CSS



Learn how to make a ‘Choose Your Own Adventure’ game using HTML and CSS in less than 40 minutes. Links: HTML tutorial(https://www.youtube.com/watch?v=M-r-GkyAGvY), CSS tutorial(https://www.youtube.com/watch?v=01By2KinUGw), game images(http://tinyurl.com/je5hgdn), Paint.NET(https://tinyurl.com/y8quuu2h), Free Music Archive(http://freemusicarchive.org/), Visager’s music(http://tinyurl.com/h7kp24w)

37 thoughts on “LearnHow: Make a CYOA Game using HTML & CSS”

  1. I went to the Free Music Archive website and nothing will actually download. I thought I might need an account so I created one, but when I go to log in, it just keeps reloading the login screen. Since this video is 2 years old, is there another place I could get this music or something like it?

    Reply
  2. Cool, i was wondering how would you make the pictures clickable but i had no idea it was that that is simple. I thought you had to add some other picture and make it clickable or something or do it with onclick event with JS.

    Reply
  3. I have learned adobe photoshop,adobe illustrator, dreamweaver, premiere pro, basics of indesign. What's excites me next is,from designer i want to be a developer now. N am excited.

    Reply
  4. Hey, can anyone tell me where I can get assets for a chose your own adventure game because I want to make one and I don't know how to do those assets

    Reply
  5. I used just paint to make my pictures. also you can use a text feature in paint that includes the papyrus font! I LIKED AND SUBSCRIBED!

    Reply
  6. What Editor is this, it looks pretty nice?
    When using Position: Absolute; then Left: 80px; is it possible to take the overall (width / 2) (minus) length of title for a perfectly centered text regardless of screen resolutions people may be using to view the page?

    Reply
  7. For all the people who have struggled with their images loading, I have figured out how to get it to work! (keep in mind I'm a total noob and this may not be the best way, but after struggling with this for like a week T_T I'm just sharing my findings) So, just like in this video, you make a <div> (it doesn't have to be a <div> it works with the img src="blah", but I like the look of the words on top of the image so..moving on!) BUT, instead of using an image straight from your computer, you have to download it from the internet. Idk why but it works. (someone commented before that it might have something to do with the security on your computer? Idk XD) Anywho, I downloaded my own art from deviant, saved it to the same folder as my html and entered it like the video said to.. <div id="whateveryounameit"> </div> then in CSS your enter… #whateveryounamedit { background: url=("yourimage.jpg") } Don't forget to add the height and the width or, like he showed in this video, your image will get cropped. So I hope that helps!! Onwards to more coding adventures!! at least until the next bug pops up and I want to throw my computer across the room, again XD.

    Reply

Leave a Comment