filoscoder / fe-kiddo

This project starts with my personal need as a Frontend software engineer to go back to the basics and laying the groundwork.

Stats 📊

Contact 📞

💬 Currently WFH in 🇪🇸Spain with my lovely wife Amanda❣️🏖️

• 
• 

fe-kiddo's Issues

Questions) About CSS

Questions

• 동영상에서 보시는 것처럼 오른쪽에 빈 공간이 남습니다.(스크롤바 보시면 남는게 보여요.) 왜 이런걸까요?
• Footer에 오른쪽에 아이콘 넣어야 하는 곳들에 그냥 동그라미를 넣었는데 동그라미들이 찌그러지는데 왜 이런걸까요?
• 사진 넣는 예시를 좀 받을 수 있을까요? 이런식의 다양한 구성을 많이 쓸 것 같습니다. 그냥 그리드로 넣은건가요? 비율이 좀 찌그러지거나 할 것같은데, 아니면 그냥 사진을 넣을때 특정한 비율로 맞춰서 넣는건가요?

• 사진 넣는 예시: https://www.wearecollins.com/work/

• JavaScript도 그냥 바로 같이 가는게 나을까요?
• BEM이 아직 조금 햇갈립니다.
• x, 2x 개념 설명해주세요!

first markdown.md

First Markdown Tryout

• 01
• 02
• 03
• 04

anchor01

01	02	03

Bold Text 01

1. Something
2. Something2

Related Issue

Something
img
Assignment3 #3

Bold Text 02

Test

WIP

Checklist

• [ ]Did I do it right?
• [ ]Did I do it right?
• Did I do it right?

test

[Homework] 20201112

Hi @jkim237 :)

이번주 숙제입니다: 다음주 (목) 20201112 일까지 해주시고, 같이 풀어나갑시다!

항상! 작업 전/ 후 git fetch upstream master 잊지마세요! :)

코딩 후 PR을 작성하여 제출해주세요!

Language: Javascript

공식문서 <= now, this is your friend. Say hi!

Basic algorithm

If you have questions don't hesitate and write it on the issues

• 1. sayHello
  • advance (optional)
• 2. sqrSum
  • advance (optional)
• 3. onlyEvens
  • advance (optional)

Keep learning Javascript online

Choose one or another site you want and keep learning. A solid base is very important!

• Codecademy
• FreeCodeCamp

[HW][20210121]

Homework

1. Check this landing page.
2. New branch, name it => hw/20210121
3. Refactor the code from hw/20210114. Resolve the styles to has a RESPONSIVE design
4. BEFORE git push, **don't forget to fetch!
5. BEFORE creating a pull request, don't forget to link this issue!

Study list

1. CSS: display, check this article.
2. CSS: flexbox, check this article.
3. CSS: values & units, check this article.

Some examples

• Issues: examples
• Pull request: examples

Question 04

Hi Daniel, how was your flight to Spain?

So, I've been curious about what kind of languages that the developers of this website use to build this website and how they used it.

Especially, the progress bar at the very top, and then at the very bottom. I have marked them with the red boxes.

I have never seen any kind of video player looks like it before.

If you have any clue, please let me know.

Here's the link to the website that I'm referring to.

(https://unfun.de/work/pantheon/87534)

Thank you!

[homework] 20200928

Hi @jkim237 :)

이번주 숙제입니다:

• Issue 를 작성해주세요. 첨부드리는 PR (pull request) 내용을 Markdown 언어를 사용하여 클론해주세요! 클론할 내용

• 지난주에 작성하신 페이지 clon project의 코드를 refactoring 다음과 같이 진행해주세요:

  • filoscoder/fe-soon repository를 fork 해주세요
  • fork 하신 repository를 개인 컴퓨터에 git clone로 복제하세요.
  • upstream을 지정해주세요:
    • 리모트의 버전 확인: git remote -v
    • 업스트림 지정: git remote add upstream https://github.com/filoscoder/fe-soon.git

branch 생성하지 마세요!!

• 지난주에 작성하신 clon 프로젝트의 소스를 제가 드린 피드백에 맞게 refactoring 해주세요

  • 모든 변경사항을 add, commit, push 해주세요
    • 꼭! upstream의 상태를 확인해주세요: git fetch upstream master
      • 변경사항이 있다면 => git pull upstream master
  • then, push => git push origin master

• (optional) 마지막으로, 정훈님 github에서 저에게 pull request를 보내주세요.

  • 내용 작성
  • 오른쪽 상단에 reviewer를 저로 지정해주세요!

로그인 페이지 제작

[homework] 20201030

Hi @jkim237 :)

이번주 숙제입니다: 다음주 (월) 20201030 일까지 해주시고, 같이 풀어나갑시다!

항상! 작업 전/ 후 git fetch upstream master 잊지마세요! :)

