Table of Contents

Webpage Design

1. Draw a sketch of your webpage first.
   • Organize every piece of data into labeled sections and boxes.
   • Include interactive components: containers that will appear, disappear, or change.
2. Implement the sketch’s organization scheme using “Styles and Semantics” tags.
   • Use <header>, <section>, etc. for high-level containers.
   • Only use <div>for low-level containers.
   • Give classes to low and mid-level containers
   • Give ID’s to all containers that you’ll need to modify with JS.
3. Fill in the core content (text, links, and images) for the containers.
4. Implement core interactivity functions with Javascript
5. Add CSS styles for basic formatting
   • Font
   • Font Size
   • Text alignment
   • Container width/heights
   • Image sizes
   • Basic borders (black, dotted or solid)
6. Make the webpage responsive.
   • Auto-resize images
   • Add media queries
7. Style the webpage more, to match your sketch.
   • Change padding and margins to space containers.
   • Add colors and shapes.

Best Practices

• Don't use <style> and <script> tags inside your HTML webpages. Better to put all CSS/JS code in individual files than in the HTML file.
• How to organize HTML/CSS/JS files
  • Create an HTML and CSS file for each webpage
  • Create a JS script for each individual feature/function (ex. search bar, webplayer, etc.)