Project One - Personal Website

Introduction

For this project, we will be creating a standard part of every designer + developer's portfolio: a personal website. A personal website is an important part of demonstrating your skills and passions as a developer to the world. A beautiful personal website can reel people in and keep them engaged with all of your amazing work!

We're going to use our newfound HTML and CSS skills to create website layouts and style them into beautiful personal portfolios. By the end of this project, you'll have a brand new personal website and your own corner of the world wide web.

Part 0: Starter Code

We have provided only a blank index.html and styles.css file for you. Since this is a project, no template code will be provided. We encourage you to look back at past assignments to get a sense for how we set up a project and connect up its components.

Project 1

Part 1: Introduction to Design

Because our website is primarily frontend, we will start our development process with a introductory look at design. We will go into much more depth later in the semester, but for now, this is a chance to try out your own design processes and ideas. This is your website, so you are more than welcome to make it look however you'd like.

Before we can start prototyping, it is important to have a clear design vision. To develop in the most efficient and effective way, we want to template what our website should look like, and make all of the difficult and wonderful design decisions before we try implementing them.

Try templating out some of your ideas on paper. We have not covered how to use Figma yet, so you are not expected to use that, but see if you can try wireframing your website out first.

Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products

— IxDF

It will make frontend development much less painful if you have a roadmap for yourself.

Below, we have included a few links to example design templates that you are more than welcome to use:

Figma Templates

We have also included links to personal websites of several WDB developers. Note that these are very advanced websites, and we are not looking for anything more elaborate than the provided templates, though you are welcome to take it as far as you'd like.

• Vicky Li
• Vihan Bhargava
• Isabel Zheng

Part 2: Requirements

This project is largely left open-ended. The goal is to give you the freedom to explore and produce something that you will actually use!

There are some requirements to ensure that you are grasping the content so far, but they will not be nearly as stringent as the homework.

How you choose to do make your personal website will be entirely up to you since there will be multiple ways to accomplish the same thing. That being said there will still be some guidelines and set of restrictions that you should abide by:

• Content There are 3 sections you must include within the website:
  • About: A short introduction on who you are and what you bring to the table.
  • Work: Some examples of work that you have done that you want to showcase. This could include past projects that you have worked on, current projects that you are currently doing, class projects, internships, and clubs!
  • Contact: A section where potential site-visitors could find your social media handles, and an email or phone number to contact you.
• HTML
  • One use of each type of header <h1>-<h6>
  • One use of <div> with flex layout. Hint: flex is useful for adding arbitrarily many containers into a space.
  • One use of <div> with grid layout. Hint: grid is useful for aligning and laying out several similar containers.
  • One use of <a>. This must be set to open in a new tab.
  • One use of <img>
  • One use of <button>. The button can do anything.
  • One use of <title> and <author>. Hint: this should go in the <head>
  • One functional component. This should be something quirky that shows off your knowledge. It should be a form input that triggers some JavaScript function. It does not have to do something that is necessarily useful, it only has to do something. This will be graded on the following component:
    • Use of JavaScript from a <script> tag
    • Use of a <form> component, with a <label> and <input> (can be of any input type).
    • Use of a <submit> button.
• CSS
  • * selector
  • .[class] selector
  • #[id] selector
  • :hover pseudoselector
  • font property
• Style Check The code you write must be readable and efficient (eg. sensible and self-documenting names, appropriate use of CSS classes, etc...)

Submission

Please publish your code to GitHub Pages so that we can see it. If you would like to keep this codebase to publish to your own personal GitHub Pages you can fork the repository. Forking the repository essentially creates a copy of the repository in your personal account.

In the README.md please include a link to the GitHub Pages link hosted at fullstack-decal-fa22.github.io

Submit your code to Gradescope via the Classroom repository.

• Gradescope will run an autograder to ensure that you have all the correct components and have included the link.
• This assignment will also be hand graded. We will be providing feedback in the Gradescope comments to help you improve your websites.

Conclusion

Now that you have a personal website, you have officially become a web developer 🎉! This is now your space to showcase all your hard work as you continue on in your career, your little corner of the Internet. As you continue on and learn more in this class, we hope that you'll fork it and revisit this website and keep improving on it. It is a reflection of your incredible ability as a developer and we'd love to see where you take it!

Acknowledgments

This project was created by Brian Holt as part of the Frontend Masters Complete Intro to Web Development, v2 course. Adapted by WDB course staff, templates by Tijmen Sep and Jasmine Chen.