Soon to be announced…

Conclusion

HTML and CSS are actually surprisingly large topics, who would have thought? If you’ve made it this far, though, you’re more than well on your way to front end development magic. You should be significantly more comfortable breaking down a webpage into its component pieces and then coding them with HTML and CSS. You have the tools necessary to identify an effective visual layout and then bring it to fruition.

There are still plenty of ways you can make your workflow better or improve your knowledge of best practices (so don’t stop learning!), but you’ve got everything you need to build beautiful websites.

Now that you’ve finished this course, you are probably chomping at the bit for the final piece of the puzzle which will empower you to make everything dynamic… Javascript.

Luckily, that’s the next course! Onwaaaaaaard!!!

Additional Resources


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 05.02.2021

Project: Design Your Own Grid-Based Framework

Introduction

In this final project, you’ll get to take everything you’ve learned and use it to build your own simple grid-based framework. As with the other final projects, we’ll keep it relatively open-ended to give you a chance to exercise your creativity and problem-solving skills. It will be a great project to show off to potential employers as well.

Once you’re done setting up your framework, you will use it to clone any website you like.

Assignment

Follow the instructions here.

Additional Resources

  • Suggest some in the comments below!

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 06.11.2020

Using CSS Preprocessors to Save Time

Introduction

Preprocessors (aka precompilers) can make your life much easier by eliminating code repetition and providing all sorts of yummy time-saving and code-saving features.

Learning Objectives

  • What is a preprocessor?
  • Why do preprocessors rock?
  • What does it mean that a preprocessor "compiles to CSS"?
  • What is SASS/SCSS?
  • How can you use SASS to nest CSS?
  • How can you use SASS to work with variables in your code?
  • Why is it awesome to use mix-ins with SASS?
  • If you’re not using Rails, how do you set up SASS?
  • What is LESS and how is it different from SASS?
  • What other preprocessors are out there?

Study

  1. Read Introduction to CSS Preprocessors from Steven Bradley

  2. Read 6 Reasons You Should Use a Preprocessor

  3. Read Choosing the Right CSS Preprocessor from Treehouse

  4. Look over SASS’s getting started guide, which provides a brief look at its awesome features and then watch this 20-minute Sass Crash Course:

  1. A List Apart walks through specifically how you should be using SASS (lots of best practices in there) so read up and enjoy!

Additional Resources


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 19.02.2021

CONTRIBUTORS:

Animations, Transitions and Transforms

Introduction

CSS3 offers a whole lot of interesting functionality that you didn’t know about but will really help you make your sites into something special. Just be conscious of browser compatibility issues — some of these aren’t available on older browsers.

Learning Objectives

  • How do you round corners of a box?
  • How do you add a shadow to a box?
  • What interesting animations can you use in CSS3?
  • What are pseudo-elements and what are they useful for?
  • Adding and customizing transitions
  • Transforming, Scaling and Rotating an Element
  • Learn how to use CSS Variables

Study

  1. Read about CSS Transitions, stop at the Javascript section.

  2. Peruse through these CSS Animated Loading Icons for some animation inspiration.

  3. Glance at canIuse, a compatibility table for various elements in CSS and HTML5.

  4. W3Schools on Border Radius

  5. W3Schools on Box Shadow

  6. W3Schools on Transforms

  7. Using ::before and ::after Pseudo-Elements and a bunch of cool things they can be used for

  8. MDN Web Docs on Animation

Interactive Screencasts

Watch these series of interactive screencasts at Scrimba to learn more about CSS Transitions, Transforms and Animations.

Total duration is about 2 hours, but you should add another 2 hours for practicing the concepts on your own code.

Transitions

Take at least a 15-minute break before moving to the next section.

Animations

Take at least a 15-minute break before moving to the next section.

Transforms

Resources

  • Go through the Intro to CSS 3D Transforms tutorial and learn how to create amazing 3D effects like the one below. If you like this tutorial, don’t forget to star the author’s repo here.
  • Make sure to check out this amazing Interactive Transform Viewer and play around with the different CSS transforms.
  • If you really like 3D, then this article will definitely satisfy your apetite for CSS 3D effects!

We need your contribution: can you help us improve the content and help other students also? If you decide to go through the Intro to CSS 3D Transforms tutorial, please give us your feedback. Was it hard or easy to follow? How much time did it take you to go through the tutorial? Do you have some code to share? You can leave your feedback in the comments section below. We love you! 🙂

front
right
back
left
top
bottom

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 19.02.2021

CONTRIBUTORS:

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Project: Using Bootstrap

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!
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 02.11.2020

CSS Frameworks like Bootstrap and Foundation

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

  1. Choosing Bootstrap or Foundation

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

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

Additional Resources

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.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 30.10.2020

Project: Building With Responsive Design

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!
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 02.11.2020

Responsive Design

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

  1. 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


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 03.01.2021

  • Added Tools section
  • Added short video on Media Queries

CONTRIBUTORS

Project: Design Teardown

Introduction

In this simple project, you’ll be breaking apart the website for a popular design magazine with which you’re probably familiar by now — Smashing Magazine. The goal for this exercise is to start training yourself to think in terms of visual hierarchy, typography and design principles.

Your job is to create a grayscale heat map of the website that indicates which elements have the greatest weight in the visual hierarchy. For inspiration, check out this image from vanseodesign.com which compares a site layout with no differentiation on the left to one with a thoughtful hierarchy on the right. Your final product will look much like the site on the right.

This is also an opportunity to get better at positioning <div> elements without worrying too much about what’s inside them, which will serve you well later.

Instructions

Playing with Visual Hierarchy

  1. Go to Smashing Magazine’s website and check out their homepage. Think about where your eye got drawn to first, second, and third on the page. What elements on the page carry the greatest visual weight?

  2. Think for a minute about whether or not they’ve achieved the right hierarchy for getting you to consume content on their site. What’s distracting?

  3. Set up a private Github repository for this project.

  4. Create a new HTML document.

  5. Think about all the elements on the Smashing homepage and how they are grouped together.

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

  7. Now make the background colors of those divs different shades of gray which correspond to their visual weight on the Smashing homepage. If you squint your eyes and look from your solution to their page, does your eye get drawn to the same places?

Playing with Typography

  1. Add in some meaningless text to those divs (whether copied from the homepage or a lorem ipsum generator) for the main headlines and paragraphs. You’ll obviously want to change the div backgrounds back to white for those elements. You only need to add text to the main content areas, don’t worry too much about the side areas and navigation.

  2. Change around the font styles and weights and see how that affects the visual weight and feel of the page. You should see some major differences between using serif and sans-serif fonts as well as moving from font-weight 100 to 700.

  3. Load in a few web fonts from the Google Web Fonts page you saw in the lesson on fonts to test those out too.

  4. Find a font/weight combination that approximates that of the original Smashing homepage and apply it to your solution.

  5. Push your solution to Github and Submit the URL in the Quiz below.

Additional Resources

  • Suggest some in the comments below!

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)