What you'll learn
Build a Django app
Use the full stack
Configure an environment
Python Coding February 07, 2024 Coursera, Django, HTML&CSS, Meta No comments
Build a Django app
Use the full stack
Configure an environment
Python Coding February 07, 2024 Coursera, HTML&CSS, Meta No comments
Create a simple form with a responsive layout using HTML5 and CSS
Create a responsive layout using CSS
Create a UI using Bootstrap
Implement debugging tools
Python Coding February 06, 2024 Books, HTML&CSS, Python No comments
Note: This work is revised today (04 November 2022) to provide new instructions on installing AMPPS (version 4.3) and accessing the phpMyAdmin interface which now requires a username and password.
This book is written for absolute beginners who want to become full-stack web application developers. To become a professional full-stack web developer you have to put on many hats. HTML5, CSS3, Bootstrap, JavaScript, MySQL, and PHP are the core technologies that you must be acquainted with to develop moderate data-driven web applications. All these technologies are voluminous and you need ample time to learn each one of them.
In this fast-changing technological world, no one has time to go through bulky books on these core technologies. With so many web technologies out there in the market, novices are confused and do not have enough time to evaluate these technologies to decide what to pick for their career and where to start. Keeping aside the least utilized features, I've written this book to focus on the more operational areas of these technologies that act as the first stepping stone and will provide you with a solid jump-start into the exciting world of web development. This book is meant to help you learn web development quickly by yourself. It follows a tutorial approach in which hands-on exercises, augmented with illustrations, are provided to teach you web application development in a short period of time. Once you get grips on these core web development technologies through this book, you will be able to easily set the destination for your future.
With uncountable sites and freely available material, this book is written due to the following reasons:
Assemble all scattered pieces in one place. This volume contains HTML5, CSS3, JavaScript, Bootstrap, PHP and MySQL. Sequential instructions are provided to download and install the required software and components to set up a complete development environment on your own pc.
Focus on inspiring practical aspects of these web technologies.
Last but not least, move novices gradually right from creating an HTML file with a text editor, through learning HTML, CSS, JavaScript, Bootstrap, MySQL, and PHP all the way to creating and deploying a professional e-commerce website that comprises static and dynamic pages.
From web introduction to hands-on examples and from website designing to its deployment, this book surely is a complete resource for those who know little or nothing about professional web development.
Python Coding December 20, 2023 Coursera, HTML&CSS, Python No comments
This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills.
By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.
Python Coding December 20, 2023 Coursera, HTML&CSS, IBM, Java No comments
Describe the Web Application Development Ecosystem and terminology like front-end developer, back-end, server-side, and full stack.
Identify the developer tools and integrated development environments (IDEs) used by web developers.
Create and structure basic web pages using HTML and style them with CSS.
Develop dynamic web pages with interactive features using JavaScript.
Python Coding October 30, 2023 HTML&CSS, Java No comments
In this project, you’ll support a European travel agency’s effort to increase booking by building a webpage that provides visitors with a 7-day weather forecast for major European cities.
Accomplishing this task will require you to retrieve real-time weather data from an external service. In creating the webpage, you’ll request, process, and present the weather data using HTML, JavaScript, and JSON.
There isn’t just one right approach or solution in this scenario, which means you can create a truly unique project that helps you stand out to employers.
ROLE: Software Developer
SKILLS: Web Design, Web Development, Cloud API
PREREQUISITES:
Function closures, asynchronous processing, REST API, and JSON handling with JavaScript
Present content with HTML tags
Present content using classes with CSS
Format and syntax of JSON
In this we are going to make a Log_In form in which login filling options will be in a transparent box. And you can add your own background image also.
Note*:- TO change the background go inside the style tag. Inside style tag go to the body and in background-image change the address of the url , give the address of the image which you want to keep in your background. Now,your image will be display on background.
CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOG_IN_FORM</title>
<style>
body{
background-image: url('/images/flower.jpg');
background-position-x: center;
background-size: cover;
}
.container{
text-align: center;
padding: 28px ;
margin-left: 30%;
margin-right: 30%;
background-color: rgb(238, 192, 234);
border-radius: 20px;
display: block;
box-shadow: 0 15px 20px rgba(0,0,0,.2);
opacity: 0.8;
}
.txt{
background-color: rgba(223, 210, 227, 0.9);
border-radius: 25px;
opacity: 0.9;
margin-left: 30%;
margin-right: 30%;
text-align: center;
font-family:cursive;
font-size:xx-large;
}
input[type=text] , input[type=password]
{
width: 350px;
margin: 8px 0;
padding: 12px 20px;
display: inline-block ;
border: 2px solid skyblue;
border-radius: 9px;
box-sizing: border-box ;
}
button{
background-color: #c120ac;
width: 30%;
border-radius: 20px;
color: black;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
button:hover{
opacity: 0.7;
}
</style>
</head>
<body>
<h2 class="txt">
LOG IN
</h2>
<form action="login.php">
<div class="container">
<label>Username</label> <br>
<input type="text" name="username" placeholder="Enter Your Username" required> <br>
<label >Password</label> <br>
<input type="password" name="password" placeholder="Enter Your Password" required> <br>
<button type="submit">LOG IN</button>
<button type="reset">SIGN UP</button> <br>
<a href="#">Foget Password?</a>
</div>
</form>
</body>
</html>
OUTPUT:-The image in background is what I have selected in background you can choose your own it will be displayed like this only and you can change the colour of the box also inside the style tag in .txt and .container.
In this we are going to add three types of hover button styles which will make your buttons very innovative and attractive.
1.Border Pop
2.Background Slide
3.Background Circle
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Buttons</title>
<style>
* ,*::before ,*::after{
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
}
button{
margin: 1rem;
}
.btn{
background-color: var(--background-color);
color: #222;
padding: .5em 1em;
border: none;
outline: none;
position: relative;
cursor: pointer;
--background-color: #E3E3E3;
--border-size:2px;
--accent-color: #0af;
}
.btn.btn-border-pop::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
z-index: -1;
border: var(--border-size) solid var(--background-color);
transition: top,left,right,bottom,100ms ease-in-out;
}
.btn.btn-border-pop:hover::before,
.btn.btn-border-pop:focus::before{
top: calc(var(--border-size)* -2);
left: calc(var(--border-size)* -2);
right: calc(var(--border-size)* -2);
bottom: calc(var(--border-size)* -2);
}
.btn.btn-background-slide::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--accent-color);
z-index: -1;
transition: transform 300ms ease-in-out;
transform: scale(0);
transform-origin: left;
}
.btn.btn-background-slide:hover::before,
.btn.btn-background-slide:focus::before{
transform: scale(1);
}
.btn.btn-background-slide{
z-index: 1;
transition: color 300ms ease-in-out;
}
.btn.btn-background-slide:hover,
.btn.btn-background-slide:focus{
color: white;
}
.btn.btn-background-circle::before{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
z-index: -1;
background-color: var(--background-color);
border-radius: 50%;
transition: transform 500ms ease-in-out;
transform: scale(1.5);
}
.btn.btn-background-circle:hover::before,
.btn.btn-background-circle:focus::before{
transform:scale(0);
}
.btn.btn-background-circle{
z-index:1;
overflow: hidden;
background-color: black;
transition: color 500ms ease-in-out;
}
.btn.btn-background-circle:hover,
.btn.btn-background-circle:focus{
color: white;
}
.btn.btn-border-underline::before {
content: "";
color: brown;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--border-size);
background-color: var(--accent-color);
transform: scaleX(0);
}
</style>
</head>
<body>
<button class="btn btn-border-pop">Border Pop</button>
<button class="btn btn-background-slide">Background Slide</button>
<button class="btn btn-background-circle">Background Circle</button>
</body>
</html>
Output:-
Irawen March 12, 2019 HTML&CSS, Java, PHP No comments
Irawen April 15, 2018 HTML&CSS No comments
Irawen April 15, 2018 HTML&CSS No comments
Irawen April 15, 2018 HTML&CSS No comments
Irawen April 15, 2018 HTML&CSS No comments
Irawen April 15, 2018 HTML&CSS No comments
Irawen April 15, 2018 HTML&CSS No comments
Irawen April 15, 2018 HTML&CSS No comments
Free Books Python Programming for Beginnershttps://t.co/uzyTwE2B9O
— Python Coding (@clcoding) September 11, 2023
Top 10 Python Data Science book
— Python Coding (@clcoding) July 9, 2023
🧵:
Web Development using Python
— Python Coding (@clcoding) December 2, 2023
🧵: