Components of Professional Sites
We'll analyze the patterns we find in two landing pages that Microsoft and Apple have built to identify common UI patterns we can implement on our own.
After identifying a handful of patterns, we'll use these to learn how to implement them in Bootstrap.
When you're finished with this course you'll have a working knowledge of Bootstrap to implement in your own projects.
[00:00] The easiest way to understand what the main components of a professional looking website is to compare a couple of websites from big tech. I'm going to use Microsoft and Apple as my examples. These two companies set the industry standards for the most part when it comes to anything tech related. We'll compare the 2, note the similarities to base our website off of, and there are a [00:20] lot of similarities. Looking at microsoft.com first, it starts out with a navbar with some helpful links, a cart, profile. Below that is a large banner showing off some of their bigger or more recent products, a call to action, and a button to purchase. Below that, we see some icons that are very recognizable [00:41] and a little text to describe what each one is. Moving on, we see some cards. These are all laid out the exact same an image on top, a header, a paragraph, and a button. Below all of these cards, we see an auto scrolling carousel that stretches most of the width of our page. And, of [01:01] course, lastly, being the footer with all of its helpful links. Moving on to apple.com, we'll see again that nav bar with a lot of the same links, a large banner with an image, text, their call to action, and a button. Scrolling down, we see some cards laid out slightly different than Microsoft's [01:21] as the image is a background instead of on top of the card, but there is still that header, text or call to action, and some buttons. Then scrolling down below this, we see an auto scrolling carousel right above our footer. So we'll be following their examples to create our own professional looking website, but I'll throw in [01:41] a couple extra things to show off some of Bootstrap's popular and useful components. Our page layout from top to bottom will look like this, a navbar, a banner with an image, call to action, and a button, a section for icons, then cards, a carousel that spans the width of our page. I'll throw in a form section to show off how [02:00] Bootstrap makes forms easy. And lastly, a footer.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!