Return to Video

Customize the Portfolio - JavaScript Basics

  • 0:01 - 0:05
    As it is right now, we're actually giving you a pretty cool tool in the resume.
  • 0:05 - 0:08
    If you want to make a map appear at the bottom, it's actually real easy.
  • 0:08 - 0:10
    Let's scroll down and take a look at it.
  • 0:10 - 0:13
    We can see this great Where I've Lived and Worked map.
  • 0:13 - 0:17
    Here we can see place markers for all the places where James has worked.
  • 0:17 - 0:19
    To add this to your resume, it's actually pretty simple.
  • 0:19 - 0:23
    I'm going to open up dev tools again in the sources pane, and
  • 0:23 - 0:26
    I've added this line to my resume builder.js.
  • 0:26 - 0:30
    I've added mapdiv.appendgoogleMap.
  • 0:30 - 0:35
    Inside helperjs, we've got some functions set up that make it really easy for
  • 0:35 - 0:38
    you to add a map that automatically puts place markers where you've
  • 0:38 - 0:40
    lived and work.
  • 0:40 - 0:41
    Add this to your code and see what happens.
  • 0:42 - 0:47
    The functions in helperjs are using the JSONS created in resumebuilder.js.
  • 0:47 - 0:50
    It iterates through the locations, it rooms google searches on
  • 0:50 - 0:54
    all those locations, and then uses the results to put pins on the map.
  • 0:54 - 0:55
    It's pretty awesome and
  • 0:55 - 0:58
    there's actually going to be a quiz in the practice problem section after this
  • 0:58 - 1:02
    lecture, where you'll be able to break it apart to see how it works.
  • 1:02 - 1:05
    >> But beyond a Google Map, you have tons of options for
  • 1:05 - 1:08
    making your resume interesting and interactive.
  • 1:08 - 1:13
    For starters, try editing the resume's CSS to style it the way that you want.
  • 1:13 - 1:18
    If you're unfamiliar with CSS, check out our course on HTML and CSS.
  • 1:18 - 1:19
    It's in the instructor's notes.
  • 1:20 - 1:23
    >> Or you could even use a library like D3 to add a chart that
  • 1:23 - 1:25
    helps people visualize your skills.
  • 1:26 - 1:27
    I like that one.
  • 1:27 - 1:31
    It's worth poking around D3 to check out the really cool charts, graphs, and
  • 1:31 - 1:34
    visualizations you can easily add to your resume.
  • 1:34 - 1:37
    >> And while you're at it, check out the links in the Instructor's notes,
  • 1:37 - 1:39
    to other cool resumes we found online.
  • 1:39 - 1:42
    Get some inspiration and try customizing yours.
Tytuł:
Customize the Portfolio - JavaScript Basics
Opis:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud804 - Javascript Basics
Duration:
01:44

English subtitles

Revisions Compare revisions