ET-710 OER DRAFT

This course focuses on students developing competency in coding the user experience and user interaction (UI/UX) for front-end, browser-based web applications using HTML, CSS, Frameworks and industry tooling. The student will publish static websites to the internet using traditional web servers and modern object storage while learning current best practices and design patterns for UI/UX website implementation.  Topics include: the HTML & CSS languages, Frameworks, responsive web design, source code/version control, an introduction to routing, application programing interfaces (API), API query languages and the fundamentals of cloud computing. Hands-on lab activities and projects complement lecture topics.

Learning Objectives:

  • Understand the basics of HTML and CSS syntax
  • Know how to create and format HTML documents using semantic elements
  • Understand how to use CSS to style HTML documents and create responsive web designs
  • Be able to troubleshoot common HTML and CSS issues
  • Introduction to the Angular JavaScript Framework

Table of Contents:

Introduction to HTML

  • What is HTML?
  • The structure of an HTML document
  • HTML semantic elements
  • Writing basic HTML code

Introduction to CSS

  • What is CSS?
  • The syntax of CSS
  • Inline, internal, and external CSS styles
  • Styling HTML elements using CSS

Formatting HTML documents

  • Text formatting in HTML
  • Adding images to HTML documents
  • Creating links in HTML
  • Creating lists in HTML

Styling HTML documents with CSS

  • Basic CSS styles for text, links, and backgrounds
  • Creating classes and IDs in CSS
  • Creating responsive designs with media queries
  • Troubleshooting common CSS issues

Conclusion and further resources

  • Recap of key HTML and CSS concepts
  • Links to further resources for learning HTML and CSS

Introduction to HTML

HTML, or Hypertext Markup Language, is the standard markup language used to create web pages. HTML allows web developers to structure content and add semantic meaning to text, images, and other multimedia elements on a web page.

In this chapter, we will cover the basics of HTML, including the structure of an HTML document and the most commonly used HTML semantic elements.

Section 1: What is HTML?

HTML is a markup language that uses tags and attributes to define the structure and content of a web page. HTML documents are made up of a series of elements, each represented by a tag that indicates the type of content it contains.

Section 2: The structure of an HTML document

Every HTML document starts with a document type declaration, which tells the web browser which version of HTML the document is written in. After the document type declaration, the document is structured using HTML tags. An HTML tag consists of an opening tag, a closing tag, and the content that goes between them. For example, the opening tag for a paragraph element is and the closing tag is . The content of the paragraph would go between the opening and closing tags. Section 3: HTML semantic elements HTML semantic elements provide additional meaning to web page content, making it easier for search engines and screen readers to understand the structure of the page. Some commonly used semantic elements include: *** : Defines a header section for the document or a section of the document *** : Defines a section of the document that contains navigation links *** : Defines a section of the document *** : Defines an article or a piece of content that is self-contained *** **: Defines a footer section for the document or a section of the document

Using semantic elements in your HTML code helps to make your web page more accessible to users with disabilities and improves the overall quality of your web content.

Conclusion:

In this chapter, we have covered the basics of HTML, including its structure and commonly used semantic elements. In the next chapter, we will cover the fundamentals of CSS, the language used to style HTML documents and create responsive web designs.

Introduction to CSS

Cascading Style Sheets (CSS) is the language used to style HTML documents and create responsive web designs. In this chapter, we will cover the basics of CSS, including its syntax and how to use it to style HTML documents.

Section 1: What is CSS?

CSS is a style sheet language used to describe the presentation of a web document written in HTML. CSS is used to style HTML elements such as text, images, and links, and can also be used to create layouts and responsive designs.

Section 2: The syntax of CSS

CSS uses a simple syntax that consists of selectors, properties, and values. A selector is used to target an HTML element, while a property is used to specify the style to be applied to the element. The value is the setting for the property. For example, to set the color of text in a paragraph element to red, you would use the following CSS rule:

p {
  color: red;
}

In this example, p is the selector, color is the property, and red is the value.

Section 3: Inline, internal, and external CSS styles

