ET-718 OER
Course Objectives
ET-718/ET-713 is a Flipped Classroom course designed to assist the students in in becoming ‘workforce ready’ by developing in-demand workforce core competencies. . The Student independently researches and learns new technologies (Digital Fluency) using web based materials (articles, tutorials, videos). The ability to independently learn new technologies is an indispensable skill in today’s workplace. The course focuses on independently learning 5 related technologies, Rails, Ruby, Angular, SQL/NoSQL, and AWS. The Student has access to the AWS Academy Cloud Foundations & Cloud Architecting self-paced curricula, and is encouraged to earn the AWS Solution Architect Associate Certification. ET-718/ET-713 has 5 phases:
ET-718/ET-713
- Well Written Tutorials - The Student spends several weeks autonomously studying well written tutorials to master the basics of the new technologies. During class, the Instructor will conduct detailed reviews of the material.
- Midterm Exam Preparation - The Student prepares to demonstrate mastery of the well written tutorials by building the demonsatration applications used in the tutorials in a development environment.
- Final Exam Preparation - The Student prepares to demonstrate mastery of the well written tutorials by applying its principles to entirely different problem set and an application to solve the problem in a development environment.
- Deployment to Production - The Student learns how to implement the technologies in a highly available server based and serverless production environments.
- Certification - Focus on AWS Solutions Architect Associate Certification
Phase 1 - Well Written Tutorials
In this section the Student focuses self study materials (well written tutorials) to gain the basics of the 5 interrelated technologies.
- Angular
- Rails
- Ruby
- SQL
- AWS
ANGULAR REVIEW
One effective way to start our review of Angular is to start with the Angular Tutorial on the Angular.IO website. It consists of 5 parts that cover the basics of Angular.
- Assignment, Iteration, Branching, Function Calls, Inter-Component Communication.
- Navigation
- Working with Data
- Forms
- Deployment
TYPESCRIPT
In 2010 AngularJS was introduced as the first JavaScript Framework. A few years later it was replaced by today’s Angular. The difference between the two technologies is that AngularJS works directly with JavaScript while Angular works with Microsoft’s TypeScript. A good place to start learning TypeScript along with Angular is the website CodeLab.Fun..
ANGULAR ROUTING
In our introductory Web course you were introduced to static websites where routing typically involves a RESTful GET request for a specific HTML file’s URL. Routing in angular is typically handled by routing logic that associates a URI pattern with a component.
AWS Web Application Hosting
AWS Web Application Hosting diagram above depicts the AWS prescriptive architecture for a high availability. This approach is widely used by many companies. Click the graphic for a YouTube video on LYFT’s architecture on AWS.
Introduction to the Ruby on Rails Framework
Best Practices
- GitHub Repository
- Cloud9 IDE
Rails Routing
The graphic above illustrates routing in Rails. The combination of a RESTful verb + URI (ROUTING LOGIC) uniquely identify a controller and method (BUSINESS LOGIC).
Web Application Communication
Homework
- Become an SME (subject-matter expert) on the Blog Well Written Tutorial
- Complete all AWS Academy Cloud Foundation & Architecting Modules (Including Knowledge Checks Guided Labs & Videos, and watch this video guide to AWS certification on YouTube.
- Complete Code Academy SQL (free version NOT PRO)
- Complete Code Academy Ruby (free version NOT PRO)
Key Technologies (from job description)
* Javascript, Typescript, CSS, Bash
* NodeJS, React, NextJS
* Jest, React Testing Library, Cypress
* Styled components
* Docker
* Github, git
* Datadog, New Relic
* Jenkins
* SQL
* AWS
Phase 2 - Midterm Exam Preparation
Rails Midterm Preparation Step by Step
1 Open the Sandbox lab in Cloud Foundation and select <Start Lab>
2 Select AWS to open the AWS Console
3 Start Cloud 9
4 Select <Create Environment>
5 name it "rails"
6 Click <Next Step> (Accepting the defaults)
7 Click <Next Step> (Accepting the defaults)
8 Click <Create Environment>
9 Open a terminal in the root of your development system
10 Sign into your GitHub account
11 Create a new repo
12 Copy the repo URL
13 git clone <URL>
14 cd (change directory) into the repo directory
15 run - <rails new blog>
16 update the gemfile (around line 7) with gem 'sqlite3', '~> 1.3.6'
17 run <bundle update> from the command line in the <blog> sub-directory
18 Add, Commit and Push to your GitHub Repo
* git add .
* git commit -m "your comment"
* git push
Follow the Blog tutorial
GitHub Repo with the Blog Tutorial code.
The following video discusses the inner workings of the Blog Tutorial Exercise (Recorded April 2022)
RESTful APIs The acronym CRUD also appears in discussion of RESTful APIs . Each letter in the acronym may be mapped to a Hypertext Transfer Protocol (HTTP) method :
CRUD HTTP
SQL Database Replication
Concepts & Resources
- Frontend
- Backend
- cache
- Redis
- (Create Read Update Delete)
- restful vs websockets
- MVC, MVVM
- CS193P
- Ruby On Rails Blog Tutorial
- SQL - NoSQL - JSON - Blockchain Ledger
- RDS Proxy
- For homework complete Code Academy SQL Course && review in detail the Wikipedia JSON example
- Javascript Frameworks Angular, React & Vue
- CSS Frameworks
- MEAN Mongo, ExpressJS, Angular & NodeJS
- Serverless
- W3schools
- Watch the Figma discussion on YouTube
ET-710 Technology Inventory
- Microsoft Office (novice working knowledge)
- Photoshop resize and color correct images (novice working knowledge)
- Figma.com - Resize and color correct images. Generate CSS for inclusion in web apps. General Layout (novice working knowledge)
- Markdown (novice working knowledge)
- HUGO (exposure)
- HTML (novice working knowledge)
- CSS (novice working knowledge)
- CSS Frameworks (exposure)
- W3.CSS (exposure)
- Javascript Frameworks (exposure)
- Angular (exposure) Use Angular components and routing to organize html & CSS for pages and menus.
- TypeScript (exposure)
- Cloud9 IDE (build an Angular Web App)
- Stackblitz (build an Angular Web App)
- Amplify (exposure)
- RESTful Verbs (exposure)
- CRUD (exposure)
- Web sockets (exposure)
- GraphQL (exposure)
- S3 - Static Web App Hosting
- RDS - (exposure)
- API Gateway (exposure)
- Lambda (exposure)
- DynamoDB (exposure)
- Persistent Storage (exposure)
- Static Website (novice working knowledge)
The following examples of content were created using AI (ChatGPT)
Lunar Landing
On July 20th, 1969, the Apollo 11 mission successfully achieved the first lunar landing. This historic event marked the first time humans set foot on another celestial body.
The Mission
The Apollo 11 mission was the fifth manned mission in the Apollo program and the first to land on the moon. The mission was crewed by Commander Neil Armstrong, Command Module Pilot Michael Collins, and Lunar Module Pilot Edwin “Buzz” Aldrin.
The Journey
The journey to the moon took three days, with the spacecraft orbiting the moon before the Lunar Module carrying Armstrong and Aldrin landed on the lunar surface. Armstrong famously said, “That’s one small step for man, one giant leap for mankind,” as he became the first person to step onto the moon.
The Legacy
The lunar landing was a major milestone in human history and a triumph of technology and engineering. It demonstrated the capabilities of the United States and inspired a new era of exploration and discovery. Today, the Apollo 11 mission is remembered as one of the greatest achievements in human history.
ET-710
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
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
Chapter 1: 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.
Chapter 2: 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.
Chapter 3: 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.
Chapter 4: 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.
Chapter 5: 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.
Chapter 9: 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.
Chapter 11: 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.