Udacity project review

Udacity Full Stack Web Developer Nanodegree program

Project 2. Build a portfolio site

Brendon Smith

br3ndonland

Portfolio website project documentation:

Table of Contents

First submission

Summary from me

I based the webpage on Bootstrap v4.0.0-beta. In the main webpage index.html, I linked to the Bootstrap core CSS through their Content Delivery Network (CDN), and created portfolio.css for additional custom styling.

I provided a toggle button in the footer that uses jQuery JavaScript to change the page color scheme.

The repository for this project is available at https://github.com/br3ndonland/udacity-fsnd01-p02-portfolio.

I used the webpage design to create a full website with Jekyll, and hosted the site with GitHub Pages. The website includes a homepage, an “About” page where I introduce myself and my Udacity work, a “Methods” page explaining how I built the site in detail, a “Rubric” page providing the Udacity project documentation, and a “Review” page documenting the Udacity code review.

Summary from reviewer

Project looks fantastic and you’re almost there to meeting specifications, so keep up the great effort! :star:

There is only a little more work to be done on the layout architecture and making sure you have complete separation of styles before your project can fully meet specifications. :smiley:

Project review

Design

Responsiveness

Separation of Concerns

Code Quality

Code review

(Back to TOC)

index.html:

1 <!DOCTYPE html> 2
<html lang="en">
  3
  <head>
    4
    <title>Brendon Smith | Udacity</title>
  </head>
</html>

AWESOME Including a title for your portfolio page (well, every page actually…) is awesome! :smiley:

As a suggestion, consider adding some of the other meta tags available to you such as description, keywords and author. You can see an example of their suggested usage on the following page.

5
<!-- Required meta tags -->
6 <meta charset="utf-8" /> 7
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

AWESOME Well done including the correct viewport meta tag to instruct the browser to render the page content responsively. :star:

8
<!-- Bootstrap core CSS -->
9
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
  crossorigin="anonymous"
/>

AWESOME Well done preferring the minified version of Bootstrap, which is smaller in size. :thumbsup:

10    <!-- Google Fonts -->
11    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300">
12    <!-- Custom styles for this page -->
13    <link rel="stylesheet" href="css/portfolio.css">
14  </head>
15  <body>
16    <!-- Header -->
17    <div class="container">
18      <header class="header">
19        <div class="row">
20          <div class="col-md-6">
21            <a href="https://udacity.com">
22              <img class="header-logo svg" src="img/udacity-long.svg" alt="Udacity logo svg">
23              <!-- Alternate version of header logo to display when dark theme is toggled -->

AWESOME Great use of comments throughout your HTML to provide landmarks for other developers interpreting your code.

24
<img
  class="header-logo svg"
  src="img/udacity-long-white.svg"
  alt="Udacity logo svg alt"
  style="display: none;"
/>

REQUIRED The rubric requires that:

Portfolio completely separates structure (HTML) from design/style (CSS). There are no style attributes present in the body of the HTML document. There are no <style> elements in the document.

Please move this style information into a stylesheet in order to meet this spec.

25            </a>
26          </div>
27          <div class="col-md-6">
28            <h1 class="header-title">
29              Brendon Smith
30            </h1>
31          </div>
32        </div>
33        <div class="row">
34          <div class="col">
35            <h2 class="header-subtitle">
36              Udacity portfolio
37            </h2>
38          </div>
39        </div>
40      </header>
41    </div>
42    <!-- Large center jumbotron container -->
43    <div class="container">
44      <div class="jumbotron background-udacity">
45        <h2 class="display-3">Hello, world!</h2>
46        <p class="lead font-weight-bold">This website showcases the Udacity work I have shared on GitHub. I built the site as a project for my Udacity Full Stack Nanodegree program.<br>Check it out, and Stay Udacious!</p>
47        <p class="lead font-weight-bold">Documentation for the project:</p>
48        <a href="#" class="btn btn-secondary btn-lg" role="button">About &raquo;</a>
49        <a href="#" class="btn btn-secondary btn-lg" role="button">Rubric &raquo;</a>
50      </div>
51    </div>
52    <!-- Portfolio thumbnails -->
53    <div class="container">

SUGGESTION :bulb: Idea

Your project section is a perfect opportunity make use of the section and article tags to add further semantic meaning to the code. For more information on the semantic section element and other related elements, I recommend checking out the following article.

54
<h1 class="text-muted"></h1>

SUGGESTION As a continuation of the above suggestion, section headings can also be wrapped in a header element for additional semantic value.

55        Featured work
56      </h1>

SUGGESTION :bulb: Idea

As a suggestion, consider using h2 for this heading instead of h1, which is best reserved for the most significant heading of the page unless you are adding additional semantic sectioning. For further reading on using headings in HTML5, I recommend checking out this great, in-depth article.

