Commit 821aa715 authored by Arash Sattari's avatar Arash Sattari

w1 is modified according Ivan feedbacks

parent 73bdb4c4
Pipeline #80917 passed with stage
in 35 seconds
......@@ -140,10 +140,85 @@
For the assignment page, I designed a fix sidebar that lets the user easily move between different sections of the page (figure 3). I also added the homepage navigation bar to the assignment
page and fixed on top of the page, so that the user can go to the other sections of the website with minimum effort. As mentioned before, an assignment page can be very long, so
having buttons for scrolling back to top seemed like a good idea (Thanks to <b><a href="http://fabacademy.org/2018/labs/fablaboulu/students/marta-cortesorduna/aboutme.html">Marta</a></b> for her reminder). <br>
To add different features to the website, I went through multiple tutorials on the internet. For instance I followed these two tutorials ( <b><a href="https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp">1</a></b>,
<b><a href="https://mladenplavsic.github.io/bootstrap-navbar-sidebar/"> 2</a></b> ) to implement the sidebar.
</p>
<div class="img-container"><img style="width: 700px;" src="../img/assignments/w1/3.jpg" alt=""><br><b>Figure 3. </b> Assignment page template.</div>
<p>
To add different features to the website, I went through multiple tutorials on the internet. For instance I followed these two tutorials ( <b><a href="https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp">1</a></b>,
<b><a href="https://mladenplavsic.github.io/bootstrap-navbar-sidebar/"> 2</a></b> ) to implement the sidebar. HTML and CSS codes for the sidebar in the current page (week 1), are below.
</p>
<div style="text-align:center;">
<div class="row row-centered">
<div style="height:400px; overflow: scroll;" class ="col-md-6 col-centered">
<h5>HTML</h5>
<xmp>
<div class="row" id="sidebar-wrapper">
<nav id="SidebarScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a href="#top" class="nav-link active">Week's Assignments</a>
</li>
<li class="nav-item">
<a href="#section-2" class="nav-link">Creating the Website</a>
</li>
<li class="nav-item">
<a href="#section-3" class="nav-link">Code Editor</a>
</li>
<li class="nav-item">
<a href="#section-4" class="nav-link">GitLab Version Control</a>
</li>
<li class="nav-item">
<a href="#section-5" class="nav-link">Reflection</a>
</li>
</ul>
</nav>
</div>
</xmp>
</div>
<div style="height:400px; overflow: scroll;" class ="col-md-6 col-centered">
<h5>CSS</h5>
<xmp>
#sidebar-wrapper {
width: 250px;
position: fixed;
height: 100%;
background-color: #dddddd;
}
#SidebarScrollspy{
width: 100%;
}
#sidebar-wrapper .nav {
padding-top: 20px;
}
#sidebar-wrapper .nav-link {
color: #888888;
border-radius: 0px;
border-bottom: 1px solid #ffffff;
}
#sidebar-wrapper .nav-link.active {
background-color: #555555;
color: white;
}
#sidebar-wrapper .nav-link:hover {
color: #fed136;
}
</xmp>
</div>
</div>
</div>
</div>
<div class="section-content">
......@@ -162,7 +237,7 @@
&#9679; &nbsp; <b><a href="https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets">HTML Snippets:</a></b> &nbsp; Beautify code in place and make your code more readable. <br>
&#9679; &nbsp; <b><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets">JavaScript (ES6) code snippets:</a></b> &nbsp; Contains code snippets for JavaScript in ES6 syntax for VS Code editor. <br>
</p>
<div class="img-container"><img style="width: 800px;" src="../img/assignments/w1/4.jpg" alt=""><br><b>Figure 4. </b> Visual Studio Code (VSCode).</div>
<div class="img-container"><img style="width: 1000px;" src="../img/assignments/w1/4.jpg" alt=""><br><b>Figure 4. </b> Visual Studio Code (VSCode).</div>
</div>
<div class="section-content">
<a class="anchor" id="section-4"></a>
......
......@@ -170,3 +170,13 @@ span.inText{
background-color: #f0f0f0;
font-family: 'Courier New', Courier, monospace;
}
xmp {
background-color: #eee;
text-align: left;
white-space: pre-line;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}
img/assignments/w1/4.jpg

563 KB | W: | H:

img/assignments/w1/4.jpg

299 KB | W: | H:

img/assignments/w1/4.jpg
img/assignments/w1/4.jpg
img/assignments/w1/4.jpg
img/assignments/w1/4.jpg
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment