Angular and nest.js help
Hello. I've been developing for eight months. Right now I'm working on a project that uses Angular for the frontend, and nest.js. for the backend. As far as API requests go, I've got a get request, and a post request... here's the relevant code:
```
//hymns.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';...
Using flex for `.flow-content` utility
Why use a margin-top/bottom rather than something like
```css
.flow-content {
display: flex;...
basic help on structure of a simple website
I'm very new to front-end development, especially CSS. I want to create a website with a top navigation bar and a side navigation bar on the right side of the page. The top and side navigation bars should be fixed, and the main content area between the navigation bars should not overflow. If possible, I would like the height of the top navigation bar to be 15% of the height of the window and the width of the sidebar to be 15% of the width of the window, even when the user minimizes the window.
I tried to achieve this behavior with the following structure:
```
<div className='App'>...
Grid help
https://codepen.io/Miss-Fox/pen/wvbpdRd
relevant styles in ' @layer help'
So i run into this issue fairly often but not always.... I am declaring my columns as the size i want them to be 30ch 3em 55ch respectively. but the min function isdoing its thing saying which is smaller 100% or 30ch. which leads me to wonder, why is my grid exactly the size of the childrens implicit content as a default? i thought it was the flex on the body but even if i take that off , its still the implicit size.
...
Difference between scroll-margin and scroll-padding
Building on top of the sticky header I asked about a few days ago, I was wondering what the difference is between
scroll-margin-top
and scroll-padding-top
. Which one should I use?
I watched this video from Kevin, where he adds scroll-padding-top
to the html
tag. https://www.youtube.com/watch?v=iGUSTyG-CYw
The comments on this StackOverflow answer suggest adding scroll-margin-top
to the :target
selector. https://stackoverflow.com/a/55683966
...links to sections in the same page
i want to link my navbar to sections in the same page and when that sections comes into the viewport ,the list element linked to that section should have a change in color, how do i do this using css?
```html
<nav class="navbar">
<ul>...
article or section element?
I'm not sure whether each of the 3 parts in this card component should be made with the <section/> or <article/> tags.
I know that article tags should be independent and make sense on their own and I think each part of the card does make sense on it's own, but at the same time section elements contain thematically related content, and these 3 "sections" are related.
So should I use <article/> or <section/>?...
How do I prevent my layout on breaking on big/very wide screen sizes?
This is the webpage:
https://gymlie.vercel.app/dashboard
The problem
Opening the website on super wide or big monitors can cause the site to act super weird and for the content inside of the elements to jump out of place...
How to disable scrolling on the x-axis.
Basically, I've tried everything and haven't been able to disable the scrolling that is happening on the x-axis on this landing page,
I will provide the GitHub repo if anyone can figure out what I'm doing wrong, I will be very thankful.
https://github.com/nair0501/Minimalistic-website...
React JS vs Svelte
what do you guys think about that does Svelte Worth it or not cause in my way to learn React js Im really confused by the amount of detail it contains
REACT component in need of dynamic div height for animation
Hello!
I am having an issue animating a conditionally rendered component in my Next.js project. I am trying to animate the height of a
<div>
to zero. If I don't have a set height and want it to be dynamic based on the content in the <div>
, is there a unit that would work for this?
Here is a link to a Gist for better reference: https://gist.github.com/egnica/e871db3612b00e228b00995d4f57a029...Border radius and backgrounds
So this is a fairly common question.
If you have an element that has a
border-radius
and then a child within that which has a background this will not overflow the parent's border radius. As the image shows, there's no curves on the top corners.
The common answer is add overflow: hidden
to the parent. And that works....Moving Elements in a Sticky Header
I have a header that has two rows of content. When the user scrolls down the page, I want to collapse the second row and then move the search bar and Component B up to the first row. Is this possible with CSS only? If not, what I'll probably do is just add them in both rows and then show/hide them depending on if the header is collapsed.
CodePen: https://codepen.io/mandy-h/pen/qBGVpxK...
Feed layout css
Hey,
Would you have an idea of whether it's achievable to go from the first screenshot (a mobile view) to the second (a desktop view) without media queries?
In short, the border bottom on the first view is 100% of the viewport width, while on the second, the border is the width of the content....
Custom Hover shape
Hey everyone 馃槂
Can anyone link me to a tutorial or what I should be researching to learn about how to do hover effects like this? https://milknetwork.com/...
Can anyone link me to a tutorial or what I should be researching to learn about how to do hover effects like this? https://milknetwork.com/...
Adding whitespace to beginning of a broken line
Is it possible to add a space to the beginning of a new line the way
whitespace: pre-wrap
preserves the whitespace at the end of the line?Which Html element should be used?
I'm trying to code this for practice but I have no idea on how to go about it. The two images contains the desktop and mobile view. Do I use tables? Divs? I have no idea.
Thanks in advance....