This was a good one for exploring element layering and absolute positioning. Again, 95% done in under 2 hours, but the final positioning puzzles required me to go back and rethink things, trying options. I did the styling changes for the section open/close in a pretty verbose way in JS. I'm sure I also could have done this by just updating a class on the section parent and making the changes in my css file, but I wanted the practice with JS DOM traversing. Any feedback or suggestions are always welcome!
This was an excellent exercise, going through the Scribna course with Kevin Powell. Many decisions to make along the way. This primarily offered great practice in professional methods of organization and also in modern accessibility best-practices.
** I revisited the "destination" pages and made the images much more interesting, with infinite planet rotation and a static shadow overlay (so it appears that the light is always coming from the same side) **
I found many great puzzles to solve in this layout. I chose to build the mobile menu with pure CSS, no JS, and I learned quite a bit working out all the details:
-- how to apply a background overlay to the <body> on menu open (and remove the overlay not only on menu-close, but also if the screen is resized past the breakpoint with the mobile menu still open).
-- how to change mobile menu icons on open/close.
-- how to best divide the desktop layout for Grid/Flex layout.
-- How many breakpoints do I need (I ended up doing it with just one, after much experimentation).
-- How to best compact the bottom posts on desktop (I went with -webkit-line-clamp)
I avoid looking at other solutions until I finish my own version of the project, but I now intend to check out how others have done this one. Any feedback is very appreciated.
I chose to create the staggered boxes using grid-areas. I was very happy with the results, but I could have used Flexbox as well and have seen some fine examples that others have done using Flex.
I was having difficulty placing the background images using familiar methods until I found examples of using CSS pseudo-elements for this. Very clever I think. One of the code examples that helped me the most here was from <a href="https://github.com/Rock-n-Roll-CRC/social-proof-section/blob/master/index.html">Rock-n-Roll-CRC</a>
I got to 95% on this one in about 4 hours, but several more hours were spent on tiny tweeks. As always, any feedback is very welcome.
Excellent project with only HTML and plain CSS. I focussed on doing a professional job as efficiently as possible. My time was 2 hours and 42 minutes from the initial download of the resources. I felt like I was moving very fast, but had to slow down for research on implementing the mouse-over effects on the image.
In this project I learned very useful things about image overlays, opacity and transitions.
As always I am grateful for any feedback that can improve my quality and efficiency.
Today I wanted a project that would help me get better at my time tracking and project time estimation skills.
I chose to do this project today because the design looked simple and the JS component looked to be about as simple as a practical, real-world example could possibly be.
I tried to be very rigorous with my time-tracking. It's true that this project is "simple", but there were several points that tripped me up and took 30 minutes for 2 lines of code.
I'd say I was 95% done after about 3 hours. I put a bit more than 6 hours into it before I felt it done--but this included a good deal of time reading up on parts that at first tripped me up. I think the issues we face and solve with these projects is what makes this site such a valuable resource.
I was astonished to learn that what I had projected to be a 2 hour project came in at just over 6 hours. Well, time is a great yardstick to mark my improvement!
Thanks in advanced to anyone who can offer advice on how I could have done this better. Or faster!
Setup github repo
0:02:38
download and layout project assets
0:05:31
wireframe the html
0:14:37
css--init-state--basic layout
1:53:14
Set up form -- lots of reading and experimentation here.
2:39:24
css--reply-state--basic layout
0:58:36
Wrap it all up - screenshots, README.md, submitting code
0:35:53
This is a simple HTML and CSS project. I used it to work on efficiency with my tools and methods:
-- efficient setup on my github repo and local env
-- practice using Visual Studio and Emmet shortcuts
-- I relied heavily on Flexbox in both mobile and desktop layouts
-- Mobile-first development all the way!
I'd appreciate any feedback, especially on my JS solution for dynamically updating the data. I chose to use vanilla JS and avoid libraries. I intentionally used various classes for DOM manipulation to deal with return types of both Obj and Obj[]
.getElementById
.getElementsByTagName
.getElementsByClassName
This was a great, simple project to help me work out my workflow questions around Visual Studio, the Git command line and Github, and to solve a few basic css layout solutions. My first experience with Frontend Mentor has been very valuable -- Thanks to everyone involved!
