Jia Hedman
3 min readJan 21, 2024

--

Day 14 of coding: HTML and CSS

No, it doesn't take 14 days to cover HTML and CSS. I lost steam on Day 8 when the assignment was to style a website to look like this. Don’t worry, I’m back.

Design agency website highlighting beauty and construction
https://appbrewery.com/

The navy blue font-color for the word “Creative” in H1 was a quick win. Sizing the two images were easy. I fought with H2 “Beauty” and “Construction” to make them inline next to the images. For several days, I could not figure out how to float the two divs left and right. Finally admitted defeat today and looked at the solution.css. OMG, I was calling the left and right divs by the wrong class name (>_<).

Then about six lines to style the webpage based on various screen sizes. I was today years old when I realized that images and text don’t magically adjust to screen size. Developers work to ensure that web content adapts gracefully to various devices, from desktop monitors to mobile screens. The meticulous planning and consideration required to create a seamless user experience across different platforms has my respect.

Other tidbits I picked up in the last two weeks:

Webpages, at their core, are modern-day extensions of newspapers. Just as newspapers once delivered information in columns, webpages use a grid system to arrange content. HTML, is the backbone of webpages. It structures content using tags, just as newspapers use headings and paragraphs. It’s the language that translates our digital thoughts into readable, organized pages.

CSS adds style and finesse to web pages. Margins, paddings, and borders like shown on the left were fun to learn. Positioning elements like ‘display’ and ‘float’ took some practice. These properties dictate how elements interact and arrange themselves on a webpage.

Three boxes styled differently

Have you heard of Serif and Sans Serif font types? San Serif (without Serif) fonts, with their clean lines, lend a modern and minimalistic feel, while Serif fonts, with their decorative details, exude tradition and elegance. Do you see the difference? (hint: look at the “feet”)

San serif font versus serif

Here is last week’s project — motivational poster. The quote is resonating with me right now.

David Goggins running shirtless
Motivational Poster Project

Next week is Flexbox, Grid and Bootstrap! Let’s go!

Follow along on my journey of learning full stack development from AppBrewery’s course called “Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and Dapps”. Not affiliated or sponsored, just a satisfied customer.

--

--