Skip to content

A project for all πŸ’ͺ πŸ‘©πŸ½β€πŸ’» coding women πŸ‘©β€πŸ’» πŸ”₯ !! Everyone needs an online resume 😁

Notifications You must be signed in to change notification settings

TechFems-projects-and-resources/project-online-resume

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

15 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Project Online Resume

The goal of this project is to practice working with HTML and CSS.

Basic functionality: We will be creating a web page with your personal resume, with all relevant information and links, for example to your LinkedIn profile and GitHub account.

Below is an example of a resume webpage:

To see the page in more detail, have a look in the examples folder. There are screenshots of the full resume page, and of the top and bottom parts separately.


For starters

  1. Create a new folder on your local computer with the name: personal-resume-website
  2. Track your code with Git by using git init in the terminal
  3. Create an index.html file with the general template code
  4. Create a style.css file and add this to your HTML file as a
  5. Make sure you have Resume yourname as the title in the HTML (this will show in the tab when your app runs in the browser)
  6. Build the page according to the example, and feel free to add styling or elements you prefer.
  7. The example webpage uses Poppins sans serif as font: Poppins website.
  8. Use a professional photographs of yourself that gives a good impression of you
  9. Use Flexbox or CSS Grid to work with layout
  10. Feel free to use Bootstrap if you also want to practise that 😊
  11. For icons visit Fontawesome
  12. To access those icons use this link. You can copy the CDN link and add this in your HTML header as a stylesheet. NB: your own style.css file is always the last stylesheet in the head section of your HTML!
  13. A good resume is just one page long and recruiters look at the resume only for a few seconds, so make sure the layout is inviting, not too much text, and clear headers that summarise the information in the section

For more advanced students

  1. Use media queries to make the page responsive so that it can be read on
  • mobile phone
  • tablet
  • desktop
  1. Deploy the webpage on Netlify or Heroku and check that the URL includes your name: it must be clear that it is your personal resume 😊

Please note:

If you want to download a project on your local machine, do not fork it but clone the repo locally, on your computer. After that, create a new repo in your own GitHub account with exactly the same project name, and link the local repo to the remote repo in your GitHub account (see below). Why should you clone and not fork? It will show the project as your own project and not a fork of someone else's project. You can use it as a project for your portfolio.

You can connect a local project to a new, empty GitHub repo as follows. It is very good to know this so that you can start a project locally and afterwards link it with a remote GitHub repo.

If you clone the project without forking it, you will have to change the 'remote origin' repository after cloning. Check the remote of your local project using git remote -v.

To link your local project to your own GitHub repo, you need to change the remote origin. Have a look at this article: https://devconnected.com/how-to-change-git-remote-origin/. With git remote -v you can again check if remote origin has been reset and now shows the name of your GitHub account.


About

A project for all πŸ’ͺ πŸ‘©πŸ½β€πŸ’» coding women πŸ‘©β€πŸ’» πŸ”₯ !! Everyone needs an online resume 😁

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published