#frontenddevelopment

[su-codes]

Hi, I'm Su! 💫

I've been on tumblr for ages, but I decided to create this blog to document my progress with learning web dev!

About me:

I'm 25, mexican-american, and I have an orange cat 🐱 (hence the avi, although I'm well aware it looks more like a fox lol)

I really struggle with undiagnosed adhd, so sometimes I'll get in ruts that last anywhere from a couple of days to a couple of months :(

I have a biochemistry degree but never used it because I thought I wanted to be a pharmacist lmao

Used to be a teacher but fuck that fr (me and the US dept. of education have beef)

I'm currently enrolled part time in a full-stack coding bootcamp

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Goals for this blog:

❤️‍🔥 keep me motivated and inspired

🖊 post updates on things i've worked on/accomplished

📚 reblog resources for future reference

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Languages I'm learning:

HTML

CSS

Javascript

node.js/express.js/handlebars.js

MySQL

[xpc-web-dev]

Websites to practice Front-End

(22/02/2023)

Today I wanted to share websites to practice your frontend skills.

Front-end is complicated for my head (ask me to solve an algorithm with structure while but not to center a div HUEHHUE).

BUT at the same time I love a well done and coded design/ui. That's why today I want to share resources to help you train

1- Front-End Practice

They have 3 levels, beginner, intermediate and advanced. There's no "answer" so you can't copy the code, it's just you trial and error until you get to the template (which really is a website that exists)

One thing I thought was really cool here was that it tells you what you're going to practice the most in the exercise, color palette and search features.

It's very interesting for a front-end not to be dependent on a tutorial, because from what I've seen in interviews, they ask you to make a layout and you won't be able to make one yourself if you don't learn to break down a single layout from the beginning and try and making mistakes until it's perfect.

2- DevChallenges

I find the projects not only beautiful visually but also interesting to practice. Here you already have the solutions that other people recommend, but again I think it's best for us to try and make mistakes until we get similar.And it also sorts the levels.

Here an example:

Cool huh? Well, I hope this helps someone who is looking for projects to practice with. We can invest a lot of time trying to make a layout, so having something ready I know helps a lot.

I wish you good studies and a great Wednesday, drink water.

[tiikiboo]

I'm a Web developer

Hello, my name is Bettina and i'm 27 years old. I live in Sweden 🇸🇪 but i'm born in Hungary 🇭🇺.

I'm currently studying web development focusing e-commerce. I've done it for a year now and i have one year left in school. I have not had my internship yet.

The languages i'm learning:

HTML

CSS

JavaScript, React.js, Node.js, expess.js,

MySQL, PHP.

I've even experience UX-design, web design, digital marketing, SEO and entrepreneurship. And i love talking about problem solving and accessibility 🪄🪲

Currently i'm developing wordpress with PHP, HTML and hierarchical CSS.

So, if you are into this stuff, especially wordpress and php, talk nerdy stuff with me! I would be so happy if i had more connections with people who are into this stuff, especially women. 🌸

My github:

My portfolio:

It is not done yet, i will update it soon 🫣🐢

🌦️ A weather app made in our Javascript course:

[laudscs]

tips to help you grow in code ;)

Developer Roadmaps is a site where roadmaps are provide to learning and to keep a track of your code studies! there are many roadmaps of diverse subjects and programming languages. You can access what you want and have a guide to learn, marking what you already learned and see what you didn't yet.

in my opinion this is a cool site to help you, so you will not feel lost learning.

some links for you to explore and find out more:

Back-end roadmap: https://roadmap.sh/backend

Front-end roadmap: https://roadmap.sh/frontend

Full-stack roadmap: https://roadmap.sh/full-stack

------------------------✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰-----------------------------

here some pictures for you to see more:

------------------------✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰-----------------------------

an example of how it works: you can check the status of what you are doing when you click the rectangle

------------------------✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰-----------------------------

you can even create a customized roadmap for you!

------------------------✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰✰-----------------------------

that's it! hope you like it and enjoy your studies using this website!

[codewithishraq]

Application Programming Interface (API)

What is API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. It is a way for computers to share data or functionality, but computers need some kind of interface to talk to each other.

