Learning to code: #6

Photo credit: Sai Kiran Anagani

Knee deep in front-end basics now. HTML, CSS and just around the corner is Javascript.

It’s not overly difficult, but it’s extremely tedious and the amount of information to be learned is, again, vast.

I find handling the relationship between element margins, padding, and box-sizing the most difficult design concept to grasp. For example when do I know to add padding to an outer layer or margin to an inner layer? Does it matter? Hopefully these answers will become more self-evident down the road.

But the Google inspector has become my new best friend. I’m in it all the time, looking at the raw structure of any website I choose. If you’d like to see it in action, just right click anywhere on a webpage and click ‘Inspect.’ That’s raw HTML and corresponding CSS styling of what you see.

I’m also seeing some overlapping concepts between object-oriented programming and front-end design. For example, elements can ‘inherit’ attributes in the cascade, and repetitious styling can be extracted much in the same way as redundant programming logic can be funneled into a Ruby method:

h1 {
color: gray;
font-family: Helvetica, sans-serif;
font-size: 36px;
font-weight: 900;
}
h2 {
color: gray;
font-family: Helvetica, sans-serif;
font-size: 24px;
}

Can be refactored as:

h1, h2 {
color: gray;
font-family: Helvetica, sans-serif;
font-size: 36px;
}
h1 {
font-weight: 900;
}
h2 {
font-size: 24px;
}

But I’m enjoying this process. Every day I see the jigsaw puzzle get a little more complete. The vastness of all this content can feel overwhelming at times, but that’s to be expected. The way to complete a marathon is to take one step 40,000 times in a row.


Originally published at ERIC HAGEMANN.

Like what you read? Give Eric Hagemann a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.