- You will be creating the timeline for a celebrity or fictional character you like.
- Feel free to check out some of these examples for inspiration:
- Wedding Timeline
- Vertical Timeline
- Film Timeline
- Google "timeline template" and check out the images!
- Feel free to check out some of these examples for inspiration:
- 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.
- Include at least 5 major events in this person’s life
- 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
- Make sure to properly reference the css file in the "index.html"
- Feel free to include additional files according to your needs
- Navigate into the folder and create your required files (
- 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
- 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
- NOTE: if you’re not seeing any style changes, be sure to check that you’ve referenced it properly in your "index.html"
- 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.
- Have the script execute a simple