ttp_cohort_4_application

Students will be submitting this project as a qualifier for the 2023 cohort for the Tech Talent Pipeline. All applicants must submit a completed project in order to be considered for the program. Those who successfully complete this project will move on to the final assessment.

Introduction

For this project you will build your own personal website using the following criteria:

• Building Web sites with HTML and CSS
• Using JavaScript to make Web sites interactive
• Developing your personal brand and online profiles

You'll use these skills to build an MVP (Most Viable Product) of your personal web site. This Web site is a place to show the tech industry who you are and what you can do.

By the time you are job ready, your personal site will probably use additional technologies and skills that you may not yet be familiar with. For now, this project will be an MVP (Minimum Viable Product) that you can continue to enhance throughout your journey as a developer.

Examples

Below are some sample websites. These may be a lot more intricate with a lot more elements than what is expected for. These are here to give you ideas on how to move forward. You do not need to copy any specific feature here. You can and should use your own creativity!

Carlos Martinez (he/him)

Owen Jones (he/him)

Maria Martinez (she/her)

Setup Instructions

1. Fork this repo
2. Clone the forked repo to your machine
3. cd to the cloned folder and write your code!

Submission Instructions

1. Complete the project
2. Commit and push your changes to your fork
3. Submit a pull request back to the assignment repo

Note: Remember to git add, git commit and git push regularly

User Story

As a user, I can learn information about you.

Acceptance criteria

1. I can see your full name.
2. I can see a picture of you.
3. I can read a short description of you.

As a user, I can see how to contact or follow you.

Acceptance criteria

1. I can click a link to send a message to your preferred email address.
2. I can click a link to visit your GitHub page.
3. I can click a link to visit your LinkedIn page.

As a user, I can navigate your site.

Acceptance criteria

1. There is a navigation UI that has links to all of the pages or sections.
2. When I click on a link in the navigation UI, I can view that page/section.

As a user, I can experience an interactive UI.

Acceptance criteria

1. I can change the content or appearance of the site when I click or interact with elements on the page.
2. Errors do not appear in the browser console when I use an interactive element.

Requirements

Make sure you do the following to successfully complete the projec:

Code Quality

• Use HTML to build websites
• Use CSS selectors to specify display ased on an element's characteristics
• Manipulate the DOM using Javascript
• Manipulate the conten and styling on the page by utilizing DOM Events and Event Listeners
• Use Flexbox and Grid to layout a page

Interactive site

Use your JavaScript and DOM skills to make your site interactive. In other words, there should be at least one place where clicking, selecting, hovering, or submitting information changes the content of the page.

Here are a few ideas to consider trying:

• Clicking on a button expands to show more details or text.
• Clicking on a button sorts a list of things (ascending or descending).
• Clicking on a button or selecting an option filters a list of things (example: show all photos, show only travel photos)
• Instead of navigating to different pages, show and hide page content using JavaScript without loading a new page.
• Entering information in a form adds content to the page or changes the page content
• Your own creative idea!

Pages or Sections

You can choose to make your site one long page broken up into sections, or your site can have a few different pages.

Your site needs to implement all user stories and meet the UI/UX criteria. There are many ways to structure your site to do this. Personal sites often have some or all of these pages:

1. Landing/Home Page: Your homepage is the first page that appears when the site loads. You know what a homepage is. You can put whatever you want here!

2. About/Intro: The about page is where you get to talk about yourself. Do you have a pop pitch? This is the place to put it. Write a bio. Show a picture. Talk about your love of cats, books, or milkshakes. Make this part personal. You can have combine this section wit your landing page if it makes sense.

3. Contact links: You can put it at the bottom of your page as a footer or in a contact me section. A good font with tons of social icons is FontAwesome

4. Other: (Optional) Anything else with things you may want to include, if you write, then a blog section, if you paint or photograph then a gallery section, projects you might be working on etc.

Hints for showing and hiding elements

CSS based approach

• What CSS attribute can we use to make an element hidden?

• Can we give an HTML element a CSS class that is styled to make itself hidden?

• Can we create an extra class that would make the same element visible?

• How can we use DOM events and JavaScript to add and remove classes from elements?

  JS based approach

• Can we store information that we want to show or hide in our JavaScript file instead of in HTML?

• How can we use JavaScript to keep track of what things are supposed to be shown or hidden?

• How can we use DOM events and JavaScript to change or replace the HTML or text content of an element when we want to show or hide something?