57
<div class="row">
  58
  <div class="col-sm-4">
    59
    <img
      src="https://cdn.worldvectorlogo.com/logos/udacity.svg"
      alt="Udacity U svg"
      class="img-thumbnail"
    />
    60
    <h2>Udacity FSND</h2>
    61
    <p>
      General repository for Udacity Full Stack Nanodegree program (FSND) course
      notes and materials. Step right up and learn about the cool things I'm
      doing with Udacity!
    </p>
    62
    <p>
      <a
        class="btn btn-secondary"
        href="https://github.com/br3ndonland/udacity-fsnd"
        role="button"
        >GitHub &raquo;</a
      >
    </p>
    63
  </div>
  64
  <div class="col-sm-4">
    65
    <img
      src="img/fresh-tomatoes-noir-thumbnail-square.png"
      alt="Movie site thumbnail"
      class="img-thumbnail"
    />
    66
    <h2>Movie site</h2>
    67
    <p>
      Server-side code written in Python to store a list of my favorite movies,
      including artwork and trailers, then serve the data to a local webpage
      with HTML and CSS.
    </p>
    68
    <p>
      <a
        class="btn btn-secondary"
        href="https://github.com/br3ndonland/udacity-fsnd01-p01-movies"
        role="button"
        >GitHub &raquo;</a
      >
    </p>
    69
  </div>
  70
  <div class="col-sm-4">
    71
    <img
      src="img/design-mockup-portfolio-thumbnail-square.png"
      alt="Portfolio site design mockup"
      class="img-thumbnail"
    />
  </div>
</div>

AWESOME You have consistently presented descriptive alt attributes on all your imgs, which helps provide a fallback and improved accessibility. :thumbsup:

72          <h2>Portfolio site</h2>
73          <p>This website! We were provided with a design mockup (screenshot) of a developer portfolio webpage, and had to replicate the design with HTML and CSS.</p>
74          <p><a class="btn btn-secondary" href="https://github.com/br3ndonland/udacity-fsnd01-p02-portfolio" role="button">GitHub &raquo;</a></p>
75        </div>
76      </div>
77    </div>
78    <!-- Footer -->
79    <div class="container">

REQUIRED The rubric requires that the

Page utilizes a grid-based layout with styles making use of the flexbox layout or a framework like Bootstrap, Foundation, etc.

If we refer to the Bootstrap docs for the grid system, we can see that any content group within containers must be placed within col and rows , with correct use requiring that only cols be immediate children of rows.

The below code and any other applicable sections will need to conform with the intended use of the Bootstrap framework in order to fully meet this spec.

80
<hr />
81
<footer class="footer">
  82 <span class="text-muted px-2"> 83 &copy; Brendon Smith 2017 84 </span> 85
  <span class="px-2">
    86
    <a class="card-link" href="https://github.com/br3ndonland/">
      87
      <img
        class="social-icon svg"
        src="img/mark-github-light.svg"
        alt="GitHub"/></a
  ></span>
</footer>

AWESOME Nice work adding some additional contact opportunities for user interaction. :star:

FontAwesome has a great selection of icons you can use for just this and more. I recommend checking it out!

88          </a>
89        </span>
90        <span class="px-2">
91          <button type="button" class="btn btn-dark btn-theme-toggle">Theme toggle</button>
92        </span>
93      </footer>
94    </div>
95    <!-- Bootstrap core JavaScript -->
96    <!-- Placed at the end of the document so the pages load faster -->
97    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
98    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
99    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
100    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
101    <!-- JavaScript for this website -->
102    <script src="js/portfolio.js"></script>
103  </body>
104</html>
105​

css/portfolio.css:

1/- header and Headings */ 2​ 3h1,
.h1 {
}

SUGGESTION :grey_exclamation: Code Quality

The Udacity Styleguide recommends that we start a new line for each selector when grouping selectors for a rule-set, which can help to increase readability.

4 font-family: "Lobster", cursive;

AWESOME Providing at least one fallback font-family in case the primary font is not available to your user shows foresight and aligns with best practices!

5}
6​
7.header {
8  margin-bottom: 0.5rem;
9  border-bottom: 0.2rem solid #7d97ad;}

SUGGESTION Good use of the border shorthand to simplify what would otherwise require multiple border-related declarations. :thumbsup:

10 }
11​
12.header-logo,
13.svg {
14  max-width: 400px;
15}
16​
17.header-title {
18  font-family: "Raleway", sans-serif;
19  color: #02b3e4;
20  text-align: right;
21  text-transform: uppercase;
22  line-height: 1.5;
23  margin-bottom: 0px;
24}
25​
26.header-subtitle {
27  text-align: right;
28  font-family: "Lobster", cursive;
29  color: #7d97ad;
30}
31​
32/- Body */
33​
34body {
35  padding-top: 1rem;
36  padding-bottom: 1rem;}

