How to create a login page

Ebenezer Ametepeh — Tue, 09 Jan 2024 12:05:05 +0000

Hello guys today we are going to learn how to create a Glass effect on a login page using just html and css.

This exercise is aimed at improving your understanding of CSS and how to use it for visually appealing UI.

So let's begin,

Create a folder and name it glass-effect-login(you can name it whatever you want) Create two files index.html and style.css.

Now in the html file add,
`

<div class="container">
  <div class="login">
    <h2>Login</h2>
    <div class="input">
      <p>Name</p>
      <input type="text" placeholder="name...." />
    </div>
    <div class="input">
      <p>Password</p>
      <input type="password" placeholder="enter your password..." />
    </div>
    <button>Sign in</button>
    <p>or contiune with</p>

    <div class="icons">
      <div class="img">
        <img src="images/flat-color-icons_google.png" alt="google" />
      </div>
      <div class="img">
        <img src="images/Group.png" alt="github" />
      </div>
      <div class="img">
        <img src="images/Group (1).png" alt="Facebook" />
      </div>
    </div>
    <p>Dont have an account yet? <span>Register Here</span></p>
  </div>
</div>

`
You should have something like this,

You can find all the images on my GitHub. link is added below

now onto the css
first we add some resets to Style.css

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

body {
  background: black
    url("images/Glass\ Effect\ Login\ Page\ -\ Original\ \(2\).png") no-repeat;
  background-size: cover;
  color: white;
}

now add the followinng to it

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 10px;
}
.login {
  width: 30%;
  display: flex;
  padding: 30px 40px;
  flex-direction: column;
  gap: 30px;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.input > input,
button {
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  border-radius: 10px;
  outline: none;
  border: none;
}
button {
  background-color: #bd0c47;
  height: 40px;
  padding: 10px;
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.input > p {
  font-weight: 300;
}

.login > p {
  text-align: center;
}

.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icons > .img {
  width: 30%;
  padding: 5px 10px;
  background: white;
  justify-content: center;
  display: inherit;
  border-radius: 10px;
  cursor: pointer;
}

you finally have a glass effect on a login page like this

thanks for staying to read to the end. for more tutorials follow my page let me know what you think in the comments

How to Become a Developer (Self-Taught)

Ebenezer Ametepeh — Fri, 16 Jun 2023 22:47:49 +0000

In today's digital age, web development skills are in high demand. If you're passionate about creating websites and want to embark on a career as a web developer, the good news is that you can teach yourself the necessary skills. This article will guide you through the steps to become a self-taught web developer, empowering you to unlock endless possibilities in the world of coding.

Define Your Learning Path :
The first step in becoming a self-taught web developer is to define your learning path. Web development is a vast field, and it's essential to identify which areas you want to specialize in. Will you focus on front-end development, which deals with the visual aspects of websites, or will you explore back-end development, which handles the server-side functionality? Additionally, understanding essential technologies like HTML, CSS, and JavaScript is crucial. Research different learning resources such as online tutorials, coding bootcamps, and textbooks to find the most suitable learning materials for your goals.

Build a Strong Foundation :
To become a proficient web developer, it's vital to build a strong foundation of knowledge. Start by learning the core web technologies: HTML, CSS, and JavaScript. HTML forms the structure of a webpage, CSS adds style and layout, and JavaScript provides interactivity. Online platforms like freeCodeCamp, Codecademy, and Mozilla Developer Network offer comprehensive tutorials and interactive exercises to help you grasp these fundamentals. Practice by creating simple web pages and gradually work your way up to more complex projects.

Expand Your Knowledge :
Once you've gained proficiency in the basics, expand your knowledge by exploring additional web development concepts and technologies. Learn about responsive web design, which ensures your websites adapt to different screen sizes. Dive into frameworks and libraries like React, Angular, or Vue.js to streamline your development process. Familiarize yourself with back-end technologies like Node.js, Python, or Ruby on Rails to create dynamic and interactive websites. Explore databases such as MySQL or MongoDB to store and retrieve data. Engage in online communities and coding forums to stay updated on the latest trends, techniques, and best practices

Practice and Build Projects :
Practice makes perfect, and web development is no exception. Strengthen your skills by building real-world projects. Start with small projects, such as creating a personal portfolio website or a simple blog. As you gain confidence, tackle more complex projects that challenge your abilities. Building projects not only reinforces your knowledge but also showcases your skills to potential employers or clients. Collaborate with others, participate in open-source projects, and seek feedback to improve your coding abilities.

Becoming a self-taught web developer requires dedication, perseverance, and a passion for learning. By defining your learning path, building a strong foundation, expanding your knowledge, and practicing through hands-on projects, you can unlock the doors to a rewarding career in web development. Embrace the journey, stay curious, and never stop exploring the ever-evolving world of web technologies.

DEV Community: Ebenezer Ametepeh

How to create a login page

How to Become a Developer (Self-Taught)