When you use an application on your mobile phone, the application connects to the Internet and sends data to a server. The server then retrieves that data, interprets it, performs the necessary actions and sends it back to your phone. The application then interprets that data and presents you with the information you wanted in a readable way. This is what an API is - all of this happens via API.

Building Blocks of API

There are three building blocks of an API. These are:

dataset

requests

response

Let’s elaborate these blocks a bit.

An API needs a data source. In most cases, this will be a database like MySQL, MongoDB, or Redis, but it could also be something simpler like a text file or spreadsheet. The API’s data source can usually be updated through the API itself, but it might be updated independently if you want your API to be “read-only”.

An API needs a format for making requests. When a user wants to use an API, they make a “request”. This request usually includes a verb (eg: “GET”, “POST”, “PUT”, or “DELETE”), a path (this looks like a URL), and a payload (eg: form or JSON data). Good APIs offer rules for making these requests in their documentation.

An API needs to return a response. Once the API processes the request and gets or saves data to the data source, it should return a “response”. This response usually includes a status code (eg: “404 - Not Found”, “200 - Okay”, or “500 - Server Error”) and a payload (usually text or JSON data). This response format should also be specified in the documentation of the API so that developers know what to expect when they make a successful request.

Types of API

Open APIs - Also known as Public APIs. These APIs are publicly available and there are no restrictions to access them.

Partner APIs - These APIs are not publicly available, so you need specific rights or licenses to access them.

Internal APIs - Internal or private. These APIs are developed by companies to use in their internal systems. It helps you to enhance the productivity of your teams.

Composite APIs - This type of API combines different data and service APIs.

SOAP - It defines messages in XML format used by web aplications to comunicate with each other.

REST - It makes use of HTTP to GET, POST, PUT or DELETE data. It is basically used to take advantage of the existing data.

JSON-RPC - It uses JSON for data transfer and is a light-weight remote procedural call defining few data structure types.

XML-RPC - It is based on XML and uses HTTP for data transfer. This API is widely used to exchange information between two or more networks.

Features of API

It offers a valuable service (data, function, audience).

It helps you to planabusiness model.

Simple, flexible, quickly adopted.

Managed and measured.

Offers great developer support.

Examples of API

Razorpay API

Google Maps API

Spotify API

Twitter API

Weather API

PayPal API

PayTm API

HubSpot API

Youtube API

Amazon's API

Travel Booking API

Stock Chart API

API Testing Tools

Postman - Postman is a plugin in Google Chrome, and it can be used for testing API services. It is a powerful HTTP client to check web services. For manual or exploratory testing, Postman is a good choice for testing API.

Ping API - Ping API is API testing tool which allows us to write test script in JavaScript and CoffeeScript to test your APIs. It will enable inspecting the HTTP API call with a complete request and response data.

VREST - VREST API tool provides an online solution for automated testing, mocking, automatic recording and specification of REST/HTTP APIS/RESTful APIs.

When to create an API and when not to

Its very important to remember when to create and when not to create an API. Let’s start with when to create an API…

You want to build a mobile app or desktop app someday

You want to use modern front-end frameworks like React or Angular

You have a data-heavy website that you need to run quickly and load data without a complete refresh

You want to access the same data in many different places or ways (eg: an internal dashboard and a customer-facing web app)

You want to allow customers or partners limited or complete access to your data

You want to upsell your customers on direct API access

Now, when not to create an API…

You just need a landing page or blog as a website

Your application is temporary and not intended to grow or change much

You never intend on expanding to other platforms (eg: mobile, desktop)

You don’t understand the technical implications of building one.

A short 30 second clip to understand it

View this post on Instagram

A post shared by Ishraq | Frontend • Backend • Fullstack Developer 🇧🇩🇩🇪 (@codewithishraq)

Word of advice for newbies

Please don’t wait for people to spoon-feed you with every single resource and teachings because you’re on your own in your learning path. So be wise and learn yourself.

About Me

I am Ishraq Haider Chowdhury from Bangladesh, currently living in Bamberg, Germany. I am a fullstack developer mainly focusing on MERN Stack applications with JavaScript and TypeScript. I have been in this industry for about 9 years and still counting. If you want to find me, here are some of my social links....

