Code Monkey home page Code Monkey logo

frontend-fundamentals's Introduction

Frontend-Fundamentals

course from Pirple.com


Homework #1 Lists

What's your favorite food? Do you know how to make it yourself? If not, look up the recipe online. Next, create an HTML document, and within the body of the page, create two lists:

  1. The first list should be an unordered list of all the ingredients needed to make the dish.
  2. The second list should be an ordered list, detailing the steps you need to take to prepare that dish. Then, add comments to your HTML, to explain the purpose of each section of code that you create.

Homework #2 Images

It's time to make your recipe (from homework #1) a little more exciting.

  1. Add a title to your page (within the < head >) and an actual < h1 > title on the page.
  2. Below the h1, add a paragraph that explains what the food is, and why you like it so much.
  3. Somewhere on the page, add a few images of finished versions of your dish so that the reader can see what the final product should look like.
  4. Add emojis to your second list (the ordered list), so that at least 5 of the lines end with an emoji character. You can find emojis online pretty easily. If you don't how to use emojis in HTML, read this article. Then use this reference.

Homework #3 Links

It's time to compare your recipe to the recipes of others.

  1. Find the 5 best recipes for your dish from around the web.
  2. Grab the URL for each recipe
  3. Add a list to the bottom of your document. Each item in the list should be a link to one of the recipes.

Project #1

We didn't cover all the possible HTML tags yet. What are they? And what should they be used for? For this project you should:

  1. Find a resource online that gives you a list of each HTML tag that you can use.
  2. Pick 5 of those tags (5 that we have not covered so far).
  3. Create a simple website about your favorite book / story, and include those 5 tags in the HTML. (The page can have any other tags as well, as long as those 5 are included). This can take any form. You can get as complicated or as simple as you wish.
  4. Add comments to each section of your code, explaining the purpose of that block.

For extra credit, use one or more of these tags (if you haven't already):

  1. < video>
  2. < audio>
  3. < form>
  4. < select>
  5. < input>
  6. < base>
  7. < meta>
  8. < iframe>

frontend-fundamentals's People

Contributors

margmelo 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.