How long does it take you to build the HTML and CSS for a website?

I’ve read that it usually only takes a couple hours to make the html and css for a site like, but it took me all day just to make the front page, I haven’t even gotten to making the rest of the pages, and I had to constantly look at the inspect element to see how things get done. When I practice making websites with no reference, the designs are always bad and it still takes about all day just to get done with the html and css. I’m still practicing to get faster at this and trying to improve my skills, but I’m curious how long it takes anyone else to make a website similar to this as well, just the html and css. Or please post a website you made and how long it took you to make just the html and css.

1 Like

It basically depends on your skills. I`m not an expert but I read a lot.
Html and css are the frame tools of web development overall but if you want succeed in
building a website in a short time period, you should search for templates that are used through “.php”. I believe you can find tons of templates if you search. That is the quickest way. Hope you can find the template which is suitable with the website shape that you are looking for.

usually not more then a few hours. Really depends on what im doing.

edit: For something like your project? yea thats gonna take a bit.

I can spend many many hours on fine tuning the CSS alone. I don’t use Bootstrap or other frameworks/libraries though so it’s custom-made. Like many things in life it takes me very little time to accomplish 80% of what I want however the 20% (fine tuning for responsiveness) takes a lot of time. Practice practice practice, or use templates/libraries/frameworks.


The input field on this project probably took me about 2 hours of tweaking until I got it just the way I wanted…


It can sometimes take me a while depending on how good I want the page to look. I like programming so the mark up can kinda get me down sometimes.

1 Like

I’m a beginner… so it takes me a long looooonnnggg llooooooooooooooooooonnnnnnnggggggg time to do it…
I hope I reach faster speed by practicing

It really depend. If you’re doing some thing heavy on css, like a good looking portfolio, it will take lot’s of time.
But if it’s just some thing using bootstrap for simple fcc app, just a few hours to get the 80% done and 20% for fine update.

Takes me DAYS to WEEKS to setup a new website design for a client. (Though, it’s not an 8-hour day, and I may only work on it for couple of hours a day.)

It’s an iterative process… it’s not a straight Start -to- Finish.
You loop back, come back, redo and repeat, refine, obsess over little details such as spacing/margin for different browser widths/devices/etc.
But I’ve learned over the years, that the more time I spend on this initial stage, the smoother the rest of the project becomes.

1 Like

To mirror everyone, it really does depend on some factors:
a.) How strong your skill set is
b.) The scope of the project (Is it one page? Fifty pages? Does it require a lot of interactive features like forms, sliders, or eCommerce? Is the design itself complicated?)
c.) What you’re using to build it. (Are you using a framework like Bootstrap? Or are you coding everything from scratch?)

If you’re not using a framework, like myself, depending on how complex the layout is, making sure everything looks and acts correctly on desktop all the way down to mobile on as many browsers as possible is what for me takes the most time. If you start out building fluidly you’ll have a bit of an easier time, and again it seriously depends on the layout. That’s why I’m so dang excited about CSS Grids becoming more and more standardized. We can have a page shift and adapt in ways that would take alot of time and tweaking to pull off (and probably some scripting too in some cases).

Practice is key and knowing the languages/tools you’re using. It becomes like muscle memory and then it goes faster. And that’s if you’re coding from scratch or utilizing a framework or a CMS or anything really.

By the way, is it just me or can you guys not collapse the employee bios once you’ve expanded them (by clicking “Read Bio”)? I thought it was a neat way to do them but soon realized there’s no X or close link or clicking a second time on the screen to undo the overlay. Even tried hitting ESC.

Maybe it’s chrome, I’ll have to try another browser.

Yup… same behavior in FF.
I thought clicking the BACK arrow will work, but nope either. It’s a dead-end, user will need to reload the About Us page again.

1 Like

The question seems a little wide open.

I concur with @pocahontas123 that most projects (web or not), 80% of the time dedicated generates the framing and functionality, another 20% for tuning and aesthetics.

I will give you an example from programming in other languages for other projects.
You have your project, but in order to trial and master a certain concept you build a stub or mini-project that is less complex and usually has less data. Your stub is very precise and only deals with the part you are messing around with, once you are comfortable you incorporate it into your project with scale-ability.

A recent example of this is I had to process a large data set pulled from a database. I needed to generate a variable amount of selection lists from this data (in a separate pop up form). On a clean slate a took a much smaller “dummy” data set and simply developed the system to grab the data, make the variable amount of selection lists (of variable length), and handle the list selection and potential user errors.

Once I was happy (comfortable) with it, it was much more efficient and less troublesome to build it into the overall application.

This same methodology can be applied to anything you code. Instead of making a mess and confusing forward and backward iterations of your true project, you step outside to “test” or “play” with several things in a manageable way.

With experience this becomes faster and you can of course re-use code with a little bit of tweaking across many projects.

This isn’t an answer so much as it is thought flow on project programming. My examples may be more accurate toward JS or Node but I find I do this on about anything I am working on.

My answer also lies with @dlyons, and that is that it depends . . . . . .

Happy Coding!


This. This right here helps me alot. I thought I was slow

1 Like

This is so individual process than it’s impossible to say even approximate numbers. You can find some ready projects, compare them with your building skills and add some hours because you can’t be sure how it will be going. Maybe it’s the best way to know how it will be in certain case

Well it can take a 6 weeks design, 3 weeks initial development, and 2 weeks of modifications according to this