Instagram

TikTok

YouTube

Facebook

Twitter

GitHub

[codenewbies]

CSS Blur Background Image on hover

[codingflicks]

CSS Focus Blur Text on Hover

[izicodes]

Monday 12th December 2022

I've been helping a small number of people since I learnt how to code but today I am officially helping someone who isn't someone I know in order to help build his coding portfolio. We met through Codeacademy's discord server! In the discord, I normally help in the Html + CSS section, as that's what I consider my strong points.

This gives me the opportunity to learn myself and teach people at the same time. He's a beginner level and I'm just above him a little but I would consider us both beginners so we'll learn together! ✨

[divinector]

Transparent Login Form with Blur Background

[kochivamarketing]

How To Become A Front-end Developer

Embarking on the journey to become a front-end developer? Front-End Developer is an exciting journey that allows you to create visually appealing and interactive websites.  The road to mastery is outlined in a comprehensive guide that unveils the essential steps and insights required for success. The blog, "How to Become a Front-End Developer" from Kochiva, serves as a beacon for aspiring developers.

The guide begins by elucidating the foundational skills needed, emphasizing the importance of mastering HTML, CSS, and JavaScript. It then seamlessly transitions into the world of frameworks and libraries, shedding light on the significance of familiarizing oneself with tools like React and Angular.

Understanding the dynamic landscape of web development, the blog delves into responsive design, UX/UI principles, and version control systems. It doesn't just stop there; the guide extends its reach to practical tips for staying updated in the ever-evolving tech sphere.

Whether you're just starting or looking to level up, this summary offers a glimpse into a wealth of knowledge waiting to be explored in the full blog. Ready to embark on the transformative journey to become a front-end developer?

[innovatecodeinstitute]

Mastering CSS: Complete Guide to Styling Web Pages | Learn CSS for Web Development

In this comprehensive CSS tutorial, we delve into the world of Cascading Style Sheets, covering styling techniques, selectors, declarations, properties, and values in CSS. Whether you're a beginner or a seasoned professional, this video is designed to equip you with a thorough understanding of CSS. We explore advanced CSS concepts such as descendant combinators, pseudo-classes, pseudo-elements, @rules, shorthands, functions, and more. By the end of this video, you'll have the skills to style your HTML documents with precision and finesse. Watch now and take your web development skills to the next level!

[caniondigitals]

CSS Typewriter effect

[excellence91]

TOP 3 Web Development Course in Chandigarh

Looking for excellence in web development training? Our web development course in Chandigarh offers top-notch instruction in HTML, CSS, JavaScript, and more. With a focus on practical projects and personalized mentorship, we ensure you gain the skills needed to excel in the field. Enroll now for the best web development course in Chandigarh at Excellence Technology

Welcome to Excellence Technology's Web Development Course!

Are you ready to unlock your potential in the world of web development? Look no further than Excellence Technology's comprehensive web development course. Whether you're a beginner or an experienced programmer looking to enhance your skills, our course is designed to cater to all levels of expertise.

Our web development course is carefully crafted to provide you with the knowledge and practical skills needed to excel in this rapidly evolving field. Led by industry experts, our instructors bring a wealth of experience and up-to-date insights to guide you through the intricacies of web development.

Here's what you can expect from our course:

Fundamentals of Web Development: Gain a solid foundation in HTML, CSS, and JavaScript, the building blocks of the web. Understand how these technologies work together to create visually appealing and interactive websites.

Front-End Development: Dive into the world of front-end development, where you'll learn how to create engaging user interfaces and responsive designs. Master popular frameworks like React and Angular to build dynamic web applications.

Back-End Development: Explore the back-end technologies that power websites and web applications. Learn server-side programming languages such as Python, PHP, or Node.js, and work with databases like MySQL or MongoDB to handle data storage and retrieval.

Full-Stack Development: Get a holistic understanding of web development by combining front-end and back-end skills. Become proficient in both client-side and server-side programming, enabling you to build end-to-end web solutions.

