Hey, I'm Vyom Pundhir
- I'm 22 and I live in Hathras, Uttar Pradesh. I'm currently learning Full Stack Web Development.
-
In this project, I have built a VScode Homepage UI Clone from the scratch using core
HTML
,CSS
&Tailwind CSS
. -
This project is a complete
clone
of theVScode Homepage
and all the transition effects and hover effects are same as theHomepage
ofVScode
website. -
This project heavily relies on
flex-box
and variousflex properties
likealign-items, justify-content, gap
andflex-direction
. Along with this the also comprises ofposition property, various postions like absolute
anda basic understanding of z-index
inCSS
This project also comprises ofmargin, padding, height, width, background, font-family, font-weight, font-size
properties ofCSS
. -
This project also comprises of
Hover effects
andtransitions
likeease-in, ease-out
, etc. -
Note that I haven't made it Responsive to Different Screen Sizes, so it will work only on the laptop screen. If you are using Desktop, please zoom in or out, that might work.
-
HTML
-
CSS
-
Good understanding of
HTML
&CSS
&Tailwind CSS
. -
flex
property ofCSS
:-
how the
flex
property can be used to align the elements present in column as row and with the help of flex properties the elements can be placed at any position. -
how we can use the
float
property to make 2div
come together in a row without usingCSS Flexbox
-
-
position
property ofCSS
:- how the
position
property can be used to align the elements usingabsolute
and with the use ofz-index
the elements can be overlapped on one-another.
- how the
-
margin
andpadding
property ofCSS
:- how the
margin
andpadding
properties can be used to adjust the position of an element.
- how the
-Hover Effects and Transitions
-
This project helped me to learn about hover effects and the Transitions that can be applied to the elements.
-
Properties used to edit the look of Button and Fonts:
- learnt about how the property
border, border-radius, color, font-weight, font-family, font-size
to edit buttons and fonts.
- learnt about how the property
I took around 4 Days to complete this project. The only thing that has taken much time to be implemented is how to adjust the Remarks and Comment Section.
I'm definitely more confident now in creating a webpage similar to this one.
For any kind of feedback, please contact me on my email: vyom.pundhir.prof@gmail.com