Hi all, I'm currently studying web dev at school, and I have a little project to do, where we have to use flex, grid or bootstrap to replicate a web from an image. I'm absolutely bad with the display part part of the frontend, so I chose to do it with grid, since I consider flex harder and bootstraps gives you half done (according to the tacher), but I'm struggling a little to find a correct way to structure it, I've tried to times to do the project from scratch but the template seems to be wrong, so this time I've thought how to do it, and draw it, so I can visualize it more clearly, but idk if it would work as I think, so before losing the time for third time I thougt of asking y'all

This is the site I have to replicate

https://preview.redd.it/emqa8canajge1.png?width=903&format=png&auto=webp&s=6632836a686029f30ee437c2bfcd743df1531e28

And this is the template I've thought of with the basic code at the right

https://preview.redd.it/ofwyxoklbjge1.png?width=1477&format=png&auto=webp&s=06f26effc3f8f8c5288b36d50ffa3ba57db0ff54

What y'all think of it? Would it work fine as it is drawn and written? Idk if it's good to use so many display:grid inside anothers so...

Maybe this is a very pro frontend site to post such a newbie doubt, so feel free to close it if it's the case, I found another reddit for csshelp but seems dead so I came here

For example, if I want to test spacing between two divs follows our design system spacing, but I don't want to take screen shots, measure the pixels distance between the divs, then manually adjust the css. If I changed the line height on some font and it breaks the spacing then the test would fail and let me know?

Can Jest or Cypress do this? Or is there a tool that I am not aware of?

Hello, I’m not sure if this is allowed but I have a fairly complicated frontend setup and I can’t figure out how to get a horizontal and vertical scroll bars to be exactly where I want them.

Reach out for more information.

If someone can give me a solution, $100 is yours.

Short description😵‍💫 Top: navBar from my app.js (60px tall) (full width)

Render area: Fixed 30px tall row under nav bar. (Full width) Fixed 40px tall row under the above row. (Full width)

Then: I have a 7 x 5 grid of… divs. (2000px wide, unrestricted height) I have the top row to be sticky to top. (Top row has a Fixed row height) I have the left two columns to be sticky to the left (so top row, 2 left divs are sticky top AND sticky left)

At the bottom of the page, I have a 40px tall row (full width)

Done. I want a horizontal scroll bar above the 40px tall row at the bottom that is spans across the right 5 columns. And the vertical scroll bar to go from the 40px tall row to the sticky top row.

If you want help imagining this, open up google sheets and then pin some columns and rows and try scrolling and look where the scroll bars are.

I’ve been trying to learn React by following YouTube tutorials, but I always end up feeling bored and uninterested. Worse, I don’t even feel like I’m actually learning anything.

When I try to build projects on my own, I just get stuck and don’t know how to move forward. It’s frustrating because I want to build things, but I feel like I’m either blindly following tutorials or completely lost when I try solo.

Should I stick with tutorials until I fully grasp the concepts, or is there a better approach? How did you transition from tutorials to building your own projects? Any advice would be super helpful!

Our team wants to develop a wholesale LLM tool for a larger division in the company. While most of our backend technology is nearly finished, the frontend has not been given serious consideration. Because the majority of the team members are not software developers, they are unsure whether to commit to JavaScript for the frontend. Most of them use Python, and their code is more aligned with scientific scripts than production-level software.

Since I have slightly more exposure to software development through Udemy courses and self-study, the manager wants me to oversee the frontend. He particularly likes Gradio because it can be built in Python, a language he already knows. However, I tried Streamlit before and wasn’t impressed, and I’m concerned Gradio might have similar limitations.

We want this application to be more than just a quick prototype; the goal is to create a robust solution that everyone can use, complete with user management and additional functionality. That makes me wonder if Gradio is worth pursuing or if we should invest in a JavaScript-based approach. If anyone is familiar with both, could you offer insights or a list of things that JavaScript can handle but Gradio may not?

TL;DR: Title, where, and how do I store images for a hypothetical website that can contain thousands of images and why should I do it that way?

I've been searching the internet on how to deal with images for websites/webapps but the only things I've found were "use S3" or *S3 can be hard to migrate from and they charge crazy amounts* (from something that I read where a guy was charged like $100k I think because images were downloaded non-stop by someone using their site).
I haven't found a where to store images and why to store them there. I have read stuff like, storage is cheap so store them as JPEG then convert to WebP using NextJS or something along those lines. Lazy load the images, compress/ resize them for profile pictures, and I do have those in mind.

Yes, "just build stuff with it" and "you'll find out when you've encountered the problem" is good and all but I want to understand it as well on why these infrastructures exist and not just use the tools that are already available. Sure I could use NextJS to serve an image gallery or a ecommerce store with tons of images and they would already be optimized but I won't know what happens exactlty behind the scenes. I only know to store images on the host machine (when I'm building locally) then point to that directory on the server I'm hosting on (locally when I'm building).

So, my question is, is there any article/ video that covers serving images for a website?

Would appreciate any tips !

Anyone know why?

Sorry. Visual studio code, to hmtl file, at the end of html it'll add it even if it's not recommended. Line here <meta name=“viewport” content=“width=device-width, initial-scale=1” /> Added them too all my header code and to my <img>

Found this app just now that literally feels like a lifesaver for frontend web devs! Inspect and Edit HTML app allows editing html/css as well as javascript developer console - basically replicates desktop browser dev tools on mobile (ok partially but still something is better than nothing!). It's proprietary app 😞, wish it was open source so I could just add Network tab myself.

Minor Caveats:

• Its play store link doesn't let you install any more, so you need to download apk.
• It doesn't have a good app icon but you can easily fix that with something like Nova Launcher (Android) - I used this icon, you guys let me know your preferred icon 🙂.

I used it for a bit of experimentation when not on my desk. But even more importantly it's useful for fixing the "only on mobile" bugs!

Anyone else have cool mobile dev tools they swear by?

PS: Yes I'm aware of remote debugging using desktop attached to phone, but this is much more convinient. Besides, you always have your phone but not desktop.

Hey everyone,

I’m a solo developer working on a customizable bio page platform with a strong focus on affordability, scalability, and performance. Here’s the tech stack I’m using:

Frontend

• Framework: Next.js (TypeScript)
• Styling/UI: Tailwind CSS, Mantine (core, hooks, modals, notifications, carousel), and styled-components
• Animations: GSAP, Framer Motion
• State Management: Redux Toolkit (with persistence)
• Auth: JWT and OAuth integrations planned

Backend

• Framework: NestJS
• Database: PostgreSQL (via Prisma ORM)
• Caching: Redis
• Authentication: Passport.js (JWT strategy)
• Development Tools: ESLint, Prettier, Docker for local dev

Infrastructure

• Hosting: Frontend currently on Vercel. Backend currently not hosted. Considering Coolify on Scaleway
• Storage & CDN: Cloudflare (R2, DNS, Turnstile CAPTCHA)
• Deployment: Containerized using Docker

I’m looking for feedback on my hosting strategy—particularly using Coolify with Scaleway for backend services. Does anyone have experience running this kind of stack solo?

Any tips for optimizing costs or managing deployments as a solo developer would also be appreciated. Thanks!

Hey everyone!

I passed to the next interview (the third one after the screening and the technical chat with the manager), and I’ll be doing a Pairing Exercise in a sandbox (CoderPad). It’s for a crypto fintech. The exercise description is as follows:

Pairing Exercise (60 min) The exercise will consist of building a page using Next.js, and I’ll need to render rich-text content (HTML code) along with other fields provided via API. I can research the best library to use beforehand (if I choose to use one), but since it’s a 45-minute session, they recommend picking the simplest-to-use one.

Things I'm Considering:

• Understanding how Next.js works, including server-side rendering (SSR).
• Using "html-react-parser" (since it’s the easiest library I found) to parse rich-text content. I assume the API will return an HTML string, e.g., " <p><b>Hello</b></p> ".
• Explaining my thought process as I go so they understand how I approach and solve the task.
• Since it’s a pairing exercise, I’ll be coding most of the time, but I plan to engage the person who I will be paired with questions like: "What do you think about X or Y?"
• If they don’t bring it up, I will mention that this can be done without a library using "dangerouslySetInnerHTML", but that this method requires sanitization (using a library or function to remove scripts), otherwise it can lead to XSS attacks.

Questions:

1. Is there anything else I should keep in mind?
2. What could they ask me about SSR? I admit I haven’t explored this much in my limited experience with Next.js.
3. What do they mean by "among other fields"? What additional data should I expect from the API besides the rich-text content?
4. They told me that asking questions would make me stand out. What are some good questions I could ask, besides clarifications at the beginning to understand the exercise's constraints?

Thanks in advance!!

Recently just made a mini card like notes project, would be glad if someone gives their opinion on it, i wanna check if i am going in the right direction with my learning. Feel free to criticize the hell out of it!
Link: Notes

Code at github: yaseenrehan123/Notes: A notes like webapp

Hello, I want to implement an anchor that scrolls down to the related header on the page using Quasar. I managed to achieve this behaviour when borth anchor and header are present in the index.vue file. What I would like to do is move those anchors to the nav bar located in the main layout file and then on click sommunicate with the child component ( index.vue ) so it can scroll to the header. I remember there was a possibility to make a custom event but I cant remember how its done, could you help me out or at least notch me in the right direction?

Hello everyone, I have been learning about FrontEnd Development recently and I am struggling a lot with CSS, although I built a few small HTML, CSS projects, but everytime I end up using Chatgpt. I just want to learn and understand how positioning works in CSS. Even now I am trying to build a small HTML, CSS project but I am not even able to position and image and an information card side by side.

If possible anyone please mentor me a bit in your free time, atleast tell me how and where to start when positioning elements in CSS.

Hi I am a Marketer that specializes on Google Ads, Meta and CRM management. I've done multiple websites for clients but I hire freelancers for the responsiveness of the sites. I do the websites on elementor and everything I've learned so far is via youtube tutorials, I would like to know any courses or suggestions that you have for my workflow, sites made on elementor and responsiveness on CSS.

Is there an specific course that explain how to do the CSS for an elementor free site? I would appreciate any suggestion I still will rely on freelancers but it is something that I've always wanted to learn how to do.

Best regards from Mexico :)

Hello, looking for exercises to practice for upcoming interviews. I'm more of a backend dev, but have done some fullstack, so I expect some FE questions. Wondering if you have any favorites that you ask candidates, or questions that you've been asked. Examples I thought of:

• Design wireframes for a refund flow for <store> on web
• Design an onboarding flow for a user signing up for <service> for the first time.
• Given this web page as a starting point, design a mobile app experience for the same <service>, but explain any tradeoffs or changes you made.

Are these any good, and/or do you have examples you use or have seen? Am I in the wrong subreddit for this question? Thanks for any suggestions.

EDIT: Why downvoted? LMK if this is the wrong subreddit or what; I think this is on-topic and relevant.

Introducing the DaisyUI Copy-Paste Tool! 🚀

Hey everyone! I’m excited to share something I’ve been working on: https://github.com/Ouzrour/Daisyui-CopyPaste-tool. This tool allows you to copy and paste DaisyUI components directly into your projects with ease!

What is this tool?

If you’ve ever worked with DaisyUI and wished you could skip the hassle of copying and customizing code snippets, this tool is for you! Whether you’re a beginner or an experienced developer, I built this tool to streamline your workflow and save time.

The DaisyUI Copy-Paste Tool lets you:

• Quickly copy any component from the DaisyUI library.
• Easily paste the code into your project.

I know how repetitive it can be to scroll through documentation, copy HTML and Tailwind classes, then tweak them. This tool simplifies that and lets you focus more on building your app rather than manually picking out code.

Why Did I Build This?

As someone who loves working with Tailwind CSS and DaisyUI, I wanted to create a tool that empowers developers to speed up their development process. I know how frustrating it can be when you’re on a tight deadline or just trying to get things done—every minute counts!

This tool is for everyone who wants to build fast, clean, and responsive UIs without the extra work. I’m constantly thinking about ways to make life easier for fellow developers and this tool is a step in that direction!

I Need Your Help! 💡

I’m still working on perfecting this tool and would love to get your feedback. Whether it’s suggestions, feature requests, or even constructive criticism—your opinions are incredibly valuable to me!

Here’s how you can help:

• Try it out: Give the tool a go and see if it fits your workflow.
• Share your thoughts: Let me know what you think about the tool. What works? What doesn’t?
• Suggest improvements: I’m always looking to make this tool better, so any features you’d like to see added, feel free to suggest them!

Check out the Tool Here! 🔗

DaisyUI Copy-Paste Tool on GitHub

Together, we can make this tool a game-changer for developers working with DaisyUI! Your feedback is the key to improving it, and I’m excited to hear from you all!

Thanks in advance for your time and support—let’s build something amazing together! 🌟

Yesterday I started learning Nuxt js

I feel a little bit confused about good resources To learn it any help?

I'm using primarily Angular. Something that always causes a lot of work is updating old applications. Even though we try to reduce dependencies as much as possible every couple of years something new comes up that causes a lot of "upgrade" work. Latest one ng-bootstrap requiring starting from Angular 13 bootstrap 5. (just an example, I know this could have been avoided)

So, I'm looking for an framework, with slower major release cycles & no breaking changes on dependencies. Things should basically only break because the dependency changes, not because of an non-security related update from the framework.

I'm basically fine with being a bit behind the time with an application that causes me minimal maintenance work.

What frameworks should I have a closer look at?

Hey guys. What is the best resource to learn data structures and algorithms? Thank you.

I was thinking about this the other day and can't come up with an answer I like.

For a very small but non-trivial front end (5 pages or so), I wanted to have a simple ts/html site but immediately of course ran into needing other things like webpack if any libraries are included (eg: bootstrap). And then the html has a bunch of code duplication because you can't template it this way without some other scripted setups.

Secondary goal was for work, thinking about building a front end that's simple for other devs to maintain (internal sites). If they only have to learn typescript as opposed to also learning JSX and React coding patterns, that's a positive for these mixed teams we have with no front end specialists.

But I'm not sure if there is a valid simple setup that's lighter weight than a Vue or React and doesn't have a bunch of downsides. By the time the tools are set up to do some kind of even simple html templating (even via a script that just does a sed) and webpack and npm and tsx ... it gets to be a bigger learning task than just telling people to yarn start a vue build. And then it's back to either doing something like Vue or abandoning typescript (and its safety) and just going pure html/js for dev maintenance simplicity.

So I'm floundering on that idea but it's also not my area of expertise, so I thought I'd ask and see what others are doing.

I'm using webpack module federation to serve react micro-frontends to a host app (an old angular app). A lot of the advice I'm reading from the web is that those micro-frontends need to coordinate around the same versions of react, react-dom, styled-components, etc... certain libraries that don't play well together when there are conflicting versions loaded.

Are there any good solutions to this problem that would allow the teams at my company to not need to coordinate react versions? It seems module federation, peer dependencies, and CNDs/externals are all solutions that require synchronizing versions. I have not been able to find a common solution that frees us from this issue.

Thank you!

I need help removing a gap fro my nav bar, could anyone help me?

https://ibb.co/gVyLzgN

```

.banner {
    position: fixed;
    display: flex; /* Use flexbox to control alignment */
    justify-content: space-between; /* Spread items across the banner */
    align-items: center; /* Vertically center the content */
    overflow-x: hidden; /* Prevent horizontal scrolling caused by overflow */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(18, 18, 18, 1); /* Red background */
    color: #ffffff; /* White text */
    padding: 10px 20px; /* Add some horizontal padding */
    font-weight: bold;
    z-index: 1000; /* Ensure it stays above other elements */
    
}



/* Header */
.main-header {
    position: fixed;
    justify-content: space-between;
    top: 44px; /* Initial position to account for the banner height */
    bottom: 92%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    padding: 10px 20px;
    
}

/* Navbar adjustments */
.top-nav {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #222222; /* Navbar background */
    color: #ffffff; /* Navbar text color */
}

```

What is a good web spreadsheet implementation that I can imbed in an app? I came across nocodedb, which is an open-source Airtable clone, but I was thinking of using something more barebones.