There are three ways to apply CSS styles to an HTML document: inline, internal, and external. Inline styles are applied directly to an HTML element using the style attribute. Internal styles are defined within the section of an HTML document using the tag. External styles are stored in a separate CSS file and linked to the HTML document using the tag.

Section 4: Styling HTML elements using CSS

CSS can be used to style HTML elements in a variety of ways, including changing the font size and color, setting background images, and creating layouts and responsive designs. CSS also allows for the creation of classes and IDs, which can be used to target specific elements within an HTML document.

Conclusion:

In this chapter, we have covered the basics of CSS, including its syntax and how to use it to style HTML documents. In the next chapter, we will cover responsive web design and how to use CSS to create responsive layouts that work across different devices and screen sizes.

Responsive Web Design

Responsive web design is the practice of creating web pages that are optimized for different devices and screen sizes. In this chapter, we will cover the fundamentals of responsive web design and how to use CSS to create responsive layouts.

Section 1: What is responsive web design?

Responsive web design is an approach to web design that aims to create web pages that look good and function well across a range of devices and screen sizes, from desktop computers to smartphones and tablets. Responsive design involves using CSS media queries to adapt the layout of a web page based on the size of the screen it is being viewed on.

Section 2: Creating responsive layouts using CSS

CSS can be used to create responsive layouts that adjust to different screen sizes. This can be done using CSS media queries, which allow you to define different styles for different screen sizes. For example, you might use a media query to adjust the font size of text on a web page for smaller screens. Section 3: Designing for mobile devices When designing for mobile devices, it’s important to consider the limitations of mobile screens and the different ways in which users interact with mobile devices. This may involve using simpler layouts, larger fonts, and touch-friendly controls.

Section 4: Best practices for responsive design

Some best practices for responsive web design include using a mobile-first approach, testing designs on different devices and screen sizes, and optimizing images and other multimedia elements for different screen resolutions.

Conclusion:

In this chapter, we have covered the fundamentals of responsive web design and how to use CSS to create responsive layouts. Responsive design is an important aspect of modern web development, and understanding the basics of responsive design is essential for creating web pages that look good and function well across a range of devices and screen sizes. In the next chapter, we will cover advanced CSS concepts, such as CSS frameworks and preprocessors, that can help streamline the web development process.

Advanced CSS Concepts

CSS frameworks and preprocessors are advanced CSS concepts that can help streamline the web development process and improve code organization and maintenance. In this chapter, we will cover the basics of CSS frameworks and preprocessors, and how they can be used to improve the efficiency and effectiveness of CSS development.

Section 1: CSS frameworks

CSS frameworks are prewritten CSS code that can be used to speed up the web development process. They typically provide pre-designed layouts, styles, and UI components that can be customized to meet the specific needs of a project. Some popular CSS frameworks include Bootstrap, Foundation, and Materialize.

Section 2: CSS preprocessors

CSS preprocessors are programming languages that extend the functionality of CSS by allowing developers to write CSS code in a more organized and efficient manner. Preprocessors such as Sass and Less allow developers to use variables, mixins, and other programming constructs in their CSS code, making it easier to manage and maintain large CSS codebases.

Section 3: Using CSS frameworks and preprocessors in web development

CSS frameworks and preprocessors can be used to speed up the web development process and improve the maintainability of CSS code. However, it’s important to use them judiciously and to understand their strengths and weaknesses. CSS frameworks can be useful for prototyping and for quickly building out common UI components, but they can also result in bloated code if not used carefully. Preprocessors can be helpful for managing large CSS codebases, but they can also introduce complexity and require additional tools and setup.

Section 4: Best practices for using CSS frameworks and preprocessors

Some best practices for using CSS frameworks and preprocessors include understanding the limitations and strengths of each tool, using them judiciously, and keeping CSS code organized and well-documented.

Conclusion:

In this chapter, we have covered the basics of CSS frameworks and preprocessors, and how they can be used to improve the efficiency and effectiveness of CSS development. While CSS frameworks and preprocessors can be useful tools for streamlining the web development process, it’s important to use them judiciously and to understand their strengths and limitations. In the next chapter, we will cover the basics of responsive web design frameworks, which provide pre-designed layouts and UI components that can be customized to meet the specific needs of a project.

