What are you most proud of, and what would you do differently next time?
I have a somewhat good understanding of CSS Grid. grid-template-areas is a life saver.
What challenges did you encounter, and how did you overcome them?
Organizing the head part of card(profile image, name and "verified graduate") was a little hard. I wanted to create it using css grid, but I was unsuccessful, I used flexbox twice(flexbox inside flexbox) to create it. I'd like to know how others have created it.
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
I used flexbox for mobile version and css grid for desktop version.
Before starting the project, I assumed this transition in layout would be a big hassle, but contrary to what I expected, I applied this transition with ease.
I'll be using css grid more
What challenges did you encounter, and how did you overcome them?
Converting single column(mobile version) to multiple column(desktop version). I overcame it by using flexbox for single column and css grid for multicolumn version.
What specific areas of your project would you like help with?
I used flexbox for single column and css grid for multicolumn version. I'm curious to know what methods others have used.
What are you most proud of, and what would you do differently next time?
Using scss features, I isolated variables and mixins, each in separate file.
Learned more about specificity, and how not to mess with it while writing media queries. In my previous project due to lack of enough knowledge about this topic, I had to use !important.
I loaded fonts from google fonts instead of loading them locally.
What challenges did you encounter, and how did you overcome them?
maintaining proper specificity for element throughout the project, specially while writing media queries. I learned how nesting in scss gets translated into css and how it affects specificity.
What specific areas of your project would you like help with?
For this project I did not used grid, and only used flex. Is grid a better option regarding this project?
What are you most proud of, and what would you do differently next time?
I used sassy css this time, and applied it's robust features like mixin and nesting.
It makes reducing redundancies much easier.
Started designing mobile first, and used media queries for larger screen sizes
So far I've been coding in plain notepad to make myself more familiarized with syntaxes, in my next project I'll be using vs code so as to reduce redundancies along writing (since it is harder without IDEs features) and increase speed.
What challenges did you encounter, and how did you overcome them?
I wanted margin-top of the image to become 0 for mobile screen and 5% for bigger screen sizes, even though I added margin-top of 5% in the following media query:
@media only screen and (min-width: 376px)
It would not get applied, and seemed to get overridden by margin-top of 0 outside media query, I had to use !important inevitably.
What specific areas of your project would you like help with?
I mentioned my problem in
"What challenges did you encounter, and how did you overcome them?"
section, How can I overcome it without using !important.
What are you most proud of, and what would you do differently next time?
My have become faster in writing, and solve incoming problems with more ease.
I have continued to use plain notepad for writing. Not using helps of IDEs and more advanced text editors have made me to recall syntaxes more easily.
I took my time and planned my project and its layout before starting to write the code, it helped me to navigate through different phases of the projects more easily.
I used several new features in this projects including semantic elements, css custom properties, flexbox, applying borderbox to all elements, combination of attribute selector and asterisk wildcard.
I used rem length unit in almost every length parameter. It made setting length and sizes easier.
I 'll use SCSS in my next project.
What challenges did you encounter, and how did you overcome them?
Web responsiveness is still a challenge.
I used the following code for the main container, and solved the issue
width: 23.75rem;
max-width: 87.2vw;
What specific areas of your project would you like help with?
I'd like to know how others solve the web responsiveness issues
What are you most proud of, and what would you do differently next time?
I got a better understanding of space occupied by each element, after getting used to use developer panel of google chrome browser more often.
Although I have not yet started learning javascript, I had not choice but to use it to create it's interactivity feature.
I'm proud that I did not use any IDEs, I used just notepad. By doing so, automatically I was forced to do all the writings, all the file management without any external help, which made me pay attention to all the intricacies and details, since notepad would not show any error or suggestion. I suggest that everyone who is in the beginning of learning process to do the same.
What challenges did you encounter, and how did you overcome them?
One challenge that I encountered was that is it possible to create multiple interactions using only html and css. For example a link gets clicked and several elements get affected. I could not find any good solution, and was forced to use javascript.
What specific areas of your project would you like help with?
Here is a question:
In a 1024px screen there is a line that is 100px long. By using html and css only, how can I change length of this line, so that as the screen width decreases, length of the line increases?
I had similar issue when writing h-offset and v-offset of boxshadow for different screen size.
What are you most proud of, and what would you do differently next time?
It's my first project, in the beginning it was somehow overwhelming, but slowly I was able to know what should I be doing now, and what for the next step.
What challenges did you encounter, and how did you overcome them?
Aligning an element vertically that would respond well on all devices with different screen size.
I found a code snippet in stackoverflow that fixes this issue, it's added in README file
What specific areas of your project would you like help with?
I added the following css line for the texts in order to write them in multiline:
white-space: pre-wrap
I want to know if it's the right way to do, if not, what is the solution for this issue
Although the suggest font size is 15px, when I used this size, the text did not get the desired size, that's why I changed the sizes a bit
