Code Monkey home page Code Monkey logo

cf-portfolio's Introduction

Portfolio Assignment - Mobile-First and Responsive Design

Your professional online presence

The portfolio site that you create will highlight your projects and your interests, and showcase your skills to potential employers or clients.

You will create, from scratch, a static portfolio site (no "backend server" code required), to represent your personal online presence.

Some hints to get going:

  • Start a fresh new repository for this project on GitHub.
  • This app will be structured very similarly to the blog code you worked with in your pair assignment.
  • Start with a rough pen & paper "wireframe" sketch of what you want your portfolio site to look like.
  • Work through as many of the user stories as you can, but always submit what you have by the due date. Don't let "if only..." ideas keep you from turning something in!
  • Add the .eslintrc config file to the root of your repo, so we are all on the same linter settings.
  • Also include a .gitignore file in your root directory to prevent non-relevant files from being pushed to GitHub.

User Stories: Minimum Viable Product (MVP)

Let these user stories guide your development:

  1. As a developer, I need my site to use valid and semantic markup, so that employers will love me.
  2. As the creator, I need the page to link to my social and GitHub pages, so that visitors can follow me, and I can build my audience.
  3. As a visitor, I want the viewport properly sized, so that content fits all the size I have available.
  4. As a visitor, I want the primary nav to be responsive with a menu, so that I can get around using any device.

User Stories: Stretch Goals (not required)

  1. As a visitor, I want to see projects one per row on mobile, so that I can read the detail easily.

Technical Requirements and Grading Rubric

  • Be sure to use proper viewport settings.
  • Use mobile-first design principles when adding CSS.
  • Add new styles in any media queries as needed to make the page look good on desktop screens.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.