LogoLogo
Official WebsiteClass RecordingsSchedules & EventsHomework
  • Welcome to MigraCode Barcelona
  • General Information
    • Code of conduct
    • Experiences
    • Copyright
  • Student support
    • 🙋Student Services
      • Volunteer Support
      • CodeBuddies
      • CodeWomen
      • Language Support
        • Language Lab
        • Oxford House
      • Psychological Support
      • Legal Support
      • Study space
    • 💼Finding a job
      • Self-branding
        • LinkedIn profile
        • GitHub profile
        • Self-developed profile
      • Online networking
      • Events & job fairs
  • COURSES
    • 🎧IT Support & Security Course
      • Structure
      • Course content
      • Planning & Schedule
      • Application process
        • Home assignment
    • 🎧IT Automation with Python Course
      • Structure
      • Course content
      • Planning & Schedule
      • Application process
        • Home assignment
    • 💻Web Development Course
      • Pre-Courses
      • Main Tools & Software
      • Slack Information
      • Grading System
      • Homework
      • Course content
        • Introduction
          • 1 - Dev Tools and command line
          • 2 - Git and Github
          • Git and GitHub Practice Session
        • HTML/CSS
          • 1 - Semantic HTML and CSS
          • 2 - Responsive Web and Layout
          • 3 - Bootstrap
        • JavaScript I
          • 1 - Hello Javascript
          • 2 - Expressions and loops
          • 3 - Arrays and callbacks
        • JavaScript II
        • JavaScript III
          • 1 - Good practices and debugging
          • 2 - APIs and fetch
          • 3 - Project
        • React
          • 1 - React 101
          • 2 - Reacting to changes
          • 3 - Fetching Data
          • Extra Materials
            • Class components
            • Routing
        • Node.js
          • 1 - Node and Express 101
          • 2 - APIs in Node
          • 3 - Workshop
        • Databases
          • 1 - Introduction to SQL
          • 2 - SQL with Node
          • 3 - CRUD with SQL and Node
        • Final Projects
          • Call for project ideas
          • List of projects
          • Planning and Calendar
          • How to start coding
          • Methodology
          • Team meetings
        • Professional Skills
          • Module 1: Soft Skills
          • Module 2: Employability
          • Module 3: Working in projects
    • 💾Advanced JS & ASP.NET course
      • Admission assignment
      • Self Study Prerequisites
        • Index
      • Course content
        • Index
  • Technical Guides
    • How to install course tools
    • Introduction to GIT
    • Trello in Scrum
    • Heroku Deployment
    • Git on Teams
  • Useful links
    • Official website of MigraCode Barcelona
    • Our Homework Trello board
    • Class Recordings
    • Schedules and Events
Powered by GitBook
On this page
  • HTML/CSS Frameworks
  • Bootstrap 4
  • Assignment
  • Personal Website Project
  • Resources

Was this helpful?

Export as PDF
  1. COURSES
  2. Web Development Course
  3. Course content
  4. HTML/CSS

3 - Bootstrap

Previous2 - Responsive Web and LayoutNextJavaScript I

Last updated 3 years ago

Was this helpful?

HTML/CSS Frameworks

A design framework is a collection of re-usable code snippets which you can use to build a website. It is sometimes called a "design system", "style guide", or "pattern library", and will usually consist of three things:

  1. Brand guidelines define the appropriate typography, colors and logos to use.

  2. Components define re-usable code snippets for common requirements, like navigation menus.

  3. Helpers define additional code tools to construct the site, like layout grids.

The main goals of a design framework are to ensure design consistency and avoid writing the same code twice.

Bootstrap 4

is CSS and JavaScript code that we . Bootstrap's documentation describes how to write HTML code that fits the Bootstrap components, including a as well as several .

Exercise (15 minutes)

Fork and follow the instructions in the to create a new page and add a card component to it.

Assignment

Note: Ignore any ads, icons, and interactive elements (which use Javascript). If you really want to grab icons, try taking a screenshot of them and making an image file out of that.

  1. Go to and have a look around.

  2. Set up a GitHub repository for this project.

  3. Create a new HTML document.

  4. Think about all the elements on the page and how they are grouped together.

  5. Add Bootstrap to your project by following the instructions at . Use the examples on that page as templates for how to organize your page.

  6. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and which are positioned by using the appropriate Bootstrap classes.

  7. Set up the top title and navigation bar.

  8. Work your way down the page by filling in and positioning the additional sections.

  9. Try resizing the browser to see if it mimics the behavior of the real Newsweek homepage.

  10. Push your solution to GitHub.

Personal Website Project

Over the last two weeks, you've been building personal websites as part of your homework. Now we want you to take those websites and apply the knowledge you've learned to make them as good as you can. Some ideas:

  • Use re-usable class names to reduce your CSS code.

  • Add a second page and link to it from your first page.

  • Try to style the first article differently so that it stands out from the rest.

By the end, you should have created a repository for your site on GitHub with all the commits you've made.

Resources

Add to your site and use some of the components.

to find and fix problems.

at Marksheet.io

at ShayHowe.com

💻
Bootstrap
load in our HTML pages
grid layout
components
this repository
readme
newsweek.com
GetBootstrap.com
Bootstrap 4
Validate your HTML code
HTML Forms
Building Forms
Bootstrap 4 Documentation