KEMBAR78
RoadMap To Learning Web Developments | PDF
Scribd
Upload
6 views2 pages

RoadMap To Learning Web Developments

The document outlines a roadmap for learning web development, starting with Bootstrap for responsive design and components, followed by CSS fundamentals and advanced topics like SCSS and SASS. It emphasizes practical exercises, including styling a webpage and creating an analog clock, before moving on to JavaScript basics and DOM manipulation. The roadmap is structured to build skills progressively, ensuring a solid foundation in web development technologies.

Uploaded by

Nangyal Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views2 pages

RoadMap To Learning Web Developments

The document outlines a roadmap for learning web development, starting with Bootstrap for responsive design and components, followed by CSS fundamentals and advanced topics like SCSS and SASS. It emphasizes practical exercises, including styling a webpage and creating an analog clock, before moving on to JavaScript basics and DOM manipulation. The roadmap is structured to build skills progressively, ensuring a solid foundation in web development technologies.

Uploaded by

Nangyal Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

RoadMap to learning Web developments

1. Bootstrap: - Version 5
a. Lear how to include Bootstrap in a project locally.
b. Learn basic grid system with responsive design.
c. How to use bootstrap components like cards, Buttons, Modals.
d. How to use bootstrap predefined classes.
e. Learning bootstrap dropdown, tabs, Alerts, Navbars, Tooltip,
Popovers etc.
f. Use utilities (spacing, typography, borders).
i. Practice
1. Create a simple webpage using navbar, gridsystem and a
footer.
g. Learning material Link
2. CSS
a. Learn how to link a CSS file to HTML.
b. Lear the box model (margin, padding, border, content).
c. Learn how CSS is applied using id, selector class.
d. Study positioning (static, relative, absolute, fixed).
e. Learning Link
i. Practice
1. Style the previously created Bootstrap page with custom
CSS.
2. Add hover effects, transitions, and custom font styling.
3. SCSS
a. Learn how CSS nesting is applied
4. CSS SASS
a. Learn variables in CSS
b. Learn @import, @mixin and @extend
c. Learning Link
i. Practice
1. Convert a CSS file to SCSS.
2. Use variables for colors and fonts.
3. Create mixins for reusable styles (e.g., buttons, card
styles).
4. Use all these to already applied CSS file used above
5. CSS Advance topics
a. Learn animations and transitions using CSS
b. Leard Media queries using PURE CSS for responsiveness.
i. Practice
1. Convert the above created page to responsiveness using
media query for different layouts.
6. Major practice till here before moving to next step
a. Create an analog clock only no need to add any sort of
functionality
7. JavaScript: -
a. Learn how to include JavaScript in a webpage.
b. Learn variables, data types, and operators.
c. Learn functions, loops, and conditionals.
d. Work with the DOM (Document Object Model).
e. Handle events like click, hover, and submit.
i. Practice
1. Add functionality to above created analog to work
properly using JavaScript

You might also like