Creative Web Design Cheat Sheet

In designing a website, it is not easy because you need to be detailed and to be creative. You need to think carefully of what you should do.

Web Design Cheat Sheet With HTML

web design cheat sheet

Tag Description

  • <!–…–> It defines the comment in HTML code
  • <!DOCTYPE> Defines document type
  • <a> Defines the anchor
  • <article> Defines the article
  • <aside> It defines the content being sides next to the other content
  • <audio> Defines the sound
  • <blockquote> Defines the long quotation
  • <body> Defines a body element
  • <br> Inserts the single line break
  • <canvas> Defines the area where the graphics will be drawn by a JavaScript
  • <caption> Defines the table caption
  • <cite> Defines the citation
  • <code> Defines the text as computer code
  • <details> Defines the information section which can be hidden or shown
  • <div> Defines the section in the document
  • <em> Defines the emphasized text in italic form
  • <embed> Defines the space in inserting media files such as applications or plug-ins
  • <figure> Defines the content such as diagrams, illustrations and photos and much more
  • <figcaption> Defines a caption for the figure
  • <footer> Defines the footer of the section or entire document
  • <form> Defines the form
  • <h1> to <h6> Defines the header one to header six

There are still git cheat sheet tips that you can find on the internet.

Here is another web cheat sheet to use

web design cheat sheet You must know about the cascading style sheets in the web design.

Cheat Sheet Template: Cascading Styles in Web Design

Class style: You can able to make class style that is called highlight with bright background color of yellow. Here is what you need to do.

.highlight {
background-color: #FFFF33;
}

To know how to do a cheat, you need to know how you can able to apply such style to any content and it is better if you should use class attribute which is:

<p class=”highlight”>This is important</p>

ID: If you want to know how to do a cheat with this style, you need to automatically apply it to 1 element of the HTML on page having same ID. Here is a good example:

Whenever you like to add or include a <div> tag in holding the sidebar content, you need to provide that container with a semantic ID like sidebar:

#sidebar {
background-color:#66CCFF;
}

The code will then look something like:

<div id="sidebar">
<h1>Personalized Web Design Help</h1>
<p> … </p>
</div>

Tag: One of the cheat sheet tips is to use tag for web design. This style will automatically allow you in redefining your style as well as positioning existing tag of HTML. For example, setting font styles of your tag in the whole site or in just a certain section:

h1 {
font-Home: Arial, sans-serif, Helvetica;
font-size: 1.7em;
font-weight: bold;
color: #9c9292;
text-transform: lowercase;
}

Compound: This style is being applied automatically to element based upon the location in the page. Here is an example of how can you do it.

#wrapper #sidebar h1 {
color: # CC3300;
font-home: “Georgia,Serif”, Times New Roman;
}

This page only gives the basic things that you should know about web design. Lots of information isavailable online and if you need more, do not hesitate to make a research, like about Unix cheat sheets.

Use our web design cheat sheet today!

Download as PDF

Next Post

Previous Post

© 2017 My Cheat Sheet

Theme by Anders Norén