This repository contains all of the personal projects that I did in FreeCodeCamp in HTML and CSS. This repository is called the recipe page because this is where I cook (Part 2). Other recipes (Python, Javascript, etc.) will come in later through an entirely different repository. To be perfectly honest, I had a lot of fun with some of these projects as I ended up using a fantasy concept for a lot of them. Especially since I like writing stories in my spare time.
A cafe menu made with basic HTML and CSS. This is the first project I have used for CSS, so its probably not using best practices or anything
cafe_menuA business card made with basic HTML and CSS. I might actually use this in the future somehow. Also all of the social media info in this thing is correct.
business_cardA to-do made with basic HTML and CSS. It looks really tacky tbh. I mostly practiced list-styling and text-decoration.
to-do_listA blog post made with basic HTML and CSS. I practiced working with backgrounds and borders. The Read Me button does not in fact actually lead to an actual blog.
blog_post_cardAn event flyer page made with basic HTML and CSS. I practiced working with absolute and relative units. Its based on a potential birthday page for my little cousin.
event_flyer_pageAn greeting card made with basic HTML and CSS. I practiced working with pseudo classes like :hover and :focus, as well as psuedo elements in html. Its based on a potential greeting card for my little cousin.
greeting_cardA job application form made with basic HTML and CSS. I practiced working with pseudo classes like :hover and :focus, as well as psuedo elements in html. The positions listed are potential fields I can branch out to after I graduate university.
job_application_formA set of coloured markers that I made with basic HTML and CSS. I practiced working with different ways to set color values as well.
coloured_markersA registration form that I made with basic HTML and CSS. I practiced the skills that I learned with the previous excercise while learning some new styles that I could add for more flourish.
coloured_markersA contact form that I made with basic HTML and CSS. I practiced the skills I already built on such as gradients, colours, pseudoclasses like hover, and more.
contact_formA contact form that I made with basic HTML and CSS. I learned how to use filters and transformations in CSS. I don’t actually know if Rothko just talks about the style or if its based on an actual Rothko Painting.
rothko_paintingA confidential “email” that I made with basic HTML and CSS. I practiced my filters and transformations in CSS. I kind of just made it fantasy based because you know what, why not?
confidential_email_pageA photo gallery that I made with basic HTML and CSS. I practiced using the flexbox property in CSS to make a responsive photo gallery.
flexbox_photo_galleryA set of playing cards of each suit that I made with basic HTML and CSS. I practiced using the flexbox property in CSS to make a responsive set of cards using properties such as flex-direction, justify-content, align-self, and more.
playing_cardsA nutritional label that I made with basic HTML and CSS. I practiced typography along with skills in styling text, adjusting line height, and adjusting positioning using CSS. Despite how it looks, this is probably one of the more html/css heavy projects so far
nutritional_labelA newspaper that I made with basic HTML and CSS. I practiced using properties such as font-family, font-weight, font-size and more. Similar to the Confidential Letter I had a little bit of fun with the article by making it fantasy.
newspaper_articleA quiz webpage that I made with basic HTML and CSS. I practiced using accessibility tools such as keyboard shortcuts, ARIA attributes, and design best practices.
quiz_webpageA tribute page about Saint Augustine that I made with basic HTML and CSS. I practiced the tools used previously as well as refreshing my knowledge on pseudo-elements (hover and focus) that I haven’t really used in a while. I tried to make it look boogie.
tribute_pageA cat painting that I made with basic HTML and CSS. I practiced working with absolute positioning, the z-index property, and the transform property.
cat_paintingA house painting that I made with basic HTML and CSS. I practiced working with the same things as the previous project, but with an empasis on positioning with properties such as top, bottom, left and more. This was genuinely the most annoying project so far, it might not even work on your device honestly.
house_paintingA balance sheet that I made with HTML and CSS. I practiced working with pseudo-selectors (including :hover and many others). As well as practicing how to trigger other events on my webpage.
balance_sheetA book inventory that I made with HTML and CSS. I practiced working with pseudo-selectors such as [attribute], [attribute=value], [attribute~=value], and more.
book_inventoryA CSS piano that I made with HTML and CSS. I practiced creating responsive designs by practicing the use of media queries, pseudo selectors and pseudo-elements. It’s not actually interactive or anything, its literally just a piano. It’s not even really a piano either, its pretty much just a keyboard.
css_pianoA technical documentation page that I made with HTML and CSS. It was mostly review, but I practiced creating responsive designs mostly through practicing the use of media queries. It’s more content heavy than my usual projects since I had fun and made it extra long. Its also the longest project I’ve ever made to date. A technical documentation page that I made with HTML and CSS. It was mostly review, but I practiced creating responsive designs mostly through practicing the use of media queries. It’s more content heavy than my usual projects since I had fun and made it extra long. Its also the longest project I’ve ever made to date.
technical_documentation_pageA City Skyline that I made with HTML and CSS. I practiced using CSS Variables in order to use and reuse colors all over again.
city_skylineAn availability table that I made with HTML and CSS. I practiced using CSS Variables in order to use and reuse colors and borders all over again. It was lowkey kind of tiring to actually put in the schedules.
availability_tableA CSS Grid Magazine that I made with HTML and CSS. I practiced using CSS Grid in order to layout text, images, and favicons more easily in a screen. I really need to practice grid a lot more.
css_grid_magazineA CSS Grid Magazine that I made with HTML and CSS. I practiced the same concepts as the last one however, I made sure to practice concepts such as CSS grid rows, grid areas and grid template areas
magazine_layoutA Product Landing Page that I made with HTML and CSS. This is the final project of this repository and because of it, it is the longest project by far.
magazine_layoutThese projects are deployed via GitHub Pages.
You can access them from the links above.
👩🏽💻 Created by M-Valdy