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/...
No Scroll bar design
I am working on a project and the client has said that their shouldn't be any main scroll bar (either horizontal or vertical). There can be scroll bars for individual sections and most of the time, user will be navigating using buttons (like carousels). The project is having a user panel and admin panel.
I want to ask if this is practically possible since it should be responsive as well.
If there is an article on it, please share the link....
Side Scrolling Issue
I have fixed these issues before but this one has me stumped. As soon as I apply flexbox to the nav bar links and I resize to a certain point, the about link overflows to the right instead of resizing. I have tried the grid repeat auto-fit feature with grid-template-columns after I changed the nav>ul from flexbox to grid and everything I can think of and nothing is stopping it. I have not used media query because I feel there is a way to fix it without doing so.
All help is appreciated.
https://codepen.io/Donald-Rankin/pen/NWJqaVb...
How to force parent grid to flow when nested grid content overflows
Is there a property I can give the parent grid to stop this from happening?
