Returning To Plain HTML + CSSDanny KrugBlockedUnblockFollowFollowingFeb 17Over the past week, I tried my hand at a couple different code challenges during my job search.
One of them had a section that told me to build a webpage from scratch using HTML, CSS and the included assets.
If you’re like me, it’s been a while since you’ve built something with plain HTML and CSS.
I’m usually neck deep in React world writing that bright and shiny JSX and taking care of business on two fronts at the same time.
I had to access a deep, dark part of my brain and dust the cobwebs off of that HTML knowledge.
It took me a few minutes, but before I knew it, I was off and running.
I had a reference image for what I needed to build, so I dove right in and got to work.
I started with the navbar, it wasn’t functional, but it looked like it could be.
It’s a simple <div> that I imported an image onto.
The real magic happened on the CSS end of things.
And that code looked a little something like this:Here you can see that I’m setting the size of the bar, it’s going to be 48px high and take up 100% of the width of the page.
The background color is set to a dark grey as well.
The logo CSS is setting the position of the logo to a 25% indentation on the left side and giving it a little padding on the top so it doesn’t hug the top of the screen and look awkward.
Now onto the guts of the site, the body and whatever info might be held inside.
There was a banner style image that split the top of the site from the bottom half as well as three circular photos of people that are centered and equally spaced apart from each other.
Finally there was a block of Lorem Ipsum style placeholder text with a title.
That was all split into multiple <div> tags with the content contained in each one.
The CSS is set by the class for each thing.
With each element on the page being slightly manipulated by the CSS styling.
The biggest manipulations, in my opinion, are the background image and the text overlaid on top of it.
Almost all of that magic happens in the CSS as you can tell by looking at the top bit of the code snippet.
I went a little styling crazy with that part and the CSS code came out looking like this:The image content as well as size is all set in the .
hero-image part of the CSS and then the text is overlaid, given a font, sized and colored in the .
hero-text.
The next most challenging part of the exercise was positioning the three circular pictures.
I used the trusty flexbox to style the images, centering them all on the page.
Then by giving each image some padding on either side, I was able to make them appear to be evenly spaced in addition to being centered.
The rest of the page was rather simple after that.
It was just the text underneath and then a footer box.
The text was styled based on what I had done with the title on the background image and just tweaked in order to look as it should and the footer was just a modified version of the header.
Basic HTML is SUPER easy.
Once you know it, it’ll come back in a flash.
CSS, on the other hand, is never easy.
Every project is different when it comes to CSS and it takes a lot of trial and error.
There’s a lot of googling and manipulating the webpage in real time through the console in order to get the CSS how you need it.
However, once you hit your stride on a project, you can easily adapt and repackage the code as needed for every additional element.
.. More details