github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add resources to frontend roadmap (#2903)

Browse Source 
* Added new resource and arrange the content

* Update readme.md

* Update 101-making-layouts.md
pull/2915/head
Md Abid Hussain 2 years ago committed by GitHub
parent 66f311face
commit 5219b8c78f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
  2. 17
      content/roadmaps/100-frontend/content/102-css/readme.md

6
content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
Unescape View File

@ -6,11 +6,11 @@ Float, grid, flexbox, positioning, display and box model are some of the key top
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://cssgridgarden.com/'>Game for learning CSS Grid</BadgeLink>
<BadgeLink badgeText='Watch' href='https://cssgrid.io/'>Learn CSS Grid - Course</BadgeLink>
<BadgeLink badgeText='Watch' href='https://scrimba.com/learn/cssgrid'>Learn CSS Grid for free</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/all-about-floats/'>All about Floats</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/'>Positioning Types: How Do They Differ?</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model'>The Box Model</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/'>The CSS Display Property</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/a-guide-to-flexbox'>A Complete Guide to Flexbox</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/complete-guide-grid'>A Complete Guide to Grid</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/complete-guide-grid'>A Complete Guide to Grid</BadgeLink>
<BadgeLink badgeText='Watch' href='https://cssgrid.io/'>Learn CSS Grid - Course</BadgeLink>
<BadgeLink badgeText='Watch' href='https://scrimba.com/learn/cssgrid'>Learn CSS Grid for free</BadgeLink>

17
content/roadmaps/100-frontend/content/102-css/readme.md
Unescape View File

@ -3,17 +3,20 @@
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.theodinproject.com//'>The Odin Project</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>
<BadgeLink badgeText='Watch' href='https://youtu.be/n4R2E7O-Ngo'>CSS Complete Course</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://cssreference.io/'>cssreference.io: All CSS properties at a glance</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/css/'>Web.dev by Google — Learn CSS</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.joshwcomeau.com/'>Joshw Comeau's CSS Hack Blog Posts</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://100dayscss.com'>100 Days CSS Challenge</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/css'>CSS Tutorial | Scaler</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/css'>CSS Tutorial | Scaler</BadgeLink>

Write Preview
Loading…
Cancel
Save