Introduction to Responsive Web Design Frameworks

Responsive web design frameworks are pre-built CSS and JavaScript libraries that provide pre-designed layouts and UI components that can be customized to meet the specific needs of a project. In this chapter, we will cover the basics of responsive web design frameworks, including their benefits and how to use them to create responsive web designs.

Section 1: What are responsive web design frameworks?

Responsive web design frameworks are pre-built CSS and JavaScript libraries that provide a set of pre-designed UI components, such as menus, buttons, and forms, that can be customized to meet the specific needs of a project. They also typically include pre-designed layouts that can be used as a starting point for a web design project. Some popular responsive web design frameworks include Bootstrap, Foundation, and Materialize.

Section 2: The benefits of using responsive web design frameworks

Responsive web design frameworks can help streamline the web development process by providing pre-designed UI components and layouts that can be customized to meet the specific needs of a project. They can also improve the consistency and quality of the user experience across different devices and screen sizes, and can save time and effort by reducing the need to write custom CSS and JavaScript code.

Section 3: Using responsive web design frameworks in web development

Responsive web design frameworks can be used to create responsive web designs that look and function well across different devices and screen sizes. To use a responsive web design framework, you will typically need to include the framework’s CSS and JavaScript files in your web page and use its HTML and CSS classes and components to create the desired layout and design.

Section 4: Best practices for using responsive web design frameworks

Some best practices for using responsive web design frameworks include understanding the framework’s capabilities and limitations, customizing the framework’s components and styles to meet the specific needs of your project, and testing your designs across different devices and screen sizes.

Conclusion:

In this chapter, we have covered the basics of responsive web design frameworks, including their benefits and how to use them to create responsive web designs. Responsive web design frameworks can help streamline the web development process and improve the consistency and quality of the user experience across different devices and screen sizes. In the next chapter, we will cover the basics of JavaScript, a programming language used to add interactivity and dynamic behavior to web pages.

Introduction to Angular

Angular is a popular JavaScript framework used for building web applications. It is maintained by Google and provides a powerful set of tools for building complex and dynamic user interfaces. In this chapter, we will cover the basics of Angular, including its architecture, components, templates, data binding, and services.

Section 1: Introduction to Angular

Angular is a JavaScript framework for building web applications. It provides a powerful set of tools for building complex and dynamic user interfaces, and is widely used in enterprise-level web development. Angular is built on top of TypeScript, a superset of JavaScript that adds features such as static typing and class-based object-oriented programming.

Section 2: Architecture of Angular Applications

Angular applications are built using a component-based architecture. Components are the building blocks of an Angular application, and are responsible for defining the view and behavior of a specific part of the application. Components are composed of three parts: a template, which defines the view of the component; a class, which defines the behavior of the component; and metadata, which provides additional information about the component.

Section 3: Templates and Data Binding in Angular

Templates are used to define the view of an Angular component. They are written using HTML and can include Angular-specific directives, such as ngFor and ngIf, to add dynamic behavior to the view. Data binding is used to connect the data in a component’s class to its template, allowing the view to be updated dynamically as the data changes.

Section 4: Services and Dependency Injection in Angular

Services are used in Angular to provide functionality that can be shared across multiple components. They are defined as classes and can be injected into other classes using dependency injection. Dependency injection is a powerful feature of Angular that allows classes to declare their dependencies on other classes, making it easier to manage dependencies and reduce coupling between components.

Section 5: Routing in Angular

Routing is used in Angular to navigate between different views and components within an application. Angular provides a powerful router that allows developers to define routes and navigate between them using URLs or programmatic navigation.

Section 6: Best Practices for Angular Development

Some best practices for Angular development include following the principles of modular design, using observables for asynchronous data, and leveraging the power of Angular’s built-in tools, such as the Angular CLI.

Conclusion:

In this chapter, we have covered the basics of Angular, including its architecture, components, templates, data binding, and services. Angular is a powerful JavaScript framework for building complex and dynamic web applications, and is widely used in enterprise-level web development. In the next chapter, we will cover the basics of Node.js and Express, which are commonly used in conjunction with Angular for building full-stack web applications.

