Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb80ed9f

Browse files
committed
5 features on homepage, V1.0
1 parent660036b commitb80ed9f

File tree

9 files changed

+150
-0
lines changed

9 files changed

+150
-0
lines changed

‎backend/main/static/css/brochure/base/_helpers.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -489,3 +489,7 @@
489489
.center-content{
490490
justify-content:center;
491491
}
492+
493+
.center-text {
494+
text-align:center;
495+
}
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.feature{
2+
margin-bottom:30px;
3+
4+
.feature-image {
5+
flex:1;
6+
min-width:250px;
7+
z-index:2;// above text when fading in
8+
9+
img {
10+
max-height:300px;
11+
}
12+
}
13+
14+
.feature-text {
15+
flex:1;
16+
min-width:150px;
17+
margin:30px;
18+
19+
.feature-header {
20+
position:relative;
21+
right:45px;
22+
23+
* {
24+
display:inline-block;
25+
}
26+
27+
.feature-line {
28+
margin:10px5px;
29+
height:4px;
30+
background:white;
31+
width:50px;
32+
}
33+
}
34+
35+
}
36+
}
37+
38+
39+
40+
41+
.feature-text:nth-of-type(2n +1) {
42+
text-align:right;
43+
44+
.feature-header {
45+
left:45px!important;
46+
}
47+
}
48+
49+
.feature-image:nth-of-type(2n +1) {
50+
text-align:-webkit-right;
51+
}

‎backend/main/static/css/brochure/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@
2323
@import"layout/footer";
2424
@import"layout/_scroll.scss";
2525
@import"layout/_float.scss";
26+
@import"layout/_features.scss";
43.2 KB
Loading
159 KB
Loading
24.9 KB
Loading
8.28 KB
Loading
29.4 KB
Loading

‎backend/main/templates/home.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,100 @@ <h4 class="bullet-title m-0">Designed with care for beginners</h4>
154154

155155

156156

157+
<sectionid="features">
158+
<divclass="container">
159+
<divdata-aos="fade-up"data-aos-duration="800"data-aos-offset="200">
160+
<h1class="center-text">Take a peek inside!</h1>
161+
</div>
162+
<divclass="spacer"></div>
163+
164+
<div>
165+
<divclass="feature flex">
166+
<divclass="feature-image"data-aos="fade-left"data-aos-duration="800">
167+
<imgsrc="{% static 'img/features/layout.png' %}">
168+
</div>
169+
<divclass="feature-text"data-aos="fade-right"data-aos-duration="800"data-aos-delay="200">
170+
<divclass="feature-header">
171+
<divclass="feature-line"></div>
172+
<h3>Interface</h3>
173+
</div>
174+
<p>
175+
The course is a fully interactive 'book' which requires the
176+
user to run code in the provided editor or shell to advance.
177+
</p>
178+
</div>
179+
</div>
180+
181+
<divclass="feature flex">
182+
<divclass="feature-text"data-aos="fade-left"data-aos-duration="800"data-aos-delay="200">
183+
<divclass="feature-header">
184+
<h3>Debugging</h3>
185+
<divclass="feature-line">
186+
</div>
187+
</div>
188+
<p>
189+
Emulating a professional developing environment, several debuggers are introduced throughout the course, including<ahref="https://github.com/alexmojaki/birdseye">Birdseye</a>,<ahref="http://pythontutor.com/">Python Tutor</a> and<ahref="https://github.com/alexmojaki/snoop">Snoop</a>.
190+
</p>
191+
</div>
192+
<divclass="feature-image"data-aos="fade-right"data-aos-duration="800">
193+
<imgsrc="{% static 'img/features/birdseye.png' %}">
194+
</div>
195+
</div>
196+
197+
<divclass="feature flex">
198+
<divclass="feature-image"data-aos="fade-left"data-aos-duration="800">
199+
<imgsrc="{% static 'img/features/traceback.png' %}">
200+
</div>
201+
<divclass="feature-text"data-aos="fade-right"data-aos-duration="800"data-aos-delay="200">
202+
<divclass="feature-header">
203+
<divclass="feature-line"></div>
204+
<h3>Simple Tracebacks</h3>
205+
</div>
206+
<p>
207+
Tracebacks are more helpful than usual, with several enhancements:
208+
<br>- Highlighting the exact operation that failed, not just the line, using executing
209+
<br>- Tables of local variables and simple expressions evaluated by pure_eval
210+
<br>- Suggestions for fixes provided by DidYouMean
211+
<br>- Beginner friendly explanations provided by friendly-traceback (shown when hovering over the little i icon)
212+
<br>- Showing multiline statements in full thanks to stack_data without showing unnecessary extra lines
213+
</p>
214+
</div>
215+
</div>
216+
217+
<divclass="feature flex">
218+
<divclass="feature-text"data-aos="fade-left"data-aos-duration="800"data-aos-delay="200">
219+
<divclass="feature-header">
220+
<h3>Parson's Problem</h3>
221+
<divclass="feature-line"></div>
222+
</div>
223+
<p>
224+
If a student is stuck, they can try putting the shuffled in the correct order instead.
225+
</p>
226+
</div>
227+
<divclass="feature-image"data-aos="fade-right"data-aos-duration="800">
228+
<imgsrc="{% static 'img/features/parsons.png' %}">
229+
</div>
230+
</div>
231+
232+
<divclass="feature flex">
233+
<divclass="feature-image"data-aos="fade-left"data-aos-duration="800">
234+
<imgsrc="{% static 'img/features/solution.png' %}">
235+
</div>
236+
<divclass="feature-text"data-aos="fade-right"data-aos-duration="800"data-aos-delay="200">
237+
<divclass="feature-header">
238+
<divclass="feature-line"></div>
239+
<h3>Solution Breadcrumbs</h3>
240+
</div>
241+
<p>
242+
And if they're unable to solve the Parson's Problem (which can be quite hard), they can reveal the solution bit by bit.
243+
</p>
244+
</div>
245+
</div>
246+
</div>
247+
248+
</div>
249+
</section>
250+
157251
<sectionid="demo-vid"data-aos="fade-up"data-aos-duration="800"data-aos-offset="300">
158252
<divclass="container flex center-content">
159253
<div>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp