Skip to content

Commit

Permalink
Copy-editing of the English version (#797)
Browse files Browse the repository at this point in the history
* Issue #1. Copy-edit Chromebook instructions.

* Issue #1. Copy-edit up to and including django_start_project.

* Issue #1. Copy-edit new Windows 10 instructions.

* Issue DjangoGirls/tutorial/#793. Americanize spellings.

* Issue #1. Copy-edit Django models.

* Issue #1. Copy-edit to Deploy section.

* Copy-edit for English usage

* Copy-edit for English usage

* Fix grammar and remove unneeded colour channels

* Copy corrected image to translations

* Copy-edit Introduction to HTML

* Copy-editing up to and including 'Django templates'

* Copy-editing up to and including 'Template extending'

* Copy-editing up to end of tutorial
  • Loading branch information
logological authored and aniav committed Aug 23, 2016
1 parent 0da70b8 commit 1ac6ba2
Show file tree
Hide file tree
Showing 37 changed files with 264 additions and 280 deletions.
Binary file modified cs/how_the_internet_works/images/internet_4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
* [Django admin](django_admin/README.md)
* [Deploy!](deploy/README.md)
* [Django urls](django_urls/README.md)
* [Django views - time to create!](django_views/README.md)
* [Django views time to create!](django_views/README.md)
* [Introduction to HTML](html/README.md)
* [Django ORM (Querysets)](django_orm/README.md)
* [Dynamic data in templates](dynamic_data_in_templates/README.md)
* [Django templates](django_templates/README.md)
* [CSS - make it pretty](css/README.md)
* [CSS make it pretty](css/README.md)
* [Template extending](template_extending/README.md)
* [Extend your application](extend_your_application/README.md)
* [Django Forms](django_forms/README.md)
Expand Down
2 changes: 1 addition & 1 deletion en/chromebook_setup/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Chromebook setup

> **Note** If you already worked through the Installation steps, no need to do this again - you can skip straight ahead to [Introduction to Python](../python_introduction/README.md).
> **Note** If you already worked through the Installation steps, no need to do this again you can skip straight ahead to [Introduction to Python](../python_introduction/README.md).
{% include "/chromebook_setup/instructions.md" %}
8 changes: 4 additions & 4 deletions en/chromebook_setup/instructions.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ rest of the installation instructions.
### Cloud 9

Cloud 9 is a tool that gives you a code editor and access to a computer running
on the internet where you can install, write, and run software. For the duration
on the Internet where you can install, write, and run software. For the duration
of the tutorial, Cloud 9 will act as your _local machine_. You'll still be
running commands in a terminal interface just like your classmates on OS X,
Ubuntu, or Windows, but your terminal will be connected to a computer running
Expand All @@ -19,7 +19,7 @@ somewhere else that Cloud 9 sets up for you.
6. Select the _Blank_ (second from the right on the bottom row with orange logo)

Now you should see an interface with a sidebar, a big main window with some
text, and a small window at the bottom that looks something like:
text, and a small window at the bottom that looks something like this:

{% filename %}Cloud 9{% endfilename %}
```
Expand Down Expand Up @@ -71,11 +71,11 @@ and moving it to a publicly accessible computer (called a server) so other
people can see your work.

This part is a little odd when doing the tutorial on a Chromebook since we're
already using a computer that is on the internet (as opposed to, say, a laptop).
already using a computer that is on the Internet (as opposed to, say, a laptop).
However, it's still useful, as we can think of our Cloud 9 workspace as a place
or our "in progress" work and Python Anywhere as a place to show off our stuff
as it becomes more complete.

Thus, sign up for a new Python Anywhere account at
[www.pythonanywhere.com](http://www.pythonanywhere.com).
[www.pythonanywhere.com](https://www.pythonanywhere.com).

4 changes: 2 additions & 2 deletions en/code_editor/instructions.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ You might be wondering why we are installing this special code editor software,

The first reason is that code needs to be **plain text**, and the problem with programs like Word and Textedit is that they don't actually produce plain text, they produce rich text (with fonts and formatting), using custom formats like [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format).

The second reason is that code editors are specialised for editing code, so they can provide helpful features like highlighting code with colour according to its meaning, or automatically closing quotes for you.
The second reason is that code editors are specialized for editing code, so they can provide helpful features like highlighting code with color according to its meaning, or automatically closing quotes for you.

We'll see all this in action later. Soon, you'll come to think of your trusty old code editor as one of your favourite tools. :)
We'll see all this in action later. Soon, you'll come to think of your trusty old code editor as one of your favorite tools. :)

32 changes: 15 additions & 17 deletions en/css/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# CSS - make it pretty!
# CSS make it pretty!

Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS for that.

## What is CSS?

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a website written in markup language (like HTML). Treat it as make-up for our webpage ;).
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a website written in a markup language (like HTML). Treat it as make-up for our web page. ;)

But we don't want to start from scratch again, right? Once more, we'll use something that programmers released on the Internet for free. You know, reinventing the wheel is no fun.
But we don't want to start from scratch again, right? Once more, we'll use something that programmers released on the Internet for free. Reinventing the wheel is no fun, you know.

## Let's use Bootstrap!

Expand All @@ -24,8 +24,7 @@ To install Bootstrap, you need to add this to your `<head>` in your `.html` file
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
```

This doesn't add any files to your project. It just points to files that exist on the internet.
Just go ahead, open your website and refresh the page. Here it is!
This doesn't add any files to your project. It just points to files that exist on the Internet. Just go ahead, open your website and refresh the page. Here it is!

![Figure 14.1](images/bootstrap1.png)

Expand All @@ -51,13 +50,12 @@ djangogirls
└── mysite
```

Django will automatically find any folders called "static" inside any of your apps' folders. Then, it will be able to use their contents as static files.

Django will automatically find any folders called "static" inside any of your apps' folders. Then it will be able to use their contents as static files.


## Your first CSS file!

Let's create a CSS file now, to add your own style to your web-page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready?
Let's create a CSS file now, to add your own style to your web page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready?

```
djangogirls
Expand All @@ -72,7 +70,7 @@ Time to write some CSS! Open up the `blog/static/css/blog.css` file in your code
We won't be going too deep into customizing and learning about CSS here. It's pretty easy and you can learn it on your own after this workshop. There is a recommendation for a free course to learn more at the end of this page.

But let's do at least a little. Maybe we could change the color of our header?
To understand colors, computers use special codes. These codes start with `#` followed by 6 letters (A-F) and numbers (0-9). For example, the code for blue is `#0000FF`. You can find the color codes for many colors here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/colors/colors_names.asp), such as `red` and `green`.
To understand colors, computers use special codes. These codes start with `#` followed by 6 letters (AF) and numbers (09). For example, the code for blue is `#0000FF`. You can find the color codes for many colors here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/colors/colors_names.asp), such as `red` and `green`.

