Skip to content

Latest commit

 

History

History
45 lines (27 loc) · 3.38 KB

day2.md

File metadata and controls

45 lines (27 loc) · 3.38 KB
Raw

Day 2 - CSS

CSS describes how HTML elements are to be displayed. It is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

  1. Watch this video to quickly walk through the basics: https://www.youtube.com/watch?v=yfoY53QXEnI

  2. And then attempt the hands-on exercises from W3Schools: https://www.w3schools.com/css/css_intro.asp

[Even if you don’t get to type and practice all the topics in the above link till ‘CSS Specificity’, it’s highly recommended that you atleast read the sections to understand what’s going on.]

You need not worry about by hearting any of these terms - these references at w3schools would always be available online, so the main goal is to understand all the options that are available for formatting your webpage in any particular way, so that you can make use of it anytime.

We’ll be diving straight to tasks by ourselves starting tomorrow, so go at your own pace but do make the most out of the tutorials today!

Daily Discussion - Highlights

  1. To check out: https://material.io/
  • Its a set of design guidelines by Google that most developers follow
  • What your'e doing with html and css is essentially designing.
  • If you check the site, you can see the detailed guidelines for choosing colors, spacing, fonts - all of that
  • because a good design can create a great difference - the entire reason the Apple brand took off so well is thanks to the * effort they put into design
  • and you don't have to be an artist for it either - just make sure you follow some of these rules 😅

  1. Conventions for choosing fonts: https://material.io/design/typography/the-type-system.html#applying-the-type-scale

  2. How developers choose colros for their projects: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

  3. Figma - for rapid prototyping and building quick CSS designs [Shared by Mehnaz]

  • The thing with prototyping tools usually is that, they'll produce code exactly the way you've drawn things out. So usually it doesn't work when you want a 'responsive design' - responsive design is the term used for the way the same website looks different when its displayed on the browser in your laptop vs in your mobile or tablet. But prototyping tools are getting better, so you never know
  • Figma is pretty good when it comes to exporting the design you've drawn into CSS or into other format (for eg. for android or IOS apps). Do try it out and share the results here if you do!
  • Figma is pretty good when it comes to exporting the design you've drawn into CSS or into other format (for eg. for android or IOS apps). Do try it out and share the results here if you do!
  1. Can we use only web-safe fonts in CSS?
  • Web safe fonts are preferred because they are sure to render well in any platform of your choice, regardless of the browser. Some fonts don't encode well - so its better to use web safe fonts. You can also find new fonts through Google fonts, all of which may not be web safe.
  • How to use Google Fonts in your webpage? (Here)[https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/]
  • If you use fonts taht are not web-safe, just make sure you have written a fallback system (refer w3schools for more)
  1. What is the difference between IDs and Classes?

Feedback for Day 1 & Day 2

https://forms.gle/fMUk7xbkxNEJQrbG7