You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Issue DjangoGirls#1. Copy-edit Chromebook instructions.
* Issue DjangoGirls#1. Copy-edit up to and including django_start_project.
* Issue DjangoGirls#1. Copy-edit new Windows 10 instructions.
* Issue DjangoGirls/tutorial/DjangoGirls#793. Americanize spellings.
* Issue DjangoGirls#1. Copy-edit Django models.
* Issue DjangoGirls#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
> **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).
3
+
> **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).
Copy file name to clipboardExpand all lines: en/code_editor/instructions.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ You might be wondering why we are installing this special code editor software,
27
27
28
28
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).
29
29
30
-
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.
30
+
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.
31
31
32
-
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. :)
32
+
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. :)
Copy file name to clipboardExpand all lines: en/css/README.md
+15-17Lines changed: 15 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# CSS - make it pretty!
1
+
# CSS – make it pretty!
2
2
3
3
Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS for that.
4
4
5
5
## What is CSS?
6
6
7
-
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 ;).
7
+
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. ;)
8
8
9
-
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.
9
+
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.
10
10
11
11
## Let's use Bootstrap!
12
12
@@ -24,8 +24,7 @@ To install Bootstrap, you need to add this to your `<head>` in your `.html` file
This doesn't add any files to your project. It just points to files that exist on the internet.
28
-
Just go ahead, open your website and refresh the page. Here it is!
27
+
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!
29
28
30
29
31
30
@@ -51,13 +50,12 @@ djangogirls
51
50
└── mysite
52
51
```
53
52
54
-
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.
55
-
53
+
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.
56
54
57
55
58
56
## Your first CSS file!
59
57
60
-
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?
58
+
Let's create a CSS file now, to add your own style to your webpage. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready?
61
59
62
60
```
63
61
djangogirls
@@ -72,7 +70,7 @@ Time to write some CSS! Open up the `blog/static/css/blog.css` file in your code
72
70
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.
73
71
74
72
But let's do at least a little. Maybe we could change the color of our header?
75
-
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`.
73
+
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`.
76
74
77
75
In your `blog/static/css/blog.css` file you should add the following code:
78
76
@@ -83,7 +81,7 @@ h1 a {
83
81
}
84
82
```
85
83
86
-
`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!
84
+
`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!
87
85
88
86
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.
89
87
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`:
@@ -92,17 +90,17 @@ We also identify elements by the attribute `class` or the attribute `id`. Class
Read about [CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp).
93
+
You can read more about [CSS Selectors at w3schools](http://www.w3schools.com/cssref/css_selectors.asp).
96
94
97
-
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:
95
+
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:
Add this to your CSS, save the file and see how it works!
153
+
Add that to your CSS, save the file and see how it works!
156
154
157
155
158
156
@@ -202,7 +200,7 @@ And now add a class `post` to your `div` containing a blog post.
202
200
</div>
203
201
```
204
202
205
-
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:
203
+
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:
@@ -295,7 +293,7 @@ Save those files and refresh your website.
295
293
Woohoo! Looks awesome, right?
296
294
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?
297
295
298
-
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!
296
+
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!
299
297
300
298
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.
0 commit comments