Table Of Content

Sold to [email protected] S T E P B Y S T E P G U I D E CSS in CSS in 44 minutes 44 minutes Build your own webpage Build your own webpage from scratch from scratch Written by Jeremy Thomas © Copyright 2018 – Jeremy Thomas 1 Introduction This book is a step by step guide that will teach you how to build this webpage from scratch: It's the webpage of a fictional tech recruiter called Alex Jefferson. All images come from Unsplash. As you follow this guide, feel free to change the styles and content the way you want. Who is this book for Anyone can read this book! No prior web development or programming knowledge is required, since I will tell you what to do, line by line. What you will build This webpage will use the following files: 1 HTML5 file 3 CSS files 4 images (provided) 1 JavaScript file It will also make use of two third party services: Font Awesome and Google Fonts. What you will learn Through this guide, I will teach you how to: Set up a valid HTML5 document Write semantic markup Insert responsive Retina-friendly images Learn how to structure your CSS correctly Design a 100% responsive page Understand how media queries work Use CSS Flexbox to lay out your components Style your text with typography properties Add visual feedback with CSS Transitions Bring your page to life with CSS Animations Make use of Google Fonts Include and style Font Awesome icons What you need to start You only need to install 2 programs: a decent text editor or IDE with syntax highlighting. I recommend Sublime Text but you can use Notepad++, Vim, Emacs, IntelliJ, Atom… a modern web browser. I use Google Chrome but you can use Firefox, Safari, Opera, or Edge. You also need a few files that I have provided: 1 CSS file: minireset.min.css 7 images: alex.jpg [email protected] [email protected] austria.jpg 1x.png 2x.png 3x.png Have them available and ready to be used. 2 Writing the HTML5 content Open your text editor, create a new file and paste this code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Alex Jefferson – Tech Recruiter</title> </head> <body> <h1>Hello world!</h1> </body> </html> Save this file as index.html , open it in your browser, and you will see the following page: Make sure to have the .html file extension. Here's how to do it on Windows and Mac OS. A valid and responsive HTML5 document This page is a valid responsive HTML5 page because it satisfies the following requirements. <!DOCTYPE html> This line tells the browser that this webpage is an HTML5 document and should be interpreted as such. <meta name="viewport" content="width=device-width, initial-scale=1"> This is the responsive meta tag. It tells the browser to set the content width to the viewport one, ensuring for the content to adapt automatically. It also tells the browser to set the zoom level to 1 initially, while still allowing the user to zoom in (especially on mobile phones). Also, each HTML tag ( <html> , <head> , <body> …) is opened and closed in the right order. Only the <meta> tags need to be self-closing. Adding the CSS reset Before designing your page, you want to start with a clean canvas. Since each browser comes with its own default styles, you want to remove them first, otherwise these styles will clash with yours. This process is the purpose of a CSS reset. Best practice Separate content and styling You want to choose an HTML tag for its semantic meaning, not its appearance. If changing an element's tag in your HTML changes its appearance, then you’re essentially styling your webpage in the HTML, which is what we want to avoid. Most current CSS resets are either complicated or outdated, so I created a small one called minireset.css. I use it for all my projects, and it's included by default in Bulma too. The only two real requirements are to: remove the margins and paddings from all block elements use box-sizing: border-box Feel free to read through the source code. Alongside your index.html file, create a /css folder, and move the minireset.min.css file in it. Let's link our CSS file from the HTML file. Just below the <title> , add this line: <title>Alex Jefferson – Tech Recruiter</title> <link rel="stylesheet" type="text/css" href="css/minireset.min.css"> The text "Hello world!" is now unstyled. Your own CSS In the /css folder, create a new empty file called main.css . You now have to include this CSS in your page. In index.html , right below the minireset, link your main.css file. You now have 2 CSS files: <link rel="stylesheet" type="text/css" href="css/minireset.min.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> To see if the CSS was correctly included, add this to main.css : html { background-color: blue; } If your screen doesn't turn blue, make sure your index.html file is alongside your /css folder: The CSS now works so you can remove the blue background from the CSS. Before writing any CSS, you have to start with the most important of a webpage: the content. Writing content The purpose of design is to enhance the presentation of the content it's applied to. It might sound obvious, but content being the primary element of a website, it should not be established as an afterthought. Written content makes up for more than 90% of the Web. Remove "Hello world!" from your page, and put this code inside the <body> : <div class="wallpaper"></div> <div class="content"> <aside class="side"> <figure class="picture"> <div class="picture-shadow"></div> <img id="pictureImage" class="picture-image" src="images/alex.jpg" srcset="images/alex.jpg 1x, images/[email protected] 2x, images/[email protected] 3x" alt="Portrait of Alex Jefferson" width="320" height="320"> </figure> </aside> <main class="about"> <h1 class="name"> Hi, I'm Alex Jefferson </h1> <p class="job"> Tech recruiter </p> <hr class="hr"> <div class="description"> <p> I spend my time traveling the world, helping startups and tech businesses hire the best people. </p> </div> <div class="contact"> <a class="button" href="mailto:[email protected]"> Get in touch </a> </div> </main> </div> As you can see, HTML is noisy: there is lots code for not much content on screen. But all these HTML tags are here for semantic reasons, and all these CSS class names are here for (future) styling purposes. HTML structure The wallpaper will display a transparent image in the background, covering the whole page. The content is the container for the readable part of the webpage, and will cover the whole page as well. On the right, the side will display the portrait image. On the left, the about section is a wrapper for all text. The button acts as a link for visitors to click, so make sure to replace [email protected] with your own email address. Responsive and Retina-friendly images As you can see, since the alex.jpg image is missing, the browser is showing the alt text "Portrait of Alex Jefferson" as a fallback. To fix this, create an /image folder alongside the /css one, and move the 4 images ( alex.jpg , [email protected] , [email protected] and [email protected] ) inside: We want to display this image at a maximum of 320x320 pixels. But screens have different pixel ratios, especially mobile phones. For example, the Sony Xperia S has a pixel ratio of 2 , the Apple iPhone X 3 , and the Samsung Galaxy S8 4 . We could show the 1280x1280 version to everyone and resize it to 320x320 . But we would penalize users who own a device with a pixel ratio of 1 because they would end up downloading an image 10 times the size that their device can actually display. The solution is to: show the user the highest quality image possible their device can support prevent the browser from downloading the other images This is possible thanks to the srcset attribute which tells the browser the list of image alternatives available for each pixel density, and let him figure out which image to display. If the browser doesn't support srcset , it will use src as a fallback.