DEV Community

oyetola sodiq
oyetola sodiq

Posted on

3 1

My first practice login page

Made a simple login page to practice my knowledge of html and css and to review it for faster better ways to solve future coding problems.

  • started off with writing the html code. I used the list element to make a nav bar(styled with css to make horizontal)

  • used input[type:text/password] and used a placeholder to illustrate the value of the input

  • used button element to create the login submit button

  • ended with a paragraph containing instructions and a link.

Image description

styling my html with css

  • started with setting my default margin and adding a nice background image

  • no-repeat so the image only appears once background-size cover so it fits the entire screen.

  • set the list style type to none to remove any existing list item marker

  • I set the overflow to hide, then I floated the navbar in place

  • I set the link display to block to make the entire textarea clickable

  • Image description

Image description

results

Image description

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Nice ❤️

However instead of nesting each input element in a div tag it'll be better to give them a display:block;

Collapse
 
shabzy1507 profile image
oyetola sodiq

thank you for contributing

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay