Movatterモバイル変換


[0]ホーム

URL:


Menu
×
See More 
Sign In
+1 Get Certified Upgrade Teachers Spaces Get Certified Upgrade Teachers Spaces
   ❮     
     ❯   

HOW TO

HowTo Home

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavSplit NavigationNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridImage GalleryScrollable Image GalleryTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon

Buttons

Alert ButtonsOutline ButtonsSplit ButtonsAnimated ButtonsFading ButtonsButton on ImageSocial Media ButtonsRead More Read LessLoading ButtonsDownload ButtonsPill ButtonsNotification ButtonIcon ButtonsNext/prev ButtonsMore Button in NavBlock ButtonsText ButtonsRound ButtonsScroll To Top Button

Forms

Login FormSignup FormCheckout FormContact FormSocial Login FormRegister FormForm with IconsNewsletterStacked FormResponsive FormPopup FormInline FormClear Input FieldHide Number ArrowsCopy Text to ClipboardAnimated SearchSearch ButtonFullscreen SearchInput Field in NavbarLogin Form in NavbarCustom Checkbox/RadioCustom SelectToggle SwitchCheck CheckboxDetect Caps LockTrigger Button on EnterPassword ValidationToggle Password VisibilityMultiple Step FormAutocompleteTurn off autocompleteTurn off spellcheckFile Upload ButtonEmpty Input Validation

Filters

Filter ListFilter TableFilter ElementsFilter DropdownSort ListSort Table

Tables

Zebra Striped TableCenter TablesFull-width TableNested TableSide-by-side TablesResponsive TablesComparison Table

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersColor PickerEmail FieldTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersBadgesStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsRibbonTag CloudCirclesStyle HRCouponList GroupList Group with BadgesList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassChange ClassActive ClassTree ViewRemove DecimalsRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageFormat a NumberZoom HoverFlip BoxCenter VerticallyCenter Button in DIVCenter a ListTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorDisable Resizing of TextareaDisable Text SelectionText Selection ColorBullet ColorVertical LineDividersText DividerAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersJS Random NumberJS Sort Numeric ArrayJS Spread OperatorJS Scroll Into ViewGet Current DateGet Current URLGet Current Screen SizeGet Iframe Elements

Website

Create a WebsiteMake a WebsiteMake a Static WebsiteHost a Static WebsiteMake a Website (W3.CSS)Make a Website (BS3)Make a Website (BS4)Make a Website (BS5)Create and View a WebsiteCreate a Link Tree WebsiteCreate a PortfolioCreate a ResumeMake a Restaurant WebsiteMake a Business WebsiteMake a WebBookCenter WebsiteContact SectionAbout PageBig HeaderExample Website

Grid

2 Column Layout3 Column Layout4 Column LayoutExpanding GridList Grid ViewMixed Column LayoutColumn CardsZig Zag LayoutBlog Layout

Google

Google ChartsGoogle FontsGoogle Font PairingsGoogle Set up Analytics

Converters

Convert WeightConvert TemperatureConvert LengthConvert Speed

Blog

Get a Developer JobBecome a Front-End Dev.Hire Developers

How to create an online resume

An online resume is a digital version of a resume.

It is an overview of your experience, skills, education, and achievements.

It can be used to apply for a job, freelancer gig, consultancy engagement, or apply to a school.

The value of having it online as a website is that people from all over the world can access it easily.

Create my online resume for free »

What is a resume

The resume is an overview of your experience, competence, and skills.

It is most known for being a document, used to apply for jobs.

Companies and hiring managers use the resume to get an understanding of who you are as a professional and what you are capable of doing.

Your online resume can be shared by its link to companies, hiring managers, and recruiters, so that they can notice you.


Why create an online resume

A resume is relevant for every professional.

Your resume as a website makes it easy for others to access and view your resume.

It can be used to E.G. get a job, freelancing gig, consultancy engagement, or apply to a school.

Having it online makes it possible for people from all over the world to find you.

The design of the resume gives the reader an impression of who you are. Make sure that it appears in a good and presentable way!


What do I need to know to create my resume as a website?

HTML, CSS and JavaScript are the basic languages to create a website.

You can come a long way just using these three!

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML ❯
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS ❯
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript ❯

How to create a resume step-by-step

Follow the steps to create your online resume from the ground up.


Preparations

Decide which code editor to use and set up your environment.

W3Schools has created an easy to use code editor calledW3Schools Spaces. Sign up and get started in a few clicks.

Start for free ❯

Create yourindex.html file. So that you are ready to enter the code.

All set up. Lets go!



Step One: Add a Website Layout

Create a responsive website from scratch.

Read here for how to create a website layout:How to create a Website Layout


A resume can be created in different ways.

There is not aone-size fits all.

Keep in mindwhy, how, and what, you are building it for.

Build the resume that is right for you.


Step Two: Plan your content

Think about how you want to design your resume.

  • What information do you want to include?
  • What impression do you want to give the reader?
  • How do you as a professional want to be presented?

Step Three: Add content

Include the essential sections:

  1. Contact Information section
  2. Key Summary section
  3. Education section
  4. Work Experience section

Check out our How To library for more code snippets:How To Library

1. Contact Information section.

Add your name and contact information.

The contact information section lets the reader know how to get in touch with you.

key summart section

2. Key Summary section.

Write a short summary that highlights your experience, competence, and skills.

Personalizing the text can make you stand out.

The key summary helps the reader to get an understanding of who you are as a professional.

Keep itshort andsimple.

key summart section

3. Education section.

Give an overview of your educational background.

Include details such as the institution, degree, and year.

Professional courses and certifications can also be listed as education.

education section

4. Work Experience section.

List the jobs that you have had.

Add details to each job, which includes what year, your role, and your responsibilities.

Other experiences such as projects and freelancing gigs can also be a part of this list.

work experience section

CV example

We have made you a template that you can use and build with.

You can load the CV template inW3Schools Spaces. Get started with publishing your online resume in a few clicks.

Publish my resume ❯

* no credit card required


W3Schools Spaces

W3Schools Spaces

Build and publish your online resume with W3Schools Spaces.

Get Started for Free




×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted ourterms of use,cookies andprivacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved.W3Schools is Powered by W3.CSS.


[8]ページ先頭

©2009-2025 Movatter.jp