Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started

Register to 4Geeks

← Back to Projects

Building an HTML/CSS Website Collaboratively using Git and GitHub

Difficulty

  • easy

Average duration

3 hrs

Technologies

Difficulty

  • easy

Average duration

3 hrs

Making a website as a team (Git collaboration)

Practice your skills in Git while developing a typical website.

Each student works on a different file, for a different part of the website, and the most senior can work as Team Leader (for integration and deployment), unless the teacher prefers to be the team leader of the whole class. The Html-Template-Engine library will take care of putting all the pieces together.

πŸ“ Instructions

  1. The Team Leader should fork this repository on github.com and invite other collaborators to the repo. Give access to the other team members on the newly forked GitHub repository, and make sure they are cloning from this new repository, not the original!

  2. We are going to be building this design, and this is how you can split it with the students.

  3. Each contributor will have to clone the new forked repository and develop a part of the website that is coordinated with the group; each project is divided in pieces inside the website/templates/ directory. Once everyone has their editor open, run the project in the terminal with this command:

1$ npx http-server --yes -c-1
  • You will be given an option to open in browser, and have options to view the new site, what it should look like, and a reference to each part of the page. If you receive an error, wait a moment and refresh.
  1. To start, each member should put their name in the file they have been assigned, push back to the repository, and pull to see the others changes. Maintaining clear communication about the files being used will make the project run smooth πŸ™‚

  2. Once everyone understands how to modify their part of the project and push, use the search feature and examples within https://getbootstrap.com/ to quickly build using bootstrap components, then modify accordingly.

🌱 How to start this project

If you are a student:

Wait for your instructor to advise you how to start the project!

If you are an instructor or team leader:

This project comes with the necessary files to start working, which can be found in the following GitHub repository:

1https://github.com/breatheco-de/exercise-collaborative-html-website

a) Navigate to and fork the repository in GitHub.

b) Invite your students or team members as collaborators to your forked repository (see the gif manual in it).

c) Have your students or team members clone your forked repository (not the original above).

Both students and instructors:

To load and watch the website live, run the following command:

1$ npx http-server --yes -c-1

Deploy the website

Use Vercel, Netlify or GitHub pages to deploy the website and get a URL where anyone can see the results (for example: https://mysuperteam.zeit.sh).

Delivery

Each student must deliver their team's leader repo as a solution.

Complementary info

The Html-Template-Engine library is being used as template engine for building the landing page.

This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.

Sign up and get access to solution files and videos

We will use it to give you access to your account.
Already have an account? Login here.

By signing up, you agree to the Terms and conditions and Privacy policy.

Difficulty

  • easy

Average duration

3 hrs

Difficulty

  • easy

Average duration

3 hrs

Difficulty

  • easy

Average duration

3 hrs

Difficulty

  • easy

Average duration

3 hrs

Sign up and get access to solution files and videos

We will use it to give you access to your account.
Already have an account? Login here.

By signing up, you agree to the Terms and conditions and Privacy policy.

Difficulty

  • easy

Average duration

3 hrs

Difficulty

  • easy

Average duration

3 hrs