Skip to content

Junochop/css102-e6

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

CSS 102

A lesson in box model, flexbox and advanced positioning. Boilerplate code provided.

Setup:

This project provides you initial boilerplate images and HTML structure. In order to use this to begin your project, you will need to follow a process called forking on GitHub.

What is forking?

A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. In this example, it's a way for you to get the initial files from MY GitHub repository and use them as a starting point of your own.

Setup Steps:

  1. Forking Image
    This will essentially create a copy of my GitHub repository as a new repository under your GitHub account.
  2. Clone the your new repository to your local machine
    Cloning Image
    Cloning Image 2
    Make sure to use the SSH option when cloning.
  3. Navigate to the project on your local machine
$ cd ~/workspace/inclass/thestaticweb
$ git clone https://github.com/YOUR-USERNAME/css102-e6
$ cd css102-e6
  1. Evaluate, plan, and break it into features.
    We've already been provided with an end goal for this project. Our product owner has handed us a design that we have to replicate visually. Before we jump in and start coding, we need to plan it out.
  2. Create a feature branch and clone.
    Because we've already done the initial setup for this project (provided in the boilerplate from the repository we forked and cloned), we can jump right in and create a new branch and get to working on our first feature.
  3. ⚠️ WARNING: Pull Requests are about to get weird.
  • You are used to doing pull requests to your OWN master branch. Whenever you fork a repository, the default is for the pull request to be made against the ORIGINAL owner's master branch (in this case, mine).
  • Now, when you go to create a pull request, you'll be prompted to compare changes to the "base fork" (for now, you should always change this to YOUR username/reponame):
    Compare Changes 1 Compare Changes 2

This is what the designer gave us to create:

Final Result

Resources:

About

A lesson in box model, flexbox and advanced positioning. Boilerplate code provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • HTML 82.4%
  • CSS 17.6%