Delivering HUGO and Angular Apps via AWS Amplify

AWS Amplify is a powerful tool that can be used to deploy and manage web applications on AWS. In this chapter, we will cover the basics of using AWS Amplify to deploy HUGO and Angular apps to AWS.

Section 1: Introduction to AWS Amplify

AWS Amplify is a set of tools and services provided by AWS that can be used to build and deploy web and mobile applications. It provides a variety of features, including hosting, authentication, and data storage, that can be used to build and deploy scalable and secure applications.

Section 2: Deploying HUGO Apps via AWS Amplify

HUGO is a popular static site generator that can be used to create fast and responsive websites. Deploying a HUGO app to AWS Amplify is a simple process that involves configuring an AWS Amplify app and connecting it to a Git repository. Once the connection is established, AWS Amplify will automatically build and deploy the app whenever changes are pushed to the Git repository.

Sample code for HUGO app:

  • Create a HUGO app and initialize a Git repository:
$ hugo new site my-hugo-app
$ cd my-hugo-app
$ git init
  • Configure an AWS Amplify app:
$ amplify init
  • Add hosting to the AWS Amplify app:
$ amplify add hosting
  • Connect the AWS Amplify app to the Git repository:
$ amplify console
  • Configure a new Git branch for deployment:
$ amplify branch dev
  • Push changes to the Git repository:
$ git add .
$ git commit -m "Initial commit"
$ git push origin dev
  • AWS Amplify will automatically build and deploy the app whenever changes are pushed to the dev branch.

Section 3: Deploying Angular Apps via AWS Amplify

Angular is a popular JavaScript framework used for building web applications. Deploying an Angular app to AWS Amplify is a similar process to deploying a HUGO app, and involves configuring an AWS Amplify app and connecting it to a Git repository. Once the connection is established, AWS Amplify will automatically build and deploy the app whenever changes are pushed to the Git repository.

  • Create an Angular app and initialize a Git repository:
$ ng new my-angular-app
$ cd my-angular-app
$ git init
  • Configure an AWS Amplify app:
$ amplify init
  • Add hosting to the AWS Amplify app:
$ amplify add hosting
  • Connect the AWS Amplify app to the Git repository:
$ amplify console
  • Configure a new Git branch for deployment:
$ amplify branch dev
  • Build the Angular app:
$ ng build
  • Push changes to the Git repository:
$ git add .
$ git commit -m "Initial commit"
$ git push origin dev

AWS Amplify will automatically build and deploy the app whenever changes are pushed to the dev branch.

Note: These are just basic examples and the actual code may vary depending on the specific needs and requirements of the application.

AWS Amplify provides several options for customizing the deployment process, allowing developers to tailor deployments to the specific needs of their application. Some examples of customization options include:

  • Custom Build Settings: AWS Amplify provides several build settings that can be customized to control the build process, such as environment variables, build commands, and build timeouts.
  • Custom Domains: AWS Amplify allows developers to configure custom domains for their applications, which can be used to provide a more branded and professional appearance to the application.
  • Custom Authentication and Authorization: AWS Amplify provides several authentication and authorization options that can be customized to fit the specific needs of an application, such as using custom authentication providers, adding multi-factor authentication, and setting granular authorization rules.
  • Custom Deployment Environments: AWS Amplify allows developers to create custom deployment environments, such as staging and production environments, which can be used to test and deploy changes separately before going live.

Section 4: Customizing AWS Amplify Deployments

AWS Amplify provides a variety of customization options that can be used to tailor the deployment process to meet the specific needs of an application. For example, it is possible to configure custom build settings, use custom domains, and set up custom authentication and authorization rules.

Section 5: Best Practices for AWS Amplify Deployments

Some best practices for AWS Amplify deployments include using Git for version control, testing deployments before going live, and leveraging AWS services such as CloudFront and Route 53 for improved performance and reliability.

To ensure successful and secure deployments with AWS Amplify, there are several best practices that developers should follow. Some examples include:

  • Use Git for Version Control: AWS Amplify integrates with Git repositories to automatically deploy changes, making it important to use Git for version control to ensure a reliable and consistent deployment process.
  • Test Deployments Before Going Live: Before deploying changes to a live environment, developers should test their deployments in a staging or development environment to ensure that everything is working as expected.
  • Leverage AWS Services: AWS Amplify integrates with other AWS services, such as CloudFront and Route 53, which can be used to improve performance, reliability, and security.
  • Monitor and Troubleshoot Deployments: Developers should monitor their deployments to identify any issues or errors that may arise, and should have a process in place to troubleshoot and resolve any problems quickly.
  • Follow Security Best Practices: Developers should follow security best practices, such as using HTTPS for all web traffic, configuring access and authorization controls, and using secure data storage and encryption.
  • Use Deployment Previews: AWS Amplify provides a feature called “deployment previews,” which allows developers to preview changes before deploying them to a live environment. This can help catch any issues or errors before they are deployed to production.
  • Set up Continuous Integration and Continuous Deployment (CI/CD): To automate the deployment process and ensure fast and reliable deployments, developers should set up a CI/CD pipeline that integrates with AWS Amplify. This can help catch issues early on and streamline the deployment process.
  • Monitor Performance and User Experience: Developers should monitor the performance and user experience of their applications using tools like Amazon CloudWatch and AWS X-Ray. This can help identify any bottlenecks or issues that may impact the user experience.
  • Optimize Images and Other Assets: To improve the performance of their applications, developers should optimize images and other assets to reduce their size and improve load times. Tools like AWS CloudFront and Amazon S3 can help with this.
  • Use Infrastructure as Code (IaC): To ensure consistency and reliability in their deployments, developers should use IaC tools like AWS CloudFormation and AWS CDK. This allows infrastructure to be defined and managed as code, which can help with version control and automation.

By following these best practices, developers can ensure that their AWS Amplify deployments are reliable, secure, and optimized for performance.

Conclusion:

In this chapter, we have covered the basics of using AWS Amplify to deploy HUGO and Angular apps to AWS. AWS Amplify provides a powerful set of tools and services that can be used to build and deploy scalable and secure web applications. By following best practices and leveraging AWS services, developers can ensure that their applications are performant, reliable, and secure.

Weekly Topics

  1. How The Web Works, User Interface & User Experience (UI/UX), HTML Fundamentals, Cloud Concepts Overview
  2. Review of common Tools for creating websites, HTML Semantic Elements, Cloud Economics and Billing
  3. CSS Fundamentals, Layout & Positioning, AWS Global Infrastructure Overview
  4. Enhancing UI/UX with CSS Frameworks, Website Encryption using SSL/TLS, AWS Cloud Security
  5. Using Web Components to organize the placement of HTML & CSS, Introduction to Web server hosting, Networking & Content Delivery
  6. Angular Deep Dive, The Single Page Application, Adding logic functionality to HTML, Passing data between web components, Using a Router to navigate through a Single Page Application, Cloud Compute Layer
  7. Angular Deep Dive, Managing Data, Building Forms, Cloud Storage Layer
  8. Building a Resume website using Stackblitz & Angular, Cloud Database Layer
  9. Building a Resume Website using AWS Cloud9 & Angular, AWS Well Architected Framework
  10. Deploying an Angular Static Website to production manually, Auto Scaling & Monitoring
  11. Delivering HUGO and Angular Apps via AWS Amplify
  12. Building and hosting a personal website using Web Components (Angular), CSS Frameworks (W3.CSS), Object Storage (AWS)
  13. Building and hosting a community website using Web Components (Angular), CSS Frameworks (W3.CSS), Object Storage (AWS)
  14. Building and hosting an art portfolio website using Web Components (Angular), CSS Frameworks (W3.CSS), Object Storage (AWS S3)
  15. Final Exam

Week 1 Quiz:

  1. What is HTTP?
  2. What is the difference between UI and UX?
  3. What are the fundamental elements of HTML?
  4. What is cloud computing?
  5. How do cloud computing services differ from traditional hosting services?

Week 2 Quiz:

  1. What are some common tools used for creating websites?
  2. What are semantic elements in HTML?
  3. How does cloud economics differ from traditional hosting economics?
  4. What is a cloud billing model?
  5. What is the AWS Free Tier and how can it be used?

Week 3 Quiz:

  1. What is CSS?
  2. How does CSS relate to HTML?
  3. What are layout and positioning in CSS?
  4. What is the AWS Global Infrastructure and how does it impact website hosting?
  5. What are some common AWS services used for hosting websites?

Week 4 Quiz:

  1. What are CSS frameworks?
  2. How can SSL/TLS be used to improve website security?
  3. What are some common AWS Cloud Security features?
  4. How can website security be improved using AWS?
  5. How can website performance be improved using AWS?

Week 5 Quiz:

  1. What are web components and how can they be used to organize HTML and CSS?
  2. What is web server hosting and how does it work?
  3. What is content delivery and how can it impact website performance?
  4. What is network latency and how can it be reduced?
  5. What are some common AWS services used for web server hosting and content delivery?

Week 6 Quiz:

  1. What is Angular?
  2. What is a single page application?
  3. What is logic functionality and how can it be added to HTML?
  4. How can data be passed between web components?
  5. How can a router be used to navigate through a single page application?

Week 7 Quiz:

  1. How can data be managed in Angular?
  2. What are forms in Angular and how do they work?
  3. What is cloud storage and how can it be used for website hosting?
  4. What are some common AWS services used for cloud storage?
  5. What is the AWS Storage Gateway and how does it work?

Week 8 Quiz:

  1. What is Stackblitz and how can it be used for building Angular apps?
  2. What is a cloud database and how does it differ from traditional databases?
  3. What are some common AWS services used for cloud databases?
  4. What is Amazon Aurora and how does it work?
  5. How can database performance be improved using AWS?

Week 9 Quiz:

  1. What is AWS Cloud9 and how can it be used for building Angular apps?
  2. What is the AWS Well Architected Framework and how does it impact website development?
  3. What are some common AWS services used for website architecture?
  4. What is Amazon CloudWatch and how can it be used for website monitoring?
  5. What is AWS X-Ray and how can it be used for website performance analysis?

Week 10 Quiz:

  1. What is the manual deployment process for an Angular app?
  2. What is auto scaling and how can it be used to improve website performance?
  3. What is website monitoring and how can it be used to identify performance issues?
  4. What are some common AWS services used for auto scaling and monitoring?
  5. What is AWS CloudTrail and how can it be used for website auditing?

Week 11 Quiz:

  1. What is HUGO and how can it be used for building websites?
  2. What is AWS Amplify and how can it be used for website deployment?
  3. What are some common AWS services used for website deployment?
  4. What is the deployment preview feature in AWS Amplify and how can it be used to improve the deployment process?
  5. What is continuous integration and continuous deployment (CI/CD) and how can it be used to automate the deployment process?

Week 12 Quiz:

  1. What are Web Components and how can they be used to build websites?
  2. What is the W3.CSS framework and how can it be used to improve website design?
  3. What is object storage and how does it differ from traditional file storage?
  4. What are some common AWS services used for object storage?
  5. What is AWS Lambda and how can it be used for serverless computing?

Week 13 Quiz:

  1. What are some best practices for building and hosting a personal website using AWS?
  2. What are some common design patterns for personal websites?
  3. What is version control and how can it be used to manage website development?
  4. What is AWS CloudFormation and how can it be used for infrastructure as code?
  5. What is AWS CDK and how does it differ from AWS CloudFormation?

Week 14 Quiz:

  1. What are some best practices for building and hosting a community website using AWS?
  2. What are some common design patterns for community websites?
  3. What is Amazon S3 and how can it be used for website hosting?
  4. What is Amazon CloudFront and how can it be used to improve website performance?
  5. What is AWS Elastic Beanstalk and how can it be used to automate website deployment?

Week 15 Quiz:

  1. What topics were covered in this course?
  2. What are some key skills and knowledge required for building and hosting websites using AWS?
  3. What are some challenges and considerations when building and hosting websites using AWS?
  4. What are some best practices for building and hosting websites using AWS?
  5. How can you apply the skills and knowledge gained in this course to real-world website development projects?