# 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="" %}