Initial Webpage

Part 1, Chapter 3

« Changelog Getting Started with Vue »


Getting Starting

Getting the code examples

All of the code for this course is stored on GitLab in the following repository:

Code on GitLab

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 is what the starter webpage looks like:

Starter Webpage Screenshot

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)

Head Section

To help with understanding the web application, I'd like to dive into the HTML for the starter website.

The first section in the HTML file, index.html, is known as the head section, as it's the code within the <head> and </head> tags:

<head>
    <title>Vue CRUD Course</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 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. First, a title (Vue CRUD Course) is specified, which will show up as the name of the tab in your web browser.

Next, there is a complex looking <meta> tag. I'll skip the details of this tag, but just know that it's needed for building a responsive web application (i.e., a website that looks good on your laptop and your phone!).

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:

  1. Header (Title)
  2. Navigation links
  3. Content
  4. 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:

CSS Grid Layout

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:

CSS Grid Header Example

The remainder of the navigation bar should be taken up by the navigation links:

CSS Grid Navigation Links Example

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 is 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-container {
  ...
  grid-template-areas:
    "header  header  header"
    "links   links   links"
    "data    data    data"
    "footer  footer  footer";
}

Each of the rows in grid-template-areas is specifying which HTML elements to place in each of the three columns. This layout is specifying that each component (header, nav, data, and footer) should take up a full row:

CSS Grid Mobile Layout

Similarly, the CSS Grid configuration for larger screens is:

@media screen and (min-width: 900px) {
  .grid-container {
    display: grid;
    grid-template-columns: 35% auto 10%;
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 10px;
    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). The configuration of the grid is very similar, except the layout of the elements is slightly different:

@media screen and (min-width: 900px) {
  ...
  .grid-container {
    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:

CSS Grid Larger Screen Layout

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.




« Changelog Getting Started with Vue »

✓ Mark as Completed