Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Creating the basic Angular structure for our Cooking Helper

via CodeSignal

Go to class Write review

Overview

Set up the core HTML structure for the app using Angular, and create a custom-styled 404 page to handle missing routes gracefully.

Syllabus

  • Unit 1: Building a Layout Component
    • Importing Routing Modules in Angular
    • Building the Header Navigation Section
    • Adding the Main Content Area
    • Adding a Footer to the Layout
    • Adding Dynamic Year to Footer
  • Unit 2: Styling with Angular Components
    • Resetting Browser Styles in Angular
    • Setting the HTML Height Foundation
    • Styling the Body Element Foundation
    • Configuring Angular Root Component Layout
    • Creating a Centered Content Container
    • Configuring Header and Main Layout
    • Styling the Navigation Bar Component
    • Styling the Footer Component
  • Unit 3: Custom 404 Error Page
    • Configure Wildcard Route for Error Handling
    • Adding Error Messages to Template
    • Adding Navigation Link to Error Page
  • Unit 4: Styling the 404 Page
    • Centering Content on Error Pages
    • Styling the Error Page Heading
    • Styling the Error Message Text
    • Styling the Back Home Button
    • Adding Hover Effects to Buttons

Reviews

Start your review of Creating the basic Angular structure for our Cooking Helper

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.