All solutions

What are you most proud of, and what would you do differently next time?

I started by creating my HTML elements and assigning classes. Next, I moved onto the CSS, where I imported my fonts, and began with things like removing default properties, and using flexbox to center the calculator. I spent some time adding background colors, font colors, font properties, hover effects, and small details such as changing the cursor to pointer when hovering over a button. Then, I began working on the Js. I started my ensuring the dom was loaded in, to ensure event listeners would work. I declared the nesscary variables for buttons and things needed. I created my changeDisplayMode() function to switch the theme from light to dark mode. I spent time utilizing things like adding and removing class lists, to change hover effects, font and background colors. In addition, I learned how to set a viewing theme based on the user's preference. Next, I worked on creating a system for displaying button inputs. I created a function called updateCalDisplay (). I used things like text content, which allowed me to display the content of the html element when a button is clicked. This allowed me to do things like click a button and have it's value show up on the display. I also, created a limit for the amount of digits allowed on the display. I used an if statement to define the logic of what to do if the digits are 13, and if their less then 13. Now, I had some basic features of my calculator working. I moved onto some smaller functions such as deleting digits, and clearing the calulator. I once again used an if statement to define the logic of what to do if there is no digit in the display, and if there is a digit. For the clearCal() function, I reset all the values of the calculator to the orignal, before anything was changed. Now, once this was done, I created my system to perform calculations. I created a function to handle displaying pi and the exponent, as well as the value of the first number. Then in my calculate() function, I used a switch instance to define the logic of how to perform every operation. I used built in Javascript functions such as parseFloat() to convert a strings into numbers, and toFixed() to define how many decimals to show. I added some final touches such as audio that plays when you click or type a button, as well as keyboard input, to allow ease of use. Finally, I spent some time testing everything, tested the website on multiple browsers and used the bulit in device emulation feature to view how the calculator would look on different displays.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. Next, I began working on the header, where I styled links, hover effects, and the logo, I used properties such as display flex, and gap to achieve the design I was looking for. Next, I moved onto the top pick section, where I added some basic CSS to style the text, and images. I used the margin and gap properties to separate each card, to achieve the design I wanted. Then, I began working on the top picks section. I styled the headers, hover, hr's, and subtext. I added some padding, and the appropriate colors. I spent some time styling the header text using properties such as letter spacing and line height to get the design right. I once again used basic CSS to style the button, subtext, and image. Now, I began working on the grid. I used grid template columns, and the visual cues from my browser dev tools, to get my layout right. For the JS, I used basic Javascript DOM manipulation to get the design and elements working the way I wanted, and learned about a way to control what is shown based on the width of the window using Javascript. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the card where I added things like box shadows, notifications, and padding. Then, I moved onto the text, where I spent time getting the colors, sizes, and styles right for everything. I then moved onto the profile pictures, where I used proprties such as position: relative, and margin to get the spacing and design right. I used spans to create the messages, and used margin left and right to create spaces between each piece of text. I created the red dots for notifications, and styled them accordingly. Once I was done, I started to create the design for the entire page. I used flexbox to center everything, and spent some time playing around with the padding and margin for the notifications. I had some issues with card 4, so I used the dev tools to delete the other notifications. I worked on the design, and used things like margin, and visual cues to isolate issues and spacing. Lastly, I added some very basic Javascript to add the ability to mark all notifications as read. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the cards, where I added things like box shadows, background images, and padding. Then, I moved onto the text, where I spent time getting the colors, sizes, and styles right. I then moved onto the top of the cards, where I used proprties such as Display: flex, and margin to get the spacing and design right. Once I was down styling the cards, I moved onto the layout. I used flexbox properties on the body, to get everything centered horizontally and vertically. Once, I was done, I learned about some basic grid properties, as this was my first project using and learning about grid. I used things like grid template columns, to create my layout. I had some difficulty dealing with the second row, and the long card, as they would be spaced further away, ruining the layout. I spent some time experimenting, writing things out, and reworking my HTML, until I fixed my issue. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the card, where I added a box shadow, set the height and width propeties, added the border properties, and changed some small things like margin and padding. Then, I moved onto the inputs, where I worked on small detials like the border radius, outline and border colors, fonts and more. Now, I worked on the result CSS, where I changed the color of the span, made the font style italic, and set some small properties. I also worked on the HR, where i changed the color, and the calculate button, where I positioned and scaled the image. Next, I moved onto the Javascript part of the project, where I defined the variables for elements. Then, I created elements for the different values of things in the script, such as age values and more. I defined some parameters for my calculate function, that would tell the Javascript engine what to do and display, based on if the day value was more or less then the current value. I also created a function for the errors, where I set the styles based on what was typed into the Input. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the above card section, where I changed the sizing and spacing between the card and logo. Then, I moved onto the card I started by figuring out things like the padding, border radius, and box shadow. After spending some time playing around with the values for the properties, I moved onto the right section of the card. I styled the prices, subtitles, and spans. I spent some time learning about text inputs, and some of the different properties and parameters you can set. I created 3 inputs, and set each one to the type text, and set max and min lengths, classes, and placeholders. I used properties like position: absolute to get the image for each input in the right spot, and moved onto the buttons. I customized the border radius, hover colors, transition, and fonts. Afterward, I worked on the JavaScript, where I learned some new things such as specifying to go to 2 decimal places on numbers and limiting the characters that can be used for inputs. I spent some time creating a function for calculating the tip (using basic logic and math skills, and translating that to code). Lastly, I repeatedly tested the functionality of the calculator fixing bugs and issues that weren't intended. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the above card section, where I styled the heading, subtext, and the background image. Then, I moved onto the card itself. I started by figuring out things like the padding, border radius, and box shadow. After spending some time playing around with the values for the properties, I moved onto the top section of the card. I styled the price, span, and views, and added some margins to get the spacing right. I spent some time learning about sliders and toggle switches. I used a checkbox for the HTML, and then spent some time creating the toggle switch. Afterward, I worked on the JavaScript, where I used a loop and function to create the functionality of changing the price based on the step value of the slider. Lastly, I added the functionality of the toggle switch, where I added the ability to switch between monthly and yearly pricing. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating divs and adding elements within them. I assigned classes to each div and moved onto the CSS. I imported the required fonts, started by removing some default browser styles, and began styling the header. I used my prior knowledge, split up the header into two sides, and used the appropriate flexbox properties to get the design I wanted. Next, I moved onto the title section, where I styled the heading, text and spent some time figuring out the design for the button and hr. I got the image to the size I wanted, and got it positioned to fit the section properly. Then, I moved onto the section2, where I once again used prior knowledge to get the right layout. I used properties like align self, flex direction, and more to get the cards spaced out. Now, I started to design the find out more section, where I used properties like margin and padding to get the right spacing between the text and the buttons. Then, I created the footer where I split up sections of links, added a top part with the logo and social media logos, and styled the links and headings. Lastly, I spent some time working on hover effects and added some media queries to contiune my progress towards learning responsive layouts and web design. Before deploying my website, I checked out the functionality and design on multiple browsers, and used the built-in device emulation feature to see how it would look on different screen sizes. My next steps would be to further improve my background positioning, and responsive design skills.

