Do you need a portfolio website?
You can create it for free in a minute with this great app.
No signup needed.
https://devcover.me/
You can create it for free in a minute with this great app.
No signup needed.
https://devcover.me/
Forwarded from Learn Web Development
These 13 web development code snippet websites can save you a lot of time
1️⃣ W3 Schools How to
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS and JavaScript
🔗 https://www.w3schools.com/howto/default.asp
2️⃣ Code My UI
- Handpicked collection of Web Design & UI Inspiration with Code Snippets.
🔗 https://codemyui.com/
3️⃣ Creatives Feed
- CreativesFeed works to share the best free code snippets and web development resources online.
🔗 https://creativesfeed.com/topics/code-snippets/
4️⃣ CSS Deck
- Collection of Awesome CSS and JS Creations to help out frontend developers and designers.
🔗 https://cssdeck.com
5️⃣ 30 Seconds of Code
- Short code snippets for all your development needs
🔗 https://www.30secondsofcode.org/
6️⃣ Design Seer
- Everything related to jquery, css3, html5 goes here. Get snippets for your website for free.
🔗 https://designseer.com/category/coding/
7️⃣ Free Front-end
- Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles.
🔗 https://freefrontend.com/
8️⃣ By People
- A collection of useful CSS and JavaScript snippets from around the web that might come in handy.
🔗 https://www.bypeople.com/code-snippets/
9️⃣ JavaScript Source
- Search thousands of free JavaScript snippets that you can quickly copy and paste into your web pages.
🔗 https://javascriptsource.com/
🔟 Little Snippets
- A free collection of HTML and CSS code snippets
🔗 https://www.littlesnippets.net/
1️⃣1️⃣ Bootsnipp
- Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework
🔗 https://bootsnipp.com/
1️⃣2️⃣ Web Designer Wall
- Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework
🔗 https://webdesignerwall.com/
1️⃣3️⃣ CSS Tricks
- A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
🔗 https://css-tricks.com/snippets/
1️⃣ W3 Schools How to
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS and JavaScript
🔗 https://www.w3schools.com/howto/default.asp
2️⃣ Code My UI
- Handpicked collection of Web Design & UI Inspiration with Code Snippets.
🔗 https://codemyui.com/
3️⃣ Creatives Feed
- CreativesFeed works to share the best free code snippets and web development resources online.
🔗 https://creativesfeed.com/topics/code-snippets/
4️⃣ CSS Deck
- Collection of Awesome CSS and JS Creations to help out frontend developers and designers.
🔗 https://cssdeck.com
5️⃣ 30 Seconds of Code
- Short code snippets for all your development needs
🔗 https://www.30secondsofcode.org/
6️⃣ Design Seer
- Everything related to jquery, css3, html5 goes here. Get snippets for your website for free.
🔗 https://designseer.com/category/coding/
7️⃣ Free Front-end
- Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles.
🔗 https://freefrontend.com/
8️⃣ By People
- A collection of useful CSS and JavaScript snippets from around the web that might come in handy.
🔗 https://www.bypeople.com/code-snippets/
9️⃣ JavaScript Source
- Search thousands of free JavaScript snippets that you can quickly copy and paste into your web pages.
🔗 https://javascriptsource.com/
🔟 Little Snippets
- A free collection of HTML and CSS code snippets
🔗 https://www.littlesnippets.net/
1️⃣1️⃣ Bootsnipp
- Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework
🔗 https://bootsnipp.com/
1️⃣2️⃣ Web Designer Wall
- Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework
🔗 https://webdesignerwall.com/
1️⃣3️⃣ CSS Tricks
- A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
🔗 https://css-tricks.com/snippets/
Forwarded from Programming World👨💻
🔥 AWS Collection Books 2021 🔥
List :
AWS Certified Cloud Practitioner All-in-One Exam Guide (Exam CLF-C01) by Daniel Carter
AWS Certified Developer Associate All-in-One Exam Guide (Exam DVA-C01) by Kamesh Ganesan
AWS Certified Security Specialty All-in-One Exam Guide (Exam SCS-C01) by Tracy Pierce
AWS Certified Security Study Guide Specialty (SCS-C01) Exam by Marcello Zillo Neto
AWS Certified Solutions Architect Associate All-in-One Exam Guide (Exam SAA-C02) by Joyjeet Banerjee
AWS certified solutions architect associate exam guide (Exam SAA-C01) by Joyjeet Banerjee
Join here:
https://t.me/joinchat/eQrm_83P4yI0ZTU9
Join the channel and use the link below to download the material
https://t.me/c/1208184440/1896
DISCLAIMER: No Copyright Infringement Intended, All Rights Reserved to the Actual Owner.
This content has been shared under Educational And Non-Profit Purposes Only
🚨Note: Download as fast as possible might get deleted at any time
List :
AWS Certified Cloud Practitioner All-in-One Exam Guide (Exam CLF-C01) by Daniel Carter
AWS Certified Developer Associate All-in-One Exam Guide (Exam DVA-C01) by Kamesh Ganesan
AWS Certified Security Specialty All-in-One Exam Guide (Exam SCS-C01) by Tracy Pierce
AWS Certified Security Study Guide Specialty (SCS-C01) Exam by Marcello Zillo Neto
AWS Certified Solutions Architect Associate All-in-One Exam Guide (Exam SAA-C02) by Joyjeet Banerjee
AWS certified solutions architect associate exam guide (Exam SAA-C01) by Joyjeet Banerjee
Join here:
https://t.me/joinchat/eQrm_83P4yI0ZTU9
Join the channel and use the link below to download the material
https://t.me/c/1208184440/1896
DISCLAIMER: No Copyright Infringement Intended, All Rights Reserved to the Actual Owner.
This content has been shared under Educational And Non-Profit Purposes Only
🚨Note: Download as fast as possible might get deleted at any time
Inovatik offers a lot of free HTML/CSS templates you can use for your projects.
Link: https://inovatik.com/
Link: https://inovatik.com/
Forwarded from Learn JavaScript™
Forwarded from Learn CSS™
🍻 Beercss
Open Source Css Framework based on Material Design:
Github: https://github.com/beercss/beercss
Site: www.beercss.com
Open Source Css Framework based on Material Design:
Github: https://github.com/beercss/beercss
Site: www.beercss.com
Forwarded from Learn PHP
Roadmap for becoming Back-End Developer in 2021
Learn the basics of Internet
1. How does the internet work?
2. What is HTTP & HTTPS?
3. What is Domain Name?
4. What is IP Address?
5. DNS and how it works?
6. What is hosting?
7. What is SMTP?
Basics of front-end languages
1. HTML
2. CSS
3. JavaScript
Learn a back-end language
1. PHP
2. NodeJS
3. Ruby On Rails
4. Python
5. Go
5. C#
Just learn anyone of the above language but make sure you have in-depth understanding of that language.
I will recommend NodeJs or PHP.
Learn Version Control System
1. Basic Git Commands
2. Repo hosting services
I. GitHub
II. Gitlab
III. Bitbucket
github is most popular and widely used among all of them
Learn about Relational Databases
1. MySQL
2. PostgreSQL
3. MariaDB
4. MS SQL
5. Oracle
MySQL is the most popular one.
Learn about NoSQL databases
1. MongoDB
2. RethinkDB
3. CouchDB
4. DynamoDB
NoSQL are very popular databases. Many startups are opting for NoSQL databases instead of SQL databases.
Learn About APIs
1. REST
2. JSON APIs
3. HATOAS
4. Open API Spec and Swagger
5. Authentication
6. GraphQL
Learn about caching
1. CDN (Cloud Delivery Network)
2. Server-side caching
I. Redis
II. Memcached
3. Client-side caching
Web Servers
1. Nginx
2. Apache
3. Reverse Proxy
Understand web security
1. Hashing Algorithm
I. MD5
II. SHA Family
III. Scrypt
IV. Bcrypt
2. HTTPS
3. CORS
4. SSL/TLS
Learn testing
1. Integration Testing
2. Unit Testing
3. Functional Testing
Containerization / Virtualization
1. Docker
2. Kubernetes
3. rkt
Architectural Patterns
1. Monolithic
2. Microservices
3. Serverless
4. Scaling (Horizontal & Vertical)
5. Load Balancers
Learn the basics of Internet
1. How does the internet work?
2. What is HTTP & HTTPS?
3. What is Domain Name?
4. What is IP Address?
5. DNS and how it works?
6. What is hosting?
7. What is SMTP?
Basics of front-end languages
1. HTML
2. CSS
3. JavaScript
Learn a back-end language
1. PHP
2. NodeJS
3. Ruby On Rails
4. Python
5. Go
5. C#
Just learn anyone of the above language but make sure you have in-depth understanding of that language.
I will recommend NodeJs or PHP.
Learn Version Control System
1. Basic Git Commands
2. Repo hosting services
I. GitHub
II. Gitlab
III. Bitbucket
github is most popular and widely used among all of them
Learn about Relational Databases
1. MySQL
2. PostgreSQL
3. MariaDB
4. MS SQL
5. Oracle
MySQL is the most popular one.
Learn about NoSQL databases
1. MongoDB
2. RethinkDB
3. CouchDB
4. DynamoDB
NoSQL are very popular databases. Many startups are opting for NoSQL databases instead of SQL databases.
Learn About APIs
1. REST
2. JSON APIs
3. HATOAS
4. Open API Spec and Swagger
5. Authentication
6. GraphQL
Learn about caching
1. CDN (Cloud Delivery Network)
2. Server-side caching
I. Redis
II. Memcached
3. Client-side caching
Web Servers
1. Nginx
2. Apache
3. Reverse Proxy
Understand web security
1. Hashing Algorithm
I. MD5
II. SHA Family
III. Scrypt
IV. Bcrypt
2. HTTPS
3. CORS
4. SSL/TLS
Learn testing
1. Integration Testing
2. Unit Testing
3. Functional Testing
Containerization / Virtualization
1. Docker
2. Kubernetes
3. rkt
Architectural Patterns
1. Monolithic
2. Microservices
3. Serverless
4. Scaling (Horizontal & Vertical)
5. Load Balancers
This media is not supported in your browser
VIEW IN TELEGRAM
Sketch2Code is a solution that uses AI to transform a handwritten user interface design from a picture to valid HTML markup code.
This is an open-source project by Microsoft and can be found at
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
This is an open-source project by Microsoft and can be found at
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
🔥1
Forwarded from Learn CSS™
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
https://csslayout.io/
#css #csslayout
https://csslayout.io/
#css #csslayout
Forwarded from Learn Web Development
💡Want to improve your HTML and CSS skills?💡
Well, you can do that by practicing on real design templates🔥
With Codewell, you can browse high quality Figma templates that you can use to sharpen your HTML and CSS skills.
📌https://codewell.cc
Well, you can do that by practicing on real design templates🔥
With Codewell, you can browse high quality Figma templates that you can use to sharpen your HTML and CSS skills.
📌https://codewell.cc
👍1
Forwarded from Learn CSS™
1. CSS FUNDAMENTALS 1.0
1.1 How the browser parses HTML/CSS?.
1.2 How to add CSS to a web page.
1.3 Syntax: selector, declaration block, peroperty, declared value.
1.4 Basic selectors: universal, type, class, id, attribute.
1.5 Cascade & Specificity: how to resolve conflicting CSS declarations?
1.6 Inheritance..
2. CSS FUNDAMENTALS 2.0
2.1 How the box model works. Learn the different box types.
2.2 How to size CSS elements? Learn padding, margin, width, height and border properties.
2.3 How to style text?
2.4 Relative units.
2.5 CSS Variables..
3. CSS FUNDAMENTALS 3.0: LAYOUT
3.1 Learn flexbox, grid, floats.
3.2 Learn the difference between position properties: absolute, relative, fixed, static and sticky.
3.3 Practice: start building smaller layouts like navigation bars, and build up your skills
4. CSS FUNDAMENTALS 4.0: ADVANCED SELECTORS
4.1 Grouping selector: selector list.
4.2 Combinator selectors: descendant, child, general sibling, adjacent sibling, column.
4.3 Pseudo selectors: pseudo classes, pseudo elements.
5. CSS INTERMEDIATE: TRANSITIONS & ANIMATIONS
5.1 Learn transition properties.
5.2 How to apply transitions in pseudo classes.
5.3 Learn from examples.
5.4 Build basic animations (e.g. change bg color on hover, add styles to input when focus etc.)
5.5 Learn transform property.
6. CSS INTERMEDIATE: MEDIA QUERIES
6.1 Learn the media types.
6.2 Understand min-width & max-width.
6.3 Learn Mobile first approach.
6.4 How to find and set screen breakpoints.
6.5 Practice: Create a responsive navigation.
7. CSS ADVANCED: PREPROCESSORS - SASS
7.1 Variables.
7.2 Nesting.
7.3 Partials.
7.4 Mixins.
7.5 Imports.
7.6 Operators.
7.7 Functions.
8. CSS ADVANCED: METHODOLOGIES - BEM
8.1 Learn why you should consider BEM
8.2 Learn what is a block, element and modifier.
9. CSS ADVANCED: ARCHITECTURE
9.1 Learn 7-1 architecture.
• Abstracts.
• Vendors.
• Base.
• Layouts.
• Components.
• Pages.
• Themes.
10. CSS FRAMEWORKS:
10.1 Tailwind CSS
10.2 Bootstrap
1.1 How the browser parses HTML/CSS?.
1.2 How to add CSS to a web page.
1.3 Syntax: selector, declaration block, peroperty, declared value.
1.4 Basic selectors: universal, type, class, id, attribute.
1.5 Cascade & Specificity: how to resolve conflicting CSS declarations?
1.6 Inheritance..
2. CSS FUNDAMENTALS 2.0
2.1 How the box model works. Learn the different box types.
2.2 How to size CSS elements? Learn padding, margin, width, height and border properties.
2.3 How to style text?
2.4 Relative units.
2.5 CSS Variables..
3. CSS FUNDAMENTALS 3.0: LAYOUT
3.1 Learn flexbox, grid, floats.
3.2 Learn the difference between position properties: absolute, relative, fixed, static and sticky.
3.3 Practice: start building smaller layouts like navigation bars, and build up your skills
4. CSS FUNDAMENTALS 4.0: ADVANCED SELECTORS
4.1 Grouping selector: selector list.
4.2 Combinator selectors: descendant, child, general sibling, adjacent sibling, column.
4.3 Pseudo selectors: pseudo classes, pseudo elements.
5. CSS INTERMEDIATE: TRANSITIONS & ANIMATIONS
5.1 Learn transition properties.
5.2 How to apply transitions in pseudo classes.
5.3 Learn from examples.
5.4 Build basic animations (e.g. change bg color on hover, add styles to input when focus etc.)
5.5 Learn transform property.
6. CSS INTERMEDIATE: MEDIA QUERIES
6.1 Learn the media types.
6.2 Understand min-width & max-width.
6.3 Learn Mobile first approach.
6.4 How to find and set screen breakpoints.
6.5 Practice: Create a responsive navigation.
7. CSS ADVANCED: PREPROCESSORS - SASS
7.1 Variables.
7.2 Nesting.
7.3 Partials.
7.4 Mixins.
7.5 Imports.
7.6 Operators.
7.7 Functions.
8. CSS ADVANCED: METHODOLOGIES - BEM
8.1 Learn why you should consider BEM
8.2 Learn what is a block, element and modifier.
9. CSS ADVANCED: ARCHITECTURE
9.1 Learn 7-1 architecture.
• Abstracts.
• Vendors.
• Base.
• Layouts.
• Components.
• Pages.
• Themes.
10. CSS FRAMEWORKS:
10.1 Tailwind CSS
10.2 Bootstrap
Learn Html
HTML ROADMAP
HTML ROADMAP 👇👇
1. FUNDAMENTALS
1.1 How the browser parses HTML files.
1.2 Syntax of an HTML element: open and closing tag, element name, attributes, content.
1.3 Learn the structure of an HTML document, <html> <head> <title> & <body> elements.
1.4 Learn document meta data: <base>, <link>, <meta>, <style> elements.
2. SEMANTIC HTML: SECTIONS
Learn the purpose of the following elements:
21 <body>
2.2 <article>
2.3 <section>
24 <nav>
2.5 <aside>
2.6 <h1...h6>
2.7 <header>
2.8 <footer>
2.9 <address>
3. SEMANTIC HTML: GROUPING ELEMENTS
3.0 Learn the purpose of the following elements:
3.1 <main>
3.2 <div>
3.3 <p>
3.4 <hr>
1.5 <ul><ol><li><dl> <dt> <dd>
3.6 <figure>
3.7 <figcaption>
3.8 <pre>
4. SEMANTIC HTML: TEXT LEVEL
4.0 Learn the purpose of the following elements:
4.1 <a>
4.2 <em>
4.3 <strong>
4.4 <time>
4.5 <code>
4.6 <span>
4.7 <br>
4.8 <abbr>
5. LINKS
5.1 Learn href property.
5.2 Learn target property and the difference between possible values.
5.3 Difference between absolute and relative urls.
5.4 Learn how to use the download and rel attribute.
5.5 Learn how to navigate to a specific part of the page.
6. IMAGES
6.1 How to embed an image using the src attribute.
6.2 Learn the supported image formats.
6.3 Learn the importance of the alt attribute.
6.4 How to use the loading attribute to lazy load images.
6.5 How to size an image with the height and width properties.
6.6 Adaptive Images: the picture> and <source> elements.
6.7 Adaptive Images: the srcset attribute for <img> and <source> elements.
7. BASIC FORM ELEMENTS
7.1 Learn the basic input types: button, checkbox, radio, date, email, file, number, password, reset, search.
7.2 How to handle the onchange event.
7.3 Learn the <label> element and how to use the for attribute, how to properly group a <label> with an <input>.
7.4 Learn the <button> element: the different type values. Learn how to handle the onclick event.
7.5 Learn the <textarea> <select>,<optgroup>, <fieldset>, <legend>.
8. FORMS
8:1 How to structure a web form.
8.2 How to configure a form to comunicate with server with attributes: action, enctypes, method, target.
8.3 How Form submission attributes work.
8.4 How to perform client side form validation.
8.5 How to make a button to submit a form
8:6 How to reset a form.
9. EVENTS: PART 1
9.1 Window events:
• onbeforeunload
• onload
• onunload
• onresize
9.2 Keyboard events:
• onkeydown
• onkeypress
• onkeyup
9.3 Mouse events:
• onclick
• ondbclick
• onmousedown
• onmousemove
• onmouseout
10. EVENTS: PART 2
10.0 Common global events:
• onchange
• onclick
• onclose
• onresize
• onsubmit
11. THE WINDOW OBJECT
11.1 How to get inner height and width values.
11.2 Learn pageXOffset and pageYOffset properties.
11.3 Learn setinterval, setTimeout, clearinterval, clearTimeout methods.
11.4 Learn scrollTo method.
11.5 Learn the window.location object.
12. WEB APIS & INTERFACES
12.1 Web storage: Local storage, session storage.
12.2 URLSeachParams interface.
12.3 Geolocation API
12.4 ResizeObserver Api.
12.5 Drag and drop API.
12.6 History API.
12.7 Intersection Observer API.
12.8 Fetch API.
12.9 Web notifications.
1. FUNDAMENTALS
1.1 How the browser parses HTML files.
1.2 Syntax of an HTML element: open and closing tag, element name, attributes, content.
1.3 Learn the structure of an HTML document, <html> <head> <title> & <body> elements.
1.4 Learn document meta data: <base>, <link>, <meta>, <style> elements.
2. SEMANTIC HTML: SECTIONS
Learn the purpose of the following elements:
21 <body>
2.2 <article>
2.3 <section>
24 <nav>
2.5 <aside>
2.6 <h1...h6>
2.7 <header>
2.8 <footer>
2.9 <address>
3. SEMANTIC HTML: GROUPING ELEMENTS
3.0 Learn the purpose of the following elements:
3.1 <main>
3.2 <div>
3.3 <p>
3.4 <hr>
1.5 <ul><ol><li><dl> <dt> <dd>
3.6 <figure>
3.7 <figcaption>
3.8 <pre>
4. SEMANTIC HTML: TEXT LEVEL
4.0 Learn the purpose of the following elements:
4.1 <a>
4.2 <em>
4.3 <strong>
4.4 <time>
4.5 <code>
4.6 <span>
4.7 <br>
4.8 <abbr>
5. LINKS
5.1 Learn href property.
5.2 Learn target property and the difference between possible values.
5.3 Difference between absolute and relative urls.
5.4 Learn how to use the download and rel attribute.
5.5 Learn how to navigate to a specific part of the page.
6. IMAGES
6.1 How to embed an image using the src attribute.
6.2 Learn the supported image formats.
6.3 Learn the importance of the alt attribute.
6.4 How to use the loading attribute to lazy load images.
6.5 How to size an image with the height and width properties.
6.6 Adaptive Images: the picture> and <source> elements.
6.7 Adaptive Images: the srcset attribute for <img> and <source> elements.
7. BASIC FORM ELEMENTS
7.1 Learn the basic input types: button, checkbox, radio, date, email, file, number, password, reset, search.
7.2 How to handle the onchange event.
7.3 Learn the <label> element and how to use the for attribute, how to properly group a <label> with an <input>.
7.4 Learn the <button> element: the different type values. Learn how to handle the onclick event.
7.5 Learn the <textarea> <select>,<optgroup>, <fieldset>, <legend>.
8. FORMS
8:1 How to structure a web form.
8.2 How to configure a form to comunicate with server with attributes: action, enctypes, method, target.
8.3 How Form submission attributes work.
8.4 How to perform client side form validation.
8.5 How to make a button to submit a form
8:6 How to reset a form.
9. EVENTS: PART 1
9.1 Window events:
• onbeforeunload
• onload
• onunload
• onresize
9.2 Keyboard events:
• onkeydown
• onkeypress
• onkeyup
9.3 Mouse events:
• onclick
• ondbclick
• onmousedown
• onmousemove
• onmouseout
10. EVENTS: PART 2
10.0 Common global events:
• onchange
• onclick
• onclose
• onresize
• onsubmit
11. THE WINDOW OBJECT
11.1 How to get inner height and width values.
11.2 Learn pageXOffset and pageYOffset properties.
11.3 Learn setinterval, setTimeout, clearinterval, clearTimeout methods.
11.4 Learn scrollTo method.
11.5 Learn the window.location object.
12. WEB APIS & INTERFACES
12.1 Web storage: Local storage, session storage.
12.2 URLSeachParams interface.
12.3 Geolocation API
12.4 ResizeObserver Api.
12.5 Drag and drop API.
12.6 History API.
12.7 Intersection Observer API.
12.8 Fetch API.
12.9 Web notifications.