In your `blog/static/css/blog.css` file you should add the following code:

Expand All @@ -83,7 +81,7 @@ h1 a {
}
```

`h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element. So when we have something like: `<h1><a href="">link</a></h1>` the `h1 a` style will apply. In this case, we're telling it to change its color to `#FCA205`, which is orange. Of course, you can put your own color here!
`h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element. So when we have something like `<h1><a href="">link</a></h1>`, the `h1 a` style will apply. In this case, we're telling it to change its color to `#FCA205`, which is orange. Of course, you can put your own color here!

In a CSS file we determine styles for elements in the HTML file. The first way we identify elements is with the element name. You might remember these as tags from the HTML section. Things like `a`, `h1`, and `body` are all examples of element names.
We also identify elements by the attribute `class` or the attribute `id`. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point to specific elements. For example, you could identify the following tag by using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`:
Expand All @@ -92,17 +90,17 @@ We also identify elements by the attribute `class` or the attribute `id`. Class
<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
```

Read about [CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp).
You can read more about [CSS Selectors at w3schools](http://www.w3schools.com/cssref/css_selectors.asp).

Then, we need to also tell our HTML template that we added some CSS. Open the `blog/templates/blog/post_list.html` file and add this line at the very beginning of it:
We also need to tell our HTML template that we added some CSS. Open the `blog/templates/blog/post_list.html` file and add this line at the very beginning of it:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}
```html
{% load staticfiles %}
```

We're just loading static files here :).
Between the `<head>` and `</head>`, after the links to the Bootstrap CSS files add this line:
We're just loading static files here. :)
Between the `<head>` and `</head>` tags, after the links to the Bootstrap CSS files, add this line:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}
```html
Expand Down Expand Up @@ -152,7 +150,7 @@ body {
}
```

Add this to your CSS, save the file and see how it works!
Add that to your CSS, save the file and see how it works!

![Figure 14.3](images/margin2.png)

Expand Down Expand Up @@ -202,7 +200,7 @@ And now add a class `post` to your `div` containing a blog post.
</div>
```

We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web to help you understand the following code. For now, just copy and paste it into your `blog/static/css/blog.css` file:
We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web that can help you understand the following code. For now, just copy and paste it into your `blog/static/css/blog.css` file:

{% filename %}blog/static/css/blog.css{% endfilename %}
```css
Expand Down Expand Up @@ -295,7 +293,7 @@ Save those files and refresh your website.
Woohoo! Looks awesome, right?
Look at the code we just pasted to find the places where we added classes in the HTML and used them in the CSS. Where would you make the change if you wanted the date to be turquoise?

Don't be afraid to tinker with this CSS a little bit and try to change some things. Playing with the CSS can help you understand what the different things are doing. If you break something, don't worry, you can always undo it!
Don't be afraid to tinker with this CSS a little bit and try to change some things. Playing with the CSS can help you understand what the different things are doing. If you break something, don't worry you can always undo it!

We really recommend taking this free online [Codeacademy HTML & CSS course](https://www.codecademy.com/tracks/web). It can help you learn all about making your websites prettier with CSS.

Expand Down
Loading

0 comments on commit 1ac6ba2

Please sign in to comment.