You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tasks.md
+44-47Lines changed: 44 additions & 47 deletions
Original file line number
Diff line number
Diff line change
@@ -44,83 +44,80 @@ Every time you want to check your work locally you can type that command, and it
44
44
45
45
## Previewing Your Work
46
46
47
-
You can preview your work by running `flask run` in the root of your fork and then visit`http://localhost:5000` in your browser.
47
+
You can preview your work by running `flask run` in the root of your fork and then visit`http://localhost:5000` in your browser.
48
48
49
-
# Module 01 - Routing and Templates
49
+
# Module 01 - Routing
50
50
51
-
## 1.1 -
51
+
## 1.1 - Import Flask
52
52
53
-
@pytest.mark.
54
-
55
-
## 1.2 -
56
-
57
-
@pytest.mark.
58
-
59
-
## 1.3 -
60
-
61
-
@pytest.mark.
62
-
63
-
## 1.4 -
64
-
65
-
@pytest.mark.
66
-
67
-
## 1.5 -
68
-
69
-
@pytest.mark.
53
+
@pytest.mark.app-import-flask In order to create a flask application Import `Flask` and `render_template` from `flask`.
70
54
71
-
## 1.6 -
55
+
## 1.2 - Create a Flask Application
72
56
73
-
@pytest.mark.
57
+
@pytest.mark.app-create-flask-app Create an instance of the Flask class called `app`. Pass in the special variable `__name__`.
74
58
75
-
## 1.7 -
59
+
## 1.3 - Templates Folder
76
60
77
-
@pytest.mark.
61
+
@pytest.mark.templates-folder Create a folder called `templates` in the `jobs` directory.
78
62
79
-
## 1.8 -
63
+
## 1.4 - Create Index Template
80
64
81
-
@pytest.mark.
65
+
@pytest.mark.index-template In the root of the `templates` folder, create a file called `index.html`.
82
66
83
-
#Module 02 -
67
+
## 1.5 - Create the Index Route
84
68
85
-
## 2.1 -
69
+
@pytest.mark.app-create-index-route We will display all jobs on the index page. To start we will create a basic route that displays the contents of the index template. Create a function called `jobs` and attach a `route()` decorator with the URL of `/`. Add an additional path of `/jobs`. In the body of the function return a call to the `render_template()` passing the `index.html` template.
86
70
87
-
@pytest.mark.
71
+
## 1.5 - Create Employer and Job Templates
88
72
89
-
## 2.2 -
73
+
@pytest.mark.detail-templates In the root of the `templates` folder, create two files one called `employer.html` and the other called `job.html`.
90
74
91
-
@pytest.mark.
75
+
## 1.6 -Create Detail Routes
92
76
93
-
## 2.3 -
77
+
@pytest.mark.app-create-detail-routes We need routes for individual employers and jobs. Create two functions one called `employer` and the other called `job`. Add route decorators to bind these functions with the appropriate URLs:
78
+
-`/employer` to the `employer` function
79
+
-`/job` to the `job `function.
94
80
95
-
@pytest.mark.
81
+
In the body of each function return a call to `render_template()` passing the appropriate template.
96
82
97
-
## 2.4 -
83
+
#Module 02 - Templates
98
84
99
-
@pytest.mark.
85
+
## 2.1 - Create Layout Template
100
86
101
-
## 2.5 -
87
+
@pytest.mark.layout-template We want each template to have a consistent look and feel. We can create a base layout that each template can extend. First create a new file called `layout.html` in the root of the `templates` folder. Copy the basic structure of the file from the file called `templates.html`.
102
88
103
-
@pytest.mark.
89
+
## 2.2 - Add Styles
104
90
105
-
## 2.6 -
91
+
@pytest.mark.add-styles The app will be styled with bulma (bulma.io). Add three link tags to the head of `layout.html`. For the first `href` use mustache syntax `{{}}` and the `url_for()` function to link in the file `css/bulma.css` from the `static` folder. For the second add the file `css/app.css` using the same method. The last link tag should have an `href` value of `https://use.fontawesome.com/releases/v5.2.0/css/all.css`.
106
92
107
-
@pytest.mark.
93
+
## 2.3 - Create Template Files
108
94
109
-
## 2.7 -
95
+
@pytest.mark.create-template-files We need to create some additional template files. In the `templates` folder create the following files:
96
+
-`_job.html`
97
+
-`job.html`
98
+
-`employer.html`
99
+
-`review.html`
110
100
111
-
@pytest.mark.
101
+
Next create a new folder called `admin` in the `templates` folder, then create the following files:
102
+
-`index.html`
103
+
-`create.html`
112
104
113
-
## 2.8 -
105
+
## 2.4 - Template Files HTML
106
+
@pytest.mark.template-files-html Locate the `templates.html` file in the the root of the project. To prevent having to write all HTML from scratch the HTML structure of several of the template files is given here. Each block has a comment that describes what HTML file, the HTML block, needs to be copied too. Copy each block to the correct file.
114
107
115
-
@pytest.mark.
108
+
## 2.5 - Extend Base Layout
116
109
117
-
## 2.9 -
110
+
@pytest.mark.extend-base-layout Each of the files list below needs to extend the base layout. This can be done by adding an `extends` directive with `{% %}` template syntax to the top of each file.
118
111
119
-
@pytest.mark.
112
+
-`job.html`
113
+
-`employer.html`
114
+
-`review.html`
115
+
-`admin/index.html`
116
+
-`admin/create.html`
120
117
121
-
## 2.10 -
118
+
## 2.6 - Navigation
122
119
123
-
@pytest.mark.
120
+
@pytest.mark.navigation We want to allow the user to navigate to the admin from the front page. In the `index.html` template file create a link to the main admin page by creating an `<a>` tag nested in the `<div>` with the two classes `columns` and `is-one-fifth`. The `<a>` tag should have an `href` with the value `/admin` and the classes `button`, `is-info`, and `is-pulled-right`. In the `admin/index.html` template file create a link to add a new job by creating an `<a>` tag nested in the `<div>` with the two classes `columns` and `is-one-fifth`. The `<a>` tag should have an `href` with the value `/admin` and the classes `button`, `is-info`, and `is-pulled-right`.
0 commit comments