intern_onepage_ui_learn_portal.md - brainchildservices/curriculum GitHub Wiki

Slide 1

Learning Portal

  • Bootstrap
  • Prerequisites
    • Before starting, there are some skills you’ll have to know in order to learn and use the Bootstrap framework:
      • HTML fundamentals
      • basic knowledge of CSS
      • and some basic JQuery

Slide 2

Table of Contents

We will cover the topics below while building the website:

  1. Downloading and installing Bootstrap 4
  2. The new features of Bootstrap 4
  3. Bootstrap Grid system
    • Align your contents in equal columns.
    • Make the contents responsive.
    • Make sure to use containers and responsive breakpoints.(required when using default grid system)

Slide 3

  1. Navbar
    • Change the color of navbar.
    • Menu text font family should be ______.
    • Increase/decrease Menu text size.
    • Add given logo to the left end of the navbar.
    • Increase / decrease navbar padding.
    • Add a dropdown menu button.

Slide 4

  1. Header
    • Fix the header text font family to ________.
    • Change the header text size .
    • Change the header text alignment.

Slide 5

  1. Buttons
    • Change button color.
    • Change button size.
    • Add hovering effects to button.
    • Add button links to access videos.

Slide 6

  1. About Section
    • Change details according to the requirements.
  2. Courses Section
    • Add details according to the requirements.
  3. Cards
    • Add image in card
    • Give round borders to your card image
    • Change color and size of your card text.

Slide 7

  1. Our Facilitators Section
    • Add user images for Facilitator.
    • Change text styling for the Facilitator cards.
  2. Contact Form
    • Change placeholder text.
    • Add required status to each input of contact form
  3. Fonts

Slide 8

  1. Footer
    • Add social media icons in footer section with blank(#) link.
    • Add links according to the requirement.
  2. Scroll Effect
  3. Wrap-up and Conclusion

Slide 9

  1. UI outcome of your work should be similar to the below given UI requirement
    • Header part
    • About section
    • Courses section
    • Our Facilitators and Contact form