Initial Webpage
Part 1, Chapter 3
Getting Starting
Getting the code examples
All of the code for this course is stored on GitLab in the following repository:
This repository is available for everyone to clone using either SSH or HTTPS:
# ssh
$ git clone [email protected]:patkennedy79/vue-crud-course-code.git
# https
$ git clone https://gitlab.com/patkennedy79/vue-crud-course-code.git
Part I (Vue Fundamentals) of this course has a corresponding branch (part1_vue_fundamentals) in the repository:
Part I (Vue Fundamentals) on GitLab
I would highly recommend following along by writing the code examples that we walk through in each chapter.
Initial Webpage
Let's start off with the starter website that contains no JavaScript/Vue code. The goal of the starter website is to provide a canvas on which we can build Vue applications. This starter website uses HTML and CSS, with use of CSS Grid for the overall layout of the webpage.
Here's what the starter webpage looks like:
The remainder of this chapter dives into the HTML and CSS files to provide a solid foundation for the webpage structure that we're going to use throughout this course.
HTML Structure
HTML File (index.html)
The starting template for an HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
</body>
</html>
The head section (within the <head> and </head> tags) defines metadata (data about the data!) about the HTML page. The body section (within the <body> and </body> tags) defines the contents of the HTML page using different HTML tags (<h1>, <div>, etc.).
This HTML page is defined in an HTML file: index.html
Head Section
To help with understanding the web application, I'd like to dive into the HTML for the starter website.
Start with the contents of the head section of index.html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CRUD Course</title>
<!-- Local CSS file for styling the application -->
<link rel="stylesheet" href="css/style.css">
</head>
The head section provides a few key items for the webpage. The first <meta> tag tells the web browser reading index.html to use UTF-8 character encoding (recommended approach in the HTML5 specification). The second <meta> tag is more complex, but it's needed for building a responsive web application (i.e., a website that looks good on your laptop and your phone!).
Next, a title (Vue CRUD Course) is specified, which will show up as the name of the tab in your web browser.
Finally, there is a link to a CSS (Cascading Style Sheet) file which is where we will be writing the CSS code to style the website.
Body Section
The next section is known as the body section, as it's the code within the <body> and </body> tags:
<body>
<div class="grid-container">
<header class="header-title">
<h1>Header</h1>
</header>
<nav class="navigation-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="data-content">
<h1>Content goes here!</h1>
</div>
<footer class="footer">
<h4>Footer</h4>
</footer>
</div>
</body>
The body of the webpage defines the four key sections of the webpage:
- Header (Title)
- Navigation links
- Content
- Footer
The standard convention for naming classes in CSS (Cascading Style Sheets) is to use lowercase letters and to use hyphens ('-') to separate words. For example, the navigation links class should be called 'navigation-links' and not 'NavigationLinks' or 'Nav_Links'.
The four sections are wrapped in an overall <div> tag with a class of grid-container. This grid-container is used for defining the layout of the page using CSS Grid.
CSS
CSS Grid Overview
CSS Grid is an amazing technology! I highly recommend delving into CSS Grid in more detail, as it simplifies how to create and manage webpage layouts. As I learned what CSS Grid can do, it has become the reason that I've abandoned Bootstrap for styling a website. CSS Grid is that amazing!
CSS Grid allows you to specify a grid (horizontal and vertical columns) that you can use to easily place the pieces of your website into. For example, the grid that we're creating is going to contain 3 rows and 3 columns:
What's so incredible about CSS Grid is that you define the number of columns and rows that you want and then you can easily place the items for your website into different parts of that row/column layout.
For example, the header title is going to be part of the navigation bar at the top, but it should only take up a portion of it's left-side:
The remainder of the navigation bar should be taken up by the navigation links:
The intent of this overview of CSS Grid was to provide some insight into the layout of the webpage, but also to give an introduction into how powerful CSS Grid is. More details to come below in the walkthrough of style.css...
style.css
The style.css file is where all of the CSS (Cascading Style Sheets) code is located. The index.html file provides the content that is going into the website while the style.css file defines the styling/look of the website.
Overall Styling
The first section of style.css provides a few styles to apply to all HTML elements by using * wildcard:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
This is effectively a reset on the styling for each element to get to a common starting point for styling different elements.
The second section of style.css provides the styling for the <body> element, which applies the styling to the entire webpage. These styles define a background color to be a blue-ish color with a font color of white:
body {
background-color: rgba(23, 50, 91, 1.0);
color: white;
font-family: Verdana, sans-serif;
}
CSS Grid Styling
The next section of style.css provides the styling for the CSS Grid that is defined in the grid-container element. All of the styling for the CSS Grid section is under the CSS Grid Styling section.
The first portion defines the names to use for each component with the CSS Grid for laying out the elements:
/* CSS Grid Styling
*******************/
.header-title {
grid-area: header;
}
.navigation-links {
grid-area: nav;
}
.data-content {
grid-area: data;
}
.footer {
grid-area: footer;
}
Each of the four elements that we defined in the index.html file is defined here and given a simplified name for use in the CSS Grid layout.
The next two sections define the layout of the webpage for either devices with larger screens (tablets, laptops, desktops) or for mobile devices (phones) with smaller screens.
Since the users of your website could be viewing your site from any type of device, it's important to consider the layout of your website for all screen types.
The use of media queries for changing the layout of different sized screens is a powerful tool for making your site look good on all device screen sizes.
The default configuration for the CSS Grid layout is for smaller screens (think of this as having a "mobile-first" mindset). Here's the CSS Grid configuration:
.grid-container {
display: grid;
grid-template-columns: 35% auto 10%;
grid-auto-rows: minmax(50px, auto);
grid-gap: 10px;
max-width: 960px;
margin: auto;
grid-template-areas:
"header header header"
"nav nav nav"
"data data data"
"footer footer footer";
}
In order to create a CSS Grid, the element that contains the grid (grid-container) needs to be specified to use CSS grid via the display: grid styling. Next, the layout of the columns is specified with grid-template-columns to create three columns that take up 35%, 55% (auto calculates this for you!), and 10% of the screen, respectively. The layout of the rows is a bit more fluid via the grid-auto-rows to say that each row needs to be at least 50px (pixels) but can be as large as needed for the content in that row.
The elements to place in this grid are defined in a clear text-based layout using grid-template-areas:
grid-template-areas:
"header header header"
"links links links"
"data data data"
"footer footer footer";
Each of the rows in grid-template-areas specifies which HTML elements to place in each of the three columns. This layout specifies that each component (header, nav, data, and footer) should take up a full row:
Similarly, the CSS Grid configuration for larger screens is:
@media screen and (min-width: 900px) {
.grid-container {
max-width: 1280px;
margin: 0 auto;
grid-template-areas:
"header nav nav"
"data data data"
"footer footer footer";
}
}
The first line specifies a media query that says that the following stylings should be used if the screen size is greater than 900px (which would be an iPad screen in the horizontal orientation and larger). When using a media query, only the elements that change from the original definition need to be included.
The configuration of the grid for larger screen sizes is very similar, except the layout of the elements is slightly different:
grid-template-areas:
"header nav nav"
"data data data"
"footer footer footer";
This layout specifies that the top row contains the header and the navigation links. The data and footer still take up full rows each:
The remaining sections of style.css provide some basic styling for each HTML element specified in index.html. The key concept that is used from CSS Grid for each of these elements is the margin: auto; styling, which specifies that the content should be centered (i.e., the margins are automatically calculated) within its' element.
✓ Mark as Completed