Box model vs Flexbox

Progress requires steps, and one of the first steps to modern web design after learning about HTML and CSS was to create a website from a design composite. For example, Rogue Pickings is a mobile meal delivery service. Rogue Pickings prides itself on providing meals with fresh ingredients, and the whole website is geared toward letting people know where they are, what they do, and what they offer. As a web developer, I was taught by Skillcrush’s Break Into Tech Blueprint to start with HTML and CSS using the box model, employing float, clear, margin, padding, box-sizing, text-align, display, and width properties to set up content placing for the site. For styling, color for text, background for background-color, font-size, font-weight, font-family, text-transform, text-decoration, border-bottom, border-top, border-right, and list-style properties are used.

So, since Rogue Pickings is an example, first we set the body font size to 16 pixels, font-family to Montserrat with alternative options of Helvetica and Arial if the browser can’t use the first font, and ’sans serif’ for font style. Then we set the header h1, h2, h3, and h4 to font-weight 700 resulting in bolded headings, and text-transform uppercase so all the headers are in capitals; after that, you set h1 to font-size 30px, h2 to font-size 24px, h3 to 20px, h4 to 12px, and p line-height to 36px. That takes care of main styles, so what’s next? Time to set header styles and placement. H1 needs to be floated to the left, margin should be set to 0, padding, which will push h1 down from the top and give space at the bottom, should be set to 36px 0, which means 36px top and bottom, and 0px left and right.

Phase two is to make Rogue Pickings responsive. For starters, you need to delete all floats, clears, margins, and padding properties. You *may* have to add some padding later, but for now clear all the aforementioned properties out. Flexbox properties include align-items, flex-direction, justify-content, wrap, and flex-flow. Flex-flow is a hybrid property using flex-direction and wrap. For starters, Rogue Pickings has a green theme, so you will want to apply #77a466, a light forest green, to your header, header h1, and .main-image img as a 3px solid border-bottom, and color for header h1 span, header nav ul li a, .main-title h2, .menu li, and footer span. (Apologies, Canadian and/or British speakers, yes, you *have* to use the United States spelling or it won’t work.) H1, h2, and h3 headers are assigned the color black, .reviews are assigned color: #333, and .section-one, .section-two, .section-three, and footer are assigned border-top: 1px solid #eee. Assign font-size 16px to html, and font-family ‘Montserrat’, Helvetic, Arial, sans-serif to body, providing default fonts for each browser if the first one is not available. Next, block up h1, h2, and h3 and apply text-transform: uppercase and font-weight: 700 to bold the headings; next, assign a font size of 1.875em to h1, 1.125em to h2, 0.75em to h3, and 0.875em to p, respectively. Let’s take a break for styling and work on positioning; for body, align-items: center and display: flex, for .container, header, .top-section, .bottom-section, and footer you need align-items: center, display: flex, flex-flow: row wrap, and justify-content: center. How about section and div widths? Assign .container max-width: 1200px, and width: 90%, header, header h1, .main-image img, .section-one, .section-two, .section-three, and footer are given width: 100%. Add text-align: center to header and footer, text-align: left to .main-title h2, font-size: 1em to .main-title p, .reviews, and .address, as well as line-height: 1.56 to .main-title p, 1.5625 to .reviews and 1.5 to .address, respectively. Assign padding: 20px to header h1 and padding-top: 10px to .section-one, .section-two, and .section-three; footer span is given font-family: ‘Galada’, cursive, text-transform: lowercase, and font-size: 0.875em. (Note: all property/description pairings must be written with a colon after a property, and a semicolon after the description to work. For example: color: #77a466;) Last, but not least, are the two lists on the website: ul is assigned margin: 0, header nav is given width: 50%, header nav ul is given padding: 0, header nav ul li is assigned font-weight: 700 (bold), font-size 0.875em, and text-transform: uppercase. Both header nav ul li and .menu li are assigned padding: 10px 0; .menu and header nav ul li is given list-style: none. Margin: 0 is assigned to ul, and header nav ul li a gets text-decoration: none. Padding or margin: 0, list-style: none, and text-decoration: none are given to lists to remove the indent from the side, remove any bullets or numbers from a list, and text-decoration: none removes lines from under links.

On to the media queries! For tablet, @media all and (min-width: 768px) with .bottom section being assigned align-items: flex-start, justify-content: space-between, and width: 100%, .section-one, .section-two, and .section-three assigned border-top 1px solid #eee, and flex-basis: 31.4% to fill their assigned areas. Lastly, .section-two is assigned border-left and .border-right 1px solid #eee, and padding: 0 20px. For desktop, @media all and (min-width: 1200px) header is assigned justify-content: space-between, header h1 gets border-bottom: none, padding: 2% 0 2% 0, text-align: left, and width: 30%; header nav is assigned width: 40%, and header nav ul is assigned display: flex and justify-content: space-between. If you enjoyed this dissection of writing a website, go look at Skillcrush.com for more coding and design fun. This is just a sample of the projects they teach you to build.