What are you most proud of, and what would you do differently next time?

I started by creating divs and adding elements within them. I assigned classes to each div and moved onto the CSS. I imported the required fonts, started by removing some default browser styles, and began styling the header. I used my prior knowledge, split up the header into two sides, and used the appropriate flexbox properties to get the design I wanted. Next, I moved onto the title, where I styled the text and spent some time figuring out the design for the image and arrow. Then, I moved onto the sections, where I once again used prior knowledge to get the split layout and the right spacing for the text. Now, I started to design the testimonials section, where I used properties like margin and padding to get the right spacing between the people and quotes. Then, I created the gallery of images and styled the footer, with the social media logos, the company log, and some links. Lastly, I spent some time working on hover effects and added some media queries to start my progress towards learning responsive layouts and web design. Before deploying my website, I checked out how it worked, looked on multiple browsers, and used the built-in device emulation feature to see how it would look on different screen sizes. My next steps would be to work on creating an underline instead of a highlight for the "Learn More" links.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I then moved on to the CSS, beginning with importing fonts and adding a background color for the entire webpage. Next, I focused on designing the top card, paying attention to details such as padding, margins, and font sizes. Afterwards, I worked on the left and right bottom cards, applying their respective background colors, text styles, and padding amounts. Moving on to the layout, I centered the entire container and spent some time trying to position the two cards next to each other. Furthermore, I used knowledge from prior projects and applied it to this one to achieve the design I was looking for by adding a bottom class and then adding margin: auto, display: flex, and some heigh and width. Overall, this project allowed me to revist some old things that I haven't used much and further improve my flexbox skills. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by importing fonts, and adding small visual details to the two cards. Next, I started to design the of the total results card, and spent some time trying to get the small details right (such as padding, border radius, font sizes etc). I then moved to styling elements like text, the circle Next, I spent some time working on the individual results card. I used knowledge from prior projects and applied it to this one to create separate containers for each side, and spent some time trying to get the design I was looking for. Lastly, I went over the entire design, added some padding, changed the margins, and added a hover effect to the button. Overall, this project allowed me to learn some new things and further improve my vanilla CSS skills. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by importing fonts, and adding a background color for the entire webpage. Next, I started to design the login section of the web page, and spent some time trying to get the small details right (such as font sizes). I then moved to the layout, where I used margin and padding to get the layout and spacing between elements right. Furthermore, I spent some time playing around with the amount of margin for elements (left, right, top, bottom) trying to get it as close as possible. I used knowledge from prior projects and applied it to this one to achieve the design I was looking for. Overall, this project allowed me to learn some new things and further improve my vanilla JS skills. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices. My next steps would be to learn some more CSS properties that can help create a more responsive design and web page.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by importing fonts, and adding a background color for the entire webpage. Next, I started to design the card, and spent some time trying to get the small details right (such as padding, margins, font sizes etc). I then moved to styling elements like text, images, and finally some hover effects for the buttons. Furthermore, I spent some time playing around with the colors trying to find one as close as possible. I used knowledge from prior projects and applied it to this one to achieve the design I was looking for. Overall, this project allowed me to learn some new things and further improve my vanilla JS skills. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by adding the background color to body. Next, I started to design the card, and spent some time experimenting with small details until I go the look I liked. I then moved to styling elements like text, and buttons. Then, I moved onto the Javascript. I used pseudo code to figure out how I was going to create a system to show and hide the social media images. After spending some time figuring out the right values for properties, I got the design I wanted. Lastly, I spent some time figuring out how to hide and show the socials. Overall, this project helped me improve my problem solving skills, and allowed me to further improve my basic Javascript skills. Once I finished, I tested the website on multiple browsers, and used the built in device size emulation feature to view what the website would look like on different devices. My next steps, would be to spend more time thinking and writing things out instead of using trial and error to solve issues and bugs.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by adding the background color to body. Next, I started to design the card, and spent some time experimenting with small details until I go the look I liked. I then moved to styling elements like text, and buttons. Then, I moved onto the Javascript. I used pseudo code to figure out how I was going to create a system to hide and show answers to questions. After encountering small bugs such as the heights being changed after deselecting answers, I got the look and functionally I wanted. Overall, this project helped me improve my problem solving skills, and allowed me to further improve my basic Javascript skills. Once I finished, I tested the website on multiple browsers, and used the built in device size emulation feature to view what the website would look like on different devices. My next steps, would be to spend more time thinking and writing things out instead of using trial and error to solve issues and bugs.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by importing fonts, and adding a background color for the entire webpage. Next, I started to design the card, and spent some time trying to get the small details right (such as padding, margins, font sizes etc). I then moved to styling elements like text, images, and finally the filter for the image Furthermore, I spent some time learning about adding filters to images, and how to get the right color for the filter. I used this knowledge and applied it to the design I was looking to achieve. Overall, this project allowed me to learn some new things, and further improve my vanilla CSS skills. Once I finished, I tested the website on multiple broswers, and used the built in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by adding the background color to body. Next, I started to design the card, and spent some time trying to get the small details right. I then moved to styling elements like text, images, and finally the table. Furthermore, I spent some time learning about table elements, and how to style a table. I used this knowledge and applied it to the design I was looking to achieve. Overall, this project allowed me to learn some new things, and further improve my vanilla CSS skills. Once I finished, I tested the website on multiple broswers, and used the built in device size emulation feature to view what the website would look like on different devices.

