Book Image

CSS Modern Responsive Web Design - Create Five Different Websites [Video]

By : Laurence Lars Svekis
Book Image

CSS Modern Responsive Web Design - Create Five Different Websites [Video]

By: Laurence Lars Svekis

Overview of this book

Today, websites come with a variety of designs that are completely different from each other. As a web designer, the more exposure you have to different designs, the better. In this course, you will learn to create five different modern websites from scratch using floats, CSS Grid, and Flexbox. To understand the process behind creating reusable grids using floats and CSS, you will create a single-page responsive website. Next, you will create a single-page Flexbox website with auto-scroll JavaScript. You will then get to work with a responsive collapsible navigation bar by creating a CSS Grid website. Moving along, you will create a fully responsive website using the features of responsive float. Finally, you will create your fifth website—a CSS Flexbox website—to understand the implementation of navigation sub-menu items. By the end of this course, you will have gained the practical skills to develop real-world responsive websites using the features of CSS. All the resources for this course are available at: https://github.com/PacktPublishing/CSS-Modern-Responsive-Web-Design-Create-5-Different-Websites
Table of Contents (7 chapters)
2
Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript
Chapter 1
CSS Course Information
Content Locked
Section 3
How to Select Page Elements CSS HTML Page Element Selection
Page element selection can be done by selecting elements by tag, by class name, or by the element id attribute. All elements can be selected using a wildcard. Element selection can also be grouped by comma separation of the selectors. When planning and designing your HTML webpage elements, ensure to plan for element selection with CSS. Create elements such that if a specific style needs to be applied, it should be easy to select and unique enough that other elements won't match the selection.