diff --git a/css/README.md b/css/README.md index 07749e9bcc3..2b0623f9e35 100644 --- a/css/README.md +++ b/css/README.md @@ -4,9 +4,9 @@ Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS f ## What is CSS? -Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a website written in markup language (like HTML). Treat it as a make-up for our webpage ;). +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 ;). -But we don't want to start from scratch again, right? We will, again, use something that has already been done by programmers and released in the Internet for free. You know, reinventing the wheel is no fun. +But we don't want to start from scratch again, right? We will, once more, use something that has already been done by programmers and released on the Internet for free. You know, reinventing the wheel is no fun. ## Let's use Bootstrap! @@ -33,7 +33,7 @@ Looking nicer already! Another thing you will learn about today is called __static files__. Static files are all your CSS and images -- files that are not dynamic, so their content doesn't depend on request context and will be the same for every user. -CSS is a static file, so in order to customize CSS, we need to first configure static files in Django. You'll only do it once and for all. Let's start: +CSS is a static file, so in order to customize CSS, we need to first configure static files in Django. You'll only need to do it once. Let's start: ### Configure static files in Django @@ -42,13 +42,13 @@ First, we need to create a folder to store our static files in. Go ahead and cre static manage.py -Now we need to tell Django where it can find it. Open up the `mysite/settings.py` file, scroll to the bottom of it and add the following lines: +Open up the `mysite/settings.py` file, scroll to the bottom of it and add the following lines: STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), ) -This way Django will know where your static files are. +This way Django will know where to find your static files. ## Your first CSS file! @@ -70,9 +70,9 @@ In your `static/css/blog.css` file you should add following code: color: #FCA205; } -`h1 a` is a CSS Selector. `a` element inside of `h1` element (i.e. when we have in code something like: `

link

`) is the tag we're applying our styles to, and we're telling it to change color to `#FCA205`, which is orange. Of course, you can put your own color here! +`h1 a` is a CSS Selector. Any `a` element inside of an `h1` element (i.e. when we have in code something like: `

link