What are you most proud of, and what would you do differently next time?

I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by adding the background color to body. Next, I started to design the card, and spent some time experimenting with small details until I go the look I liked. I then moved to styling elements like text, images, and finally the social divs. Furthermore, I spent a lot of time trying to solve issues with the design of the social elements, spacing, and other visual bugs. After writing things out, and taking some time think, I came back and solved my issues. Overall, this project helped me improve my problem solving skills, and allowed me to further improve my vanilla CSS skills. Once I finished, I tested the website on multiple broswers, and used the built in device size emulation feature to view what the website would look like on different devices. My next steps, would be to try to get the exact sizes and scaling a bit better.

What are you most proud of, and what would you do differently next time?

Hello, Frontend Mentor community!

This is my solution for the QR Code Component Challenge.

• I used flexbox to create the layout
• I tried to keep the naming for HTML elements straightforward and easy to use
• I tried to follow and get the design as close as possible
• I used Github Pages to create a live version of my website

Please give me some feedback and any tips, as I'm still learning and improving my skills!

This project was kind of like revisiting and improving at an older topic that I wasn't very good at. I'm currently doing the Odin Project's Foundations course (around the end, staring to add some basic JavaScript to projects). As I continue to try more challenges, I'm hoping to get help from others who are more experienced, to further improve my skills, and ability to create websites using HTML, CSS and Javascript.