Computer Science
Gilmour AcademyLancerTech
  • Our Curriculum and Department
  • Intro to Programming
    • 1: Parts of a Computer
    • 2: Parts of Python
    • 3: DRY Turtle
    • 4: Turtle Design App
    • Wordle with Turtles
    • 5: Interactive Turtles
    • OLD 5: Replit, GitHub, and repositories (Oh my!)
    • 6: Raspberry Pi / GoPiGo
    • 7: Kivy
  • Intro to Web Design
    • 1: Internet?
    • 2: Websites?
    • 3: Bootstrap Template
    • 4: Graphics and Branding
    • 5: Collaboration
    • 6: Advanced Editing
    • Publish Static HTML
  • AP Computer Science
    • 1: Logic & Instances
    • 2: How Java Works
    • 3: Data Types & Flow
    • 4: Strings
    • 5: Objects & References
    • 6: Inheritance & Algorithms
    • 7: Data Structures
    • 8: Sorting
    • 9: Review
    • Data Science
  • Web App Dev
    • 1: Core Concepts
    • 2: MVT Pattern
    • 3: Hello Flask
    • 4: Install Flaskinni
    • 5: Tour Flaskinni
    • 6: Visualize Your App
    • 7: Theme & Blueprint
    • 8: Standup Your DB
    • 9: Advanced Topics
    • 10: Deployment
  • 2D Game Design
    • Class Overview
    • Gamemaker Studio 2 and Github Setup
    • Game 1: Bouncing Ball
    • Turning in your games
    • Game 2: Maze
    • Game 3: Ping Pong
    • Game 4: Breakout
    • Game 5: Tank Battle
    • Game 6 Highlights
    • DO NOT DO:
    • Game 7: Final Project
    • Publish to Opera
    • FAQ
  • 3D Game Design
    • 1: Class Overview
    • 2: Installation
    • 3: Exploring the Unity UI
    • Game 1: Rolling Ball
    • Game 2: Tanks
    • Game 3: Third Person Platformer
    • Game 4: Final project
    • FAQs
    • OLD: Distance Learning Setup
    • OLD: GIT
  • 3D Modeling & Fabrication
    • Installation
    • Fusion 360 Interface and Sketch Modeling
    • Primitive Modeling
    • Patterns
    • Appearances and Rendering
    • Building Community Gallery Page 2023
    • Parametric Modeling
    • 3D Printing Concerns
    • Assemblies and Mechanical Design
    • Laser Cutting
    • Sculpt Tools
    • Milling Concerns
  • Robotics 7
    • Software Installation
    • Python basics (trinket.io)
    • Python Turtle
    • Programming for the Ev3
    • Setting up for clarity
  • Robotics 8
    • Replit
    • Python review
    • Kivy Basics
    • Calculator
  • Competitive Robotics
    • Hardware Team
      • CAD Examples
      • Elevators
    • Software Team
      • Command Pattern
      • Example Command
      • Subsystem
      • Running Your Code
      • Under the Hood
      • RoadRunner
      • Vision Processing
  • Archives
    • Adiletta Archives
      • Old Web
        • Ex: WordPress CMS
      • ItP
        • OLD: Parts of Python (old -- Mr. A)
        • OLD: 5: Raspberry Pi
        • OLD: 6: Deploying Code
        • OLD 7: Nav Algorithm
    • Vanek Archives
      • OLD Robotics 8
        • OLD: End of Class Project
      • OLD Competitive Robotics
        • Untitled
        • Webots Videos
      • OLD Robotics 7
        • Trinket Introduction
        • Lists: x/y position
        • Functions: Math program
        • Lists: Grocery List
        • Study Guide Program
        • Tic Tac Toe Game
        • Dice Roller Program
        • Visualization
        • Dice Roller + Visualization
        • OpenSCAD: Installation
        • OpenSCAD: Command Sheet and Intro
        • OpenSCAD: Difference
        • OpenSCAD: Variables
        • OpenSCAD: Union
        • OpenSCAD: For Loops
        • OpenSCAD: Final Project
      • OLD Art I - Blender Sculpting
        • Class Overview
        • Installation
        • Lesson 1 - Tools
        • Lesson 2 - Detail
        • Lesson 3 - Base Mesh: Metaballs
        • Lesson 4: Converting metaballs and adding detail
        • Lesson 5: Masking, Hiding, and Working with Multiple Objects
        • Lesson 6: Joining Objects & Basing
        • Lesson 7: Sculpture Painting
        • Student Gallery: Animal Sculpts
        • Lesson 8: 3D Compositon
        • Lesson 9: The Project - Putting it all together
        • Lesson 10: Developing the image further
        • Lesson 11: Layout the base metaball mesh.
        • Lesson 12: Final Detail
        • Lesson 13: Basing and Painting
        • Final Project Gallery
      • OLD Fab
        • OLD Building Community Project Gallery
        • Copy of Building Community Project Gallery
        • old Building Community Project Gallery
      • OLD: Turtle Design App
      • OLD Arduino Robotics 8
        • Arduino Basic Commands Cheat Sheet
        • Logging into Tinkercad
        • Arduino, Circuits, LEDs and Resistors
        • Functions and Variables
        • Serial Monitor
        • Buttons and Interrupts
        • Traffic Light Project
        • Potentiometers + Servos
        • Piezo Buzzer and Tone();
        • Sequencer Project
        • Arrays and for loops
        • Extra Loop Practice
        • Refining the Sequencer
        • Servos
        • Ultrasonic Sensors
        • Final Project
