elliottre / teacozy Goto Github PK
View Code? Open in Web Editor NEWCodeAcademy Project 2
CodeAcademy Project 2
Subtlety for errors! On line 60 you have a stray ending </div>
tag that needs to be deleted.
https://github.com/elliottre/TeaCozy/blob/master/index.html#L60
Simplify! Consider using semantic HTML elements like <header>
(instead of the <div class="header">
), <nav>
, <section>
, and <footer>
(<div class="footer">
). Using semantic elements helps make your HTML more meaningful to browsers reading your markup, helps with SEO, and improves the accessibility of your page. Here's info on how semantic elements help with accessibility: https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide (scroll down to the 'So what are semantic elements good for?' heading) and a tutorial that goes over semantic elements and more reasons to use semantic HTML: https://internetingishard.com/html-and-css/semantic-html/.
Subtlety for errors! Line 5 of the CSS you have an extra colon that needs to be deleted.
https://github.com/elliottre/TeaCozy/blob/master/resources/css/style.css#L5
Simplify! Consider using group selectors for any repeated styles in your CSS like display: flex;
. Also, flex-direction: row;
is the default flex-direction
value when you use display: flex;
on an element so feel free to delete those flex-direction
declarations. These changes will help make your CSS more concise.
Also, great job challenging yourself to use flexbox for your page!
Simplify! Be sure to use consistent nesting and indentation in your HTML. Here's more info on best practices for nesting and indentation (and other HTML/CSS best practices): https://learn.shayhowe.com/html-css/writing-your-best-code/. I also like your use of comments before each section, for example: https://github.com/elliottre/TeaCozy/blob/master/index.html#L61. These practices help your markup to be organized and easy to read.
Subtlety for errors! Consider using descriptive alt
attributes on your <img>
elements, instead of leaving them empty, or omitting them entirely - like this: <img src="resources/images/img-berryblitz.jpg" alt="mug of tea with berries" />
as this is best practice and makes your site more accessible. We can leave alt
attributes empty when the image does not add information to the content of the page - see this resource to help aid in your decision to give alt
attribute values (or to leave them empty): https://www.w3.org/WAI/tutorials/images/decorative/
Grade: Meets expectations
Summary:
Nice work on this project! I like your use of comments in the HTML and your use of flexbox in CSS.
A few things to work on here: 1. using consistent nesting and indentation in the HTML, 2. using alt
attributes on the <img>
elements, and 3. using group selectors for any repeated styles in the CSS.
Next, I challenge you to research and implement media queries to make your page totally responsive for all screen widths. This is a challenge I think you are ready for based on your work here! Here are a couple resources to get you started: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries and https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.