Conclusion (v1)

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

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

UPDATED: 05.02.2021

Project: Design Your Own Grid-Based Framework (v1)

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!
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

UPDATED: 06.11.2020

Using CSS Preprocessors to Save Time (v1)

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

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

UPDATED: 19.02.2021

CONTRIBUTORS:

Animations, Transitions and Transforms (v1)

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

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.

Conclusion

Conclusion

As you have already noticed HTML and CSS are large topics covering lot of stuff. By now you should be more comfortable breaking down a web page into its component pieces and then coding them with HTML and CSS. In addition you have the tools necessary to build your own effective visual layout.

Having said that there are still plenty of ways to make your workflow better and more efficient. In the next lessons we will see how to make our websites more dynamic using JavaScript.

Let’s jump right into it!

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.


The archived old version of this post can be found here

UPDATED: 04.06.2021

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

Project: Design Your Own Grid-Based Framework

Introduction

In this project you will build your own simple grid-based framework. So you will get to take everything you have learned and implement it in this project. In addition we will keep it relatively open-ended to give you a chance to exercise your creativity and problem-solving skills.

This project is a great opportunity to show off your skills. Once you have done building your framework then you should be able to clone any website you want.

Assignment

Follow the instructions here.

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

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

Using CSS Preprocessors to Save Time

Introduction

Preprocessors (aka precompilers) can make your life much easier when building a website. To be more specific the preprocessors eliminate code repetition and provide all sorts of yummy time-saving and code-saving features.

Learning Objectives

  • What a preprocessor is
  • Why preprocessors rock
  • What it means that a preprocessor "compiles to CSS"
  • SASS/SCSS
  • How to use SASS to nest CSS
  • How to use SASS to work with variables in our code
  • Why we should use mix-ins with SASS
  • How to set up SASS
  • What LESS is and how it is different from SASS
  • Other preprocessors we can find 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:

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.


The archived old version of this post can be found here

UPDATED: 04.06.2021

CONTRIBUTORS:

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

Animations, Transitions and Transforms

Introduction

CSS3 offers a lot of interesting functionality in our sites. This functionality can really make our sites look special and unique. However be cautious of browser compatibility issues, since some of them aren’t supported in older browsers.

Learning Objectives

  • How to round corners of a box
  • How to add a shadow to a box
  • Animations
  • What pseudo-elements are and what they are useful for
  • Adding and customizing transitions
  • Transforming, Scaling and Rotating an Element
  • 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 one of these series of interactive screencasts at Scrimba and The Net Ninja 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.

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.

  • 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
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

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.