Project-Based Learning: Apply your newfound knowledge through hands-on projects. From building a personal portfolio website to creating a fully functional e-commerce platform, our course projects will challenge you to think creatively and solve real-world problems.

Industry Best Practices: Stay updated with the latest industry standards and practices. Learn about version control, testing, deployment, and optimization techniques to ensure your websites are secure, efficient, and scalable.

Career Support: Our commitment to your success extends beyond the classroom. Benefit from our career support services, including resume building, interview preparation, and job placement assistance. We'll help you showcase your skills and connect with potential employers in the web development industry.

Now I tell you about TOP 3 Institution for Web Development course

•https://www.excellencetechnology.in/

•https://extechdigital.in/

•https://thebrightnext.com/

At Excellence Technology, we believe in providing a nurturing and inclusive learning environment. Join our web development course and become part of a vibrant community of learners, where you can collaborate, network, and grow together.

Don't miss this opportunity to embark on an exciting journey into the world of web development. Enroll in Excellence Technology's Web Development Course today and unlock your potential in this ever-expanding field.

Connect with us

If you do not like to fill up the form above, contact us at the following details, we will be happy to connect.

Email: excellencehead@gmail.com

Phone: +91 9317788822, 93562-55522

[xpc-web-dev]

FrontWeekend: Day 1

(07/01/2023)

I'm going to start studying front-end on weekends in Odin Project and leave weekdays only for back-end.

Today I started the fundamentals where I left off in Html: Elements and tags and started a basic page.

Note: I didn't abandon 100% of Ui/UX studies, but as I said in a previous post, I have a deadline to have some skills, so I need to be strategic and prioritize what gives me the fastest result.

Have a great weekend!

[codewithishraq]

Null Stack to Full Stack

OVERVIEW

Full stack technology refers to the entire depth of a computer system application, and full stack developers straddle two separate web development domains: the front end and the back end.

The front end includes everything that a client, or site viewer, can see and interact with. By contrast, the back end refers to all the servers, databases, and other internal architecture that drives the application; usually, the end-user never interacts with this realm directly. 

The easiest way to put the full stack into perspective is to imagine a restaurant. The front end encompasses the well-decorated, comfortable seating areas where visitors enjoy their food. The kitchen and pantry make up the “back end” and are typically hidden away from the customer’s view. Chefs (developers) gather permanently stored materials from the pantry (the database) and perform operations on it in the kitchen (the server), and then serve up fully-prepared meals (information) to the user. 

ADVANTAGES OF LEARNING FULLSTACK DEVELOPMENT

You can master all the techniques involved in a development project

You can make a prototype very rapidly

You can provide help to all the team members

You can reduce the cost of the project

You can reduce the time used for team communication

You can switch between front and back end development based on requirements

You can better understand all aspects of new and upcoming technologies

SKILLS NEEDED

In this case, you might find various things in the internet. They all might vary. But I am keeping things simple. Among the things I am going to share, you need to focus on one stack instead of all of them. So, here are some of the skills needed to be a fullstack developer.

Front-end programming technologies: HTML, CSS, JavaScript, Angular, ReactJS, Bootstrap, jQuery, SASS, Tailwind etc.

Back-end programming technologies:Python, NodeJS, Django, Express etc.

Database: PostgreSQL, MongoDB, MySQL, etc. 

Version Control System: git, GitHub, GitLab, etc

HTTPS and REQUEST Methods (GET, POST, PUT, DELETE, OPTIONS)

Now, it iis important to understand that, the basics are same for all stacks but then the technologies vary. For example the frontend can be built with either React, Angular or Vue or any other framework/library. On the other hand, the backend can be built with either of Node.js, Django (Python) or Spring Boot (Java) or any other framework. I will go to that in the coming lines.

ROADMAP / PLAN FOR THE FIRST SIX MONTHS

About this, there might be multiple other roadmaps that you can follow on your path to become a fullstack developer. I came up with the idea that this path, that I am about to share, can be a planned start to your journey with all the content structured at the right time. So, let's see the plan for the first six months.

🔵 Month 1: HTML, CSS, Javascript

The basic skills required to create a website in HTML and CSS. Javascript adds functionalities to a website and makes the project responsive. HTML is for structure and CSS for Styling. DOM Manipulation and Responsive Web Design are important to practice. Learn about these from W3Schools.

