Open esin87 opened 2 years ago
One more thing I forgot to add -- it's faster to add Google fonts via link
elements in HTML than in a CSS @import
. Just be sure to add the links before your own stylesheet so that font names are accessible, and be sure to grab the pre-connect
link as well.
Project 1 Feedback
Code Quality - Performing
Criteria: Is the code well formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?
Strengths:
script.js
that explain what the code is doing. Code is well-organized as well within individual files.Areas for Growth:
div
orbr
element just for spacing. I'd use CSS to add margins around the adjoining elements that you want to space farther apart. Thediv
andbr
elements have their own meaning, and as we learned during the web accessibility study, it's important to use these elements semantically. In terms of semantic HTML, adiv
is a container element meant to hold other elements when more semantic containers likeheader
,section
, etc. don't fit the bill. Andbr
is actually a line break element meant to be used within blocks of text (i.e., inside ap
element) to break up the lines of text like addresses or poems. How could you introduce some more semantic elements into your HTML?In a similar vein, how could you DRY up your
loop
function?The corresponding markup would look like this:
Note that we're using classes to select elements to style, and reserving the ids for JS DOM manipulation. You can name your classes in any way that makes sense and is sustainable -- the pattern I used here is something called Block Element Modifier (BEM), but there are many more.
Technical Requirements - Excelling
Criteria: How does the project stack up to the requirements for this project? Is the developer making use of the material we've covered in a way that makes sense?
Strengths:
Areas for Growth:
Creativity and Interface - Performing
Criteria: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?
Strengths:
Areas for Growth
Functionality - Excelling
Criteria: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?
Strengths:
Areas for Growth:
.removeEventListener
to achieve that!Presentation - Performing
Criteria: Is there adequate documentation? Is the repository well organized and free of clutter?
Strengths:
About
section.Areas for Growth:
.vscode
settings folder from your GH repo -- it only appears to have a setting for Live Server to run on port 5501.Hard Requirements - Complete:
Necessary Deliverables - Complete:
Grade: Pass :tada: :tada: :tada:
Kaleb, excellent work on this project! Super impressed at all the effort you put into creating this deluxe, modern version of Simon. The design is clean and professional, the code is easy to read, and the functionality is above and beyond MVP. There are some areas to revisit as you continue working on this project, such as refactoring your HTML to be a bit more semantic, making your CSS rules more efficient, and DRYing up your JavaScript, but overall, you did a fantastic job. Thank you for all your hard work on this, and for delivering a project that goes above and beyond the requirements. Can't wait to see your continued progress in the course!