GithubHelp home page GithubHelp logo

week2.day0.fantimeline's Introduction

week2.day0.fanTimeline

Instructions

  1. You will be creating the timeline for a celebrity or fictional character you like.
  2. Wireframe the website with pen and paper, keeping the following in mind:
    • Include at least 5 major events in this person’s life
      • The person’s birth does NOT count towards this
      • The events should be displayed in chronological order
    • Each major event should have a short title of the event and a longer explanation about the event and its significance.
      • You’re free to create your own description or copy it from an online source.
      • It’s easy to get caught up writing content, but the point of this project is to focus on how to arrange (HTML) and display (CSS) the content more than the content itself!
    • Once done, present your wireframe to your instructional team for approval.
      • If your wireframe is not approved, make any necessary revisions and try again.
  3. Once approved, use command line to create a new project folder called "fanTimeline"
    • Navigate into the folder and create your required files (index.html, style.css)
      • Make sure to properly reference the css file in the "index.html" <head> tag
    • Feel free to include additional files according to your needs
  4. Create the basic HTML structure with the text content filled in.
    • Try using Semantic HTML Elements
    • NOTE: Your timeline will look pretty raw at this point and probably won’t match your wireframe. That's OKAY; your CSS will take care of that!
    • If you’re having trouble with your HTML, try using an HTML validator
  5. Once you’re satisfied with the content and layout of your site, begin adding style in your "style.css" file
    • NOTE: if you’re not seeing any style changes, be sure to check that you’ve referenced it properly in your "index.html" <head> tag

Extra Credit

  • Format your HTML and CSS files to adhere to industry best practices:
  • Add an image for each event in your timeline
    • Try referencing the image via file (you’ll have to download it into your folder)
    • Try referencing the image via url (it should end with .png, .jpg, .gif, or other image extension)
  • Include a custom font from Google Fonts or via a font you’ve downloaded (see @font-face for how to use it)
  • Color schemes (perhaps provide for now)
  • Create a "script.js" file and reference it in you "index.html" (in a <script> tag at the bottom of the <body>).
    • Have the script execute a simple console.log("testing") command
    • In the browser, open Developer Tools (Ctrl+Shift+I or right click and "Inspect" ) to see the "Console". You should see the result of your code executing.

Helpful Resources

week2.day0.fantimeline's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.