This is an initiation which is for first year students who wish to learn Frontend Web Development with a proper roadmap, resources, practical experience, and guidance/mentorship.
Name : Syed Miran Hussain
Mobile Number : 8374874731
LinkedIn : LinkedIn
Email : miranrocks31@gmail.com
Name : Mohammed Ufraan
Mobile Number : 8125709785
LinkedIn : LinkedIn
Email : kurosen930@gmail.com
HTML - HTML stands for Hypertext Markup Language and is used to structure content on the web. Uses Tags for creating content in web page.
-
Videos :
HTML Tutorial - Code with Harry (Hindi)
Learn HTML - freecodecamp.org (English)
HTML CSS Projects - freecodecamp.org (English) -
Others :
freecodecamp.org
HTML Handbook by freecodecamp.org
HTML Tutorial by W3 Schools
Interactive HTML Tutorial
Basics of CSS - Cascading Style Sheets and is used to style web pages. It is a stylesheet language that is used to style the structure written in HTML. Using HTML Selectors.
Resources :
-
Videos :
HTML & CSS - Begginer to Pro
Latest CSS Tutorial - freecodecamp.org (English)
CSS With Notes - Code with harry (Hindi)
CSS Project - freecodecamp.org (English) -
Other Sources :
freecodecamp.org
cssbattle.dev -
Projects Reference :
Recipe Website Using HTML, CSS - freecodecamp.org (English) -
Chrome Extensions :
Fonts Ninja - Identify fonts from any website.
Colorzilla - With Colorzilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.
Also, Use browser's in-built dev tools for more easiness and debugging the code and style you have written.
Advance CSS Concepts - Advanced topics in CSS covers about Responsive Layouts, Animations, Transitions and many more which are really usefull in developing a better UI to your next website.
Resources :
-
Videos : CSS Flexbox - Code with harry (Hindi)
CSS Grid - Code with harry (Hindi)
CSS Flexbox - freecodecamp.org (English)
10 Pro Tips of CSS - Fireship -
Websites 100dayscss.com
NOTE : Project-based learning is best learning. So, learn while doing projects. When you're starting you can take reference to others work. But later on try yourself and enhance yourself.
As of now you have some knowledge of HTML, CSS. Start building projects. Initially you can take video references but later try to make your own projects and show case them with your fellow developers and take inputs from them and try to implement them by your next projects.
Some HTML & CSS Projects Ideas:
- Web Design Certification - freecodecamp.org - This is a completly free certification course. Here, you needed to build 5 projects each by learning them. Finally you will receive a certificate by completing 5 projects.
- Frontendmentor.io - Provides you complete design pack of the website you have to built. Try to convert design to your development code and submit to them.
- Try to clone some websites, like :
- A basic landing page: This could include a header, a hero image or banner, some sections to highlight features or products, and a footer. You could use HTML to structure the content and CSS to style it.
- A portfolio website: This could showcase your work and projects, and include an about section, a contact form, and links to your social media profiles. You could use HTML to structure the content and CSS to style it and add transitions and animations.
Now, you have basic understanding of how to structure elements in web browser and styling them using HTML & CSS. Now it's time for Javascript (JS).
Javascript - JavaScript is an object-oriented language that is commonly used in web development to create dynamic and interactive websites. It is often used alongside HTML and CSS to build web pages and web applications.
Javascript is very popular programming language that it is used in various domains. And many developers fav language.
Must Known :
- Basic syntax and control structures: This includes understanding how to write basic JavaScript code and how to use control structures such as loops and conditional statements.
- Document Object Model (DOM): The DOM is a tree-like structure that represents the structure of a web page. JavaScript allows you to manipulate the DOM to add, delete, and modify elements on a web page. jQuery - makes it easier for DOM manipulations.
- Handling events: JavaScript can be used to respond to user actions such as clicking a button or hovering over an element on a web page.
- Making HTTP requests: JavaScript can be used to make HTTP requests to retrieve data from a server or to send data to a server.
ECMAScript 6 (also known as ECMAScript 2015 or ES6) is the sixth major version of the ECMAScript language, which is the standardized version of JavaScript.
Some of the main features of ES6 include :
- Arrow functions: A new syntax for defining functions that is shorter and easier to read than the traditional function keyword.
- Classes: A new syntax for defining object-oriented classes in JavaScript.
- Modules: A new way to organize and reuse code in JavaScript, which allows you to import and export functions and variables from one module to another.
- Promises: A new way to handle asynchronous code in JavaScript, which makes it easier to write code that works with async/await.
- Template literals: A new syntax for defining strings that allows you to easily include variables and expressions within a string.
- Destructuring: A new syntax for extracting values from arrays and objects, which makes it easier to work with data structures in JavaScript.
NOTE : If you are learning JavaScript, it is generally a good idea to become familiar with ES6, as it is widely used in modern web development.
Resources :
-
Videos :
Javascript Complete Playlist- Codewithharry (Hindi)
Frontend Web Dev Bootcamp Course - freecodecamp.org (English)
Javascript ES6 Topics - Playlist - Codding Addict (John Smilga) - English -
Other Sources :
freecodecamp.org
jschallenger.com
JS Tutorial - W3 Schools -
Instagram Handles for JS Posts :
Adil | Web Developer
Now you will be having a complete understanding of how a website or web app is built. Now, try to built a project using HTML, CSS, JS. There are many cases where you may struct finding errors in your code. But, try fixing them take help of google and latest chatGPT . Try to understand and not just copy paste.
Here are some project ideas :
- Build a simple static website: Start by building a simple website using HTML and CSS. You can create multiple pages and link them together using anchor tags.
- Build a responsive website: Use CSS media queries to build a website that looks good on different screen sizes.
- Build a to-do list application: Use HTML, CSS, and JavaScript to build a simple to-do list application that allows users to add and remove items from a list.
- Build a calculator: Use HTML, CSS, and JavaScript to build a simple calculator that can perform basic arithmetic operations.
- Build a form validation application: Use JavaScript to build a form validation application that checks whether the user has entered valid data into a form.
- Build a quiz game: Use HTML, CSS, and JavaScript to build a quiz game that allows users to answer questions and get their score at the end.
Some Project Sources :-
- javascript30.com - 30 Days 30 JS Related Projects.
- codedamn.com - Literally you can learn any language or tech here. Also they provide cool editors for your own project too.
Remember :
This is just a detailed roadmap we provided.
This is based on your INTEREST, TIME, and HOW CONSISTENT YOU ARE ? This may take time to learn each and every skill and understanding them.
If you have any doubts don't hesitate to reach us.
Show off your projects.
Don't try to remember codes, styles, tags etc. There is no need of remembering them as you code you will know everything.