Description

Let’s create a basic portfolio website from scratch! We’ll design it using Figma, and then code out the single-page app showcasing a lot of CSS! We’ll finalize it by adding in some simple animations and then deploy it!

You can view the final website at https://amysportfolio.netlify.app/.

For more information on branding yourself as a developer, read my blogpost!

Resources

The resources I used in this series (all are free):

• My Figma Design
• Pixabay
• Coolors
• UXWing
• Netifly
• SVG Editor

This is series focuses on handwritten CSS and therefore doesn’t follow common ‘best practices’. How you choose to implement it is entirely up to you, but my goal was to showcase how specific you can make things using CSS.

• 1. Design Phase
  • Creating A Portfolio Website | Part 1: Planning & Design

    17:00

• 2. Creating The Structure
  • Creating A Portfolio Website | Part 2: Setup, Assets & NavBar

    21:54

  • Creating A Portfolio Website | Part 3: Building The Main Section

    30:34

  • Creating A Portfolio Website | Part 4: Building The Skills Section

    17:41

  • Creating A Portfolio Website | Part 5: Starting The Work Section

    27:05

  • Creating A Portfolio Website | Part 6: Finishing The Work Section (Creating Responsive iFrames)

    17:32

  • Creating A Portfolio Website | Part 7: Finishing the Build

    22:13

• 3. Responsiveness (Adding Media Queries)
  • Creating A Portfolio Website | Part 8: Making It Responsive (Working with Media Queries)

    35:59

  • Creating A Portfolio Website | Part 9: Finishing The Responsiveness

    19:07

• 4. Final Touches
  • Creating A Portfolio Website | Part 10: Connecting The Links & Buttons

    8:12

  • Creating A Portfolio Website | Part 11: CSS Animation - The Typewriter Effect

    10:55

  • Creating A Portfolio Website | Part 12: Deploying On Netifly

    4:41