SUGGESTION :bulb: Idea

We could streamline the above padding declarations.

:pencil2: Example

/- top/bottom | left/right */
padding: 1rem 0;

There are a number of different ways shorthands like margin and padding can be specified, which I encourage you to learn more about via the following MDN docs page and this one, respectively.

Please see the following page from MDN for further learning about the different types of shorthands available in CSS, which help you to code more efficiently and produce code that is easier to parse. :smiley:

37}
38​
39footer {
40  text-align: center;
41}
42​
43.social-icon {
44  height: 2rem;
45}
46​
47/- Side spacing for mobile first views */
48​
49.header,
50.marketing,
51.footer {
52  padding-right: 1rem;
53  padding-left: 1rem;
54}
55​
56/- Jumbotron */
57​
58.background-udacity {
59  background: linear-gradient(150deg, #02ccba 0%, #A951ED 100%);
60}
61​
62.jumbotron {
63  text-align: center;
64  padding: 0.75rem 1.5rem;
65  font-size: 1.2rem;
66  color: #212529;}

SUGGESTION :grey_exclamation: Code Quality

The Udacity Styleguide recommends the use of lowercase for all selectors, property names and property values, which aligns with best practices and helps to improve the readability of our code.

67}
68​
69/- Portfolio thumbnails */
70​
71.img-thumbnail {
72  max-height: 300px;
73}
74​
75/- Media queries for responsive text and images */

AWESOME The comments used to provide organisation to your stylesheet are awesome. :thumbsup:

76​ 77 @media (max-width: 991px) {
}

AWESOME Well done using media queries to provide further breakpoints for your responsive layout. For further reading, you may be interested in this blog post on different modern design approaches.

Since you are using Bootstrap, if you wanted to exert more control over the layout at different viewport sizes, consider instead making use of the additional prefixing and sizing available through the framework.

78  /- Shrink text */
79  html {
80    font-size: 0.7rem;
81  }
82  /- Match header logo size with text */
83  .header-logo {
84  width: 250px;
85  }
86}
87​
88@media (max-width: 767px) {
89  /- Center header for smaller viewports */
90  .header, .header-logo, .header-title, .header-subtitle {
91    text-align: center;
92  }
93  .header-logo {
94  max-width: 200px;
95  }
96  /- Shrink thumbnails */
97  .img-thumbnail {
98    max-height: 200px;
99  }
100  /- Remove padding */
101  .header,
102  .marketing,
103  .footer {
104    padding-right: 0;
105    padding-left: 0;
106  }
107}
108​
109/- Dark theme */
110.theme-dark {
111  background-color: #2d3c49;
112  color: #ddd;
113}
114​

README.md

AWESOME Great job going beyond the requirements and providing a README for your project! :smiley:

Being able to write a strong README will help your projects be more approachable to other users and developers. In case you haven’t yet, I recommend checking out Udacity’s short course on writing READMEs.

Also, Dillinger is a great online app for drafting documents with Markdown where you can see the results in real-time.

*js/portfolio.js:-

1// Theme toggle
2$( '.btn-theme-toggle' ).click(function() {
3    $( 'body' ).toggleClass( 'theme-dark' );
4    $( '.header-logo' ).toggle();
5});

AWESOME Really cool additional customisation! :sparkles:

Second submission

(Back to TOC)

Response to reviewer

Thank you for your comprehensive and helpful code review! I have pushed the changes to my GitHub repository. Here is a summary of my revisions, written in the imperative to match my Git commit message:

index.html:

css/portfolio.css:

pages

Summary from reviewer

Excellent improvements! There’s just one final issue to fix! :star:

Project review

No changes.

Code review

index.html:

1 <!DOCTYPE html>

AWESOME Hello! My name is Fernando and will be reviewing your project this time :bowtie:

So, things marked as Required should be changed in order to meet specifications :hand: Suggestions can be added only if you want, but they are comments intended to improve your coding skills :smile: Awesome flags something you did very good! :thumbsup:

I wanted to ask you two things:

If you find errors in my review, please flag in my feedback so I can fix that! If you like my review, or if you don’t, please rate at the bottom of the screen, so I can know if I am on the right path of reviewing! Thanks and happy learning!

