# 7: 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.
##
*
*
* [Google Fonts](https://fonts.google.com/)
* [AllTheFreeStock](https://allthefreestock.com/)
**Colors**
* [https://coolors.co](https://coolors.co/)
*
* [Color wheel](https://color.adobe.com/create/color-wheel/)
* [CSS cheatsheet](http://overapi.com/css)
* [https://color.hailpixel.com](https://color.hailpixel.com/)
{% embed url="" %}
### Inspect and Overwrite
Let's identify a rule that's being used by our theme and overwrite it.
{% embed url="" %}
### New Bootstrap Component
Let's get back to the Bootstrap [documentation](https://getbootstrap.com/docs/4.1/getting-started/introduction/) and shop for a new component to add to our site.
{% embed url="" %}
## 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.](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
```css
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
### Fine Tuning
{% embed url="" %}
You may have different things to fix than shown in this video, but I hope it shows the process to follow
{% endembed %}
## Extra Addons
### Load Screen
#### We're going to use jQuery
Our Bootstrap template uses [jQuery](https://jquery.com/), 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 `` on the first line of your ``. Then at the very bottom, add the following script:
```markup
```
And we'll add the following code to our **custom.css**.
```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;
}
```
{% embed url="" %}
Don't have a loading GIF? Use this and give them credit in your code!
{% endembed %}
## Replacing Images
{% embed url="" %}
## JavaScript
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gilmour.online/compsci/web-design/adv-editing.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.