Giter VIP home page Giter VIP logo

portfolio_starter's Introduction

Each FLW class will be expected to create and maintain a Class Portfolio that includes information about the company, class, Code Nation, and links to all students' portfolios. The PM or volunteers of the class will have to fill in the basic template before class begins, and most Guided Practices will involve group worktime to improve the Class Portfolio one skill at a time.

Unit 1: Online Portfolio README

Day 1

Set up

  • Complete the Project Planning Document.

  • Go to the repository.

  • Fork this repository to your GitHub account.

  • Create a new project on Glitch that imports your repo from GitHub.

HTML

  • Add a header with your name to your Portfolio homepage.

  • Update the title tag of both of your pages.

  • Create your navigation bar that will link all your pages together.

  • Give your HTML elements classes in order to add Flexbox to the CSS.

  • Write your biography on your About Me page.

CSS

  • Choose 2-4 colors for your theme and add them as font or background colors.

  • Add flexbox to your navigation bar.

  • Add at least 1 Google Font.

Wrap

  • Submit your work to the session agenda.

Day 2

Set Up

  • Link your homepage and About Me pages together using your nav bar.

  • Add two more HTML files (Projects, Contact) to your Portfolio and link them all together.

  • Upload at least 2 images so they are hosted in your Portfolio.

  • Update the title tags of all your new HTML files.

  • Link your CSS file to all of your HTML files.

HTML

  • Add a professional headshot of yourself.

[ ] In your Projects page, create a display of at least 4 of your old coding projects that includes:

[ ] Project name
[ ] Link to project GitHub repo
[ ] Link to project live site
[ ] Short description of project including coding languages used
[ ] Screenshot of project

[ ] Add your contact information to your Contact page, including your:

- [ ] GitHub account
- [ ] Email address
- [ ] LinkedIn
- [ ] Resume

CSS

  • Format the sizes of all your pictures

Wrap

  • Push your changes back to your GitHub repo!

Project Extensions

  • Style your nav bar so the links change color/style when your hover over them or when you click them.

  • Add a unordered or ordered list of your accomplishments or favorite things to your About Me page.

  • Make sure all your external links open up into new tabs.

  • Create a link that pops open the email browser with your email address in the to: field.

  • Arrange your Projects into a creative interactive or animated photo gallery or slideshow.

References/Tools

portfolio_starter's People

Contributors

emilygarvey avatar carolynnjimenez avatar cn-mika avatar

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.