Code Monkey home page Code Monkey logo

hw-w01-d01-html-and-css-basics's Introduction

HW w01d01 HTML/CSS Basics

Description

For the first assignment, you will begin creating the beginnings of your first website. Take what you've learned from class and build a portfolio site that showcases projects you will be making as a developer. Build two pages - an 'About Page' and a 'Portfolio' - that link to one another. Your 'About Page' should describe your mission and value proposition and your 'Portfolio' should include screenshots with descriptions of the work for Relaxr, Startup Matchmaker, and CitiPix. Don't worry if you can't come up with any text for the pages--we've provided you with some sample copy that you can use.

Setup

  • Fork this repository to your own Github account
  • Clone your fork into your ~/code/fewd/homework directory
  • Open the directory in VS code
  • Create the necessary html and css files

Technical Requirements

  • Link both pages together using a tag
  • Use a unique title and a single unique h1 tag
  • Show images using img tags including unique alt attributes
  • Use an external CSS stylesheet to style your pages
  • Select at least 5 elements on the page and apply at least 5 different css properties (font-size, color, font-family, background, text-decoration) to these elements
  • Use at least 6 different HTML tags (h1, h2, h3, h4, h5, h6, p, ul, ol, a, img) on your pages
  • Follow naming conventions, maintain consistency across your .html and .css files
  • Indent nested elements to increase your code's readability

Example:

For example, an "about me" page for a user might look like this:

a "portfolio page" for a user might look like:

These are very very pretty, don't go too crazy with the styling, just be sure to hit the technical requirements above and enough CSS to make the website easy to use and aesthetically pleasing.

Bonus

  • Experiment by adding additional HTML tags and CSS properties we did not cover in class - explore!

Hints

  • Remember to link your CSS to your HTML files
  • Open your html in chrome. You can do this by either double clicking the index.html or about.html files, OR you can type open index.html in the command line! Your choice. In any case, open up your html page in chrome while you work.
  • Your workflow should be 1. make changes to your html/css 2. save the files 3. refresh the page in chrome to make sure you got what you expected. Repeat for all the changes!

Submission

Normally homework will be due at midnight the day it is assigned and will submitted using github. We don't know how to do this yet, so for this homework (and this homework only!) it is due before class tomorrow. We'll be going over the submission process together in the morning.

hw-w01-d01-html-and-css-basics's People

Contributors

jackiecasper avatar sara-daghustani avatar trevorpreston avatar

Watchers

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