Scribd
Upload
107 views

Lab Front-End Development II

This document covers front-end web application development topics including improving styling with CSS, responsive design with CSS grid/flexbox/media queries, and implementing models. It discusses using CSS to design webpages for layout and styling a sample web application. It also covers importing the Bootstrap CSS framework, using its grid system and components like navbars, forms and tables. The document concludes with implementing a modal component using Bootstrap for the sample web application.

Uploaded by

Eida Izanami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
107 views

Lab Front-End Development II

This document covers front-end web application development topics including improving styling with CSS, responsive design with CSS grid/flexbox/media queries, and implementing models. It discusses using CSS to design webpages for layout and styling a sample web application. It also covers importing the Bootstrap CSS framework, using its grid system and components like navbars, forms and tables. The document concludes with implementing a modal component using Bootstrap for the sample web application.

Uploaded by

Eida Izanami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Web Application Development – Front-End Development II

This worksheet covers the following topics to help you understand how to develop a front-end web
application

• Improve web application styling with CSS


• Utilize responsive web design practices using CSS grid, flexbox, and media queries
• Implement models for a web application

CSS is the acronym of "Cascading Style Sheets." CSS is used to design the webpage for better layouts so that
the user can feel comfortable with the Web page. This language contains coding elements and comprises
these "cascading style sheets," which are equally called CSS files (. CSS). For today's tutorial, we will be
focusing on creating our CSS style sheet for our web application.

Prerequisite
A. Complete Front-End Development I lab exercise
First, you have to complete the Front-End Development I lab exercise to complete this tutorial.

Part 1: Improve web application styling within CSS


A. Open web application using Visual Studio Code > Open Folder

B. Create your first CSS stylesheet


There are three types of CSS: inline CSS, Internal or Embedded CSS, and External CSS. As a best practice, we
should try only to use an external CSS file for our web application.

We created a corresponding CSS stylesheet for each HTML file in the previous lab exercise. In this lab
exercise, we will be implementing CSS styling to enhance the presentation of our web application,
including colors, layout, and fonts.

Open your restaurant.css file; let's try creating some styles to make our restaurant.html more presentable.

Start by creating a new style class: "restaurant-name" and styling it accordingly. We use the .class selector
to select elements with a specific class attribute.

Next, let's go to our restaurant.html file to specify the class restaurant-name


After specifying the class, let's test out our web application to see if it had been styled accordingly!

Startup a Terminal within your Visual Studio Code and run the node server.js command. Navigate to
http://127.0.0.1:8080/restaurant.html to see that the restaurant names had been styled successfully!

Congratulations! You have successfully created your first CSS style and integrated it into HTML! You can
refer to https://www.w3schools.com/cssref/ to test out various CSS properties you could implement for
your project.
Part 2: Utilize responsive web design practices using CSS grid, flexbox, and media queries
Bootstrap is one of the most popular CSS frameworks for creating responsive web applications! Not only is
it free, but it is also open-source. It includes numerous HTML and CSS-based design templates for
typography, forms, buttons, tables, navigation, modals, image carousels, etc.

For this exercise, we will be importing Bootstrap 4 into our project and trying out the various CSS design
templates.

A. Download and Import Bootstrap 4 CSS Framework


To complete this tutorial, you will have to download the Bootstrap 4 CSS and JS files from LMS or
(https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js)

After downloading the files, copy the files into your project corresponding js and CSS folders. Your file
structure should look as follows:

B. Import Bootstrap Javascript and CSS files for each of the screen
We will be importing their corresponding .js and .css files for each HTML file, similar to how you import
your.css and .js files.

Repeat the steps above to import the corresponding bootstrap .css and .js files for each of the .html files in
your project

C. Amend your CSS stylesheet integrating Bootstrap 4

Now that we have successfully imported Boostrap 4 into our project, let us change our restaurant.html to
use the framework!

Open up restaurant.html, try adding a div with a container class and another div with a row class. We are
using the Bootstrap 4 grid layouts to style our restaurants into a single row!

After specifying the classes, let's test our web application to see if it is styled accordingly!
Startup a Terminal within your Visual Studio Code and run the node server.js command. Navigate to
http://127.0.0.1:8080/restaurant.html to see that the restaurant's div had been styled successfully!

You can refer to https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp to test various CSS


properties that you could implement for your project.

Try adding Bootstrap grid system using the col-6 class!

Expected Result:

Recommended styles you can implement into your project:

1) Navbar: https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
2) Forms: https://www.w3schools.com/bootstrap4/bootstrap_forms.asp
3) Tables: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp
4) Carousel: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp
Part 3: Implement modals for a web application
Now that we have successfully imported Boostrap 4 into our project, let's look at implementing a modal
component for our web application. The modal component is a customized popup box displayed on the
current page.

A. Create Modal window using Bootstrap Modal

Open up restaurant.html, create a basic modal by adding the following codes at the bottom of the html:

<!-- The Modal -->


<div class="modal" id="restaurantmodal">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->


<div class="modal-header">
<h4 class="modal-title">Restaurant Title</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->


<div class="modal-body">
<p>Restaurant Category: Western</p>
<p>Restaurant Opening Hours: 10:00am to 10:00pm</p>
<p>Restaurant Details: Lorem ipsum dolor sit amet, consectetur adipiscing
elit. </p>
</div>

<!-- Modal footer -->


<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

B. Test your newly created modal!


You can refer to https://www.w3schools.com/bootstrap4/bootstrap_modal.asp to test out more advanced
models such as adding animation or creating scrolling within the modal for your project!

In this lesson, you have successfully:

• Improve web application styling with CSS


• Utilize responsive web design practices using CSS grid, flexbox, and media queries
• Implement models for a web application

You might also like