Basic webpage layout using CSS Flexbox and media query
Design comparison
Solution retrospective
Hi All!
I have just started using HTML and CSS and this is the first project I managed to upload here, any constructive feedback would be much appreciated as I am 100% self taught.
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, Trezmor! 👋
I am also a self-taught developer. It's great to meet another fellow self-taught developer!
About the solution, I recommend changing the live site URL to https://trezmor.github.io/3-column-preview-card-component/3-column%20preview%20card%20component.html.
Currently, it is visiting the
index.html
file where there's only the raw content for the page.In the future, I recommend using the
index.html
file. This way, this issue won't happen again in the future.Now, here are some suggestions for improvements.
- There's no
meta
viewport tag. It means it is not a responsive website. So, I recommend adding themeta
viewport tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">
). As a side note, if you use the HTML file from the starter files, this won't happen. - Use semantic HTML. Here are the reasons.
- It gives tools or assistive technologies such as screenreader the information about the website like the page structure.
- If or when the CSS doesn't load, the website still makes sense. It's because the browser's user agent stylesheet will get applied. So, the page will still make sense.
- I recommend learning about HTML on the web.dev HTML tutorial. It will give you a good understanding of semantic HTML, why it matters, etc.
- The alternative text is a descriptive text that should be human-readable. It should not have underscore like class name (unless it is needed to describe the image).
- Also, those car icons are decorative images. They don't add meaningful content to the page. So, they should have empty alternative text (
alt=""
). - I don't think the
button
element needs aname
attribute. - Why did you wrap the font family with a media query?
@media screen and (min-width: 800px) { @font-face { font-family: "Lexend Deca"; src: url("LexendDeca-VariableFont_wght.ttf"); } @font-face { font-family: "Big Shoulders Display"; src: url("BigShouldersDisplay-VariableFont_wght.ttf"); }
I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.
- Manuel Matuzović - Lost in Translation - YouTube
- Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
- Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube
I hope this helps! Happy coding!
Marked as helpful1@dknydPosted almost 2 years agoHey @vanzasetia !
Wow, thank you so much for all these informative feedback, I didnt expect anyone to actually comment, not to mention in such a constructive way, I really appreciate it! :)
I have already changed the live site URL, finally it doesnt just show text.
Ill get trought the other points and check the videos you sent me.
THank you again and have a great day! :)
Trezmor
0@vanzasetiaPosted almost 2 years ago@trezmor
You are welcome! Have a nice day too! 👍
1 - There's no
- @Chiku100Posted almost 2 years ago
Hi Trezmor, your website currently shows only texts. Make sure u have linked CSS with HTML.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord