Build

Personal portfolio

Learn essential HTML, CSS and JavaScript by building your first portfolio: from the document skeleton to the final polish.

You leave with: a publishable portfolio11 stepsRequirements: none
  • HTML
  • CSS
  • JS

A real portfolio, written line by line by you.

If you have been meaning to make the jump to the Web and HTML, CSS and JavaScript kept holding you back, this is your way in: here you will learn the essentials of all three by building your digital calling card, made by you one hundred percent, no templates, no copy and paste.

You will start at the document skeleton and end with a site that is responsive, has a light and dark theme and a form that works. Taking the first step has never been simpler.

What you will build

This is the finished project (try the theme button). Your version will carry your name, your projects and your design decisions: the colors, type and details you choose along the way.

The path, step by step

Each step unlocks the next. No jumps, no overwhelm.

  1. 01Document structureHTML
  2. 02Content sectionsHTML
  3. 03NavigationHTML
  4. 04Reset and baseCSS
  5. 05Flex layoutCSS
  6. 06TypographyCSS
  7. 07ResponsiveCSS
  8. 08DOMJS
  9. 09EventsJS
  10. 10FormsJS
  11. 11Final polishHTML · CSS · JS
Juan Andrés Núñez

Who's behind this

Mentat teaches, but never improvises: every step, example and criterion in this workspace was designed and curated by Juan Andrés Núñez, a professional teacher and practicing Frontend engineer.

Start your session

Mentat guides you through every step and your progress is saved automatically.

At least 30 characters. Mentat uses it to personalize teaching.

0 / 1000

You can change this anytime in your profile.