Skip to content

A project for 💻starters, or a refresher if your HTML and CSS are a bit rusty

Notifications You must be signed in to change notification settings

TechFems-projects-and-resources/project-airbnb-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project Airbnb Clone

The goal of this project is to practice working with HTML and CSS, with the option to also use Bootstrap.

We recommend that you first do the Flexbox project, to get more knowledge about how to use Flexbox.

This is an example of an Airbnb webpage you can build. You can choose your own, make a screenshot and build your clone (see the Airbnb website).


Steps:

  1. Create a new folder on your local computer with the name: project-airbnb-clone
  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 <link> (check how to add CSS to an HTML file)
  5. Make sure you have Airbnb Clone as the title in your HTML (this will show in the tab when your app runs in the browser)
  6. Build the page according to the example (try to find the correct font!)
  7. You will be able to find the Airbnb logo online, but you can also make a screenshot and use that image
  8. You can use any photographs you like, or take screenshots from images you find online. You can change the cities that are on the Airbnb page, etc. etc. In the resources_info repository you will find links to websites where you can download pictures, images, icons etc. for free (for example, Flaticon for icons)
  9. Feel free to use Bootstrap if you also want to practise that 😊

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 💻starters, or a refresher if your HTML and CSS are a bit rusty

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published