Hello, I have completed yet another project using CSS flex box, sass/scss and JS DOM. I had fun building. What are some best practices when implementing javascript functionality. Any suggestion on how to improve this or my code will be appreciated. Thank you.
The design is well-implemented.
I would recommend using the <details> and <summary> tags, as they come with all the functionality you're looking for.
I can be built without JS using name="" attribute.
no support for name="" on Firefox, fairly new feature.
See link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
I couldn't figure out how to get GitHub to locate the image file for the background. Worked on Live Server but not GitHub Pages.
Add . at the start to reference a folder/directory.
Music Icon use the following:
./images/icon-music.svg
For the background image two .. are needed, as it is not the same folder/directory, as the stylesheet.
Background image use the following:
../images/pattern-background-desktop.svg
O projeto foi bem fácil, inicialmente usei apenas flex, mas com o grid alguns pequenos problemas foram resolvidos, o único que restou foi quanto a coloração da imagem pra isso usei um overlay com a cor fornecida pelo arquivo do desafio, mas ficou diferente acho que tem a ver mais com a saturação da cor mas não conseguir fazer funcionar, a forma que fiz está correta? Há uma forma melhor de fazer? e quanto a saturação de cor nas imagens tem como mexer com isso?
In this particular example, colour saturation is not needed.
I would recommend the following:
.overlaybackground-color: var(-accent-color); to .workspacebackground-color and opacity from imgmix-blend-mode: multiply; to imgHere is a link for mix blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
What I found difficult was linking the image. I have always had an issue with this; I know how to find a link and add it, but I have never had success when the image is on my own computer. Centering the card on the canvas proved challenging. I am unsure about the font and the background color in the learning process. I would appreciate any helpful feedback. What am I doing wrong, and how can I improve?
Limit the number of <div> tags you use.
Try to use more semantic ones, such as <header> <nav> <main> <article> <section> <footer>
It will make it a lot easier to read the code not only for you, but also the browser.
See link: https://www.w3schools.com/html/html5_semantic_elements.asp
Try this for the image:
<img src="./assets/images/image-avatar.webp" alt="Greg Hooper's Avatar">
When it comes to centring in this particular case when using grid just use the following:
display: grid;
place-items: center;
For font, look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/font
To make font and colour values reusable consider using CSS variables.
See link: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Possible layout:
body{
display: grid;
grid-template-rows: 1fr auto;
}
<body>
<main>
<article class="card">
//card contents
<article>
</main>
<footer class="attribution">
</footer>
</body>
Links on layouts and grid see below:
There were a few things I was unable to solve:
How can I get a radio button to focus and active using keyboard?
The background doesn't look quite right on my smart phone; am I doing something wrong with background-image?
You have used <details></details> and <summary></summary>, so the keyboard functionality for focus is built-in. Use the tab key and spacebar or enter.
In terms of the background image, check your file path. See below:
./app/assets/images/background-pattern-desktop.svg
../../assets/images/background-pattern-mobile.svg
Hello, This is my first attempt of coding frontendmentor's challenge. I was wondering how to center whole content and used CSS flexbox. Feedback welcome!
For centering layouts the best option is CSS Grid.
display:grid; place-items:center;
Check out this link: https://1linelayouts.glitch.me/