코딩 후 PR을 작성하여 제출해주세요!

Language: Javascript

공식문서 <= now, this is your friend. Say hi!

1. History

• Check this video
• Answer these questions:
  • A) What is a Programming Language? (check this article)
  • B) What is Javascript? (One sentence is enough!)
  • C) What are the pro and cons of Javascript? (Just list a few ;))

2. Syntax:

Follow the content of this site

• Variables
• Variables types (data types): primitives

Learn Javascript online

Choose one or another site you want and keep learning. A solid base is very important!

• Codecademy
• FreeCodeCamp

Question 03

I have issues with my Terminal fonts(I think it was called D2Fonts.) It breaks both on my iMac and MacBook like the image below. But This problem can wait, I think.

Question 02

Blog

1. 많은 디벨로퍼들이 코딩 공부를 할때 블로그를 쓴다고 들었는데요, 블로그를 쓰는게 좋을까요? 만약 그렇다면, 추천하시는 website가 있을까요?

2. 다음주에는 아마 제가 코딩을 쓴 웹사이트 하나를 같이 퍼블리슁 해보고 싶습니다. 실제로 구동이 잘 되는지 확인을 하고(동영상이 있어서 로딩이 느릴까 걱정됩니다.), 도메인을 구매하고, 그리고나서 이 도메인의 이메일을 만들어야하는게 목표입니다!:)

JK studio homepage

Project: JK Studio landing page

• Create private repository
• Create wireframe & layout design
• Define front stack
• Manage project with git work flow
• Develop!

[Homework] 20201019

Hi @jkim237 :)

이번주 숙제입니다: 다음주 (월) 20201019 일까지 해주시고, 같이 풀어나갑시다!

항상! 작업 전/ 후 git fetch upstream master 잊지마세요! :)

코딩 후 PR을 작성하여 제출해주세요!

1. Remove unnecessary files in CDTP > git add . > commit > fetch > push

2. 이론 공부: CSS Layout

• https://learnlayout.com/

3. 이론 공부 Flexbox & Grid

• References:
  • flexbox로 만들 수 있는 10가지 레이아웃
  • Game: Flexbox froggy

4. 이론 공부 Layout & Media queries

• References:
  • Learin CSS Grid
  • Game: CSS Garden

5. 참고: Pull request 작성시 issue 연결

• Linking a pull request to an issue

[Homework] 20201012

Hi @jkim237 :)

이번주 숙제입니다: 다음주 (월) 20201012 일까지 해주시고, 같이 풀어나갑시다!

모든 작업은 fork하신 repository의 homework 폴더 안에서 코딩 후 PR을 작성하여 제출해주세요!

VScode 내에 Live Server extension을 설치하여, 각 숙제파일을 확인하면서 체크하세요!

• 1. tables.html 파일을 작성해주세요:

  • HTML => tables 이론을 자체적으로 공부해주세요.
  • 아래 사진을 보고 HTML의 Table 관련 태그 와 속성들을 구현해주세요!
  • (optional) 원하신다면 CSS를 사용하셔서 재밌게 작업해주세요!
    
    
    

• 2. forms.html 파일을 작성해주세요:

  • HTML => forms 이론을 자체적으로 공부해주세요.
  • 아래 사진을 보고 HTML의 Form 관련 태그 와 속성들을 이용하여 구현해주세요!

• forms.html의 <form> 태그가 submit시 다음 페이지로 이동하게 해주세요: 3-table-form.html

• 1,2 번 숙제 후 Pull request를 보내주세요! 설명도 친절하게 작성해주시고 본 issue도 link 해주세요!

  • 꼭! upstream의 상태를 먼저 확인해주세요 (코딩전! 푸시전!): git fetch upstream master
    • 변경사항이 있다면 => git pull upstream master
      -모든 변경사항을 add, commit, push 해주세요
  • then, push => git push origin master

• (optional) 마지막으로, CSS의 Layout 및 Unit을 공부해주세요

  • CSS Grid
  • Flexbox
  • Unit: Absolute vs Relative CSS units

Javascript는 조금 천천히 시작할께요!

[HW][20200114]

Homework

1. Check this landing page.
2. Replicate or clone this page, you can do it only with HTML and CSS
3. Avoid the animated stuff and a slider at the bottom.
4. I've already created an index.html and style.css. Please fetch and write your code there! (homework/ByunSungJoon/20200114)
5. Create your own branch, name it => hw/20200114
6. Try to code it honestly with your level. (Of course, Google is always open to consult, not copy-paste)
7. BEFORE git push, **don't forget to fetch!
8. BEFORE creating a pull request, don't forget to link this issue!

Study list

1. Git workflow, check this article.
2. Markdown

Some examples

• Issues: examples
• Pull request: examples