2
<html lang="en">
  3
  <head>
    4
    <title>Brendon Smith | Udacity</title>
    5
    <meta name="description" content="Webpage for Udacity code on GitHub" />
    6
    <meta
      name="keywords"
      content="Udacity,GitHub,Jekyll,Bootstrap,HTML,CSS,JavaScript,jQuery"
    />
    7
    <meta name="author" content="Brendon Smith" />
    8
    <!-- Required meta tags -->
    9
    <meta charset="utf-8" />
    10
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    11
    <!-- Bootstrap core CSS -->
    12
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
      integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
      crossorigin="anonymous"
    />
    13
    <!-- Google Fonts -->
    14
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lobster%7CRaleway:300"
    />
    15
    <!-- Custom styles for this page -->
    16
    <link rel="stylesheet" href="css/portfolio.css" />
    17
    <!-- Font Awesome -->
    18
    <script src="https://use.fontawesome.com/a629607ecd.js"></script>
    19
  </head>
  20
  <body>
    21
    <!-- Header -->
    22
    <header class="container header">
      23
      <div class="row">
        24
        <div class="col-md-6">
          25
          <a href="https://udacity.com">
            26
            <img
              class="header-logo svg"
              src="img/udacity-long.svg"
              alt="Udacity logo svg"
            />
            27
            <!-- Alternate version of header logo to display when dark theme is toggled -->
            28
            <img
              class="header-logo svg d-none"
              src="img/udacity-long-white.svg"
              alt="Udacity logo svg alt"
            />
            29
          </a>
          30
        </div>
        31
        <div class="col-md-6">
          32
          <h1 class="header-title">
            33 Brendon Smith 34
          </h1>
          35
        </div>
        36
      </div>
      37
      <div class="row">
        38
        <div class="col">
          39
          <h2 class="header-subtitle">
            40 Udacity portfolio 41
          </h2>
          42
        </div>
        43
      </div>
      44
    </header>
    45
    <main>
      46
      <!-- Large center jumbotron container -->
      47
      <div class="container jumbotron background-udacity"></div>
    </main>
  </body>
</html>

SUGGESTION Normally we don’t add jumbotron and container in the same element. We can use jumbotron to expand the whole container width and you can add container inside of it so its content do not expand to the width.

48        <article class="lead">
49          <header>
50            <h2 class="display-3">Hello, world!</h2>
51          </header>
52          <p>This website showcases the Udacity work I have shared on GitHub. I built the site as a project for my Udacity Full Stack Nanodegree program.<br>Check it out, and Stay Udacious!</p>
53          <p>Documentation for the project:</p>
54          <a href="#" class="btn btn-secondary btn-lg" role="button">About &raquo;</a>
55          <a href="#" class="btn btn-secondary btn-lg" role="button">Rubric &raquo;</a>
56        </article>
57      </div>
58      <!-- Portfolio thumbnails -->
59      <section class="container">
60        <header>
61          <h2 class="header-subtitle text-left">Featured work</h2>

REQUIRED This h2 should be wrapped in a row and in a col element to properly follow the Bootstrap grid.

62        </header>
63        <div class="row">
64          <article class="col-sm-4">
65            <img src="https://cdn.worldvectorlogo.com/logos/udacity.svg" alt="Udacity U svg" class="img-thumbnail">

SUGGESTION When building responsive webpages it’s normal to provide different images and resolutions for different screen sizes. In order to deal with these images you can use three things:

srcset attribute sizes attribute picture element

Please take a look at this page, there are a lot of examples and it’s very well explained how you can do that :smile:

css/portfolio.css:

65  .header-logo {
66  width: 250px;

SUGGESTION Indentation is off here.

78  .header-logo {
79  max-width: 200px;

SUGGESTION Indentation is off here.

80  }
81  /- shrink thumbnails */
82  .img-thumbnail {
83    max-height: 200px;
84  }
85}
86​
87/- dark theme */
88.theme-dark {
89  background-color: #2d3c49;
90  color: #ddd;
91}
92​

AWESOME If I may suggest, please read this post regarding CSS tips. It’s really helpful!

Third submission

(Back to TOC)

Response to reviewer

Hi Fernando! Thanks very much for your feedback on my project. I’m glad that I’m making positive progress. I have pushed the revisions to my GitHub repository, and summarized them below:

index.html:

css/portfolio.css:

I simplified the repository name to udacity, so the GitHub Pages site is now at https://br3ndonland.github.io/udacity/.

Full list of changes for Git commit

Add code review changes and redesign mobile-first: I initially had to design the site desktop-first and then scale content down for mobile devices, because I was given a mockup of a desktop site. I revised the website code based on a mobile device, scaling up for larger sizes.

footer.html, header.html, index.html:

portfolio.css

portfolio.js

pages

Summary from reviewer

Excellent job, Brendon! :star:

I will keep things short this time :smile:

Congratulations on finishing this project! :thumbsup:

Project review

No changes.

Code review

index.html:

AWESOME Excellent job with Bootstrap! :star:

portfolio.css

AWESOME Thanks for adding my suggestions :smile:

(Back to TOC)