Giter VIP home page Giter VIP logo

web-module-challenge-user-interface's Introduction

Module Project:

This project allows you to practice the concepts and techniques learned in today's lecture: implenting semantic HTML and getting comfortable with CSS.

Expectations

Commit your code regularly and meaningfully. Check out this guide on how to make meaningful commits.

In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work. Perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a Module Project that meets MVP than one that attempts too much and does not.

Description

In this project, you will complete the HTML and CSS for a basic static web page for Sweet Eats Bakery. All of the text values have been provided in the HTML; you must create the structure of the page using semantic tags. Remember that semantic markup provides meaning. Here are a few tags you could consider using:

h1 through h6
p
header
footer
nav
a
section
address

Once you've completed the basic structure with HTML, you'll need to add some more style! Much of the stylesheet has already been completed, but there are comments where you'll need to fill in the blanks. Use MDN and other resources to look up specific style properties and selectors.

Project Set Up

  1. Fork the repository, then clone from your fork.
  2. Go into Canvas and connect your repo to CodeGrade.
  3. DO NOT CREATE A BRANCH. You will be pushing your changes to the main/master today.
  4. cd into your repository on the command line and use code . to open VS Code.
  5. Open the terminal in VSC and type npm install. While this runs, click the split terminal icon.
  6. Next type npm run test in one side, and use the other side for git commands or general use.
  7. Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
  8. Complete your work making regular commits to the main branch; your CodeGrade score will update each time you make a push.

Minimum Viable Product

Your finished project must include all of the following requirements:

Semantic HTML and CSS Fill-in-the-Blanks

Review the provided design file for the menu page.

  • Create the HTML structure using semantic tags
  • Fill in the blanks in the CSS

Stretch Tasks

Only attempt these tasks after you've successfully reached MVP. Create a branch, do not do stretch in the same branch for HTML/CSS projects.

  • Fork your final work and see how much you can change the design without changing the HTML; try to transform the site by only using CSS selectors
  • Look at CSS animations and see if you could integrate them on the navigation hovers
  • Pick a navigation item and create a new page with the same header and footer as the home page; be creative and have fun coming up with your own unique content and styles

web-module-challenge-user-interface's People

Contributors

jennyjcrawford342 avatar keirankozlowski avatar antashma 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.