Problem Statement : Make your own portfolio using vanilla (i.e., no use of any libraries) HTML and CSS.
Tasks:
-
Use fonts from Google Fonts.
-
Use flexbox. If you are familiar with flexbox you can use CSS Grids
-
Add CSS based animation and transitions in your website
-
Make your website responsive.
Try to complete as many tasks as you can. Links that you can refer to are given below:
Lecture slides: http://slides.com/kps/html-css
HTML/CSS Reference: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
CSS Reference: https://tympanus.net/codrops/category/tutorials/
Flexbox Reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Grids Reference: https://css-tricks.com/snippets/css/complete-guide-grid/
CSS Media Queries: https://css-tricks.com/css-media-queries/
CSS Animations: https://robots.thoughtbot.com/css-animation-for-beginners
Google Fonts: https://fonts.google.com/
Nice read: http://stackoverflow.com/a/27704409
Frontend inspirations: https://www.awwwards.com/
Some portfolios you can refer to: