Create A Portfolio Website

12 casts | 3:52:53 for the total series

HTML CSS Web Development

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):

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.

Playlist

  • 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

Created By

Software Developer at CodeCast | TV Enthusiast | Here to Pet Your Dogs | JavaScript & CSS 🖤

$0.00

USD
This series includes
  • design a page from scratch using figma & free resources
  • write a lot of custom CSS to learn and showcase your skills
  • add responsiveness using handwritten media queries
  • deploy using Netifly
Purchase Series (Free) View Demo