Git Product home page Git Product logo

odin-recipes's Introduction

odin-recipes

A simple recipe website to apply basic HTML concepts: Tags, Comments, Links and Images, and Lists.

Reflecting on Skills Gained

  • The use cases for ordered vs. unordered lists
  • Using HTML paragraphs as semantic elements
  • The use of HTML boiler plate
  • The use of HTML Comments
  • HTML images and ALT texts
  • The use of HTML headings as semantic elements
  • The use of Git basic workflow including interacting with remote repository, local Git repo, and the workflow.
  • Using the command line to create directories, files, and navigating around them.

Applying CSS to the recipe to practice:

CSS basic syntax, common properties, selectors, specificity and order matters

Styles to be applied

Body

  • Background color:light gray
  • Font-family: 'Verdana','Tahoma', 'Arial', sans-serif

Descriptions (paragraphs)

  • Background color:
  • Text alignment:
  • font-size:

H1 (recipe title)

Color:

  • Text alignment:
  • font-size: 24px
  • font-weight: bold
  • font-size: italic

H2 (description, ingredients, steps)

  • Color:
  • Text alignment:
  • font-size: 20px
  • font-weight: bold
  • font-size: italic

recipe-images

  • width: 250 px
  • Height: auto

Ingredients (unordered lists)

  • Background-color: light orange
  • font-size: 18px
  • color: dark gray
  • text-align: justify

Steps (ordered lists)

  • Background-color: slightly lighter gray
  • font-size: 18 px
  • color: medium gray
  • text-align: left

odin-recipes's People

Contributors

deniskibichiy avatar

Watchers

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.