An HTML & CSS Learning project, with a polished final product
Completed over the course of 2 days learning&working
An HTML & CSS Learning project, with a polished final product
Completed over the course of 2 days learning&working
An HTML & CSS Learning project, with a polished final product
Completed over the course of 2 days learning&working
Youtube Homepage Replica
An HTML & CSS Learning project, with a polished final product
Completed over the course of 2 days learning&working
Created using:
*Project is displayed at bottom of page. Steps and Learnings are displayed and explored as stepping stones of learning & implementation before final product.*
HTML Basics
Step 1
Learned the basics of HTML structuring, and text block writing. Learned about css modifications to text color, and button implementation.
Lesson work completed below:
Buttons Practice
Step 2
Implemented buttons and began work with them. Began to implement links to buttons, cursor identities & more.
Lesson work completed below:
Transitions & Padding
Step 3
Began work with transitions on element hover and click. Experimented with padding elements to get accurate spacing.
Lesson work completed below:
Text Style Practice
Step 5
Worked with text styling, gaining fonts via html from Google Fonts, and more. (The buy button for some reason will not space accurately on here)
Lesson work completed below:
Images & Text CSS
Step 6
Finalized work in CSS with textboxes and images styling. As seen below. (HTML formatting may encounter issues when displaying on website)
Lesson work completed below:
Block & Inline
Step 7
Worked with block and inline elements CSS changes to replicate popular app UI's
Lesson work completed below:
Grids
Step 8
Learned about Grid usage in HTML. Grid implementation, spacing, elements, padding & more.
Lesson work completed below:
Flexbox
Step 9
Learned about Flexbox usage comparative to Grid format. Flex allows for more flexibility & nesting. Learned flex alignment, justification, and more. (HTML formatting may encounter issues when displaying on website)
Lesson work completed below:
Began to incorporate nested flexbox techniques. Learned to plan out section using background highlights to pre-plan workflow. Created Gmail Replica.
Nested Flexbox
Step 10
Lesson work completed below:
CSS Position
Step 10
Learned about usage of CSS position style to create header and taskbar elements that do not shift when moving site. Static vs Fixed positioning. Below is a Modal exercise with a right taskbar.
Lesson work completed below:
Absolute & Relative
Step 11
Learned about importance of position absolute and relative in regards to sticking elements within one another. Utilized Z-index to layer page and allow for always visible elements with no stacking.
Lesson work completed below: