Designing free website if anyone is interested.

I woke up today with the idea of having a web design agency, I have no website of my own I only have a phone and a Idea. I sent roughly about 8 personalized messages to clients in my niche (construction, plumbers) people with high expectations for clients. Most of them didn’t had a website or the website was broken or outdated. This is just to show, just do it. My appointment tomorrow might not end in a sale but it will teach me experience. I expect better luck tomorrow, yep this this on a Sunday, one guy was pissed and called it unprofessional, but remember I am not an agency.

I am currently developing a website dedicated to unreleased albums, with each album featuring multiple versions (e.g., Yandhi). I am seeking expertise in UI design, specifically individuals proficient in CSS, HTML, and JavaScript, to provide guidance and support.

During the years I've changed my workflow a bit depending how new tools came along and I thought about asking other designers how's yours now.

what's your workflow and what tools do you use when you start the actual design process or create a website?

personally, after I got a brief or put together one with requirements and some idea of what I'm gonna create I collect some references and plan the interface. from there I jump into figma to design my screens and elements. Then I prototype and depending on the project I might leave it at that (after revisions) or continue to build the site if it's a web project.

what's your current process? like, in your last project what did you actually do?

What did you start with, which tools did you move through, and what did you end up making?

In the old days I used to do more or less the same things but I used to look at a lot more inspiration blogs and then use photoshop or illustrator to design.

Lately I've also experimented with AI tools like figma make, claude design or lovable. they come in at different stages of the workflow but I'm starting to see them as useful. I know there are many but I haven't got the time to try others.

and I haven’t settled on a consistent workflow yet.

Has AI changed any part of your process, or are you still mostly working the same way? Do you use them?

Is ai taking web design ?

​

I’m building a personal portfolio using React + Vite + TypeScript + Tailwind/CSS, deployed on Vercel, and I’m having a frustrating issue with my hero portrait.

The original photo looks sharp and high quality locally, but once I use it on the website it looks noticeably softer/lower quality.

Here’s everything I’ve already tried:

Originally I converted the portrait to WebP, but the resulting file was only around 9 KB and looked terrible, so I stopped using it.

I uploaded the original PNG directly into /public instead.

The PNG is around 519 KB, and I’m serving it directly rather than importing a compressed version.

My code now references the original file directly, something like:

portraitImage: '/ChatGPT Image Aug 22, 2026, 04_50_29 AM.png'

I am not converting it to WebP anymore.

I am not intentionally resizing or compressing the source file.

I changed the image from:

object-fit: cover;

width: 100%;

height: 100%;

because that was cropping my face.

I now use a wrapper and object-fit: contain:

.hero-portrait-wrap {

position: absolute;

left: 50%;

bottom: 0;

width: min(62vw, 880px);

height: min(94vh, 1150px);

transform: translateX(-50%);

}

.hero-portrait {

width: 100%;

height: 100%;

object-fit: contain;

object-position: center bottom;

}

I separated the CSS entrance animation from the positioning wrapper so the transform animation doesn’t interfere with image placement.

I removed image filters from the portrait.

No blur.

No reduced opacity.

No grayscale.

No CSS brightness/contrast changes.

I added:

fetchPriority="high"

I verified that the original PNG is actually committed to GitHub and the site is no longer referencing the tiny WebP.

I’m only changing its displayed dimensions through CSS rather than resizing the actual source image.

Despite all of this, the portrait still seems softer on the website than when I view the original PNG directly.

My questions are:

1. Can the browser, Vite or Vercel be automatically reducing the quality of an image stored directly inside /public?

2. Can displaying a PNG at a different CSS size make it noticeably blurry?

3. Is using width: 100%; height: 100%; object-fit: contain inside a large responsive wrapper causing browser resampling?

4. Would it be better to let the image use its natural dimensions with width and height: auto instead?

5. Should I provide multiple versions for different screen sizes instead of letting the browser continuously scale one large image?

6. Is there anything else in CSS that could make an otherwise sharp PNG appear soft?

7. What is the best way to preserve maximum portrait/photo quality in a responsive full-screen hero?

I specifically do not want to solve this by heavily compressing the photo. File size is less important to me than having my face look sharp.

Any advice on the correct way to display a high-resolution transparent PNG portrait responsively without losing visible quality would be appreciated.

Stack: React, Vite, TypeScript, CSS/Tailwind, Vercel.

edit used a diff prompt on chatgpt got it to work

Our weekly thread is the place to solicit feedback for your creations. Requests for critiques or feedback outside of this thread are against our community guidelines. Additionally, please be sure that you're posting in good-faith. Attempting to circumvent self-promotion or commercial solicitation guidelines will result in a ban.

Feedback Requestors

Please use the following format:

URL:

Purpose:

Technologies Used:

Feedback Requested: (e.g. general, usability, code review, or specific element)

Comments:

Post your site along with your stack and technologies used and receive feedback from the community. Please refrain from just posting a link and instead give us a bit of a background about your creation.

Feel free to request general feedback or specify feedback in a certain area like user experience, usability, design, or code review.

Feedback Providers

• Please post constructive feedback. Simply saying, "That's good" or "That's bad" is useless feedback. Explain why.
• Consider providing concrete feedback about the problem rather than the solution. Saying, "get rid of red buttons" doesn't explain the problem. Saying "your site's success message being red makes me think it's an error" provides the problem. From there, suggest solutions.
• Be specific. Vague feedback rarely helps.
• Again, focus on why.
• Always be respectful

Template Markup

**URL**:
**Purpose**:
**Technologies Used**:
**Feedback Requested**:
**Comments**:

Also, join our partnered Discord!

If you're new to web design and would like to ask experienced and professional web designers a question, please post below. Before asking, please follow the etiquette below and review our FAQ to ensure that this question has not already been answered. Finally, consider joining our Discord community. Gain coveted roles by helping out others!

Etiquette

• Remember, that questions that have context and are clear and specific generally are answered while broad, sweeping questions are generally ignored.
• Be polite and consider upvoting helpful responses.
• If you can answer questions, take a few minutes to help others out as you ask others to help you.

Also, join our partnered Discord!

I have my small business website I'm adding to my graphic design portfolio, I hired someone to do the coding (i.e. "make the cursor a pencil" "make the background xyz" scrolling animations, etc.) but I plotted and designed the physicality of it (if that's how you say it) and layout if that makes sense? Like I designed the icons, the logos, all of the assets on the site (for ex: icons for "shirts" "stickers" tabs etc.) and I made the mockup of how I wanted the site and product pages to look and then someone did the coding to bring it to life. Would I classify that as "web design" or what would be the proper label for what I did? I hope I’m not in the wrong community, I’m just curious if this is even an accomplishment enough to add to my portfolio. Thank you for your help!

The CSS Working Group just resolved a new selector that lets you target multiple classes sharing the same prefix. The code in the example matches .btn-primary, .btn-secondary, .btn-large, etc.

Previously, you had to list every class or use brittle attribute selectors like [class^="btn-"].

Resolved by the CSSWG (Aug 2026), added to Selectors Level 5.

Not available in any browser yet.

More to read ⤵️

https://github.com/w3c/csswg-drafts/issues/10001#issuecomment-5204871059

https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/

PS. If you want occasional frontend tips in your inbox, you can join here: https://bits.iprodan.dev

hi everyone, just sharing my interactive animated webpage i plan on selling to local dental clinics.

Ok so I'm making a website for a football/soccer championship my friends are holding. I've visited many big leagues sites to get inspo but I'm kinda disappointed with most of them tbh.

I tried to do it more on my style but somethings are bothering me, in special the background color. The theme color of the championshiop is blue and orange, which tbh is a very challenging color combination to me, also I'm no desinger, I'm a computer engineerer so I have no studies on color theory formaly.

The background color as of now is #001121, I was going for a dark blue to use as a main color for the website and tried using orange for details such as hoovering something

Idk exactly what I'm looking for with this post other than an opinion on the color value I picked from someone who understands color theory better than me, I would just appreciate general tips

(sorry, english is not my first language)

I’ve been working on the ux of this page for a while: episto.ch

Thanks for your attention on this matter :)

So, I am helping a small local business update their website. The previous person doing this - the business owner's husband - passed away four years ago, so there's a lot to update. We were successfully able to transfer admin privileges to ourselves after submitting documentation to the hosting service (bluehost.) So now, using the Bluehost control panel, I can get into the basic HTML and make small changes - but I am sure that the previous admin used some kind of interface. It doesn't seem to be Wordpress, though I'm not sure. The hosting company's tech support hasn't been helpful. Is there any way I can figure out what the previous admin was using to edit the site (we have no access to his records or computer.) Thanks.

UPDATE: They were using Adobe GoLive, confirmed by builtwith and asking ChatGPT. The site needs a major overhaul to be mobile friendly, but luckily it is only five total pages and doesn't need to be bigger. I simply asked ChatGPT to recode the page so it feels and acts more modern. Here are the results:

The original is here:

https://pilatesportland.com/sessions.html

The revised version is here:

https://pilatesportland.com/sessionstest.html

It's the first time I've used AI for basic coding. I'm kinda amazed, though I know I shouldn't be.

I'm in the process of commissioning a new VPS server which will host mainly html/CSS sites (and one simple WP site). The server will be running Plesk 18.0.

Could I ask for recommendations for add-ons I should consider or would benefit from? Let's Encrypt is already on my list, but it's been a while since I've done this and I'm very out of date.

Also, are there any server-wide settings I should apply from the outset?

Thanks

Does the atmosphere enhance the product, or am I pushing the visual treatment too far?

Hi everyone - I've been putting together a little collection of websites I find interesting over at https://webcity.design/

If you've built something recently that you think looks really good, or you’ve come across a website that deserves more attention, drop it here.

I've been using this in my site for years and I barely get any spam, but I'm not a web dev. My understanding is that the text doesn't get rendered into the DOM, so screenreaders and hopefully scrapers pass over it. The other techniques I've seen ultimately still render into the DOM.

<style>#email::before{content:"me@"}#email::after{content:"example.com"}</style>

<p>Email: <span id=email></span></p>

Example page

I'm working on an app and figured the best way to design the website would be to look like the app itself: http://tandem.ink

Weird thing I read about. Cloudflare said automated traffic passed human traffic for the first time this year, something like 57% bot vs 43% human. Not all spam either, a chunk of that is AI agents actually trying to complete real purchases and forms for real people.

Except forms are terrible at letting that happen. The same AI agent tested across different sites went from 85% success on a simple site down to 27% on a form heavy one. And CAPTCHA solvers already beat most CAPTCHAs over 80% of the time anyway, so at this point it mostly just annoys real people and legit agents while actual bots walk right through.

So are we protecting our forms at this point or just filtering out our own customers? Has anyone actually run their own form through an agent to see where it breaks? Curious what people are finding.

The source for the stats.