I cannot understand this.. kindly help
I want the blue and red boxes to align with like colours beneath but there seems to be this gap that always persist (even with gap 0). and it seems impossible to center this entire layout vertically (the entire layout , without 100% height of viewport). Can someone explain why and suggest some possible solutions with explanations? I hope you kindly cooperate since i am still on my learning phase.

React SEO
How I can create seo optimized website with react or make the existing react website seo friendly?
Stop CSS fading when scrolling?
I added a fade effect to the bottom of a scrollable div with text to emphasize scrolling, but the idea is that when you reach the bottom, aka, there's no more text, I want that fade to cease. I tried the animation-timeline property but I'm not getting any results, any ideas?
I used the following code
`body {...

Resize screen issue
So the first picture shows how it looks regualrly. But when I resize my screen to smaller the text starts getting out of range like this picture

Layouts
I'm new to front-end, it's been a month so far.
When I look at this, I struggle to approach it. Do I use two boxes? Right now, I'm learning flex-box.
Conclusion: I'm struggling on how to do layouts....

Help with highlighting a singular list element on click.
Click target is highlighted, while other elements, if they were ones being highlighted beforehand, lose it.
JS in this example is what I was suggested to do here some time ago:
https://codepen.io/DovahTheKiin/pen/WNmQOqM
...
Two different colors in the text
Guys, how do I make my text, when it is in the black part, have a white color and when it is in the light part, it will have a dark color?
I tried cloning the text and putting the other in a dark color, and I tried positioning them on each background using the z-index but I couldn't.
Github repo: https://github.com/sircarloschaves/art-gallery-website
Live page: https://sircarloschaves.github.io/art-gallery-website/...
I need help
I need help from you! I can't figure out why the progress container is not visible when the width is larger than 700px.
How can I use webpack5 and postcss7 with es6 import syntax
I have a website built using TS and SASS then compiled down to vanilla es6 JS and CSS. The compiled code then gets built into a compressed production ready version, using webpack, I want to use webpack to remove unused css, autoprefixer and cssnano.
The problem is there isn't very clear information on configuring webpack with es6 modules. Currently I don't have any errors, but whenever I run my webpack build script nothing changes between the compiled code and the production code.
Here's the code...
do you know how should i create this layout? will it be great step to go with grid or flexbox??
do you know how should i create this layout? will it be great step to go with grid or flexbox??
Need help with button click output
Hey, can anyone help me with this big issue I'm having right now. I'm trying to have an alert be printed out if one set of buttons are clicked, and a different type of alert be printed out if a different sets of buttons are clicked. It's for a pool business website, and I'm trying to print out a different price based on the buttons the user clicks. I tried if else statement, but it gets stuck on the first if statement, and doesn't switch if another if else statement is true
Simply how important is `"use strict";` to use it in every JS script?
Was reading a tutorial on Javascript and I finally came to the summary but where it mentioned "use strict";. Is this extremely important to remember?
CSS: option did not get style on PC, why?
Hello,
Why option did get only the font styles, and nothing else?
https://codepen.io/lanszelot/pen/BaboBxB
On tablet and phone get all the styles, only PC did not....
How to create a responsive card with an image ?
Hello, I would like to create cards to display projects I have worked on for my portfolio. I would like to create something like that.
My problem is mainly with the images, I don't really know how to display them properly on different screen sizes.
I have tried to give them a certain height in % but it messes the height of the card. I have tried to give them a fixed height in rem but it's not really responsive even with media queries....
Why Next local server is not working š?
When I run npm run dev in the terminal it doesn't show any error and my Next project starts running at port: 3000.
When open localhost:3000 in my browser it keeps loading and then show unable to connect. Please me anybody....
relative width not working while animating div collapse using MUI's transition API
I have an input bar that can collapse and expand on
onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely.
```tsx
<ButtonGroup
sx={{
justifyContent: 'flex-end',...How do I copy this cool bento style website
https://lucasporterbakker.com/
I suck at anything that I can't use flexbox.
I'm aware that he used
display:grid but I don't know how to get a bunch of boxes with different sizes and also make it responsive. Do I need a bunch of media queries to achieve it?...Wrap button around another button
In my code, how can I cause the text of the second button to wrap around the first one? With flex they are always next to each other, but I want it to just wrap around as you see it with images and text in newspaper for example.
Here the playground:
https://jsfiddle.net/jytb2n61/18/...