Giter Club home page Giter Club logo

introduction-to-css's Introduction

Introduction to CSS

Introduction

In this project you will be styling a single page with your knowledge of CSS. The website is a marketing page for a restaurant in San Diego, CA called Fatuma Restaurant.

The styles in your design file try your best to make it look great, add bright colors, add proper paddings and margins.

Instructions

Task 1: Set up your git flow

Follow these steps to set up your project and start working on it:

  • Fork this project.
  • Clone your forked version (Not Gabi School's by mistake!).
  • Create a new branch: git checkout -b <YourFirstName-YourLastName>.
  • Implement the project on your newly created <YourFirstName-YourLastName> branch, committing changes regularly.
  • Push commits: git push -u origin <YourFirstName-YourLastName>.

Task 2: Minimum Viable Product

Once your repository is set up, use the knowledge of CSS and HTML you learned to apply to the design, your final page should look like the design file, follow these steps to get the job done:

  • Link your CSS index.css file in the index.html and add your CSS reset
  • Markup your html semantically
  • Use this color for the header and footer background: #454f6f
  • Change all font colors and styles according to design file
  • All other text is Arial, Arial bold, Arial Black
  • The background color of the main text "TASTE THE DIFFERENCE" is #e6834c
  • Apply box model properties (content, padding, margin, and border) to all content so that your page matches with the design file.

Keep in mind that you should avoid static units (pixels), and should instead use responsive units wherever possible.

Task 3: Stretch Goals

The following goals should be started only when above tasks was finished. These goals are meant to help you practice more.

  • Add CSS animations (hover, mouseover, etc.)
  • Design and execute your own pages for Menu, Catering, or Contact us
  • Add image background to the main hero text.
  • Host your website on Netlify.com

Submission format

Follow these steps for completing your project.

  • Submit a pull request to merge Branch into master (student's Repo). Please don't merge your own pull request

introduction-to-css's People

Contributors

duraanali avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.