From 15e609e63c0b163799acf03d2d2a25b260a2aca3 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 14:10:47 +0530 Subject: [PATCH 01/37] Updated boostrap link URLs --- en/css/README.md | 9 +++------ en/django_forms/README.md | 5 ++--- en/template_extending/README.md | 3 +-- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index d7736822530..aa60b6a7b72 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -20,8 +20,7 @@ To install Bootstrap, open up your `.html` file in the code editor and add this {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html - - + ``` This doesn't add any files to your project. It just points to files that exist on the Internet. So go ahead, open your website and refresh the page. Here it is! @@ -68,7 +67,7 @@ djangogirls Time to write some CSS! Open up the `blog/static/css/blog.css` file in your code editor. -We won't be going too deep into customizing and learning about CSS here. There is a recommendation for a free CSS course at the end of this page if you would like to learn more. +We won't be going too deep into customizing and learning about CSS here. There is a recommendation for a free CSS course at the end of this page if you would like to learn more. But let's do at least a little. Maybe we could change the color of our headers? 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`. @@ -119,8 +118,7 @@ Your file should now look like this: Django Girls blog - - + @@ -300,4 +298,3 @@ Don't be afraid to tinker with this CSS a little bit and try to change some thin We really recommend taking the free online courses "Basic HTML & HTML5" and "Basic CSS" on [freeCodeCamp](https://learn.freecodecamp.org/). They can help you learn all about making your websites prettier with HTML and CSS. Ready for the next chapter?! :) - diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 8c50269cd7b..a20d726797f 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -61,8 +61,7 @@ After adding the line, your HTML file should now look like this: Django Girls blog - - + @@ -98,7 +97,7 @@ And the final code will look like this: {% filename %}blog/urls.py{% endfilename %} ```python -from django.urls import path +from django.urls import path from . import views urlpatterns = [ diff --git a/en/template_extending/README.md b/en/template_extending/README.md index 1618809d415..f659be31c2b 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -26,8 +26,7 @@ Then open it up in the code editor and copy everything from `post_list.html` to Django Girls blog - - + From bb77fce0b4f9dd76ed689e4d948892cb00cecb3d Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 14:16:18 +0530 Subject: [PATCH 02/37] Updated DOCTYPE as per HTM5 standards --- en/css/README.md | 1 + en/django_forms/README.md | 1 + en/html/README.md | 6 +++++- en/template_extending/README.md | 1 + 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/en/css/README.md b/en/css/README.md index aa60b6a7b72..76f92ccfd90 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -115,6 +115,7 @@ Your file should now look like this: {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% load static %} + Django Girls blog diff --git a/en/django_forms/README.md b/en/django_forms/README.md index a20d726797f..fcbbecaedf3 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -58,6 +58,7 @@ After adding the line, your HTML file should now look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html {% load static %} + Django Girls blog diff --git a/en/html/README.md b/en/html/README.md index dfa7e62095e..1281e9a771e 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -40,6 +40,7 @@ Open the new file in the code editor, and add the following: {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html +

Hi there!

@@ -54,7 +55,8 @@ So how does your website look now? Visit it to find out: http://127.0.0.1:8000/ It worked! Nice work there :) -- The most basic tag, ``, is always the beginning of any web page and `` is always the end. As you can see, the whole content of the website goes between the beginning tag `` and closing tag `` +- The line `` is not a HTML tag. It only declares the document type. Here, it informs the browser that document type is [HTML5](https://html.spec.whatwg.org/#the-doctype). This is always the beginning of any HTML5 file. +- The most basic tag, ``, is always the beginning of html content and `` is always the end. As you can see, the whole content of the website goes between the beginning tag `` and closing tag `` - `

` is a tag for paragraph elements; `

` closes each paragraph ## Head and body @@ -71,6 +73,7 @@ For example, you can put a web page title element inside the ``, like this {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html + Ola's blog @@ -113,6 +116,7 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html + Django Girls blog diff --git a/en/template_extending/README.md b/en/template_extending/README.md index f659be31c2b..2e9a672464b 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -23,6 +23,7 @@ Then open it up in the code editor and copy everything from `post_list.html` to {% filename %}blog/templates/blog/base.html{% endfilename %} ```html {% load static %} + Django Girls blog From 0c9ea5f7159f710dcc65ec188769b5e230c08f0e Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 14:33:28 +0530 Subject: [PATCH 03/37] Updated CSS for bootstrap4 --- en/css/README.md | 46 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 76f92ccfd90..74a58905a87 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -77,7 +77,7 @@ In your `blog/static/css/blog.css` file you should add the following code: {% filename %}blog/static/css/blog.css{% endfilename %} ```css h1 a, h2 a { - color: #FF8833; + color: #C25100; } ``` @@ -208,36 +208,43 @@ We will now add declaration blocks to different selectors. Selectors starting wi .page-header { background-color: #C25100; margin-top: 0; + margin-bottom: 40px; padding: 20px 20px 20px 40px; } -.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { +.page-header h1, +.page-header h1 a, +.page-header h1 a:visited, +.page-header h1 a:active { color: #ffffff; font-size: 36pt; text-decoration: none; } -.content { - margin-left: 40px; -} - -h1, h2, h3, h4 { +h1, +h2, +h3, +h4 { font-family: 'Lobster', cursive; } .date { color: #828282; + float: right; } .save { float: right; } -.post-form textarea, .post-form input { +.post-form textarea, +.post-form input { width: 100%; } -.top-menu, .top-menu:hover, .top-menu:visited { +.top-menu, +.top-menu:hover, +.top-menu:visited { color: #ffffff; float: right; font-size: 26pt; @@ -248,9 +255,28 @@ h1, h2, h3, h4 { margin-bottom: 70px; } -.post h2 a, .post h2 a:visited { +.post h2 a, +.post h2 a:visited { color: #000000; } + +.post .actions { + float: right; + margin: auto 10px; +} + +.btn-default { + color: rgb(255, 148, 0); + background: none; + border-color: rgb(255, 148, 0); +} + +.btn-default:hover, +.btn-default:visited { + color: rgb(255, 255, 255); + background-color: rgb(255, 148, 0); + border-color: rgb(204, 179, 144); +} ``` Then surround the HTML code which displays the posts with declarations of classes. Replace this: From 1ef88173960479deeeb69fbbdfd6fe0d7a55fe3a Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 15:32:47 +0530 Subject: [PATCH 04/37] Added container to page-header --- en/css/README.md | 6 ++++-- en/django_forms/README.md | 10 ++++++---- en/template_extending/README.md | 9 +++++++-- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 74a58905a87..2a62d2e5d8f 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -181,12 +181,14 @@ Great! As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post). A class can help you make them look different. -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: +Go ahead and name some parts of the HTML code. Replace the `div` that contains your header with the following: {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html
-

Django Girls Blog

+
+

Django Girls Blog

+
``` diff --git a/en/django_forms/README.md b/en/django_forms/README.md index fcbbecaedf3..45ef7b247a9 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -44,7 +44,7 @@ So once again we will create a link to the page, a URL, a view and a template. ## Link to a page with the form -It's time to open `blog/templates/blog/base.html` in the code editor. In the `div` named `page-header`, we will add a link: +It's time to open `blog/templates/blog/base.html` in the code editor. In the `div` named `container` inside `page-header` `div` tag, we will add a link: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html @@ -68,8 +68,10 @@ After adding the line, your HTML file should now look like this:
- -

Django Girls Blog

+
+ +

Django Girls Blog

+
@@ -358,7 +360,7 @@ If you need more information about Django forms, you should read the documentati Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else. -Open `blog/templates/blog/base.html` in the code editor, find our `page-header` `div` and the anchor tag you put in there earlier. It should look like this: +Open `blog/templates/blog/base.html` in the code editor, find our `container` `div` inside `page-header` `div` and the anchor tag you put in there earlier. It should look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html diff --git a/en/template_extending/README.md b/en/template_extending/README.md index 2e9a672464b..f33675dbe94 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -33,7 +33,9 @@ Then open it up in the code editor and copy everything from `post_list.html` to
-

Django Girls Blog

+
+

Django Girls Blog

+
@@ -61,7 +63,10 @@ Then in `base.html`, replace your whole `` (everything between `` an ```html
-

Django Girls Blog

+
+ +

Django Girls Blog

+
From 953131af31f8cc319925426753c689a4a00071d2 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 16:18:22 +0530 Subject: [PATCH 05/37] Fixed text case inside HTML --- en/css/README.md | 8 ++++---- en/django_templates/README.md | 2 +- en/html/README.md | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 2a62d2e5d8f..67cf92dcff2 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -129,7 +129,7 @@ Your file should now look like this: {% for post in posts %}
-

published: {{ post.published_date }}

+

Published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

@@ -197,7 +197,7 @@ And now add a class `post` to your `div` containing a blog post. {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html
-

published: {{ post.published_date }}

+

Published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

@@ -287,7 +287,7 @@ Then surround the HTML code which displays the posts with declarations of classe ```html {% for post in posts %}
-

published: {{ post.published_date }}

+

Published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

@@ -304,7 +304,7 @@ in the `blog/templates/blog/post_list.html` with this: {% for post in posts %}
-

published: {{ post.published_date }}

+

Published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

diff --git a/en/django_templates/README.md b/en/django_templates/README.md index d088a9eaf37..6a07918abc7 100644 --- a/en/django_templates/README.md +++ b/en/django_templates/README.md @@ -53,7 +53,7 @@ It works! But we want the posts to be displayed like the static posts we created {% for post in posts %}
-

published: {{ post.published_date }}

+

Published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

diff --git a/en/html/README.md b/en/html/README.md index 1281e9a771e..6ff7adb91ff 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -127,13 +127,13 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo
-

published: 14.06.2014, 12:14

+

Published: 14.06.2014, 12:14

My first post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

published: 14.06.2014, 12:14

+

Published: 14.06.2014, 12:14

My second post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

From f33bce0ccb5c83f369dfa6aa735daa7ef5d31685 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 16:19:42 +0530 Subject: [PATCH 06/37] Updated example year to 2020 in tutorial --- en/html/README.md | 4 ++-- en/intro_to_command_line/README.md | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/en/html/README.md b/en/html/README.md index 6ff7adb91ff..0494d39ee9d 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -127,13 +127,13 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo
-

Published: 14.06.2014, 12:14

+

Published: 14.06.2020, 12:14

My first post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

Published: 14.06.2014, 12:14

+

Published: 14.06.2020, 12:14

My second post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

diff --git a/en/intro_to_command_line/README.md b/en/intro_to_command_line/README.md index 95976b77522..2b7079fcbdd 100644 --- a/en/intro_to_command_line/README.md +++ b/en/intro_to_command_line/README.md @@ -171,10 +171,10 @@ Music ``` > dir Directory of C:\Users\olasitarska -05/08/2014 07:28 PM Applications -05/08/2014 07:28 PM Desktop -05/08/2014 07:28 PM Downloads -05/08/2014 07:28 PM Music +05/08/2020 07:28 PM Applications +05/08/2020 07:28 PM Desktop +05/08/2020 07:28 PM Downloads +05/08/2020 07:28 PM Music ... ``` > Note: In powershell you can also use 'ls' like on Linux and Mac OS X. @@ -297,7 +297,7 @@ test > cd practice > mkdir test > dir -05/08/2014 07:28 PM test +05/08/2020 07:28 PM test ``` From 63fafac64722d33186b1bf94e709f04b21a92583 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 17:02:11 +0530 Subject: [PATCH 07/37] Added actions division for alignment --- en/django_forms/README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 45ef7b247a9..ec591afc971 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -277,7 +277,9 @@ Open `blog/templates/blog/post_detail.html` in the code editor and add the line {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html - +
+ +
``` so that the template will look like this: @@ -288,12 +290,14 @@ so that the template will look like this: {% block content %}
+
+ +
{% if post.published_date %}
{{ post.published_date }}
{% endif %} -

{{ post.title }}

{{ post.text|linebreaksbr }}

From 9389e7c155cc0a2f26c25940aec0ebee335ba6c0 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 17:15:52 +0530 Subject: [PATCH 08/37] Converted Glyphicon to Bootstrap4 Icons --- en/django_forms/README.md | 32 ++++++++++++++++++++++++-------- en/template_extending/README.md | 4 +++- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index ec591afc971..8ad0120fe2b 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -48,7 +48,9 @@ It's time to open `blog/templates/blog/base.html` in the code editor. In the `di {% filename %}blog/templates/blog/base.html{% endfilename %} ```html - + + + ``` Note that we want to call our new view `post_new`. The class `"glyphicon glyphicon-plus"` is provided by the bootstrap theme we are using, and will display a plus sign for us. @@ -69,7 +71,9 @@ After adding the line, your HTML file should now look like this:
- + + +

Django Girls Blog

@@ -278,7 +282,9 @@ Open `blog/templates/blog/post_detail.html` in the code editor and add the line {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html
- + + +
``` @@ -291,7 +297,9 @@ so that the template will look like this: {% block content %}
- + + +
{% if post.published_date %}
@@ -368,7 +376,9 @@ Open `blog/templates/blog/base.html` in the code editor, find our `container` `d {% filename %}blog/templates/blog/base.html{% endfilename %} ```html - + + + ``` We're going to add another `{% if %}` tag to this, which will make the link show up only for users who are logged into the admin. Right now, that's just you! Change the `` tag to look like this: @@ -376,7 +386,9 @@ We're going to add another `{% if %}` tag to this, which will make the link show {% filename %}blog/templates/blog/base.html{% endfilename %} ```html {% if user.is_authenticated %} - + + + {% endif %} ``` @@ -388,7 +400,9 @@ Open `blog/templates/blog/post_detail.html` in the code editor and find this lin {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html - + + + ``` Change it to this: @@ -396,7 +410,9 @@ Change it to this: {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html {% if user.is_authenticated %} - + + + {% endif %} ``` diff --git a/en/template_extending/README.md b/en/template_extending/README.md index f33675dbe94..6ea89ca419b 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -64,7 +64,9 @@ Then in `base.html`, replace your whole `` (everything between `` an
- + + +

Django Girls Blog

From 0f3bb418c103bf5eb3c9c2029885755fe398bac9 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 12 Nov 2020 17:32:01 +0530 Subject: [PATCH 09/37] Bootstrap4 Icons Note added --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 8ad0120fe2b..ad682a9aaad 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -53,7 +53,7 @@ It's time to open `blog/templates/blog/base.html` in the code editor. In the `di ``` -Note that we want to call our new view `post_new`. The class `"glyphicon glyphicon-plus"` is provided by the bootstrap theme we are using, and will display a plus sign for us. +Note that we want to call our new view `post_new`. The [svg icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. After adding the line, your HTML file should now look like this: From 8e96d16ff69982b2a58e3ecb37bc6927eb1edd0a Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 11:24:47 +0530 Subject: [PATCH 10/37] Undone addition of icon in templation extending section --- en/template_extending/README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/en/template_extending/README.md b/en/template_extending/README.md index 6ea89ca419b..a1e2e0a7b8b 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -64,9 +64,6 @@ Then in `base.html`, replace your whole `` (everything between `` an
- - -

Django Girls Blog

From 16b03c8302a99c0e540a37c325ca237701b3d9ed Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 12:27:07 +0530 Subject: [PATCH 11/37] Updated SVG usage with include directive --- en/django_forms/README.md | 43 +++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 8 deletions(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index ad682a9aaad..d3fa263c163 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -55,7 +55,27 @@ It's time to open `blog/templates/blog/base.html` in the code editor. In the `di Note that we want to call our new view `post_new`. The [svg icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. -After adding the line, your HTML file should now look like this: +The addition of SVG code for the icon made it look very complicated. So we can try a different approach to achieve the same result. + +Let's save the svg code in a separate file. Save the following code in the file `blog/templates/blog/icons/add-post.svg` + +{% filename %}blog/templates/blog/icons/add-post.svg{% endfilename %} +```html + +``` + +Now we can use the file inside the base template as follow. + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + + {% include './icons/add-post.svg' %} + +``` + +> Note: You can save the svg file in `blog/static/img/icons/` and use `` tag to display svg icon. But this method requires an extra HTTP request to fetch the file from server. So, it will only increase loading time. But in the proposed method, since `` tag is HTML, we can simply include it inside HTML file from server itself using `{% include %}` directive. This approach reduce the page loading time. + +After editing the line, your HTML file should now look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html @@ -72,7 +92,7 @@ After adding the line, your HTML file should now look like this:
- + {% include './icons/add-post.svg' %}

Django Girls Blog

@@ -277,13 +297,20 @@ Django is taking care to validate that all the fields in our form are correct. I Now we know how to add a new post. But what if we want to edit an existing one? This 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 these steps already.) +First, let's save the icon which represent edit button. Save the following code in the file `blog/templates/blog/icons/edit-post.svg` + +{% filename %}blog/templates/blog/icons/edit-post.svg{% endfilename %} +```html + +``` + Open `blog/templates/blog/post_detail.html` in the code editor and add the line {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html
- + {% include './icons/edit-post.svg' %}
``` @@ -298,7 +325,7 @@ so that the template will look like this:
- + {% include './icons/edit-post.svg' %}
{% if post.published_date %} @@ -377,7 +404,7 @@ Open `blog/templates/blog/base.html` in the code editor, find our `container` `d {% filename %}blog/templates/blog/base.html{% endfilename %} ```html - + {% include './icons/add-post.svg' %} ``` @@ -387,7 +414,7 @@ We're going to add another `{% if %}` tag to this, which will make the link show ```html {% if user.is_authenticated %} - + {% include './icons/add-post.svg' %} {% endif %} ``` @@ -401,7 +428,7 @@ Open `blog/templates/blog/post_detail.html` in the code editor and find this lin {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html - + {% include './icons/edit-post.svg' %} ``` @@ -411,7 +438,7 @@ Change it to this: ```html {% if user.is_authenticated %} - + {% include './icons/edit-post.svg' %} {% endif %} ``` From e4f8a6ca3d2e7150a5d633355d8b49eb503cb735 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 13:05:48 +0530 Subject: [PATCH 12/37] Removed published text from css section --- en/css/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/css/README.md b/en/css/README.md index 67cf92dcff2..d27a7fd27a6 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -304,7 +304,7 @@ in the `blog/templates/blog/post_list.html` with this: {% for post in posts %}
-

Published: {{ post.published_date }}

+

{{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

From 2b2704789d0d42ae78c8d9e8033b7b30b303e5e3 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 13:09:02 +0530 Subject: [PATCH 13/37] Removed p tag from css section --- en/css/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/css/README.md b/en/css/README.md index d27a7fd27a6..8538f2bcd38 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -304,7 +304,7 @@ in the `blog/templates/blog/post_list.html` with this: {% for post in posts %}
-

{{ post.published_date }}

+ {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

From 9372e2c21a94188de6292cd3b575c1f690b9cb60 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 13:11:31 +0530 Subject: [PATCH 14/37] CSS default button style fixed --- en/css/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 8538f2bcd38..cc76d15c093 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -267,14 +267,14 @@ h4 { margin: auto 10px; } -.btn-default { +.btn-default, +.btn-default:visited { color: rgb(255, 148, 0); background: none; border-color: rgb(255, 148, 0); } -.btn-default:hover, -.btn-default:visited { +.btn-default:hover { color: rgb(255, 255, 255); background-color: rgb(255, 148, 0); border-color: rgb(204, 179, 144); From f0a1d17f808f05131885e31410043547c1f8de7a Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 13:35:52 +0530 Subject: [PATCH 15/37] Fixed default button color contrast --- en/css/README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index cc76d15c093..f8ad0db846f 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -269,15 +269,14 @@ h4 { .btn-default, .btn-default:visited { - color: rgb(255, 148, 0); + color: #C25100; background: none; - border-color: rgb(255, 148, 0); + border-color: #C25100; } .btn-default:hover { - color: rgb(255, 255, 255); - background-color: rgb(255, 148, 0); - border-color: rgb(204, 179, 144); + color: #FFFFFF; + background-color: #C25100; } ``` From 689019d5fd699b253e70e8ded6569589d5e61635 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 18 Nov 2020 13:38:57 +0530 Subject: [PATCH 16/37] Renamed include directive to fix build error --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index d3fa263c163..217063d281c 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -73,7 +73,7 @@ Now we can use the file inside the base template as follow. ``` -> Note: You can save the svg file in `blog/static/img/icons/` and use `` tag to display svg icon. But this method requires an extra HTTP request to fetch the file from server. So, it will only increase loading time. But in the proposed method, since `` tag is HTML, we can simply include it inside HTML file from server itself using `{% include %}` directive. This approach reduce the page loading time. +> Note: You can save the svg file in `blog/static/img/icons/` and use `` tag to display svg icon. But this method requires an extra HTTP request to fetch the file from server. So, it will only increase loading time. But in the proposed method, since `` tag is HTML, we can simply include it inside HTML file from server itself using `include` directive. This approach reduce the page loading time. After editing the line, your HTML file should now look like this: From 572d1e76d1433404b31d10e04e506136a071be3d Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Fri, 20 Nov 2020 22:00:48 +0530 Subject: [PATCH 17/37] Updated bootstrap column class --- en/css/README.md | 2 +- en/django_forms/README.md | 2 +- en/template_extending/README.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index f8ad0db846f..03143571f56 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -299,7 +299,7 @@ in the `blog/templates/blog/post_list.html` with this: ```html
-
+
{% for post in posts %}
diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 217063d281c..0f39ada00c0 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -99,7 +99,7 @@ After editing the line, your HTML file should now look like this:
-
+
{% block content %} {% endblock %}
diff --git a/en/template_extending/README.md b/en/template_extending/README.md index a1e2e0a7b8b..57ffae172b0 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -40,7 +40,7 @@ Then open it up in the code editor and copy everything from `post_list.html` to
-
+
{% for post in posts %}
@@ -69,7 +69,7 @@ Then in `base.html`, replace your whole `` (everything between `` an
-
+
{% block content %} {% endblock %}
From 6f899d338caa430613984553ae065cfc69465496 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Fri, 20 Nov 2020 22:08:09 +0530 Subject: [PATCH 18/37] Reverted text case fix in html section --- en/css/README.md | 6 +++--- en/django_templates/README.md | 2 +- en/html/README.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 03143571f56..7c553d9e38e 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -129,7 +129,7 @@ Your file should now look like this: {% for post in posts %}
-

Published: {{ post.published_date }}

+

published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

@@ -197,7 +197,7 @@ And now add a class `post` to your `div` containing a blog post. {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html
-

Published: {{ post.published_date }}

+

published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

@@ -286,7 +286,7 @@ Then surround the HTML code which displays the posts with declarations of classe ```html {% for post in posts %}
-

Published: {{ post.published_date }}

+

published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

diff --git a/en/django_templates/README.md b/en/django_templates/README.md index 6a07918abc7..d088a9eaf37 100644 --- a/en/django_templates/README.md +++ b/en/django_templates/README.md @@ -53,7 +53,7 @@ It works! But we want the posts to be displayed like the static posts we created {% for post in posts %}
-

Published: {{ post.published_date }}

+

published: {{ post.published_date }}

{{ post.title }}

{{ post.text|linebreaksbr }}

diff --git a/en/html/README.md b/en/html/README.md index 0494d39ee9d..1281e9a771e 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -127,13 +127,13 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo
-

Published: 14.06.2020, 12:14

+

published: 14.06.2014, 12:14

My first post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

Published: 14.06.2020, 12:14

+

published: 14.06.2014, 12:14

My second post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

From 56d846c0746237e1cf3f2758d5cf3d5d67cf4bce Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Sun, 22 Nov 2020 22:48:09 +0530 Subject: [PATCH 19/37] Updated SVG icon usage method --- en/django_forms/README.md | 45 +++++++------------- en/django_forms/images/file-earmark-plus.svg | 5 +++ en/django_forms/images/pencil-fill.svg | 3 ++ 3 files changed, 24 insertions(+), 29 deletions(-) create mode 100644 en/django_forms/images/file-earmark-plus.svg create mode 100644 en/django_forms/images/pencil-fill.svg diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 0f39ada00c0..f0462d0751c 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -44,36 +44,23 @@ So once again we will create a link to the page, a URL, a view and a template. ## Link to a page with the form -It's time to open `blog/templates/blog/base.html` in the code editor. In the `div` named `container` inside `page-header` `div` tag, we will add a link: +Before we add the link, we need some icons to use as buttons for the link. -{% filename %}blog/templates/blog/base.html{% endfilename %} -```html - - - -``` +> You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the svg image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` -Note that we want to call our new view `post_new`. The [svg icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. +For this tutorial, download [file-earmark-plus.svg](./images/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` -The addition of SVG code for the icon made it look very complicated. So we can try a different approach to achieve the same result. - -Let's save the svg code in a separate file. Save the following code in the file `blog/templates/blog/icons/add-post.svg` - -{% filename %}blog/templates/blog/icons/add-post.svg{% endfilename %} -```html - -``` +It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: -Now we can use the file inside the base template as follow. {% filename %}blog/templates/blog/base.html{% endfilename %} ```html - {% include './icons/add-post.svg' %} + {% include './icons/file-earmark-plus.svg' %} ``` -> Note: You can save the svg file in `blog/static/img/icons/` and use `` tag to display svg icon. But this method requires an extra HTTP request to fetch the file from server. So, it will only increase loading time. But in the proposed method, since `` tag is HTML, we can simply include it inside HTML file from server itself using `include` directive. This approach reduce the page loading time. +Note that we want to call our new view `post_new`. The [svg icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a django template directive called `include`. This will inject the file's content in to django template since web browser know how to handle this type of content without any further processing. After editing the line, your HTML file should now look like this: @@ -92,7 +79,7 @@ After editing the line, your HTML file should now look like this:
- {% include './icons/add-post.svg' %} + {% include './icons/file-earmark-plus.svg' %}

Django Girls Blog

@@ -297,11 +284,11 @@ Django is taking care to validate that all the fields in our form are correct. I Now we know how to add a new post. But what if we want to edit an existing one? This 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 these steps already.) -First, let's save the icon which represent edit button. Save the following code in the file `blog/templates/blog/icons/edit-post.svg` +First, let's save the icon which represent edit button. Download [pencil-fill.svg](./images/pencil-fill.svg) and save it in location `blog/templates/blog/icons/` -{% filename %}blog/templates/blog/icons/edit-post.svg{% endfilename %} +{% filename %}blog/templates/blog/icons/pencil-fill.svg{% endfilename %} ```html - + ``` Open `blog/templates/blog/post_detail.html` in the code editor and add the line @@ -310,7 +297,7 @@ Open `blog/templates/blog/post_detail.html` in the code editor and add the line ```html
- {% include './icons/edit-post.svg' %} + {% include './icons/pencil-fill.svg' %}
``` @@ -325,7 +312,7 @@ so that the template will look like this:
- {% include './icons/edit-post.svg' %} + {% include './icons/pencil-fill.svg' %}
{% if post.published_date %} @@ -404,7 +391,7 @@ Open `blog/templates/blog/base.html` in the code editor, find our `container` `d {% filename %}blog/templates/blog/base.html{% endfilename %} ```html - {% include './icons/add-post.svg' %} + {% include './icons/file-earmark-plus.svg' %} ``` @@ -414,7 +401,7 @@ We're going to add another `{% if %}` tag to this, which will make the link show ```html {% if user.is_authenticated %} - {% include './icons/add-post.svg' %} + {% include './icons/file-earmark-plus.svg' %} {% endif %} ``` @@ -428,7 +415,7 @@ Open `blog/templates/blog/post_detail.html` in the code editor and find this lin {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html - {% include './icons/edit-post.svg' %} + {% include './icons/pencil-fill.svg' %} ``` @@ -438,7 +425,7 @@ Change it to this: ```html {% if user.is_authenticated %} - {% include './icons/edit-post.svg' %} + {% include './icons/pencil-fill.svg' %} {% endif %} ``` diff --git a/en/django_forms/images/file-earmark-plus.svg b/en/django_forms/images/file-earmark-plus.svg new file mode 100644 index 00000000000..924d5e1337e --- /dev/null +++ b/en/django_forms/images/file-earmark-plus.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/en/django_forms/images/pencil-fill.svg b/en/django_forms/images/pencil-fill.svg new file mode 100644 index 00000000000..7479a0b8117 --- /dev/null +++ b/en/django_forms/images/pencil-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From aa27d203775831f779e1438f0a2fc5507ca9e6a3 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Sun, 22 Nov 2020 22:58:38 +0530 Subject: [PATCH 20/37] Fixed SVG file link --- en/django_forms/README.md | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index f0462d0751c..e848837d46f 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. > You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the svg image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` -For this tutorial, download [file-earmark-plus.svg](./images/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` +For this tutorial, download [file-earmark-plus.svg](images/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: @@ -284,12 +284,7 @@ Django is taking care to validate that all the fields in our form are correct. I Now we know how to add a new post. But what if we want to edit an existing one? This 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 these steps already.) -First, let's save the icon which represent edit button. Download [pencil-fill.svg](./images/pencil-fill.svg) and save it in location `blog/templates/blog/icons/` - -{% filename %}blog/templates/blog/icons/pencil-fill.svg{% endfilename %} -```html - -``` +First, let's save the icon which represent edit button. Download [pencil-fill.svg](images/pencil-fill.svg) and save it in location `blog/templates/blog/icons/` Open `blog/templates/blog/post_detail.html` in the code editor and add the line From 94c2754b43205cdbc3215506f9b295bdd42fbd45 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Sun, 22 Nov 2020 23:12:59 +0530 Subject: [PATCH 21/37] Updated instruction for adding icon --- en/django_forms/README.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index e848837d46f..65d24b860e3 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -44,15 +44,12 @@ So once again we will create a link to the page, a URL, a view and a template. ## Link to a page with the form -Before we add the link, we need some icons to use as buttons for the link. +Before we add the link, we need some icons to use as buttons for the link. For this tutorial, download [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` -> You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the svg image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` - -For this tutorial, download [file-earmark-plus.svg](images/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` +> Note: To download the svg image, click on the link and save the file using the keyboard shortcut `Ctrl + S`(Windows/Linux) or `Cmd + S`(MacOS). It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: - {% filename %}blog/templates/blog/base.html{% endfilename %} ```html @@ -62,6 +59,8 @@ It's time to open `blog/templates/blog/base.html` in the code editor. Now we can Note that we want to call our new view `post_new`. The [svg icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a django template directive called `include`. This will inject the file's content in to django template since web browser know how to handle this type of content without any further processing. +> You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the svg image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` + After editing the line, your HTML file should now look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} @@ -284,7 +283,7 @@ Django is taking care to validate that all the fields in our form are correct. I Now we know how to add a new post. But what if we want to edit an existing one? This 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 these steps already.) -First, let's save the icon which represent edit button. Download [pencil-fill.svg](images/pencil-fill.svg) and save it in location `blog/templates/blog/icons/` +First, let's save the icon which represent edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it in location `blog/templates/blog/icons/` Open `blog/templates/blog/post_detail.html` in the code editor and add the line From a8b94e64223709fdddf5c36bf9510722cf764155 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Mon, 23 Nov 2020 20:21:05 +0530 Subject: [PATCH 22/37] Cleaned up unused files --- en/django_forms/images/file-earmark-plus.svg | 5 ----- en/django_forms/images/pencil-fill.svg | 3 --- 2 files changed, 8 deletions(-) delete mode 100644 en/django_forms/images/file-earmark-plus.svg delete mode 100644 en/django_forms/images/pencil-fill.svg diff --git a/en/django_forms/images/file-earmark-plus.svg b/en/django_forms/images/file-earmark-plus.svg deleted file mode 100644 index 924d5e1337e..00000000000 --- a/en/django_forms/images/file-earmark-plus.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/en/django_forms/images/pencil-fill.svg b/en/django_forms/images/pencil-fill.svg deleted file mode 100644 index 7479a0b8117..00000000000 --- a/en/django_forms/images/pencil-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 4d6ffbc4920caa307ba7a8e13619ce8b8237f4fc Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Mon, 23 Nov 2020 20:36:29 +0530 Subject: [PATCH 23/37] Capitalized the word svg --- en/django_forms/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 65d24b860e3..e01184e76d2 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -46,7 +46,7 @@ So once again we will create a link to the page, a URL, a view and a template. Before we add the link, we need some icons to use as buttons for the link. For this tutorial, download [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` -> Note: To download the svg image, click on the link and save the file using the keyboard shortcut `Ctrl + S`(Windows/Linux) or `Cmd + S`(MacOS). +> Note: To download the SVG image, click on the link and save the file using the keyboard shortcut `Ctrl + S`(Windows/Linux) or `Cmd + S`(MacOS). It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: @@ -57,9 +57,9 @@ It's time to open `blog/templates/blog/base.html` in the code editor. Now we can ``` -Note that we want to call our new view `post_new`. The [svg icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a django template directive called `include`. This will inject the file's content in to django template since web browser know how to handle this type of content without any further processing. +Note that we want to call our new view `post_new`. The [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a django template directive called `include`. This will inject the file's content in to django template since web browser know how to handle this type of content without any further processing. -> You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the svg image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` +> You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the SVG image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` After editing the line, your HTML file should now look like this: From 27483eb7bf7703eb6c02e51aaaf9702ceae631b8 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Tue, 24 Nov 2020 20:03:34 +0530 Subject: [PATCH 24/37] Updated Save as instructions for file --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index e01184e76d2..9e6715fdd47 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -46,7 +46,7 @@ So once again we will create a link to the page, a URL, a view and a template. Before we add the link, we need some icons to use as buttons for the link. For this tutorial, download [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` -> Note: To download the SVG image, click on the link and save the file using the keyboard shortcut `Ctrl + S`(Windows/Linux) or `Cmd + S`(MacOS). +> Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and choose "Save link as" option. Now you can navigate to the desired directory in the window on your screen and save the file. It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: From 6408b1ca5998a760e97a288f7d91cc7583529ee6 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 26 Nov 2020 18:41:11 +0530 Subject: [PATCH 25/37] Update en/django_forms/README.md Co-authored-by: Ewoud Kohl van Wijngaarden --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 9e6715fdd47..3550bf0f791 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -57,7 +57,7 @@ It's time to open `blog/templates/blog/base.html` in the code editor. Now we can ``` -Note that we want to call our new view `post_new`. The [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a django template directive called `include`. This will inject the file's content in to django template since web browser know how to handle this type of content without any further processing. +Note that we want to call our new view `post_new`. The [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a Django template directive called `include`. This will inject the file's content into the Django template. The web browser knows how to handle this type of content without any further processing. > You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the SVG image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` From 9936d1299bf645189b92a6a1e9ff53f11cbbbe87 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Thu, 26 Nov 2020 18:44:08 +0530 Subject: [PATCH 26/37] Update en/django_forms/README.md Co-authored-by: Ewoud Kohl van Wijngaarden --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 3550bf0f791..3f368262320 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -283,7 +283,7 @@ Django is taking care to validate that all the fields in our form are correct. I Now we know how to add a new post. But what if we want to edit an existing one? This 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 these steps already.) -First, let's save the icon which represent edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it in location `blog/templates/blog/icons/` +First, let's save the icon which represent edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`. Open `blog/templates/blog/post_detail.html` in the code editor and add the line From 5f87a2b62bc493a5558a00d65bd05769b1bd1866 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Fri, 27 Nov 2020 09:25:14 +0530 Subject: [PATCH 27/37] Update en/django_forms/README.md Co-authored-by: Raphael Das Gupta --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 3f368262320..d0bfd734a24 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -283,7 +283,7 @@ Django is taking care to validate that all the fields in our form are correct. I Now we know how to add a new post. But what if we want to edit an existing one? This 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 these steps already.) -First, let's save the icon which represent edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`. +First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`. Open `blog/templates/blog/post_detail.html` in the code editor and add the line From f77f60348b2204bd371d1a191a11554827cb6f7f Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Fri, 27 Nov 2020 23:23:49 +0530 Subject: [PATCH 28/37] Update en/django_forms/README.md Co-authored-by: Raphael Das Gupta --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index d0bfd734a24..384a0adc37d 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -59,7 +59,7 @@ It's time to open `blog/templates/blog/base.html` in the code editor. Now we can Note that we want to call our new view `post_new`. The [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a Django template directive called `include`. This will inject the file's content into the Django template. The web browser knows how to handle this type of content without any further processing. -> You can download the whole bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the SVG image files in to a new folder inside `blog/templates/blog/` called `icons`. So that you can access a icon, e.g. pencil-fill.svg using the file path `blog/templates/blog/icons/pencil-fill.svg` +> You can download all the Bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the SVG image files into a new folder inside `blog/templates/blog/` called `icons`. That way you can access an icon like `pencil-fill.svg` using the file path `blog/templates/blog/icons/pencil-fill.svg` After editing the line, your HTML file should now look like this: From 201b0268f470d712e1cd969abd7d4473200d4e7f Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Fri, 27 Nov 2020 23:24:45 +0530 Subject: [PATCH 29/37] Update en/django_forms/README.md Co-authored-by: Raphael Das Gupta --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 384a0adc37d..055e27560f2 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -46,7 +46,7 @@ So once again we will create a link to the page, a URL, a view and a template. Before we add the link, we need some icons to use as buttons for the link. For this tutorial, download [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` -> Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and choose "Save link as" option. Now you can navigate to the desired directory in the window on your screen and save the file. +> Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there. It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: From a9dbbf582e5e863bbb4ef50a16201a2b758a81f9 Mon Sep 17 00:00:00 2001 From: Nikhil John Date: Wed, 2 Dec 2020 01:22:30 +0530 Subject: [PATCH 30/37] Added semantic html tags --- en/css/README.md | 47 +++++++++++++-------------- en/django_forms/README.md | 30 ++++++++--------- en/django_templates/README.md | 10 +++--- en/extend_your_application/README.md | 16 +++++----- en/html/README.md | 30 ++++++++++------- en/template_extending/README.md | 48 ++++++++++++++-------------- 6 files changed, 94 insertions(+), 87 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 7c553d9e38e..25dd007cb9e 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -123,16 +123,16 @@ Your file should now look like this: - + {% for post in posts %} -
-

published: {{ post.published_date }}

+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} @@ -181,26 +181,26 @@ Great! As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post). A class can help you make them look different. -Go ahead and name some parts of the HTML code. Replace the `div` that contains your header with the following: +Go ahead and name some parts of the HTML code. Replace the `header` that contains your header with the following: {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -
+

Django Girls Blog

-
+ ``` -And now add a class `post` to your `div` containing a blog post. +And now add a class `post` to your `article` containing a blog post. {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -
-

published: {{ post.published_date }}

+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ ``` 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, copy and paste it into your `blog/static/css/blog.css` file: @@ -232,7 +232,6 @@ h4 { .date { color: #828282; - float: right; } .save { @@ -262,9 +261,9 @@ h4 { color: #000000; } -.post .actions { +.post > .date, +.post > .actions { float: right; - margin: auto 10px; } .btn-default, @@ -285,11 +284,11 @@ Then surround the HTML code which displays the posts with declarations of classe {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% for post in posts %} -
-

published: {{ post.published_date }}

+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} ``` @@ -297,21 +296,21 @@ in the `blog/templates/blog/post_list.html` with this: {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -
+
{% for post in posts %} -
-
+
+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %}
-
+ ``` Save those files and refresh your website. diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 055e27560f2..9efe9176d0b 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. For t > Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there. -It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link: +It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` tag inside `header` section, we will add a link before `h1` tag: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html @@ -75,22 +75,22 @@ After editing the line, your HTML file should now look like this: -
+
{% include './icons/file-earmark-plus.svg' %}

Django Girls Blog

-
-
+ +
{% block content %} {% endblock %}
-
+ ``` @@ -285,15 +285,15 @@ Now we know how to add a new post. But what if we want to edit an existing one? First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`. -Open `blog/templates/blog/post_detail.html` in the code editor and add the line +Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` tag: {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html -
+
+ ``` so that the template will look like this: @@ -303,20 +303,20 @@ so that the template will look like this: {% extends 'blog/base.html' %} {% block content %} -
-
+
+ {% if post.published_date %} -
+
+ {% endif %}

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endblock %} ``` @@ -380,7 +380,7 @@ If you need more information about Django forms, you should read the documentati Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else. -Open `blog/templates/blog/base.html` in the code editor, find our `container` `div` inside `page-header` `div` and the anchor tag you put in there earlier. It should look like this: +Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor tag you put in there earlier. It should look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html diff --git a/en/django_templates/README.md b/en/django_templates/README.md index d088a9eaf37..c07c1eb8b46 100644 --- a/en/django_templates/README.md +++ b/en/django_templates/README.md @@ -47,16 +47,16 @@ It works! But we want the posts to be displayed like the static posts we created {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html - + {% for post in posts %} -
-

published: {{ post.published_date }}

+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} ``` diff --git a/en/extend_your_application/README.md b/en/extend_your_application/README.md index 0b7650aef56..57535b1aabb 100644 --- a/en/extend_your_application/README.md +++ b/en/extend_your_application/README.md @@ -19,13 +19,13 @@ We will start with adding a link inside `blog/templates/blog/post_list.html` fil {% block content %} {% for post in posts %} -
-
+
+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} {% endblock %} ``` @@ -142,15 +142,15 @@ Enter the following code: {% extends 'blog/base.html' %} {% block content %} -
+
{% if post.published_date %} -
+
+ {% endif %}

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endblock %} ``` diff --git a/en/html/README.md b/en/html/README.md index 1281e9a771e..3e58355aaab 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -111,6 +111,14 @@ You can now have a little fun and try to customize your template! Here are a few - `link` creates a link - `
  • first item
  • second item
` makes a list, just like this one! - `
` defines a section of the page +- `` defines a set of navigation links +- `
` specifies independent, self-contained content +- `
` defines a section in a document +- `
` specifies a header for a document or section +- `
` specifies the main content of a document +- `` defines some content aside from the content it is placed in (like a sidebar) +- `
` defines a footer for a document or section +- `` defines a specific time (or datetime) Here's an example of a full template, copy and paste it into `blog/templates/blog/post_list.html`: @@ -122,29 +130,29 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo Django Girls blog - + -
-

published: 14.06.2014, 12:14

+
+

My first post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
+ -
-

published: 14.06.2014, 12:14

+
+

My second post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

-
+ ``` -We've created three `div` sections here. +We've created one `header` section and two `article` section here. -- The first `div` element contains the title of our blog – it's a heading and a link -- Another two `div` elements contain our blog posts with a published date, `h2` with a post title that is clickable and two `p`s (paragraph) of text, one for the date and one for our blog post. +- The `header` element contains the title of our blog – it's a heading and a link +- Another two `article` elements contain our blog posts with a published date in `time` element, `h2` with a post title that is clickable and a `p` (paragraph) of text for our blog post. It gives us this effect: diff --git a/en/template_extending/README.md b/en/template_extending/README.md index 57ffae172b0..bbf0644d799 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -32,27 +32,27 @@ Then open it up in the code editor and copy everything from `post_list.html` to -
+

Django Girls Blog

-
+ -
+
{% for post in posts %} -
-
+
+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %}
-
+ ``` @@ -62,19 +62,19 @@ Then in `base.html`, replace your whole `` (everything between `` an {% filename %}blog/templates/blog/base.html{% endfilename %} ```html -
+

Django Girls Blog

-
-
+ +
{% block content %} {% endblock %}
-
+ ``` @@ -93,13 +93,13 @@ Now save `base.html` and open your `blog/templates/blog/post_list.html` again in {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% for post in posts %} -
-
+
+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} ``` @@ -112,13 +112,13 @@ Time to add block tags to this file! ```html {% block content %} {% for post in posts %} -
-
+
+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} {% endblock %} ``` @@ -131,13 +131,13 @@ Only one thing left. We need to connect these two templates together. This is w {% block content %} {% for post in posts %} -
-
+
+
+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} {% endblock %} ``` From b293ad93b6c6e4b6c134f7b2d141d7447740469d Mon Sep 17 00:00:00 2001 From: Raphael Borun Das Gupta Date: Fri, 19 Feb 2021 22:57:11 +0100 Subject: [PATCH 31/37] fix grammar: "as follow" -> "as follows" --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index c8b7740ef37..3cd88794cbb 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. For t > Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there. -It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` tag inside `header` section, we will add a link before `h1` tag: +It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follows. In the `div` tag inside `header` section, we will add a link before `h1` tag: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html From a93f91e2d232fe47a97e244e54284f6b44c223b8 Mon Sep 17 00:00:00 2001 From: Raphael Borun Das Gupta Date: Fri, 19 Feb 2021 23:48:34 +0100 Subject: [PATCH 32/37] use term "element" to refer to HTML elements as a whole and only use "tag" when referring to the tags (usually) delimiting it (or when talking about Django template tags or Git tags, of course.) --- en/css/README.md | 2 +- en/django_forms/README.md | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/en/css/README.md b/en/css/README.md index 25dd007cb9e..5a89a14b4c2 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -85,7 +85,7 @@ h1 a, h2 a { `h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element; the `h2 a` selector does the same thing for `h2` elements. So when we have something like `

link

`, the `h1 a` style will apply. In this case, we're telling it to change its color to `#C25100`, which is a dark orange. Or you can put your own color here, but make sure it has good contrast against a white background! 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`: +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 element by using the element name `a`, the class `external_link`, or the id `link_to_wiki_page`: ```html diff --git a/en/django_forms/README.md b/en/django_forms/README.md index c8b7740ef37..80c7d37980a 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. For t > Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there. -It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` tag inside `header` section, we will add a link before `h1` tag: +It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` element inside `header` section, we will add a link before `h1` element: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html @@ -147,7 +147,7 @@ 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/templates/blog` directory, and open it in the code editor. To make a form work we need several things: - We have to display the form. We can do that with (for example) {% raw %}`{{ form.as_p }}`{% endraw %}. -- The line above needs to be wrapped with an HTML form tag: `
...
`. +- The line above needs to be wrapped with an HTML form element: `
...
`. - We need a `Save` button. We do that with an HTML button: ``. - And finally, just after the opening `
` tag we need to add {% raw %}`{% csrf_token %}`{% endraw %}. This is very important, since it makes your forms secure! If you forget about this bit, Django will complain when you try to save the form: @@ -285,7 +285,7 @@ Now we know how to add a new post. But what if we want to edit an existing one? First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`. -Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` tag: +Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` element: {% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html @@ -380,7 +380,7 @@ If you need more information about Django forms, you should read the documentati Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else. -Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor tag you put in there earlier. It should look like this: +Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor element you put in there earlier. It should look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html @@ -389,7 +389,7 @@ Open `blog/templates/blog/base.html` in the code editor, find our `div` inside ` ``` -We're going to add another `{% if %}` tag to this, which will make the link show up only for users who are logged into the admin. Right now, that's just you! Change the `` tag to look like this: +We're going to add another `{% if %}` tag to this, which will make the link show up only for users who are logged into the admin. Right now, that's just you! Change the `` element to look like this: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html From 29cad657725dd170ff6b2002a013e9a8f533f464 Mon Sep 17 00:00:00 2001 From: Raphael Das Gupta Date: Sat, 20 Feb 2021 11:32:38 +0100 Subject: [PATCH 33/37] grammar: add missing article "the" --- en/django_forms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 80c7d37980a..5383ea8ffbd 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. For t > Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there. -It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` element inside `header` section, we will add a link before `h1` element: +It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` element inside `header` section, we will add a link before the `h1` element: {% filename %}blog/templates/blog/base.html{% endfilename %} ```html From 5b57d1507909f05e8f680da690fcedd50d835b30 Mon Sep 17 00:00:00 2001 From: Raphael Borun Das Gupta Date: Sat, 20 Feb 2021 12:28:12 +0100 Subject: [PATCH 34/37] fix grammar: add indefinite articles --- en/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/html/README.md b/en/html/README.md index 7ac00aee98e..e7c29a76eb1 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -152,7 +152,7 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo We've created one `header` section and two `article` section here. - The `header` element contains the title of our blog – it's a heading and a link -- Another two `article` elements contain our blog posts with a published date in `time` element, `h2` with a post title that is clickable and a `p` (paragraph) of text for our blog post. +- Another two `article` elements contain our blog posts with a published date in a `time` element, a `h2` with a post title that is clickable and a `p` (paragraph) of text for our blog post. It gives us this effect: From 5932dc8399241a66e964a0b4996c43ba8bc5d176 Mon Sep 17 00:00:00 2001 From: Raphael Borun Das Gupta Date: Sat, 20 Feb 2021 12:29:34 +0100 Subject: [PATCH 35/37] improve comprehensability: explicitly state that these are (HTML) elements --- en/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/html/README.md b/en/html/README.md index e7c29a76eb1..dae06e86bfe 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -152,7 +152,7 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo We've created one `header` section and two `article` section here. - The `header` element contains the title of our blog – it's a heading and a link -- Another two `article` elements contain our blog posts with a published date in a `time` element, a `h2` with a post title that is clickable and a `p` (paragraph) of text for our blog post. +- Another two `article` elements contain our blog posts with a published date in a `time` element, a `h2` element with a post title that is clickable and a `p` (paragraph) element of text for our blog post. It gives us this effect: From 11e71b5b351292f54648b615712ebea3ebc77b9a Mon Sep 17 00:00:00 2001 From: Raphael Borun Das Gupta Date: Sat, 20 Feb 2021 12:31:38 +0100 Subject: [PATCH 36/37] rephrase a bit more idiomatically --- en/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/html/README.md b/en/html/README.md index dae06e86bfe..d5fc74ccb74 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -152,7 +152,7 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo We've created one `header` section and two `article` section here. - The `header` element contains the title of our blog – it's a heading and a link -- Another two `article` elements contain our blog posts with a published date in a `time` element, a `h2` element with a post title that is clickable and a `p` (paragraph) element of text for our blog post. +- Another two `article` elements contain our blog posts with a published date in a `time` element, a `h2` element with a post title that is clickable and a `p` (paragraph) element for text of our blog post. It gives us this effect: From 57bba09425055903d95ed10472b57f10d06cd525 Mon Sep 17 00:00:00 2001 From: Raphael Das Gupta Date: Tue, 23 Feb 2021 10:24:01 +0100 Subject: [PATCH 37/37] fix logic: These can't be "another two" article elements (#1705) if no other article elements have been mentioned, yet. (Previously they were `div` elements and the now-`header` element preceding them was then also a `div`. But since #1681 not anymore.) --- en/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/html/README.md b/en/html/README.md index d5fc74ccb74..075f29732a9 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -152,7 +152,7 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo We've created one `header` section and two `article` section here. - The `header` element contains the title of our blog – it's a heading and a link -- Another two `article` elements contain our blog posts with a published date in a `time` element, a `h2` element with a post title that is clickable and a `p` (paragraph) element for text of our blog post. +- The two `article` elements contain our blog posts with a published date in a `time` element, a `h2` element with a post title that is clickable and a `p` (paragraph) element for text of our blog post. It gives us this effect: