Students will be submitting this project as a qualifier for the 2022 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 last and final part of the application process, the interview process.
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.
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!
- Fork this repo
- Clone the forked repo to your machine
- cd to the cloned folder and write your code!
- Complete the project
- Commit and push your changes to your fork
- Submit a pull request back to the assignment repo
Note: Remember to git add, git commit and git push regularly
- I can see your full name.
- I can see a picture of you.
- I can read a short description of you.
- I can click a link to send a message to your preferred email address.
- I can click a link to visit your GitHub page.
- I can click a link to visit your LinkedIn page.
- There is a navigation UI that has links to all of the pages or sections.
- When I click on a link in the navigation UI, I can view that page/section.
- I can change the content or appearance of the site when I click or interact with elements on the page.
- Errors do not appear in the browser console when I use an interactive element.
- 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
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!
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:
-
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!
-
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.
-
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
-
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.
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?