How do you organize yourself to code?

i just finished my portolio and i was wondering if there was a right order to write code… for me was chaotic, i lost myself several times and ended very confused.

How do you organize yourself to code?

thank you for your answers (and for sorry my bad english)

There are many approaches.

For me, I like to make sure I can do each aspect of the program. For the Weather Program, I make sure I could get longitude and latitude. Then I made sure I could make the API call to get the right data. I might even right a separate pen for each task to make sure I understand it. I like to make sure all my JavaScript is working next, get all the logic working. I’m always amazed when I see people asking questions about the basics of a project and you see their pen and they’ve spent hours working on the html and css but don’t even understand how their going to do the code yet. To me, all that other stuff just gets in the way and is distracting when you run into trouble.

After that, I defined the layout of the page with html (with some JQuery magic to help) and then use css to make it pretty. So, my procedure is:

  1. Make sure I understand each coding task for the project. Test them in a separate pen. Do not continue until you know how they work.
  2. Make sure all the logic works. You can output to console or just to a boring, unadorned html div. Don’t worry about pretty.
  3. Define the structure of the page with html, maybe using some JQuery to inject some html as needed.
  4. Make it pretty with css.

That’s kind of what works for me. As I get better, I can dwell less on step one and just combine different steps as needed. But on projects where I’m having difficulties, this works best for me.

Again, I’m sure other people have different flows. That’s just what works for me.

1 Like

Just use something like the Trello or Waffle.

I like to start out with a bare bones template. Take your portfolio for example. Strip out all the content except for maybe an <h3>Code Goes Here</h3> and leave in the head section, the links to JavaScript and JQuery, maybe Bootstrap etc… Keep a simple CSS3 and JavaScript file as a starting place, and save for later use.

I find when I start a project with at least this much up front I can get right to work building. And as you progress you can save different versions of starter templates with increasingly more complex functionality.

Another way to get a good start is to make a bare bones template off of someone else, for example a Codepen you admire, and make it your own.

1 Like

This is a too broad a question.

I don’t know if there’s a single right way to do it. Each person is different.
But these are my general steps:

  1. mockup design, on paper or photoshop
  2. determine color theme, colors to use for site.
  3. collect assets to use for the site… logos, photos, images, icons, videos, screenshots. Resize if needed, convert to png/transparent if needed, do you build the assets yourself, or provided by client, or you have to find them yourself? splice from you photoshop mockup? Do you need to purchase stock photos?

TIP: ORGANIZE, ORGANIZE, ORGANIZE!!! If you’re using PAID or FREE stock photos bought from or given by a Stock Photo company, make sure to KEEP DOCUMENTATION!!! Because a few years down the road… you will need it! These Stock Photo companies are getting bought by each other all the time, and pretty soon the new 3rd or 5th generation owners will find their photos used on your or client’s website and send you a “lawyer-y” threatening letter demanding you pay this big $$$ penalty for using their licensed stock photos. That’s when you find your original un-resized stock 25MB-each photo, and stuff back their inbox with the 10pcs of licensed photos you legally purchase from the very 1st generation owner, email it all to them and say, and say F.U. here are the original high-res photos that we bought from/given by XXXX company, that YYYY company bought, and then your ZZZZ company bought. If you have original email receipts, even better. – then you won’t hear from these lawyers again. :slight_smile: — until the next go-around when AAAA company bought ZZZZ company.

  1. identify and pick frameworks you need to use, and any dependencies required.
  2. work from the overall big picture to the finer details. (ex: start how the page will look, centered? fluid? full-width? fixed-width? background-image?.. then to individual sections within your page
  3. work on each section at a time… ex: header, content, footer. Then drill-down, for header --> logo, menu section, etc.
  4. buildup CSS code as you work on each HTML section.
  5. if you need UI animation, (jquery?) add to site.
  6. if you need backend logic (the Model or Controller) in your MVC design, start coding and wiring them up to the View/Front end.

These are not written in stone, sometimes you may have to go back and forward on each step. – and if the client changes their mind, go back and repeat some steps.

1 Like