I do a number of types of builds, so I'll go through what my process would be:
Partial Layout
This could be a new layout for an existing website, a new modal design, or a re-usable part of the design that we might be using in more than one layout. Usually what's given to me will be a PSD (rare), an image-based mockup (common), a wireframe (very common), or sometimes just a verbal description (rare) or some combination of those. My job is to realize the needed design in HTML + CSS, and build the frontend part of it, adding any JavaScript interactivity I can, and then prepare it to be handed off to backend programmers for addition into a web app.
Here's how I would begin:
- start a fresh HTML file so I can work on this piece on its own page (in isolation from the rest of the codebase)
- create HTML markup necessary for the design, using as few elements as I can get away with and still have all of the content present
- begin writing CSS styles to flesh out the markup I've chosen. At this point any mistakes I've made in my HTML decision-making become apparent.
- Usually I will update my HTML or add a few things like a class or ID if I need it
- Style the CSS to 100%, then add responsive variations for when the design is too wide or too narrow. If I'm designing a re-usable design module I may use element queries instead of media queries for the breakpoints
- Add JavaScript interactivity using vanilla JavaScript, and as few libraries/plugins as I can get away with. If I can build it all using just vanilla JS that's best.
- Hand off to backend programmer for being hooked up and added to the app in the right place
Plugin or side project
- Start writing Markdown-formatted notes about what I want to build
- Mark up my notes as HTML and this document becomes where the work takes place
- Write just enough HTML and CSS that I can start writing JavaScript to build the plugin
- Once work is complete I'll move the JavaScript to its own file, and turn my HTML page into a demo/test
- (Optional:) Upload to Codepen of Github for my future reference and to share with people