Repository for my HTML and CSS Tech Academy Projects
Some sample websites I've created.
-Dog-video.html, dog.html, assingment.html
-Basic HTML,CSS and Javascript
-Mugs Website
-Cinema Website
-Travel Website
-CSS Styling Effects
-Challenges-5
Dog-video.html, dog.html, assingment.html
These were the first tasks I did when I started this course, these were done with
basic HTML without any CSS or JavaScript. It included linking the pages together, as well as
putting in basic paragraphs and headings, and including images and video links.
Basic HTML, CSS and JavaScript
These task were done at the start of the course, they asked me to look and learn at HTML, CSS and JavaScript
to develop an understanding of the basic tags and properties these languages have.
Mugs Website
This website is made for a specialist Mug company, it contains a nav bar,
images with overlays and a form. It is all styled using CSS.
Cinema Website
This website is for a cinema and made using bootstrap 4.
It includes a jumbotron, navbar, form, images and a search bar.
Travel Website
This website is travel blog to show different locations in the world. It include
a nav bar, an embedded video, image conatiners with overlay and a contact form.
CSS styling Effects
One of these tasks involved being able to style an image using CSS, it was about adding effects
and styling these effects such as adding filters and transitions to the image.
The other task was learning how to style a nav bar using CSS effects, this was about adding hover effects
where I changed the colours and added a dropdown menu when a heading was hovered over.
Challenges-5
This assignment had 11 challenges in total of varying tasks.
Challenge 1 was learning how to put filters over images using CSS.
Challenge 2 was making the footer bold and into the center of the page.
Challenge 3 involved making a table with HTML and styling it with padding, borders and a colour on the top row
all using CSS.
Challenge 4 was positioning text over an image.
Challenge 5 asked me to make a nav bar with a background colour, font colour and hover effect.
Challenge 6 involved making a two column layout adding a font colour and height and width to columns.
Challenge 7 asked me to write a text element with a hover effect, so I created an effect where more text appears as the text
is hovered over.
In Challenge 8 I created an image overlay fade.
In Challenge 9 I embedded a video which autoplays on mute and on a loop.
Challenge 10 is similar to Challenge 4, I positioned text over an embedded video which also plays on mute and loop.
The final challenge was a small media query challenge. When the screen is resized the text changes colour.