Giter VIP home page Giter VIP logo

Personal Portfolio Site

Use HTML & CSS to create a static site whose content is your portfolio. Your personal portfolio site should contain information about you and the coding work you've done.

This is an individual, stage 2 project.

Learning Goals:

  • Practice creating semantic HTML
  • Practice applying visual styles with CSS
  • Use both HTML & CSS together to create a comprehensive design

Project Requirements

This is an individual project. It consists of a baseline and a single wave. You are only permitted to use static HTML and CSS for this project. Preprocessors (haml, erb, sass, less, etc.) and Javascript of any kind are not allowed. All submitted HTML needs to pass as valid HTML through an HTML Validator.

Baseline

  • Create an index.html that has the necessary meta information to link a stylesheet called styles.css.
  • Add a <header>, <footer>, and <nav> to your index.html.
  • Create a portfolio.html page that also includes styles.css.
  • Include a link to both pages in the <nav> on both pages.

Primary Requirements

  • Add pages to your static site. The requirement is a minimum of four pages. These pages should be:
    • index.html
    • portfolio.html: information about the projects you've completed at Ada (or elsewhere) with links (to GitHub repo), descriptions, images, etc.
    • code-journal.html or hobby-blog.html: article or blog style posts about either your journey/observations about programming or a hobby you enjoy
    • about.html: some information about you, your interests, background or similar. Only post what you're comfortable sharing!
  • The site should follow best practices including:
    • All markup should be semantic, with consideration of hierarchy and accessibility
    • CSS should be concise and well formatted
    • Images and stylesheets should be kept in their own folders, called images and stylesheets, respectively
  • Run your site through an HTML Validator and fix all errors before submitting

Optional Enhancements

  • Create a blog/ or code-journal/ directory. Within this directory...
    • create single html file for each entry in your blog/journal
    • update the nav on the rest of your site to reference each entry as a sublist/subnav.
    • update any tags with path references (img, link, a tags) to accommodate for the entries being in a different directory.
  • Create any number of additional pages or directories.

A Word of Caution

A lot of developers find their initial foray into CSS frustrating. Every browser implements the CSS standard a little (or a lot) differently. Learning to manipulate elements and understand the box model takes time. Layout can be especially challenging to developers new to CSS. For this project, focus on understanding the mechanics and semantics of HTML and CSS, and how the two work together.

Inspiration

Optional: Deploy with GitHub Pages

Want more? Make your site live on the internet! There are a lot of ways to go about hosting a live website, but GitHub provides a way to host static sites for free using your GitHub account. Follow the steps listed here.

What Instructors Are Looking For

Check out the feedback template which lists the items instructors will be looking for as they evaluate your project.

norrise120's Projects

ada-pets-react icon ada-pets-react

In-class Exercise: Create a SPA that allows users to view, select, or remove pet adoption listings in React

ads-heaps icon ads-heaps

Heaps lab for Ada's advanced data structures course

exquisite-react icon exquisite-react

Project: Handle events, state, and props through forms in React for an Exquisite Corpse poetry creation implementation

gestalt icon gestalt

A set of React UI components that supports Pinterest’s design language

hotel icon hotel

Project: Design a system used for managing bookings for a hotel using object-oriented programming design principles

inspiration-board icon inspiration-board

Project: Create a SPA that facilitates encouraging note boards, using APIs and in React

js-digital-clock icon js-digital-clock

Project: Create a clock that runs in the browser using JavaScript and jQuery

linked-list icon linked-list

A singly linked list with each node containing integer data. Methods on the singly linked list

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.