`) is the tag we're applying our styles to, and 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 elements are identified by the element name (i.e. `a`, `h1`, `body`), the element class or the element id. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point out to specific elements. For example, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`: +In a CSS file we determine styles for elements in the HTML file. The elements are identified by the element name (i.e. `a`, `h1`, `body`), the element class or the element 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, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`: @@ -88,7 +88,7 @@ We're just loading static files here :). Then, between the `` and ` We just told our template where our CSS file is located. Ok, save the file and refresh the site! -Your file should look like this at this point: +Your file should now look like this: {% load staticfiles %} @@ -132,7 +132,7 @@ Maybe we can customize the font in our header? Paste this into your `` in This line will import a font called *Lobster* from Google Fonts (https://www.google.com/fonts). -Now add the line `font-family: 'Lobster';` in the CSS file `mysite/static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page: +Now add the line `font-family: 'Lobster';` in the CSS file `static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page: h1 a { color: #FCA205; @@ -146,7 +146,7 @@ Great! As mentioned above, CSS has a concept of classes, which basically allows you to name a part of the HTML code and apply styles only to this part, not affecting others. It's super helpful if you have two divs, but they're doing something very different (like your header and your post), so you don't want them to look the same. -Go ahead and name some parts of the HTML code. Add a class called `page-header` to your `div` that contains header, like this: +Go ahead and name some parts of the HTML code. Add a class called `page-header` to your `div` that contains your header, like this:

Django Girls Blog

@@ -242,9 +242,9 @@ Save those files and refresh your website. Wohoo! Looks awesome, right? The code we just pasted is not really so hard to understand and you should be able to understand most of it just by reading it. -Don't be afraid to tinker with this CSS a little bit and try to change some things. If you break something, don't worry, you can always undo this! +Don't be afraid to tinker with this CSS a little bit and try to change some things. If you break something, don't worry, you can always undo it! -Anyway, we really recommend taking this free online [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) as a post-workshop homework to learn everything you need to know about making your websites prettier with CSS. +Anyway, we really recommend taking this free online [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) as some post-workshop homework to learn everything you need to know about making your websites prettier with CSS. -Ready for next chapter?! :) +Ready for the next chapter?! :) diff --git a/deploy/README.md b/deploy/README.md index 0b14d7cf6c7..f579a584e81 100644 --- a/deploy/README.md +++ b/deploy/README.md @@ -1,6 +1,6 @@ # Deploy! -Until now your website was only available on your computer, now you will learn how to deploy it! Deploying is a process of publishing your application on the Internet so people can finally go and see your app :). +Until now your website was only available on your computer, now you will learn how to deploy it! Deploying is the process of publishing your application on the Internet so people can finally go and see your app :). As you learned, a website has to be located on a server. There are a lot of providers, but we will use the one with the simplest deployment process: [Heroku](http://heroku.com/). Heroku is free for small applications that don't have too many visitors, it'll definitely be enough for you now. @@ -14,7 +14,7 @@ But first, Heroku needs us to install the `django-toolbelt` package. Go to your (myvenv) $ pip install dj-database-url gunicorn whitenoise -After the installation is finished, go to the `mysite` directory and run this command: +After the installation is finished, go to the `djangogirls` directory and run this command: (myvenv) $ pip freeze > requirements.txt @@ -29,7 +29,7 @@ This line is needed for your application to work on Heroku. ## Procfile -Another thing we need to create is a Procfile. Open up your code editor, create a file called `Procfile` in `mysite` directory and add this line: +Another thing we need to create is a Procfile. Open up your code editor, create a file called `Procfile` in `djangogirls` directory and add this line: web: gunicorn mysite.wsgi @@ -106,17 +106,17 @@ You need to install your Heroku toolbelt which you can find here (you can skip t Please also create a free Heroku account here: https://id.heroku.com/signup/www-home-top -Then authenticate Heroku account on you computer by running this command: +Then authenticate your Heroku account on your computer by running this command: $ heroku login -In case you don't have SSH key that command would automatically create one. SSH keys are required to push code to the Heroku. +In case you don't have an SSH key this command will automatically create one. SSH keys are required to push code to the Heroku. ## Git -Heroku uses git repository to manage your project files, so we need to use it to. +Heroku uses a git repository to manage your project files, so we need to use it too. -Create `.gitignore` file with following content: +Create `.gitignore` file with the following content: myvenv __pycache__ @@ -126,10 +126,10 @@ Create `.gitignore` file with following content: and save it. The dot on the beginning of the file name is important! As you can see, we're now telling Heroku to ignore `local_settings.py` and don't download it, so it's only available on your computer (locally). -Next, we’ll create a new git repository and save our changes. Go to your console and run this commands: +Next, we’ll create a new git repository and save our changes. Go to your console and run these commands: $ git init - Initialized empty Git repository in /Users/kreitz/hellodjango/.git/ + Initialized empty Git repository in ~/djangogirls/.git/ $ git add . $ git commit -m "My Django Girls app" [master (root-commit) 2943412] My Django Girls @@ -172,6 +172,6 @@ As you can see, there is an error. Heroku created a new database for us and it's $ heroku run python manage.py syncdb -You should now see your website in a browser! Congrats :)! +You should now be able to see your website in a browser! Congrats :)! diff --git a/django_forms/README.md b/django_forms/README.md index 702b2044a76..b2c6d24d14d 100644 --- a/django_forms/README.md +++ b/django_forms/README.md @@ -1,6 +1,6 @@ # Django Forms -The last thing we want to do with our website is to add some nice way to add and edit blog post. Django's `admin` is cool, but it is rather hard to customize and make it pretty. With `forms` we will have absolute power over forms - we can do almost anything we can imagine! +The final thing we want to do on our website is create a nice way to add and edit blog posts. Django's `admin` is cool, but it is rather hard to customize and make pretty. With `forms` we will have absolute power over our interface - we can do almost anything we can imagine! The nice thing about Django forms is that we can either define one from scratch or create a `ModelForm` which will save the result of the form to the model. @@ -27,17 +27,17 @@ Ok, let's open it and type the following code: We need to import Django forms first (`from django import forms`) and, obviously, our `Post` model (`from .models import Post`). -`PostForm`, as you probably suspect is a name of our form. We need to tell Django, that this form is a `ModelForm` (so Django will do some magic for us) - `forms.ModelForm` is responsible for that. +`PostForm`, as you probably suspect is the name of our form. We need to tell Django, that this form is a `ModelForm` (so Django will do some magic for us) - `forms.ModelForm` is responsible for that. -Next, we have `class Meta`, where we say Django which model should be used to create this form (`model = Post`). +Next, we have `class Meta`, where we tell Django which model should be used to create this form (`model = Post`). -Finally, we can say which field should end up in our form. In this scenario we want only `title` and `text` to be exposed - `author` should be the person who is currently logged in (you!) and `created_date` should be automatically set in code, right? +Finally, we can say which field(s) should end up in our form. In this scenario we want only `title` and `text` to be exposed - `author` should be the person who is currently logged in (you!) and `created_date` should be automatically set when we create a post (i.e in the code), right? -And that's it! All we need to do now is useing the form in a *view* and display it in a template. +And that's it! All we need to do now is use the form in a *view* and display it in a template. -So once again we will create: a link to the page, an URL, a view and a template. +So once again we will create: a link to the page, a URL, a view and a template. -## Link to page with the form +## Link to a page with the form It's time to open `mysite/templates/mysite/base.html`. We will add a link in `div` named `page-header`: @@ -45,7 +45,7 @@ It's time to open `mysite/templates/mysite/base.html`. We will add a link in `di Note that we want to call our new view `post_new`. -After adding the line your html file should look like this now: +After adding the line, your html file should now look like this: {% load staticfiles %} @@ -98,11 +98,11 @@ After refreshing the site, we see an `AttributeError`, since we don't have `post ## post_new view -Time to open the `blog/views.py` file and add the following lines: +Time to open the `blog/views.py` file and add the following lines with the rest of the `from` rows: from .forms import PostForm -under all `from` rows and our *view*: +and our *view*: def post_new(request): form = PostForm() @@ -114,14 +114,14 @@ To create a new `Post` form, we need to call `PostForm()` and pass it to the tem We need to create a file `post_edit.html` in the `blog/template/blog` directory. To make a form work we need several things: -- we have to display the form. We can do that for example with a `{{ form.as_p }}`. -- the line above have to be wrapped with HTML form tag: <`form method="POST">...` -- we need a `Save` button. We do that with HTML: `` +- we have to display the form. We can do that for example with a simple `{{ form.as_p }}`. +- the line above needs to be wrapped with an HTML form tag: <`form method="POST">...` +- we need a `Save` button. We do that with an HTML button: `` - and finally just after the opening `
` tag we need to add `{% csrf_token %}`. This is very important, since it makes your forms secure! Django will complain if you forget about this bit if you try to save the form: ![CSFR Forbidden page](images/csrf2.png) -Ok, so let's see how the HTML in `post_edit.html` should look like: +Ok, so let's see how the HTML in `post_edit.html` should look: {% extends 'mysite/base.html' %} @@ -174,7 +174,7 @@ We check if the form is valid and if so, we can save it! post.save() Basically, we have two things here: we save the form with `form.save` and we add an author (since there was no `author` field in the `PostForm` and this field is required!). `commit=False` means that we don't want to save `Post` model yet - we want to add author first. Most of the time you will use `form.save()`, without `commit=False`, but in this case, we need to do that. -`post.save()` preserve changes (adding author) and a new blog post is created! +`post.save()` will preserve changes (adding author) and a new blog post is created! Finally, it would be awesome if we can immediatelly go to `post_detail` page for newly created blog post, right? To do that we need more imports: @@ -185,9 +185,9 @@ Add them at the very beginning of your file. And now we can say: go to `post_det return redirect('blog.views.post_detail', pk=post.pk) -`blog.views.post_detail` is a name of the view we want to go to. Remember that this *view* require a `pk` variable? To pass it to the views we use `pk=post.pk`, where `post` is the newly created blog post! +`blog.views.post_detail` is the name of the view we want to go to. Remember that this *view* requires a `pk` variable? To pass it to the views we use `pk=post.pk`, where `post` is the newly created blog post! -Ok, we talked a lot, but we probably would like to see how the whole *view* looks like, right? +Ok, we talked a lot, but we probably want to see what the whole *view* looks like now, right? def post_new(request): if request.method == "POST": @@ -201,23 +201,23 @@ Ok, we talked a lot, but we probably would like to see how the whole *view* look form = PostForm() return render(request, 'blog/post_edit.html', {'form': form}) -Let's try if it works. Go to the page `http://127.0.0.1:8000/post/new/`, add a `title` and `text`, save it... and voilà! The new blog post is added and we are redirected to `post_detail` page! +Let's see if it works. Go to the page `http://127.0.0.1:8000/post/new/`, add a `title` and `text`, save it... and voilà! The new blog post is added and we are redirected to `post_detail` page! That is awesome! ## Form validation -Now, we will show you how cool Django forms are. Blog post needs to have `title` and `text` fields. In our `Post` model we did not said (as opposed to `published_date`) that these fields are not required, so Django, by default, expects them to be set. +Now, we will show you how cool Django forms are. Blog post needs to have `title` and `text` fields. In our `Post` model we did not say (as opposed to `published_date`) that these fields are not required, so Django, by default, expects them to be set. Try to save the form without `title` and `text`. Guess, what will happen! ![Form validation](images/form_validation2.png) -Django is taking care of validating that all fields in our form are correct. Isn't it awesome? +Django is taking care of validating that all the fields in our form are correct. Isn't it awesome? ## Edit form -Now we know how to add a new form. But what if we want to edit an existing one? It is very similar to the thing we just did. Let's create some important things quickly (if you don't understand something - you should ask your coach or look at the previous chapters, since we covered all the steps already). +Now we know how to add a new form. But what if we want to edit an existing one? It is very similar to what we just did. Let's create some important things quickly (if you don't understand something - you should ask your coach or look at the previous chapters, since we covered all the steps already). Open `blog/post_detail.html` and add this line: @@ -259,15 +259,15 @@ Let's open a `blog/views.py` and add at the very end of the file: form = PostForm(instance=post) return render(request, 'blog/post_edit.html', {'form': form}) -This looks almost exactly the same as our `post_new` view, right? But not entirely. First thing: we pass an extra `pk` parameter from urls. Next - we get the `Post` model we want to edit with `get_object_or_404(Post, pk=pk)` and then, when we create a form we pass this post as an `instance` both when we save a form: +This looks almost exactly the same as our `post_new` view, right? But not entirely. First thing: we pass an extra `pk` parameter from urls. Next - we get the `Post` model we want to edit with `get_object_or_404(Post, pk=pk)` and then, when we create a form we pass this post as an `instance` both when we save the form: form = PostForm(request.POST, instance=post) -or we just opened a form with this post without saving anything yet: +and when we just opened a form with this post to edit: form = PostForm(instance=post) -Ok, let's test if it works! Let's go to `post_detail` page. There should be an edit button in top-right corner: +Ok, let's test if it works! Let's go to `post_detail` page. There should be an edit button in the top-right corner:: ![Edit button](images/edit_button2.png) @@ -281,9 +281,9 @@ Congratulations! Your application is more and more complete! If you need more information about Django forms you should read the documentation: https://docs.djangoproject.com/en/1.6/topics/forms/ -We prepared some extra tasks for you, but they are not very hard. You can do them as a homework (they are described in __Homework: add more to your website__ chapter): +We prepared some extra tasks for you, but they are not very hard. You can do them as homework (they are described in __Homework: add more to your website__ chapter): - create a page with all __draft__ posts -- adding __publish__ button, which will make your post visible on `post_list` page -- deleting post +- adding a __publish__ button, which will make your post visible on `post_list` page +- deleting a post If you are ready for more: go to the next chapter and see if you can complete all the tasks! diff --git a/domain/README.md b/domain/README.md index 1937289eb79..187db408966 100644 --- a/domain/README.md +++ b/domain/README.md @@ -24,9 +24,9 @@ We've decided to buy `djangogirls.in`: ![](images/3.png) -Go to checkout. You should now sign up for iwantmyname if you don't have your account yet. After that, provide your discount code, credit card info and buy a domain! +Go to checkout. You should now sign up for iwantmyname if you don't have an account yet. After that, provide your discount code, credit card info and buy a domain! -After that, click into `Domains` in menu and choose your newly purchased domain. Then locate and click on `manage DNS records` link: +After that, click `Domains` in the menu and choose your newly purchased domain. Then locate and click on the `manage DNS records` link: ![](images/4.png) @@ -34,7 +34,7 @@ Now you need to locate this form: ![](images/5.png) -And fill it like this: +And fill it in with the following details: - Hostname: www - Type: CNAME - Value: your domain from Heroku (for example djangogirls.herokuapp.com) @@ -42,14 +42,14 @@ And fill it like this: ![](images/6.png) -Click Add button and Save changes at the bottom. +Click the Add button and Save changes at the bottom. -It can take up to couple of hours for your domain to start working, so be patient! +It can take up to a couple of hours for your domain to start working, so be patient! ## Configure domain in Heroku You also need to tell Heroku that you want to use your custom domain. -Go to [Heroku Dashboard](https://dashboard.heroku.com/apps), login with your Heroku account and choose your app. Then go into app Settings and add your domain in `Domains` section and save changes. +Go to the [Heroku Dashboard](https://dashboard.heroku.com/apps), login to your Heroku account and choose your app. Then go into app Settings and add your domain in the `Domains` section and save your changes. That's it! diff --git a/extend_your_application/README.md b/extend_your_application/README.md index bef674739a9..1d114c5ec76 100644 --- a/extend_your_application/README.md +++ b/extend_your_application/README.md @@ -63,7 +63,7 @@ That one looks scary, but no worries - we will explain it for you: That means if you enter `http://127.0.0.1:8000/post/5/` into your browser, Django will understand that you are looking for a *view* called `post_detail` and transfer the information that `pk` equals `5` to that *view*. -`pk` is shortcut for `primary key`. This name is ften used in many Django projects. But you can name your variable as you like (remember: lowercase and `_` instead of whitespaces!). For example instead of `(?P[0-9]+)` we could have variable `post_id`, so this bit would look like: `(?P[0-9]+)`. +`pk` is shortcut for `primary key`. This name is often used in many Django projects. But you can name your variable as you like (remember: lowercase and `_` instead of whitespaces!). For example instead of `(?P[0-9]+)` we could have variable `post_id`, so this bit would look like: `(?P[0-9]+)`. Ok! Let's refresh the page: diff --git a/homework/README.md b/homework/README.md index d3605eec5c0..66ac8cba280 100644 --- a/homework/README.md +++ b/homework/README.md @@ -1,8 +1,8 @@ # Homework: add more to your website! -Yes, this is the last thing we will do in this tutorial. You already have learned a lot! Time to use this knowledge. +Yes, this is the last thing we will do in this tutorial. You have already learned a lot! Time to use this knowledge. -## Page with list of not published posts +## Page with list of unpublished posts Remember the chapter about querysets? We created a view `post_list` that displays only published blog posts (those with non-empty `published_date`). @@ -42,11 +42,11 @@ It looks very similar to our `post_list.html`, right? Now when you go to `http://127.0.0.1:8000/drafts/` you will see the list of unpublished posts. -Yay! First task is done! +Yay! Your first task is done! ## Add publish button -It would be nice to have a button on blog post detail page that will immediately publish the post, right? +It would be nice to have a button on the blog post detail page that will immediately publish the post, right? Let's open `blog/template/blog/post_detail.html` and change these lines: @@ -64,7 +64,7 @@ into these: As you noticed, we added `{% else %}` line here. That means, that if the condition from `{% if post.published_date %}` is not fulfilled (so if there is no `published_date`), then we want to do the line `Publish`. Note that we are passing a `pk` variable in the `{% url %}`. -Time to create an URL (in `blog/urls.py`): +Time to create a URL (in `blog/urls.py`): url(r'^post/(?P[0-9]+)/publish/$', views.post_publish, name='post_publish'), @@ -95,9 +95,9 @@ Let's open `blog/templates/blog/post_detail.html` once again and add this line: -just under a line with edit button. +just under a line with the edit button. -Now we need an URL (`blog/urls.py`): +Now we need a URL (`blog/urls.py`): url(r'^post/(?P[0-9]+)/remove/$', views.post_remove, name='post_remove'), @@ -116,7 +116,7 @@ Let's test it! Go to the page with a post and try to delete it! ![Delete button](images/delete3.png) -Yes, it is the last thing! You completed this tutorial! You are awesome! +Yes, this is the last thing! You completed this tutorial! You are awesome!