🔵 Month 2: Web Design and Frameworks, Git, HTTPs

Work on Open Source Projects. Once you have good practice with HTML and CSS you can use frameworks like Bootstrap or Material CSS which makes it easy to create websites. Alongside that, it is very important to learn about version control systems (preferrably git) so that you can save and manage your code at GitHub, GitLab, BitBucket or any other similar tool. Also, it is important to learn about HTTPS and REQUEST METHODS (GET, POST, PUT, DELETE and OPTIONS).

🔵 Month 3: Javascript Programming Language

The most important skill and most asked in Interviews and Job portals for Web Development are Javascript. You can expect a lot of interview questions from Javascript, So it's important to learn how javascript works, data structures, and asynchronous javascript.

🔵 Month 4 & 5: Frontend and Backend

Once you are thorough with the above concepts then you can take your skills to the next level by learning Javascript frameworks/libraries like React and Node JS. Point to be noted, I am a big fan of MERN (Mongo, Express, React, Node) stack, so I am always talking about React and Node. But there are other options as well.

Other options:

Frontend: Angular, Vue or any other frontend technology

Backend: Django, Flask, Spring Boot, ASP.Net or any other backend technology

Please do some research in google about the 'FULLSTACK TECH STACKS' and choose the one that you are the most comfortable with. Just a reminder, if you want to be a Java Fullstack Developer, then you need to have Java knowledge before stepping on to learning Fullstack development. Same case goes for Python, C# or any other technologies.

Most importantly, when you start learning a new technology, please start by learning from the official documentation of each individual technology. Then maybe go for other resources from the internet.

🔵 Month 6: Database and Projects

In the final month, create a portfolio and create projects using frontend and backend technologies you’ve learnt. Also, an important skill to have is knowledge of Database Management Systems like PostgreSQL, MySQL and MongoDB. Also, you need to understand how to connect the Database to Server using the backend Framework.

LEARNING RESOURCES OF FULLSTACK DEVELOPMENT

In the internet today, you can find various courses and tutorials on Fullstack development. But I know for sure that Freecodecamp website as well as YouTube channel covers all stack, so you can easily learn from them. On the other hand, there is The Odin Project. You can learn about JavaScript Fullstack Developer or Ruby on Rails Fullstack Developer. Here are the links to them.

Freecodecamp Website

Freecodecamp YouTube Channel

The Odin Project

Of course, as I said, you can look for courses in other websites as well. Here are some of the best platforms to look for courses.

Codecademy

Coursera

EdX

PROJECT IDEAS

Here are some projects that you can try when you are learning or after you have gone through all the things needed.

E-commerce website

Food delivery app

Social media app

Chat messaging app

Content management system

Project management app

Gym Tracking System

Real-time Chat App

Bug Report App

Hotel Booking App

Staff Management System

Online Store

INTERVIEW PREPS AND RESOURCES

Remember that a fullstack developer job is a vast space and thus there are many things that you need to keep focus on to ace the interviews. Here are some points where you need to take special care of for the interviews.

Javascript Programming Language and Data Structures

CSS Concepts like Flexbox, Grid, Inheritance, Specificity, etc.

React JS and new features e.g: Context API and Hooks

REST API’s and SQL and DBMS

HTTPS, Requests, Response, Servers.

Of course there are more things to focus as well, so research about the most important topics from the internet and then take special care in preparing for those questions.

Here are a few links to resources which will help you preparing for the interviews.

Coding Interview University

Interview Cake

Interview Bit

Tech Interview Handbook

Fullstack Cafe

Word of advice for newbies

Please don’t wait for people to spoon-feed you with every single resource and teachings because you’re on your own in your learning path. So be wise and learn yourself.

About Me

I am Ishraq Haider Chowdhury from Bangladesh, currently living in Bamberg, Germany. I am a fullstack developer mainly focusing on MERN Stack applications with JavaScript and TypeScript. I have been in this industry for about 9 years and still counting. If you want to find me, here are some of my social links....

Instagram

TikTok

YouTube

Facebook

Twitter

GitHub