Topic Category: Responsive Design and CSS Frameworks

Introduction

In this project, you’ll get a chance to try out Twitter’s Bootstrap framework by building a site that actually uses it — Newsweek.

Assignment

Note: As usual, 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 newsweek.com and have a look around.

2. Set up a private 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 GetBootstrap.com. 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 and submit the repo’s URL.

Additional Resources

• Suggest some in the comments below!

UPDATED: 02.11.2020

Introduction

You’ve spent plenty of time building up a great base of knowledge of HTML and CSS and even design. But it’s still a pain in the butt to lay out everything manually and keep repeating yourself all the time when writing your code. If only there was a way to save yourself all kinds of effort…

Frameworks to the rescue! Frameworks like Twitter Bootstrap and Zurb Foundation have done all the heavy lifting of packaging up commonly used CSS code and even icons and interactions (like menu dropdowns) for you. All you have to do is understand how they expect you to lay out your site and which classes they use to designate particular batches of styles.

Frameworks let you focus more on building great sites and less on how they are actually coded up on the front end. They are great for learning and great for rapidly producing sites. Once you’ve taken a tour through Bootstrap, you’ll start looking at every site you see (especially startup ones) and notice an awful lot of similarities… one of the downsides of the frameworks.

Learning Objectives

• What are CSS frameworks?
• How do frameworks actually work?
• How do you interact with the framework to get the look you want?
• What is Twitter Bootstrap?
• What is Zurb Foundation?
• What is TailwindCSS?
• What other frameworks can you find out there?
• What are the disadvantages of using frameworks?

Study

1. Read From A List Apart, Frameworks for Designers

2. Read From A List Apart, Building Twitter Bootstrap

3. Watch this next video on Bootstrap 5 and learn all about the framework and its practical uses:

Duration: 85 minutes

4. Choosing Bootstrap or Foundation

5. Browse through Getting Started with Foundation for an idea of how that framework operates. Observe the similarities and differences between that and Bootstrap.

6. Take a brief look at TailwindCSS for a more unique and modern approach to CSS frameworks.

Additional Resources

• Bootstrap 4 Grid System

• If you’re used to using Bootstrap 3, here’s what changed in version 4

• Bootstrap Docs

• Foundation Docs

• TailwindCSS Docs

Exercise

Download this HTML template and try to make it look like the screenshot below, just by using Bootstrap 5 classes.

Once finished, upload the code in a private GitHub repository named sha-quiz-css-bootstrap5 and submit the URL in the Quiz below.

UPDATED: 30.10.2020

• 30.10.2020: Added Bootstrap 5 Tutorial – Crash Course for beginners in 1.5h (Oct 2020)
• 30.10.2020: Added Bootstrap 5 Quiz

Introduction

In this project, you’ll get the chance to build a responsive website. We’ll be cloning The Next Web, a tech-focused magazine which uses media queries to gracefully degrade their site as the window size is reduced.

The process will be quite similar to what we’ve done before. At this point, you should be much faster at setting up a site layout and positioning the elements than when you first started.

Assignment

As usual, don’t worry about the small stuff like sharing buttons or comments or javascript-enabled widgets like the endless scroll feature.

1. Visit The Next Web and poke around their home page. Play with changing the window width and see how the site changes (for instance when the sidebar gets hidden).

2. Set up a private Github repository for this project and add your instructor(s) as collaborator(s).

3. Create a new HTML document.

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

5. Try to discover which browser widths are "breakpoints" where element properties change (e.g. the sidebar disappearing). Make a plan for which elements need to be modified at which widths.

6. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned. You may want to make their background colors different so you can see them. Don’t forget to use your browser’s developer tools (right click on the page, click "inspect element")!

7. Now — before you’ve filled in any of these divs — add in the media queries and positioning/floating attributes that are needed to make them rearrange as necessary when the browser changes sizes.

8. Once you’ve got the page layout performing as it should, fill in the divs and style them to look like the original homepage. Don’t get lost in the details — it’s okay if it isn’t exact.

9. Double check that all the elements still behave just like the original when the browser size is changed.

10. Push your solution to Github.

Additional Resources

• Suggest some in the comments below!

UPDATED: 02.11.2020

Introduction

Responsive design is creating websites that respond to the user’s context, whether that is the device they are viewing on, the size of their browser, or their accessibility needs. Lucky for you, there are lots of good tools that help you easily start making websites responsive. It’s not rocket science to do a pretty good job at a responsive site, though it’s a lot more work to get one that really nails it.

Duration: 2 minutes

Learning Objectives

• What is responsive design?
• Why is responsive design important to your users?
• How do you make a "fluid" layout?
• What are Media Queries?
• How do you use media queries to make your website responsive?

Study

1. Read A List Apart’s comprehensive introduction to responsive design

2. Watch the next short video and get a quick overview of the very important CSS media queries:

Duration: 7 minutes

3. Read over the Responsive Web Tutorial from Lingulo, though you don’t have to build it.

Tools

Here is a list of tools that you might want to bookmark, as they will help you in your journey through the world of responsive design:

• Viewport Dimensions. Find your phone screen dimensions in a handy list of viewport sizes by device.

Additional Resources

• Responsive Grids Tutorial from TutsPlus

• Responsive Navigation Patterns from Brad Frost

• Techniques for Gracefully Degrading Media Queries

