colmar's Issues
SUMMARY
Grade: Satisfactory
Summary: Good job on this project, the site looks pretty good. You used some good techniques and kept your code well organized. Take a look at the issues I created for some best practice tweaks as well as some new techniques you can start using. I also found a lot of your class names to be very cryptic and nondescriptive. Take a look at the BEM naming convention on some ideas of how to create better class names: http://getbem.com/introduction/
Overall well done, I hope you enjoyed the course!
HTML
Your HTML looks pretty good, well structured. I would look into expanding your usage of semantic tags: <section> <article> <aside> <figure>
and many more. Here is a good article on the subject
https://www.pluralsight.com/guides/semantic-html?aid=701j0000001heIqAAI&promo=&oid=&utm_source=google&utm_medium=ppc&utm_campaign=CA_Dynamic&utm_content=&utm_term=&gclid=CjwKCAjwlrnNBRBMEiwApKU4PBiUM7wtxiyqNw-6Zoikh6ChlNul6tTL839Zj2h_JNTZcK6PE5WWlRoCiOYQAvD_BwE
text-size
text-size
does not exist in CSS. You want to use font-size
https://github.com/BW007/colmar/blob/master/resources/css/style.css#L2
side scroll issue
Be careful when using width:100%; combined with side padding/margin. This causes the element to expand beyond 100% which can cause a side scroll issue. Use dev tools and go down the element DOM looking for expanded elements and fix it to get rid of the side scroll.
https://github.com/BW007/colmar/blob/master/resources/css/style.css#L508-L510
add this meta tag
Always add this meta tag into your <head>
section when you are using media queries:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will ensure they register on all devices.
https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag
don't size the body
The body tag naturally wants to expand the entire size of the page. Don't change its width or height. Even using height 100% here if you look in dev tools the body is no longer spanning the entire width of your page.
https://github.com/BW007/colmar/blob/master/resources/css/style.css#L10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.