Powered by GitBook
On this page
  • Learning Targets
  • Inspect and Overwrite
  • New Bootstrap Component
  • Revisions
  • Responsive refinement
  • Fine Tuning
  • Extra Addons
  • Load Screen
  • Replacing Images
  • JavaScript

Was this helpful?

Export as PDF
  1. Intro to Web Design

6: Advanced Editing

Learning Targets

  • I can configure a project folder in a cloud-based file system.

  • I can customize the elements of an HTML template.

  • I can publish a completed webpage and share the link with my friends.

  • I can take feedback on my website and publish an improved draft.

  • https://startbootstrap.com/

  • https://code.visualstudio.com

  • Google Fonts​

  • ​AllTheFreeStock​

Colors

  • ​https://coolors.co​

  • ​https://colorhunt.co/​

  • ​Color wheel​

  • ​CSS cheatsheet ​

  • ​https://color.hailpixel.com

Inspect and Overwrite

Let's identify a rule that's being used by our theme and overwrite it.

New Bootstrap Component

Let's get back to the Bootstrap documentation and shop for a new component to add to our site.

Revisions

We all have to edit our work. We need to collect feedback, review, make a list, and add improvements to our project. The more you repeat this process, the better your end product (as well as first draft on your next project).

Responsive refinement

If you're not frequently having to look things up (and finding W3Schools) you're not trying out enough new things. @media is one I have to repeatedly look up.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Fine Tuning

Extra Addons

Load Screen

We're going to use jQuery

Our Bootstrap template uses jQuery, which is a really handy JavaScript library. JavaScript is a programming language that runs right inside your browser. Most of what you do with jQuery can be done in plain-old vanilla JavaScript. We use jQuery to make life a little easier.

Add a <div id="cover"></div> on the first line of your <body>. Then at the very bottom, add the following script:

  <script>
    $(window).on('load', function(){
      $('#cover').fadeOut(1000);
    });
  </script>

And we'll add the following code to our custom.css.

#cover {
    /* save a file called loading.gif to your img folder */
    background: url("../img/loading.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 9999;
}

Replacing Images

JavaScript

Previous5: CollaborationNextPublish Static HTML

Last updated 1 year ago

Was this helpful?

You may have different things to fix than shown in this video, but I hope it shows the process to follow
loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generatorloadingio
Don't have a loading GIF? Use this and give them credit in your code!
Logo
This comes from a great blog post about "breakpoints"