{{ post.title }}
+{{ post.text|linebreaksbr }}
+diff --git a/.travis.yml b/.travis.yml index 729ad08c2c1..98d5f989f74 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,4 +11,8 @@ install: - npm install gitbook-cli -g - gitbook install -script: gitbook build \ No newline at end of file +script: gitbook build + +branches: + except: + - crowdin_master diff --git a/am-ET/GLOSSARY.md b/am-ET/GLOSSARY.md new file mode 100644 index 00000000000..7f93ea7643a --- /dev/null +++ b/am-ET/GLOSSARY.md @@ -0,0 +1,3 @@ +# code editor + +''ኮድ አስተካካይ ማለት ምልክቶችን ለኋላ ጥቅም ለማዋል የሚረዳ መተግበሪያ ነው''. You can learn where to get one from the [Code editor chapter](./code_editor/README.md) \ No newline at end of file diff --git a/am-ET/README.md b/am-ET/README.md new file mode 100644 index 00000000000..121da8f55bf --- /dev/null +++ b/am-ET/README.md @@ -0,0 +1,51 @@ +# Django Girls Tutorial + +[](https://gitter.im/DjangoGirls/tutorial) + +> This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ + +## Welcome + +Welcome to the Django Girls Tutorial! We are happy to see you here. :) In this tutorial, we will take you on a journey under the hood of web technologies, offering you a glimpse of all the bits and pieces that need to come together to make the web work as we know it. + +As with all unknown things, this is going to be an adventure - but no worries, since you already worked up the courage to be here, you'll be just fine. :) + +## Introduction + +Have you ever felt that the world is more and more about technology to which you cannot (yet) relate? Have you ever wondered how to create a website but have never had enough motivation to start? Have you ever thought that the software world is too complicated for you to even try doing something on your own? + +Well, we have good news for you! Programming is not as hard as it seems and we want to show you how fun it can be. + +This tutorial will not magically turn you into a programmer. If you want to be good at it, you need months or even years of learning and practice. But we want to show you that programming or creating websites is not as complicated as it seems. We will try to explain different bits and pieces as well as we can, so you will not feel intimidated by technology. + +We hope that we'll be able to make you love technology as much as we do! + +## What will you learn during the tutorial? + +Once you've finished the tutorial, you will have a small working web application: your own blog. We will show you how to put it online, so others will see your work! + +It will (more or less) look like this: + + + +> If you work with the tutorial on your own and don't have a coach who will help you in case of any problem, we have a chat system for you: [](https://gitter.im/DjangoGirls/tutorial). We asked our coaches and previous attendees to be there from time to time and help others with the tutorial! Don't be afraid to ask your question there! + +OK, [let's start at the beginning…](./how_the_internet_works/README.md) + +## Following the tutorial at home + +It is amazing to take part in a Django Girls workshop, but we are aware that it is not always possible to attend one. This is why we encourage you to try following this tutorial at home. For readers at home, we are currently preparing videos that will make it easier to follow the tutorial on your own. It is still a work in progress, but more and more things will be covered soon at the [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) YouTube channel. + +In every chapter already covered, there is a link that points to the correct video. + +## About and contributing + +This tutorial is maintained by [DjangoGirls](https://djangogirls.org/). If you find any mistakes or want to update the tutorial please [follow the contributing guidelines](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Would you like to help us translate the tutorial into other languages? + +Currently, translations are being kept on crowdin.com platform at: + +https://crowdin.com/project/django-girls-tutorial + +If your language is not listed on [crowdin](https://crowdin.com/), please [open a new issue](https://github.com/DjangoGirls/tutorial/issues/new) informing us of the language so we can add it. \ No newline at end of file diff --git a/am-ET/SUMMARY.md b/am-ET/SUMMARY.md new file mode 100644 index 00000000000..d9741b4f21c --- /dev/null +++ b/am-ET/SUMMARY.md @@ -0,0 +1,35 @@ +# Summary + +* [Introduction](README.md) +* [Installation](installation/README.md) + * [Command Line](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Code Editor](installation/README.md#code-editor) + * [Virtual Environment](installation/README.md#virtualenv) + * [Django](installation/README.md#django) + * [Git](installation/README.md#git) + * [GitHub](installation/README.md#github-account) + * [PythonAnywhere](installation/README.md#pythonanywhere-account) +* [Installation (chromebook)](chromebook_setup/README.md) +* [How the Internet works](how_the_internet_works/README.md) +* [Introduction to command line](intro_to_command_line/README.md) +* [Python installation](python_installation/README.md) +* [Code editor](code_editor/README.md) +* [Introduction to Python](python_introduction/README.md) +* [What is Django?](django/README.md) +* [Django installation](django_installation/README.md) +* [Your first Django project!](django_start_project/README.md) +* [Django models](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Deploy!](deploy/README.md) +* [Django URLs](django_urls/README.md) +* [Django views – time to create!](django_views/README.md) +* [Introduction to HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Dynamic data in templates](dynamic_data_in_templates/README.md) +* [Django templates](django_templates/README.md) +* [CSS – make it pretty](css/README.md) +* [Template extending](template_extending/README.md) +* [Extend your application](extend_your_application/README.md) +* [Django Forms](django_forms/README.md) +* [What's next?](whats_next/README.md) \ No newline at end of file diff --git a/am-ET/chromebook_setup/README.md b/am-ET/chromebook_setup/README.md new file mode 100644 index 00000000000..03249a84d41 --- /dev/null +++ b/am-ET/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook setup + +> **Note** If you already worked through the [installation steps](../installation/README.md), no need to do this again – you can skip straight ahead to [Introduction to Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/am-ET/chromebook_setup/instructions.md b/am-ET/chromebook_setup/instructions.md new file mode 100644 index 00000000000..2df2048e6ec --- /dev/null +++ b/am-ET/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +You can [skip right over this section](http://tutorial.djangogirls.org/en/installation/#install-python) if you're not using a Chromebook. If you are, your installation experience will be a little different. You can ignore the rest of the installation instructions. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Cloud IDE is a tool that gives you a code editor and access to a computer running on the Internet where you can install, write, and run the software. For the duration of the tutorial, cloud IDE will act as your *local machine*. You'll still be running commands in a terminal interface just like your classmates on OS X, Ubuntu, or Windows, but your terminal will be connected to a computer running somewhere else that cloud IDE sets up for you. Here are the instructions for cloud IDEs (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com). You can choose one of the cloud IDEs, and follow the instruction of the cloud IDE. + +#### PaizaCloud Cloud IDE + +1. Go to [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Sign up for an account +3. Click *New Server* and choose the Django app +4. Click Terminal button(on the left side of the window) + +Now you should see an interface with a sidebar, buttons at the left. Click "Terminal" button to open terminal window with prompt like this: + +{% filename %}Terminal{% endfilename %} + + $ + + +The terminal on the PaizaCloud Cloud IDE is prepared for your instructions. You can resize or maximize that window to make it a bit bigger. + +#### AWS Cloud9 + +Currently Cloud 9 requires you to sign up with AWS and enter credit card information. + +1. Install Cloud 9 from the [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Go to [c9.io](https://c9.io) and click *Get started with AWS Cloud9* +3. Sign up for an AWS account (requires credit card information, but you can use it for free) +4. In the AWS Dashboard, enter *Cloud9* in the search bar and click it +5. In the Cloud 9 dashboard, click *Create environment* +6. Name it *django-girls* +7. While configuring settings, select *Create a new instance for environment (EC2)* for "Environment Type" and the *t2.micro* "Instance type" (it should say "Free-tier eligible."). The default cost-saving setting is fine and you can keep the other defaults. +8. Click *Next step* +9. Click *Create environment* + +Now you should see an interface with a sidebar, a big main window with some text, and a small window at the bottom that looks something like this: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +This bottom area is your terminal. You can use the terminal to send instructions to the remote Cloud 9 computer. You can resize that window to make it a bit bigger. + +#### Glitch.com Cloud IDE + +1. Go to [Glitch.com](https://glitch.com/) +2. Sign up for an account (https://glitch.com/signup) or use your GitHub account if you have one. (See GitHub instructions below.) +3. Click *New Project* and choose *hello-webpage* +4. Click on the Tools dropdown list (at the bottom left side of the window), then on Terminal button to open terminal tab with a prompt like this: + +{% filename %}Terminal{% endfilename %} + + app@name-of-your-glitch-project:~ + + +When using Glitch.com as your Cloud IDE, you don't have to create a virtual environment. Instead, create the following files manually: + +{% filename %}glitch.json{% endfilename %} + +```json +{ + "install": "pip3 install -r requirements.txt --user", + "start": "bash start.sh", + "watch": { + "throttle": 1000 + } +} +``` + +{% filename %}requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +{% filename %}.bash_profile{% endfilename %} + +```bash +alias python=python3 +alias pip=pip3 +``` + +{% filename %}start.sh{% endfilename %} + +```bash +chmod 600 .bash_profile +pip3 install -r requirements.txt --user +python3 manage.py makemigrations +python3 manage.py migrate +python3 manage.py runserver $PORT +``` + +Once these files are created, go to the Terminal and execute the following commands to create your first Django project: + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +In order to see detailed error messages, you can activate Django debug logs for your Glitch application. Simply add the following at the end of the `mysite/settings.py` file. + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LOGGING = { + 'version': 1, + 'disable_existing_loggers': False, + 'handlers': { + 'file': { + 'level': 'DEBUG', + 'class': 'logging.FileHandler', + 'filename': 'debug.log', + }, + }, + 'loggers': { + 'django': { + 'handlers': ['file'], + 'level': 'DEBUG', + 'propagate': True, + }, + }, +} +``` + +This will create a `debug.log` file detailing Django operations and any error messages that might come up, making it much easier to fix if your website does not work. + +The initial restarting of the Glitch project should fail. (If you click on the top dropdown button `Show` then click on `In a New Window`, you will receive a `DisallowedHost` error message.) Do not worry about it at this stage, the tutorial will fix this as soon as you update the Django settings of your project in the `mysite/settings.py` file. + +### Virtual Environment + +A virtual environment (also called a virtualenv) is like a private box we can stuff useful computer code into for a project we're working on. We use them to keep the various bits of code we want for our various projects separate so things don't get mixed up between projects. + +Run: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(note that on the last line we use a tilde followed by an equal sign: `~=`). + +### GitHub + +Make a [GitHub](https://github.com) account. + +### PythonAnywhere + +The Django Girls tutorial includes a section on what is called Deployment, which is the process of taking the code that powers your new web application and moving it to a publicly accessible computer (called a server) so other people can see your work. + +This part is a little odd when doing the tutorial on a Chromebook since we're already using a computer that is on the Internet (as opposed to, say, a laptop). However, it's still useful, as we can think of our Cloud 9 workspace as a place for our "in progress" work and Python Anywhere as a place to show off our stuff as it becomes more complete. + +Thus, sign up for a new Python Anywhere account at [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/am-ET/code_editor/README.md b/am-ET/code_editor/README.md new file mode 100644 index 00000000000..0a401fb1f52 --- /dev/null +++ b/am-ET/code_editor/README.md @@ -0,0 +1,11 @@ +# Code editor + +> For readers at home: this chapter is covered in the [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) video. + +You're about to write your first line of code, so it's time to download a code editor! + +> **Note** If you're using a Chromebook, skip this chapter and make sure you follow the [Chromebook Setup](../chromebook_setup/README.md) instructions. The cloud IDE you chose (PaizaCloud Cloud IDE or AWS Cloud9) includes a code editor, and when you open a file in your IDE from the File menu, you will automatically be using the editor. +> +> **Note** You might have done this earlier in the [Installation chapter](../installation/README.md) – if so, you can skip right ahead to the next chapter! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/am-ET/code_editor/instructions.md b/am-ET/code_editor/instructions.md new file mode 100644 index 00000000000..82fbac15aad --- /dev/null +++ b/am-ET/code_editor/instructions.md @@ -0,0 +1,37 @@ +There are a lot of different editors and it largely boils down to personal preference. Most Python programmers use complex but extremely powerful IDEs (Integrated Development Environments), such as PyCharm. As a beginner, however, that's probably less suitable; our recommendations are equally powerful, but a lot simpler. + +Our suggestions are below, but feel free to ask your coach what their preferences are – it'll be easier to get help from them. + +## Visual Studio Code + +Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. + +[Download it here](https://code.visualstudio.com/) + +## Gedit + +Gedit is an open-source, free editor, available for all operating systems. + +[Download it here](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text 3 + +Sublime Text is a very popular editor with a free evaluation period and it's available for all operating systems. + +[Download it here](https://www.sublimetext.com/3) + +## Atom + +Atom is another popular editor. It's free, open-source and available for Windows, OS X and Linux. Atom is developed by [GitHub](https://github.com/). + +[Download it here](https://atom.io/) + +## Why are we installing a code editor? + +You might be wondering why we are installing this special code editor software, rather than using something like Word or Notepad. + +The first reason is that code needs to be **plain text**, and the problem with programs like Word and Textedit is that they don't actually produce plain text, they produce rich text (with fonts and formatting), using custom formats like [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +The second reason is that code editors are specialized for editing code, so they can provide helpful features like highlighting code with color according to its meaning, or automatically closing quotes for you. + +We'll see all this in action later. Soon, you'll come to think of your trusty old code editor as one of your favorite tools. :) \ No newline at end of file diff --git a/am-ET/css/README.md b/am-ET/css/README.md new file mode 100644 index 00000000000..5f99728790d --- /dev/null +++ b/am-ET/css/README.md @@ -0,0 +1,330 @@ +# CSS – make it pretty! + +Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS for that. + +## What is CSS? + +Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a website written in a markup language (like HTML). Treat it as make-up for our web page. ;) + +But we don't want to start from scratch again, right? Once more, we'll use something that programmers released on the Internet for free. Reinventing the wheel is no fun, you know. + +## Let's use Bootstrap! + +Bootstrap is one of the most popular HTML and CSS frameworks for developing beautiful websites: https://getbootstrap.com/ + +It was written by programmers who worked for Twitter. Now it's developed by volunteers from all over the world! + +## Install Bootstrap + +To install Bootstrap, open up your `.html` file in the code editor and add this to the `
` section: + +{% 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! + + + +Looking nicer already! + +## Static files in Django + +Finally we will take a closer look at these things we've been calling **static files**. Static files are all your CSS and images. Their content doesn't depend on the request context and will be the same for every user. + +### Where to put static files for Django + +Django already knows where to find the static files for the built-in "admin" app. Now we need to add some static files for our own app, `blog`. + +We do that by creating a folder called `static` inside the blog app: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Django will automatically find any folders called "static" inside any of your apps' folders. Then it will be able to use their contents as static files. + +## Your first CSS file! + +Let's create a CSS file now, to add your own style to your web page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +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. + +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`. + +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: #C25100; +} + +``` + +`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 `{{ post.text|linebreaksbr }}
+{{ post.text|linebreaksbr }}
+{{ post.text|linebreaksbr }}
+{{ post.text|linebreaksbr }}
+