Top 10 Projects For Beginners To Practice #HTML and #CSS Skills

A thread
#WomenWhoCode
1. A Tribute Page
The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS.
2. Webpage Including Form
Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications . How to use a text field, checkbox, radio button, date, and other important elements in a single form.
3. Parallax Website
A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website.
4. Landing Page
A landing page is another good project you can make using HTML and CSS. You will take care of color combinations, padding, margin, space between sections, paragraphs, and boxes. Color combinations should go well with each other for different backgrounds .
5. Restaurant Website
Showcase your solid knowledge of HTML and CSS creating a webpage for a restaurant. Making a layout for a restaurant will be a bit complicated than previous project examples. You will be aligning the different food items and drinks using a CSS layout grid.
6. An Event or Conference Webpage
You can make a static page holding an event or conference. People who are interested in attending the conference create a register button for them. Mention different links for speaker, describe the purpose of the conference
7. Music Store Page
If you are a music lover you can make a webpage for it. Add a background image describing the purpose or what the page is all about. In the header section add different menus. Add buttons, images and some description about the collection of songs available.
8. Photography Site
If you have in-depth knowledge of HTML5 and CSS3, you can make a one-page responsive photography site. Use flexbox and media queries for responsiveness. Below that showcase your work adding multiple images. Be careful with your colors
9. Personal Portfolio
With knowledge of HTML5 and CSS3, you can also create your portfolio. Showcase your work samples and skills in your portfolio with your name and pictures. You can also add your CV there and host your complete portfolio on GitHub account.
10. Technical Documentation
If you have a little bit of knowledge of Javascript then you can create a webpage of technical documentation. It requires knowledge of HTML, CSS and basic javascript.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Lindsey🌻👩‍💻

Lindsey🌻👩‍💻 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Lindsey_design

11 Jan
15 Interesting #JavaScript and #CSS Libraries
A Thread
1.Leaflet( leafletjs.com/index.html) is one of the most popular open-source solutions for creating interactive maps. It offers everything you'd expect out of a map library - markers, layers, zooming, and many more basic and advanced features.
2.Flexbox grid system for React(jxnblk.com/reflexbox/) that allows developers to quickly build page layouts using a simple API of 3 React components - Grid, Flex, and Box. Since it utilizes the flexbox model, all grids with Reflexbox are responsive .
Read 16 tweets
23 Aug 20
Recently i have started to learn #color theory.
What color schemes should pick for the next website? This is a frequent question that a lot of people are asking me so i will start to post some advice here on Twitter.I hope that this may help you! A thread🧵
#100DaysOfColour #web
Tip no 1:
Picking the right #Colors for your website is very important.
Your colors must reflect your design’s goal and brand’s personality. You should create a positive psychological impact on users. So, you should determine how the color temperature reflects your message.1/2
Picking the right color is related with the purpose of your website. For example if you want to sell a product the right color is blue because it represents trust and strength. Make a colour scheme with blue in it and that's it( not100% blue maybe light blue)
Read 25 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!