• Best Practices of Responsive Web Design

• An approach to Responsive design by Kevin Powell

• CSS Media Queries (Duration: 6 minutes)

UPDATED: 03.01.2021

• Added Tools section
• Added short video on Media Queries

CONTRIBUTORS

• Oleg Vintoniuk for suggesting the ViewPort Size by Device link.

Introduction

In this project, you’ll get a chance to try out Twitter’s Bootstrap framework by building a site that actually uses it — Newsweek.

Assignment

As usual, 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 newsweek.com and have a look around.

2. Set up a private 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 GetBootstrap.com. 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 and submit the repo’s URL.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

• Suggest some in the comments below!

The archived old version of this post can be found here

UPDATED: 04.06.2021

Introduction

Up until now you have learned an amount of stuff in HTML, CSS and even design. However when you want to build something you still have to lay out everything manually and keep repeating yourself when writing your code.

Frameworks are here to save yourself all this effort. To be more specific frameworks like Twitter Bootstrap and Zurb Foundation have done all the work of packaging up commonly used CSS code and even icons and interactions (like menu dropdowns) for you.

So all you have to do is understand how they expect you to lay out your site and which classes they use to designate particular batches of styles. Frameworks are great for learning and great for rapidly producing sites. One of the downsides of the frameworks is that when you start looking at every site you see you will notice a lot of similarities.

Learning Objectives

• What CSS frameworks are
• How frameworks actually work
• How to interact with the framework to get the look you want
• Twitter Bootstrap
• Zurb Foundation
• TailwindCSS
• Other frameworks we can find out there
• The disadvantages of using frameworks

Study

1. Read From A List Apart, Frameworks for Designers

2. Read From A List Apart, Building Twitter Bootstrap

3. Watch this next video on Bootstrap 5 and learn all about the framework and its practical uses:

Duration: 85 minutes

4. Choosing Bootstrap or Foundation

5. Browse through Getting Started with Foundation. Observe the similarities and differences between that and Bootstrap.

6. Take a brief look at TailwindCSS for a more unique and modern approach to CSS frameworks.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

• Bootstrap 4 Grid System

• If you’re used to using Bootstrap 3, here’s what changed in version 4

• Bootstrap Docs

• Foundation Docs

• TailwindCSS Docs

Exercise

Download this HTML template and try to make it look like the screenshot below, just by using Bootstrap 5 classes.

Once finished, upload the code in a private GitHub repository named sha-quiz-css-bootstrap5 and submit the URL in the Quiz below.

The archived old version of this post can be found here

UPDATED: 04.06.2021

• 30.10.2020: Added Bootstrap 5 Tutorial – Crash Course for beginners in 1.5h (Oct 2020)
• 30.10.2020: Added Bootstrap 5 Quiz

Introduction

In this project you will build a responsive website. To be more specific, you will clone The Next Web, which uses media queries to gracefully degrade their site as the window size is reduced.

Don’t worry since the process will be quite similar to what we have done before.

Assignment

As usual, don’t worry about sharing buttons or comments or javascript-enabled widgets like the endless scroll feature.

1. Visit The Next Web and poke around their home page. Play with changing the window width and see how the site changes (for instance when the sidebar gets hidden).

2. Set up a private Github repository for this project and add your instructor(s) as collaborator(s).

3. Create a new HTML document.

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

5. Try to discover which browser widths are "breakpoints" where element properties change (e.g. the sidebar disappearing). Make a plan for which elements need to be modified at which widths.

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

7. Add in the media queries and positioning/floating attributes that are needed to make them rearrange as necessary when the browser changes sizes.

8. Fill in the divs and style them to look like the original homepage.

9. Double check that all the elements still behave just like the original when the browser size is changed.

10. Push your solution to Github.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

• Suggest some in the comments below!

The archived old version of this post can be found here

UPDATED: 02.11.2020

Introduction

Responsive design is creating websites that respond to the user’s context. In other words, the website should be fully functional in different devices and screen sizes. Furthermore responsive design means creating a website that also covers the user’s accessibility needs.

There are a lot of good tools that help web developers to make responsive websites. Although it isn’t a rocket science to do a pretty good job at a responsive site, it takes a lot more work to do in order to nail it.

Duration: 2 minutes

Learning Objectives

• What responsive design is
• Why responsive design is important to our users
• How to make a "fluid" layout
• What Media Queries are
• How to use media queries to make our website responsive

Study

1. Read A List Apart’s comprehensive introduction to responsive design

2. Watch the next short video and get a quick overview of the very important CSS media queries:

Duration: 7 minutes

3. Read over the Responsive Web Tutorial from freecodecamp.

Tools

Here is a list of tools that you might want to bookmark, as they will help you in your journey through the world of responsive design:

• Viewport Dimensions. Find your phone screen dimensions in a handy list of viewport sizes by device.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

• Responsive Grids Tutorial from TutsPlus

• Responsive Navigation Patterns from Brad Frost

• Techniques for Gracefully Degrading Media Queries

• Best Practices of Responsive Web Design

• An approach to Responsive design by Kevin Powell

• CSS Media Queries (Duration: 6 minutes)

The archived old version of this post can be found here

UPDATED: 04.06.2021

• Added Tools section
• Added short video on Media Queries

CONTRIBUTORS

• Oleg Vintoniuk for suggesting the ViewPort Size by Device link.